HTML Page Structure

[et_pb_section][et_pb_row][et_pb_column type=”4_4″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left”]

HTML Page Structure

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row][et_pb_column type=”2_3″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left”]

Web pages are made up of tags and content.  Content consists of the words you see on the page.  Tags are everything else.  Tags control the layout of the page, insert images, make links, and much more. A tag begins with a ‘<‘ symbol and ends with a ‘>’ symbol.  Some are very simple.  The break tag puts a line break in a long string of text.  It looks like this:

<br/>

An image tag has much more information.  An image tag might look like this:

<img src='cat.jpg' width='400px'/>

Some tags might have even more information. Many tags come in pairs – a beginning tag and an ending tag.  For instance, to make a large header, maybe at the top of the page, you would start with an h1 tag, which looks like this:

<h1>

Then you’d put the words that go in your header, and you’d end with an end-h1 tag
Here is the whole thing:

<h1>My Great Web Page</h1>

We say that the words “My Great Web Page” are inside the h1 tag. Every web page has the same basic structure.  The page begins with an html tag, and ends with an end-html tag.  Inside all that there is a head, and a body.  The head contains information about the page, along with links to fonts and style sheets.   The body contains information about what is on the page, including all the page content.  The basic structure looks like this.

 

Web Page Structure

 

Its easy to leave out an end tag or two.  Poorly formatted HTML sometimes works, and sometimes doesn’t.  It might look ok in one browser, but break in another.  The safe thing is to make sure your HTML code is correct!

 

Note about Copying and Pasting

Do not copy and paste HTML code that other people have written.   First, you won’t learn anything.  Second, its very easy to copy invisible characters from a website that ruin the HTML, and it can be hard to find and remove them.

On the other hand, you can and should copy HTML that you have written already.  Once you’ve written the basic HTML structure shown above a few times, its just boring to do it again and again.    Use Save As… or Duplicate… to copy an old webpage, and delete the content.  Then you have a new empty webpage ready to go.

 

[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″][et_pb_text admin_label=”Text” background_layout=”light” text_orientation=”left”]

Resources

W3 Schools HTML Tutorial

W3 Schools CSS Tutorial

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]