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.

 

 

Containers

There is no <container> tag. When we use the term container, we’re talking about function. The header tag “contains” markup that goes at the top of the page. The <header> tag IS a container tag.

A div tag is a very general container. It stands for division. At one time, it was all we had so we used it exclusively and one page could have dozens of div tags in them. It got pretty confusing. In order to distinguish one div tag from another, we gave them id attributes.


<div id="wrapper">
<div id="header">Some content including a logo, page heading, and navigation also in a div tag</div>
<div id="mainContent">
<div id="aside">Some content</div>
<div id="article">Some content</div>
</div
</div>

With the new version of  HTML, we have additional tags that act as containers that have more meaning (semantic); header, section, article, aside, nav, footer, etc. In general, if there is a tag that makes more sense to use, i.e. a nav tag contains navigation code, then use it. If you need to put code in a container, and there is not a semantic tag that does the job, then use the div tag.

What’s next?

Some final thoughts for my beginning HTML class.

Hi Everyone:

First I want to say it was a pleasure having you in class this semester. As I’m reading through the final reflective writing assignments I’m seeing common threads so I thought I would address some of the thoughts in this blog post so everyone has access to it following the close of the course.

This class has been an introduction to several different technologies. The objective was to give you an overview of how the different languages work together to create good content for today’s user agents (browsers). Here are a few summarizing thoughts:

  • Define the purpose of your site. What are the 1 or 2 primary focuses of the site?
  • The content should support the goal.
  • The media, images, features all should support the goals of the site. If the goal is to sell and you aren’t selling anything, then the site is not doing what you need it to do.
  • Organize the content, i.e. all media, images, forms, sections, articles, whatever so you know how the site should be layed out. How easy can you make it for your audience to get to the meat of the site? Don’t make them hunt.
  • All of the languages used to create a web site are plain text. The symbols, tags, brackets, parenthesis, etc are the instructions that tell the browser what the plain text means. Google semantic markup and read a few articles. Here’s one, http://en.wikipedia.org/wiki/Separation_of_presentation_and_content
  • HTML puts an element on a page. It gives structure to the content. Choose the right HTML element (tag) for the right job.
  • CSS contols layout and formatting. It contols the properties of the HTML elements; i.e. it controls the presentation of the structure.
  • JS is the client-side scripting language that we use to change or modify the HTML elements and their properties, based on events or conditions that exist; i.e. click a button – something happens.

Now you have the basic overview. You have a growing vocabulary and sense of what does what. Learning scales does not make you a musician. Knowing how and when to apply them in context does. Now you are ready to start practicing what you have learned.

Build web sites. Start building them for fun. Look at an ad in a magazine. How would you build it using HTML and CSS? Try it. You learn by doing. Following are other good resources to take you to the next level.

  • A list apart: One of the first online magazines dedicated to people who build websites for a living. (http://alistapart.com)
  • Codeacademy: A very well respected site where you can learn scripting by doing. It’s free. Great place to learn Javascript (http://www.codecademy.com/tracks/javascript)
  • W3schools.com: Good reference for HTML tags, CSS properties and values, JS basics and basic coding examples. I use it all the time (http://www.w3schools.com)
  • Mozilla Developer Network: Another good resource for learning how the technologies work. (https://developer.mozilla.org/en-US/?icn=tabz)
  • stackOverFlow.com: Good resource to getting answers to your coding issues. How do I do this? Stack Overflow probably has the answer. (http://stackoverflow.com)
  • Web Frameworks: You are not the first web designer to solve this issues. Many designers have build up a series of pages, CSS files, and supporting technologies that they use again and again to build their web sites quickly and reliabiltiy. They have made their systems avaiable to the community for free. Learn them and you’ll speed up your design time and your sites will look great. No need to re-invent the wheel; i.e. you want to. Twitter Bootstrap, and Foundation are popular ones. There are more coming all the time. Just do a Google search on HTML frameworks.
  • After you leaern the basics of JS, learn jQuery. It makes JS more accessible for non-programmers.
  • Get familiar with WordPress. It is an entry level CMS (Content Management System). Most web sites are created with CMS backends so the end user doesn’t have to code to post an article, blog, marketing info, create a portfolio, etc. If you want to work for an agency, they’ll want you to be comfortable with WordPress.

That’s it. Now. Go forth, learn some more stuff, and create.

Dale R Rogers, M.Ed.
Assistant Professor, Program Coordinator, Multimedia Design
Nashville State Community College