Session 4 - HTML part 2
Last week we created an online resume using some basic HTML elements.
We have covered the following elements over the past 2 sessions
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.
Elements to be in lowercase
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. These are:
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.
The <img> tag is used to place an image on your page. The <img> element does not have a closing pair.
<img src="filename.png"> or if the images are stored in a different folder to the document then the src= would include the folder <img src="images/filename.jpg">. If the file is located somewhere else, then you will need to include the full url name for the image.
<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.
<img src="logo,jpg" height="200" width="150"> 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.
We will look at styling images in more details when we do CSS in the following 2 sessions
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 that later.
This is what the above table looks like in Firefox.
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.
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:
Use an iframe to incorporate a website onto your resume.
To insert a comment in html:
<!-- write comments here -->
Add some comments to your html files explaining some of your elements
https://www.w3schools.com/html/html_symbols.asp
Home Page
We have covered the following elements over the past 2 sessions
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.
Elements to be in lowercase
More HTML
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. These are:
- id
- title
- class
- style
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.
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.png"> or if the images are stored in a different folder to the document then the src= would include the folder <img src="images/filename.jpg">. If the file is located somewhere else, then you will need to include the full url name for the image.
<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.
<img src="logo,jpg" height="200" width="150"> 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.
We will look at styling images in more details when we do CSS in the following 2 sessions
Activity 1
Try adding an image to your personal details page/section of your Resume web page. It could be a photo of you (ideally) or something random from the internet.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 that later.
This is what the above table looks like in Firefox.
Activity 2
On your Resume web page, place your Qualifications in a table similar to the sample.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.
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:
Activity 3
Use an iframe to incorporate a website onto your resume.
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:
<!-- write comments here -->
Activity 4
Add some comments to your html files explaining some of your elements
Symbols
See link below for full list of html symbolshttps://www.w3schools.com/html/html_symbols.asp
Activity 5
Add a Copyright notice at the bottom of your Personal Details page, or the bottom of your web page if you haven't split the Resume up.Activity 6
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
- 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.
Comments
Post a Comment