Session 4: Introduction To HTML

What is HTML

Watch the following video

LinkedIn Learning: What is HTML

LinkedIn Learning: The role of HTML

LinkedIn Learning: The syntax of HTML elements

HTML stands for HyperText Markup Language and it is the main language used to create web pages. The "tags" are typed into a text editor, which are then interpreted by your web browser and your web page will be displayed accordingly.

The current version of HTML is HTML5 with CSS3. If you would like to find out more about the various versions of HTML and the history of the language, here is a good source http://www.yourhtmlsource.com/starthere/historyofhtml.html

Note: The HTML file is where you put your page content. The CSS file is where the pretty stuff goes i.e. fonts, colours, borders.

What do you need?

Actually, you need very little to create web pages with HTML. A little bit of know how (or a good tutorial), a text editor and a browser.

Text Editor

There are plenty of text editors around. If you have a Windows computer, you will have Notepad for example. You can use any text editor, but generally when coding, it is best to use a text editor that is friendly for coders. Again lots to choose from - just Google free HTML editors and you will get a list.
The main difference between a text editor and an HTML editor is that the latter understands about coding and the language and will colour code your document and give you line numbers, which makes it easier to pick up any errors.

Here is a list of HTML editors for Windows https://www.lifewire.com/best-free-html-editors-for-windows-3471313

I am a person of habit and so my usual goto HTML editor is Notepad++, which you can find here:
https://notepad-plus-plus.org

For Mac users, here is a list of HTML editors https://pdf.wondershare.com/macos-10-14/html-for-macos-10-14.html

** I did download the Microsoft Visual Studio Code and tried it and it works quite well. It is also cross platform, but I only have a windows PC to check it **

https://code.visualstudio.com/

A Browser

Any browser will do - Edge, Mozilla Firefox, Chrome, Safari. I recommend having more than one browser as web pages can be interpreted differently with different browser engines and therefore may display differently.

You should always check your final website in multiple browsers and different screen resolutions.

Basic HTML Elements

As a bare minimum, a web page MUST have the following basic Tags or elements:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

The <html> element, will always be at the very start and end of your page.

<head> </head> defines the header area of the page. The <title> tag will always be inside the <head> tag.

<body></body> is used to start and end the content that will be displayed on your page.

You will notice that the elements are contained within angle brackets "< >". The ending tag is preceded by a forward slash "/".

The above code will produce an HTML page with no content.

HTML is a "markup" language. Whatever you place between the starting element and the ending element, will be marked up as per the element.

While all of the elements or tags in the above example are "paired", i.e. they have a starting one and an ending one, you'll soon learn that not all elements come in pairs.

Heading

The Heading Element can be used to increase the size of text on your page. Heading sizes will vary from 24 points for a heading 1 to 8 points for a heading 6. (24, 18, 14, 12, 10, 8)

To use the Heading Element use <h1> through to <h6>. These elements will determine the size of the heading. <h1> being the largest and <h6> is the smallest.

N.B. These are not heading levels like you would find in MS Word, all they do is determine the display size of the text.

Class Exercise 1

Start by opening up Notepad++ (or your chosen HTML editor) and type (or copy paste from blog) the Basic HTML elements (tags).

Use Save As to save what you have done so far as an HTML file.

Once the file is saved as an HTML file, you will be able to see the colour coding that will help you debug any errors.

Between the <body> and the </body> elements, type in 6 headers using <h1> through to <h6>

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>

Save the file. I called mine HeadingTest.html

Note the use of camel caps. Old habits again, I prefer not to use spaces in my HTML file names

Click on Run and select Launch in Firefox (or whatever your browser of choice is) as the browser to display it in.

This what you should get

Paragraph Element

The <p> is the paragraph element. Paragraphs are automatically spaced with a blank line in between.

HTML does not recognise new lines within your text editor as new lines on the web page, and will only recognise one space when interpreting the tag and content. You can only force text to start on a new line with a <p> tag or a <br> tag.

You will also notice, when viewing some code, the <p> tag is almost optional. Blogger, for example, does not use them in its HTML code. Good coding practice is to use them and to always have an opening and closing tag.

Break

A line break tag can be used to start a new line of text without starting a new paragraph. This is one of the exceptions to the rule that elements have a starting and ending tag. As this is not a paired tag, the forward slash is placed at the end of the tag after a space, so the syntax is <br />. While the end slash is not compulsory, force of habit means that I use them.

Use the <br /> element to start some of your text on a new line.

Horizontal Rule

Another unpaired element is the Horizontal Rule element <hr />

This will place a line across your page.

TIP: The best way to work with HTML files and your editor is to switch between the two. If I have edited the same page, rather than "launch" the page each time, you can just use the refresh button in your browser.

Lists

Lists can be ordered <ol> </ol> or unordered <ul> </ul>

For each line item in your list, use <li> </li>

Try adding the following code to your HTML file

Class Exercise 2

Under your last heading, use the <p> element to add a paragraph of text describing what you are doing here today.

After the paragraph, add a line break followed by a horizontal rule

Next, add an unordered list of fruit (bananas, apples, oranges, grapes)

Add another horizontal rule

Then an ordered list of your favourite animals (dogs, chickens, cats, pigs, horses)

This is what my code looks like:

<body>
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>
<p>Today i am teaching the Diploma of Library and Information
Services students how to write HTML files. We are covering the
basic rules of HTML and the basic elements. This is a paragraph</p><br />
<hr />
<ul>
<li>bananas</li>
<li>apples</li>
<li>oranges</li>
<li>grapes</li>
</ul>
<hr />
<ol>
<li>dogs</li>
<li>chickens</li>
<li>cats</li>
<li>pigs</li>
<li>horses</li>
</ol>
</body>

Save and refresh your browser window

Here is a recap of what we have learnt in HTML so far

The Basics

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Headings
<h1> .... </h1>
<h2> .... <h2>
<h3> .... </h3>
<h4> .... </h4>
<h5> .... </h5>
<h6> .... </h6>

Paragraphs
<p>....</p>

Breaks
<br />

Lines
<hr />

Lists
<ol> .... </ol>
<li> .... </li>
<ul> .... </ul>

Following the rules
HTML elements are usually pairs - a starting tag, the content, the ending tag. Ending tags are preceded with a slash (/).

The few elements that do not work in pairs should end with the slash, although this is not compulsory and does depend on which version rules you are following.

Elements should ALWAYS be in lowercase

More HTML

Global Attributes

Attributes are always placed in the start tag and their purpose is to provide additional information about this instance of the element.

As well as attributes that are specific to a particular element, such as "src= " or "href= ", there are also attributes that are general and can be used in almost all elements. The most common are:

id
title
class
style

id="value"
This attribute is used to give an instance of an element a unique name. The main purpose of this is for use with style sheets (CSS), but can also be used to identify a particular element in your document.

title="value"
This attribute assigns a title to the element, which then shows up as a tooltip when you hover over it with the mouse.

class="value"
This is similar to id and is mainly used for styling. The difference between id and class is that id is a unique name, but the same class value can be used on multiple elements to group and treat them the same.

style="value"
This is used to create an inline style for the element. I will explain this in more detail when we cover CSS, but it essentially allows you to style this particular instance of an element different to the other instances of the element.

source: https://www.w3schools.com/tags/ref_standardattributes.asp

We will revisit attributes shortly!

Images

The <img> tag is used to place an image on your page. The <img> element does not have a closing pair.

<img src="filename.xxx"> or if the images are stored in a different folder to the document then the src= would include the folder <img src="images/filename.xxx">.

If the file is located somewhere else, then you will need to include the full url name for the image. You can also link to images on the Internet by copying the image address.

Image attributes

<img src="logo.jpg" height="200" alt="corporate logo"> with the number referring to the pixels.

The alt attribute is used to have text as an alternative to the image. It should be included for accessibility reasons and may be used by screen reading applications.

Example:
<img src="logo.jpg" height="200" width="150">

The above example allows you to specify both height and width for the image. If you leave either of them out, the image will stay in proportion and the browser will determine the missing size.

Images can be tricky to manipulate on a webpage. You can use the style="float: left" or style="float: right" or even easier, place it within a <p> tag, so that it is on a line on its own.

N.B. We will look at styling images in more details when we do CSS.

I will add an image called Yuki-Michele.jpg

This image is located in the same folder as my html file. I will add it to the end of my sample file.

<img src="Yuki-Michele.jpg" width="400">

Class Exercise 3

On your own, use the HTML elements that we have learnt so far to create a single page resume.
Use <br /> and <hr /> to create separate sections
Use heading elements for a larger font where needed
Use unordered lists to create a bullet list of your skills.
Include an image at the end
Display it in your browser as you go to see what it looks like.

Tables

A Table is made up of Rows and Columns. Each block within a table is called a CELL. In HTML, we need to define what is going to be placed in each CELL. Any HTML element can be placed within a table CELL.

The HTML code to create a table is:

<table> </table> Use to define the table

<tr> </tr> used for each row in the table

<th> </th> Table Header - this makes the text bold

<td> </td> table data is used to include content in each cell within each row of the table.

Tables can get quite complicated with the ability to span cells over more than one column or row, but we will keep it simple. Here is an example of a simple table that can be used to list qualifications.

----------------------------------------------------------
<html>
<head><title>Sample table</title></head>
<body>
<h1>HTML Table sample</h1>
<table>

<tr><th>Year</th><th>Qualification</th><th>Institution</th></tr>
<tr><td>2010</td><td>Certificate IV in TAE</td><td>Chisholm Institute</td>
<tr><td>2008</td><td>Diploma of Business (Project Management) </td><td>Chisholm Insitute></td></tr>
<tr><td>1992</td><td>Advanced Diploma of Applied Science (Technology management)</td><td>Deakin University</td></tr>
</table>
</body>
</html>
----------------------------------------------------------

Borders, colours and shading are all added using CSS, so we will look at how to do that later.

This is what the above table looks like in Firefox.

Class Exercise 4

On your Resume web page, place your Qualifications in a table similar to the sample.

Hyperlinks

There are three types of hyperlinks that can be used on a web page.

The most common hyperlink is used to open up another web page, either within this website such as for navigation, or a totally different website.

You can also use hyperlinks and anchors to move to different sections of the same document/page.

The last type of hyperlink is to link to an email address.

Webpage Hyperlink

The <a> element is used for Hyperlinks, The basic syntax for the webpage hyperlink is:

<a href="http://thisisthelink.com"> click here </a> for linking to a totally different website OR

<a href="webpage.html"> click here </a> for linking to a page within the same domain.

Whatever is included between the <a> and </a> will become the link item.

If you do not want to open the hyperlink in the same browser window, you can use the target="_blank" attribute to specify a new tab

To use text as the link, such as click here for the Chisholm website, you would type:

<a href="http://www.chisholm.edu.au">Click here for Chisholm website</a>

<a href="http://www.chisholm.edu.au" target="_blank">Click here for Chisholm website in a new tab</a>

Anchors

To hyperlink to anchors with the same document, you need to first mark and name the point.

<a name="namedplace">this is a spot on my document</a>

Once you have a named area, you can link to it using:

<a href="#namedplace">go to named place</a> Note the use of the # to refer to the named area

Email Hyperlinks

To create an email Hyperlink, use the syntax:

<a href="mailto:me@emailaddress.com">email me</a>

Class Exercise 5

Add an email link on to your resume page.

Header and Footer

Header and Footer are HTML5 elements that are used to define sections of your page.

The <header> element defines the header for your page. This can be used for introduction information, a navigation system or even your logo.

The <footer> element is used to define the footer for your page. Just like in any document, the footer contains information such as copyright notice, owner/author information, or even contact details.

Nav

The <nav> element is used to define the main navigation section for your page. There can be more than one navigation section on your page, but it is designed to be used for your main site navigation or page navigation.

<nav>
<a href="">Home</a>|
<a href="">About</a>|
<a href="">Our Products</a>|
<a href="">Contact Us</a>
</nav>

In this example, I have just put in placeholder links. Obviously, if you were using this, you would include the page name or URL of where you want the link to go to.

iframe

You can use an iframe to display a web page within a web page. iframes are often used to incorporate Social Media onto a webpage, such as a YouTube clip.

The syntax for iframe is:

<iframe src="url"></iframe>

You can also include the height="nnn" and width="nnn" attributes to specify the size of the frame.

Here is an example that incorporates the Chisholm website into an iframe.

<iframe src="https://www.chisholm.edu.au/"></iframe>

The result of the above iframe without any size specified is shown below.

** NB - many websites will no longer display in an iframe. They are used for incorporating social media items that are shareable **

This time specifying a size for the frame.

<iframe src="https://www.chisholm.edu.au/" width="800" height="500"></iframe>

You can see the difference in the frame size below:

https://www.youtube.com/watch?v=SqNXL7MAbx0

Here is the embed code

It starts with an iframe, followed by the width and height of the iframe.

src="......" to add the URL of the YouTube clip

title and frameborder added as well as media information

All you need to do is add this code to your HTML file.

Class Exercise 6

Try and embed a YouTube clip into your HTML file

Comments

Anyone who has ever done any programming or coding will know that commenting your code is very important. Commenting can act as a reminder as to why you included some elements, or to provide explanation to a subsequent editor or programmer.

To insert a comment in html:

Class Exercise 7

Add some comments to your html files explaining some of your elements

Symbols

See link below for full list of html symbols

https://www.w3schools.com/html/html_symbols.asp

HTML Cheatsheets

Here are a couple of HTML Cheatsheets.

Hostinger HTML Cheat Sheet PDF

December.com HTML Cheatsheet

Freelancer.com HTML Cheatsheet

As mentioned previously, there are lots of HTML references, but this one is my goto for syntax and attributes.

https://www.w3schools.com/html/default.asp

Class Exercise 8 - putting it all together!

Create a simple Book review website:

Home Page

Appropriate heading
A blurb about the site
A table that is 1 row and 5 columns - each cell is to have a thumbprint book cover image,
each image to link to a page that has a review of that book

Book review pages

a larger image of the book cover or some characters
The book review details
a link to where you can buy the book from.
a link that takes you back to the home page.

Use the elements that you have learnt to make the pages look as interesting as possible (but without styling)

Class Exercise 9

Try using the Add a Copyright notice at the bottom of your main page