Wikiversity

Web Design/The Structure of HTML

< Web Design

After coming to understand the concept of mark-up, you will want to start learning the actual 'marks' used in HTML. We call these elements or sometimes tags, and this activity is designed to:

  • Familiarize you with the general form of elements.
  • Familiarize you with the idea of nesting elements.
  • Familiarize you with the idea of attributes.
  • Give you a base vocabulary of elements you can begin to use in creating HTML.
  • Show you how to view the source HTML of your web pages with a common web browser.
Web Design → The Structure of HTML
 This page is part of the Web Design project.

It will be assumed you:

  • Understand the difference between local and online files.
  • Have already selected a text editor and understand its basic use. For a discussion of text editors go here.

This activity is not designed to:

  • Give a comprehensive list of elements.
  • Give a comprehensive list of attributes or their accepted values.
  • Discuss document type, the meta elements, or comments.

Element form

edit

Elements are the basic unit of mark-up in HTML. They are distinguished from plain text by the less-than and greater-than characters. 

< >

Many elements are paired, consisting of an opening tag and a closing tag, and are of the container type. The accompanying closing tag is denoted by a forward slash. 

<html> text </html>

A few elements do not need to have a closing tag, such as a line break. 

<br>

Try it!

edit

Open your text editor and copy and paste the folowing text: 

<html>
  <body>
Web Design is an incredibly fun skill to learn -
combining the latest toys of technology with the creativity of design!
On top of that, learning web design is unique in that we can learn directly from current professionals
who publish their techniques for all to read on their own Web-logs!


You'll find below a growing number of topics that we think provide a good foundation for any web designer.
Of course, if you have something to add or improve then please contribute.
  </body>
</html>

Save the file as web.html and open it in your web browser. The first thing you will notice is that the text is displayed as a single block, with none of the line returns. Your web browser will ignore any extra white-space and render it as a single space.

Let's go back to the text editor and add a few formatting elements. 

<b>Bold</b>    displays as: Bold
<i>Italics</i> displays as: Italics

Alternatively we can use 'emphasis' and 'strong' elements to set a block of text apart from the surrounding text. 

<em>Emphasised</em>                      displays as: Emphasised
<strong>Strongly Emphasised</strong>     displays as: Strongly Emphasised

Use of emphasis and strong is generally preferred over italics and bold.

Experiment by adding these and the line break element shown above to your document. Save your changes and then refresh your browser.

Self-Closing Tags In XHTML

edit

If you don't know what XHTML is, simply skip this quick clarification.

If your page is being written using XHTML, elements with no closing tags should be closed by a forward slash ('/') just before the closing > per the W3C XHTML standard. For example: 

<br />

This will also result in the page being XHTML compliant (if an appropriate doctype is set, which we will move on to later). This does not ensure that the page will be served as XHTML, however. In order for these additional self-closing slashes to be significant, the page must be served with the proper Content-Type HTTP header, or the page will become "Pretend XHTML."

Please note that this practice should not be followed if the page is being written using standard HTML. Standard HTML does not require self-closing tags and, while the page will continue to display properly, these additional slashes will be considered to be errors.

Nesting

edit

You may have noticed the html and body elements used in the previous example. Those elements along with the head element form the basis for the structure of any webpage. The html element marks where the document begins and ends. The head section comes next, and gives the browser some data that is not contained in the page itself. The body contains all that will display on the page. 

<html>
  <head>
    <title>This text appears in the browser's title bar.</title>
  </head>
  <body>


  </body>
</html>

As you can imagine, as page content is added more and more elements will begin to fill your html file and it will become difficult to keep everything straight. The spaces (or tabs) in front of some of the lines helps to keep them visually separated and allow you to ensure that the page structure is correct.

You can also see from the above example how each element is placed within the page structure and becomes a part of that structure. The title element is completely within the head element. The head element is completely within the html element. The head and body elements do not overlap. This is often called nesting. Though many web browsers can be forgiving for small mistakes, nesting is required in many cases for your page to display properly.

Try it!

edit

Go back to your web.html file and make the following changes: 

<html>
  <head>
    <title>Web Design</title>
  </head>
  <body>
<b>Web Design</b> is an <i>incredibly fun skill to <b>learn</b></i> -
combining the latest toys of technology with the creativity of design!
On top of that, learning web design is unique in that we can learn directly from current professionals
who publish their techniques for all to read on their own Web-logs!
<br>
<br>
You'll find below a growing number of topics that we think provide a good foundation for any web designer.
Of course, if you have something to add or improve then please contribute.
  </body>
</html>

Save and refresh your browser. Notice how the word 'learn' in the line 'incredibly fun skill to learn' is both italicised and bolded. For the HTML to be valid in this case, the closing bold element must be within the italics element. If something is not displaying properly, this is one of the mistakes to look for.

Viewing Source

edit

When viewing a web page, you may want to know its structure. Most common browsers have a menu command called View Page Source. Clicking on this command opens a new window showing the page with all of its HTML elements. When validating your web pages, it can be helpful to compare the results with your source to find any errors quickly. This can also be useful to see how someone has marked up any page on the web to achieve their results, a great learning tool.

Try it!

edit
For mozilla based browsers.
Go to your browser window of web.html and right click anywhere on the page. Select 'View Page Source'.

Attributes

edit

The elements we have discussed so far have performed simple and predictable actions. If we want a bit more control over our web pages, we will need to be able to alter the performance of some elements.

Many tags have additional functions that can be controlled through attributes. Attributes are placed within the opening tag. It is often neccessary to specify a value for the attribute. The attribute is followed by an equal sign and the value is placed within quotes, as below. 

<font color="red">

The anchor element is a well used example. It is used for linking documents. The most commonly used attribute for the anchor element is HREF which creates a link to the URL specified. 

<a href="http://google.com">Google</a>     displays as: Google

Try it!

edit

Lets add what we've just learned to our web.html file. Try to reproduce the result below including 'Web Design' in the title bar and a link to Wikipedia after the last paragraph. When you are ready, you can compare it to my source. 

Web Design is an incredibly fun skill to learn -
combining the latest toys of technology with the creativity of design!
On top of that, learning web design is unique in that we can learn directly from current professionals
who publish their techniques for all to read on their own Web-logs!


You'll find below a growing number of topics that we think provide a good foundation for any web designer.
Of course, if you have something to add or improve then please contribute.
Wikipedia

Remember, no peeking until you have tried to do it on your own! 

<html>
  <head>
    <title>Web Design</title>
  </head>
  <body>
<font color="green">Web Design is an incredibly fun skill to learn</font> -
combining the latest toys of technology with the creativity of design!
On top of that, learning web design is unique in that we can learn directly from current professionals
who publish their techniques for all to read on their own Web-logs!<br>
<br>
You'll find below a growing number of topics that we think provide a good foundation for any web designer.
Of course, if you have something to add or improve then please contribute.<br>
<a href="http://en.wikipedia.org">Wikipedia</a>
  </body>
</html>
Retrieved from "https://en.wikiversity.org/w/index.php?title=Web_Design/The_Structure_of_HTML&oldid=1874340"