July 24, 2010

The Structure of HTML- What are the general elements of HTML coding

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.
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.
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!
 Open your text editor and copy and paste the following 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>Emphasized</em> displays as: Emphasized

<strong>Strongly Emphasized</strong> displays as: Strongly Emphasized




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

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



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!



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 italicized 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



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!



For Mozilla based browsers.

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



Attributes



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 necessary 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!



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>

About the Author

Iwebslog Labs

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

Post a Comment

 
Iwebslog Blog © 2015 - Designed by Templateism.com