Normal Flow

The normal flow of a page is how HTML elements are normally rendered to a page. The browser starts reading (and displaying) content from the top of the page to the bottom. When it encounters  visible HTML elements, there are two primary ways that elements are displayed on a page: block and in-line.

Block Elements

Block elements take up the entire entire width of their container and are stacked vertically on the page; i.e. block elements is start on their own line. Examples of elements that a normally displayed as a block element are: <p>, <div>, <h1-7>, <header>, <footer>, <section>, <table>, etc.

In-line Elements

In-line elements are laid out horizontally on the page. Their width only takes up the horizontal space necessary for the element. Examples of inline elements are: <span>, <em>, <strong>, <a>, <img>, etc.

Modifying the Defaults

CSS allows us to set (modify) the default properties of HTML elements. The position and display properties affect that normal (default) flow of elements on a page; flow meaning how the elements interact with the elements around them. When two div tags are put next to each other, by default they appear vertically on the page. That’s because they are block elements.

When two images are put next to each other, by default they appear side by side on the page. That’s because they are in-line elements.

When we assign a value of absolute or fixed to an element’s position property, the element is taken out of the normal flow. The spacial relationship that  element has with the other elements on the page are changed. It’s almost as if the other elements don’t see it any more. From the other elements point of view, since it isn’t there, they move in to take up that space. It’s like a big rock in a river. The water flows around the rock. Pull the rock out of the river, the water fills in to fill the void left by the absence of the rock. Make an element absolutely positioned, the elements that follow it rush in to fill the void.



Web Designer vs web designer

As an educator and mentor I try to set the expectations of my students. Part of my job is to focus them so they can get the most benefit from the program and have a realistic view of where they will be upon graduation. One way that I do that to help them understand that I’m not preparing them to be “Web Designers.”

Web Designer can be a title. It can also be a skill set. I am a web designer yet my title is Assistant Professor. In addition to my being a web designer I am also an instructional designer. I have worked in industry as a Program Assistant, where I wore many hats. One of the hats I wore in that position was as a web designer. About 30% of my time was allocated to designing and maintaining the program web site.  The rest was distributed across clerical, database maintenance, event planning, desktop support, administration. I want my students to understand that you don’t just bring “one thing” to the table. Web Design is only one tool in the toolbox. My expertise in web design is an asset as an educator.  It makes me more valuable. If students can understand that difference, they can put their learning in context and won’t limit themselves when seeking positions in industry.  Understanding their strengths can give them an edge during an interview.

Basics: Domain names and Web Servers

Question from a student: Do I need a domain name [to upload my files to a server]?

Yes and no. FTP (File Transfer Protocol) is the means by which we transfer files from a client computer to a server. In order to connect to a server you need its address, and login credentials. Every server has an IP address (IP stands for Internet Protocol). It’s like a telephone number that identifies a specific computer connected to the internet. EVERY computer connected to the internet has one. IP addresses are hard to remember, so domain names were created to make that process easier. A domain name is associated with an ip address. That way when someone types in, a chain of events happens that finds a specific file, in a specific folder, on a specific computer, out of billions that make up the World Wide Web. So yes, you need to know the server’s address. Usually we use a domain name to identify the server.

The Basics

There are several parts to having a web site:

  1. The designed and coded pages,
  2. a domain name,
  3. and a web server.

Designed and coded pages

When we consume content on a web page (read, listen, watch a video, play a game, etc) we are consuming content that is being presented on the screen through a program, usually a web browser. The technical community calls these programs user agents. To standardize the way that user agents present information, HTML, CSS, and JS were created. Each are languages that instruct the user agent how to display the content.

  1. HTML (Hypertext Markup Language) puts a structured element on a page
  2. CSS (Cascading Style Sheets) allows us to control the properties of those elements
  3. JS (Javascript) allows us to control the properties of those elements based on page events, or other criteria

Each language has its own job. They all work together to create the experiences we all enjoy on web sites. All of the languages are living languages. New tags, properties, and functions are constantly being added and refined to accommodate the needs of the the web. The organization responsible for overseeing the development of the languages is the W3C (World Wide Web Consortium). The developers of the user agents (browsers) are responsible for ensuring that their products present content using the guidelines provided by the W3C.

Therefore, when we design and created web sites on our computers, what we are doing is designing to the browser; i.e. we are giving instructions on how to position and display our content. We don’t need a web server to do that, we only need to know how the languages work, our media, images, etc, and a browser to display them. Having said that, as soon as we want the rest of the world to see our creation through the web, we need to copy our web site to public web server.

Domain Names

As mentioned above, domain names provide an easy remember set of alphanumeric characters that point to a server. When you know you are going to create a web site, you normally get the domain first because you want to make certain you get the one that best brands your information or product. You create (or register) the name through a registrar. Currently, I use and as my registrars, but there are lots of others out there. All they do is  reserve a custom name and high-level domain extension (.com, .net, .org, etc). The domain name is your individual identification on the web. The registrars act as agents for ICANN (Internet Corporation for Assigned Names and Numbers – ICANN is the official organization that registers and maintains every domain name in the world. All other registrars, like GoDaddy,  are agents (middlemen) that act as an interface between you and ICANN. They also provide online tools for you to manage and renew your domain license.

When you register a domain name, they ask you for information:

  • The Owner Contact info
  • The Administrative Contact info
  • The Technical Contact info
  • The DNS address (Domain Naming Server) – basically, where are you hosting your web site.

By default, the registrar will “park” your domain name on a generic page until you manually update the DNS address with the hosting server address where you are keeping your web site.

Web Hosts

After you design/code the pages to your web site on your local machine, you need a way that the world can see them. You need a web host. It’s a server (a computer) that has web server software on it. It is connected to the internet (usually with a robust connection to move lots of data). Many web sites can be hosted on these servers. The web server software’s job is to organize them into their own folders (directories) and keep track of them so when a request comes in for your domain name, it knows which folder and file to get and fulfill the request.

When you get a hosting account. The host needs to know what your domain name is. It will issue you a login and password. It will also create a primary FTP account. The web host will tell you what URI to use to access the FTP login. You use the FTP URL (it usually it is something like ftp.yourdomainname), your login and password to get in. When you log in, the web server software will automatically connect you to YOUR folder where you can upload your web site files.

The web host will provide you with the domain name(s) of the web hosting server that your account is associated with. You copy that server address into the NS field of your domain profile using your registrar’s interface.

Once you have your domain name, it is pointed at your web host, and you have your FTP login credentials, you can upload your web site to the server so the world can find you.