code learning HTML

Learning HTML

The basic structure of a HTML document

All websites have this basic structure. At its most basic, they are conformed by three tag elements: the declaration tag, the head tag and the body tag. The declaration tag is the first line of code in a website and it tells the browser what the document holds (i.e. HTML coding). The head tag is used to provide main identification details of the website to the browser. Finally, the body tag is used for the content which your website will display on the browser and which will be visible to the website user.

Remember, each tag element opened in HTML must have an opening and closing tag.

<!DOCTYPE HTML>
<head>
</head>

<body>
</body>
</html>

 

The <head> Tag

The code within the <head> tag is not visible to the website user but are very important as this is the place where to input metadata that will help the browser identify the kind of website it is displaying to the website user. The <head> tag is also useful because it allows you to link external CSS and JavaScript document to the main HTML document.

write12Example

<!DOCTYPE HTML>
<head>
<meta charset="utf-8"/>
<title>Football tips and tricks</title>
<meta name="description" content="A webpage about football" />
<meta name="keywords" content="football, tips, tricks, soccer" />
<meta name="author" content="Billy Tarrillo" />
<link rel="stylesheet" href="mycss.css" type=”text/css” media="screen" />
</head>

<body>
</body>
</html>

 

The <body> Tag

The code that goes inside the <body> tag becomes the content you will make visible to website users when they visit your website.

Normally, the body of a website should be set up with the following structure:

  • The header – which contains the logo or a top level heading of the website;
  • The navigation menu – across the page or in a column form which allow the website user to navigate through the website.
  • Main content – the main space of the website which will hold main information made up of text, pictures, links, videos, etc.
  • The footer – across the bottom of the site to contain secondary information such as copyright claims and the website’s webmaste contact details.

HTML5 allows you to use the following tags for structuring your website as explained above:

TAG DESCRIPTION
<header> To contain your header content.
<nav> To contain your navigation menu.
<section> To group different tag elements that are meant to be grouped for a specific purpose.
<footer> To hold the content that is meant to go to your footer.
<div> To be used only when you can’t use one of the above tags to group different tag elements, helps for CSS styling.

 

write12Example

Capture
 

Specific HTML tags

There is a vast range of HTML tag elements that you can use to input a particular type of content on your website for optimal display to the end user.

Below we will visit some of the most important HTML tags which have been divided into subsections for ease of understanding. Look out for examples where attributes (coloured in red) and their corresponding values (coloured in purple) are used to show how you can further specify content held by HTML tags.

Tags for Text

These are some HTML tag elements that can be used to input specific kinds of text on your HTML document.

TAG DESCRIPTION
<h1> - <h6> To use for headings. <h1> provides the biggest size of text for a heading. The lower you go on the size of the heading, the lesser the size of the text will be. Use lower headings for subtitles.
<p> To create generic paragraphs.
<blockquote> To quote text that comes from external material such as articles, blog posts, quotes, etc. This tag element by itself cannot contain text, it must be used by holding another tag element inside it which allows text to be written inside of it. For example, you can use the <p> tag for this. You can also use the attribute cite=”www.dep.com.au” within the <blockquote> tag element to cite information that comes from another website.
<q> To use for short quotations, you can also use the attribute cite=”*******” to cite a short quotation that comes from another website.
<em> Used to emphasise text (differentiate it from the rest of the text).
<i> Used to display text in italics.
<b> Used to display text in bold.
<small> Used to display text in a “small” size. This tag element is useful for text that is usually display in small print such as legal restriction, copyright notices, licensing  information, etc.

write12Example

<body>
<blockquote cite="www.dep.com.au">
<p>This is a great webpage where you can learn coding!</p>
</blockquote>
</body>

 

Tags for Lists

There are three main types of lists that can be created in a HTML document: an “un-ordered list”, an “ordered list” and a “description list”.

These are some HTML tag elements that can be used to create these lists in your HTML document.

TAG DESCRIPTION
<ul> To make an un-ordered list (a list displayed in bullet points). These type of lists are used to list a set of related items that have no particular order of organization (e.g. milk, butter, bread, etc).

write12Example

<body>
<ul>
<li>bread</li>
<li>coffee beans</li>
<li>milk</li>
<li>butter</li>
</ul>
</body>

<ol> To group a set of related items in a specific order (e.g. cooking instructions). HTML displays an ordered list in number format.

write12Example

<body>
<ol>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ol>
</body>

<li> To input an item that goes inside a list. Can be used within both a <ul> and a <ol>.
<dl> To make a description list that has name/value pairs. They are used to define events in further detail. Description lists use groups of <dt> (for name) and <dd> (for value).

write12Example

<body>
<dl>
<dt>Milk</dt>
<dd>A white, liquid diary product.</dd>
<dt>Bread</dt>
<dd>A baked food made of flour or meal.</dd>
</dl>

</body>

 

Tags for Images

These are some HTML tag elements that can be used to input pictures into your HTML website.

The main HTML tag in this section is <img> which possesses several attributes that you should take note of.

Remember: make sure your images are in either of the following formats: GIF, JPEG, PNG or GIF (for a picture with animation).

TAG DESCRIPTION
<img> This tag element is used to add an image. Many attributes can be used when inputting an image, below are some examples:
  • src=”mypic.jpg” – the attribute "src" is used to alert the browser of the location of the image you want to display, this location can be a local folder or a website that holds the image.
  • alt=”this is a picture with me inside” – the text within this attribute gets displayed in case the browser has issues displaying the actual picture.
  • title=”my picture”– most browsers will display the information written in this property as a tool-tip when your website users hover their mouse cursor over an image.
  • longdesc=”this is a long description which goes on and on and on and on” – this attribute is to be used when an image is very complex (e.g. a chart) to provide a more lengthy description of the picture.
  • width=”000” / height=”000” – this attribute allow you to redefine an image’s dimensions.
<figure> If you want your image to display in a line of its own then you can use this tag and put your <img> picture inside of it. Within this tag you can also use the <figcaption> tag to provide a caption to your image.

write12Example

<body>
<img src="chart.png" width="450" height="150" alt="Chart showing the fruit consumption amongst under 15 year olds. Most children ate Pineapples, followed by Pears" longdesc="fruitconsumption.html"> </img>
</body>

 

Tags for Links

These are some HTML tag elements and properties that can be used to allow a website user to click on a link that will make them access a different document from your website. This different document is usually an HTML document (i.e. another website) but can also be a text file, a PDF, an image, etc.

HTML links can be absolute addresses (external documents) or relative addresses (links to other pages within your website).

TAG DESCRIPTION
<a> Makes any text written within the opening and closing <a> tags to become clickable text that takes you to an absolute or relative address. The <a> tag can be wrapped inside entire paragraphs, lists, tables, pictures and even entire sections of HTML. The <a> tag has some of the following attributes:
  • href=”http://www.google.com” – this attribute has to be used inside an <a> tag to allow the text clickable to take you to a particular website. In this example, the attribute is made so that the <a> tag would take the webpage user to www.google.com.
  • title=”Extra information about a webpage” – this attribute allows you to include extra information about a link. This attribute is useful in some browsers which show the information inputted as the value as a tooltip when a website user hovers over the link with their mouse cursor.

write12Example

<body>
<h1>A link to Opera</h1>
<p><a href=”www.opera.com”>Opera Software</a></p>
</body>

 

Tags for Tables

These are some HTML tag elements that can be used to organize data into a table format that can be displayed on your HTML website.

TAG DESCRIPTION
<table> This tag element allows you to create one table. Attributes used often are:
  • border – to create a visible border to your table. Input a number as its corresponding value.
  • width – to adjust the width of your table. Input a percentage or a pixel number as a value.
<caption> Use this tag element to give your table a caption. When used, it usually is placed immediately after the <table>.
<tr> A tag element used within a <table> tag to create a row. The following is an example of an attribute that is used often:
  • align=”center” – this attribute and value will align every content inside the row to the center.
<td> A tag element used within a <table> tag to create a single table cell within a row. Only use it to input actual data inside a cell, do not leave it empty. It can use, among others, the following attributes:
  • rowspan=”2” – this example would create a table cell that will span in more than 2 rows.
  • coldspan=”2” – this example would create a table cell that will span in more than 2 columns.
<th> These tag element is used similarly to <td> tags (and it also uses the same attributes) to bold the text within a single table cell. It is often used for table cell headings.

write12Example

<body>
<table>
<caption>Recent Major Volcanic Eruptions</caption>
<tr>
<th>Volcano Name</th>
<th>Location</th>
<th>Last Major Eruption</th>
<th>Type of Eruption</th>
</tr>
<tr>
<td>Mt. Lassen</td>
<td>California</td>
<td>1914-17</td>
<td>Explosive Eruption</td>
</tr>
<tr>
<td>Mt. Hood</td>
<td>Oregon</td>
<td>1790s</td>
<td>Pyroclastic flows and Mudflows</td>
</tr>
</table>
</body>

 

Creating Classes and IDs

There are times when you want to use CSS to style multiple HTML tag elements with the same properties. To picture an example, imagine you wanted to select most - but not all - of the <p> tags inside your HTML document at once because you wanted those specific paragraphs you selected to be of the same font size and colour. How can you do this?

You can group such tag elements inside your HTML document by using either of two attributes: IDs and classes. You can then use the respective "ID" or "class" value you assigned later in CSS to edit that value which will automatically also style all the tag elements grouped under it (for more on how to do this, see our "Learning CSS" website).

“IDs” are used to identify a unique group of tag elements which can only be used once in your HTML document. A “class”, on the other hand, can be used repetitively throughout your HTML document to identify more than one group of tags elements with the same "class" name.

write12Example

<body>
<section id=”choc curry”>
<h1>Chocolate Curry</h1>
<p class=”intro”>This is the recipe</p>
<p class=”intro”>Read below to learn how to do a Chocolate Curry</p>
</section>
</body>

 

Click here to return to the Digital Enterprise Project main webpage