Session 3 - HTML part 1
Last week we downloaded Notepad++ to our USB Drive and created our first very basic web page.
I demonstrated how to swap between your text editor and your Browser to update the view.
We covered the minimum required elements that make up a web page:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
We also learnt about the:
Header element <h1> through to <h6>
Paragraph element <p>
Line Break element <br />
This week we will continue to look at some of the basic HTML elements
Ordered Lists
An ordered list is a numbered list.
1. First Item
2. Second Item
3. Third Item etc.
To create an Ordered List use the <ol> element
Unordered Lists
An unordered list is created using the <ul> element
The <ul> element will create a bulleted list
With both of these list types, use the <li> </li> for each line item
Below is an example of how to use the Ordered list element:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Display your Educational details and Personal Interests as an Unordered list.
Make sure you save the file and reload your browser.
The syntax is <hr> (or <hr /> for compatibility)
The default horizontal rule is 100% wide and 2 pixels high.
Make sure that you save the file and reload your browser to see the changes.
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.
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">
<a href="webpage.html"> for linking to a page within the same domain.
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
NOTE: Any text that is between the opening element and the closing element will become your link.
<a href=" "> This will be the link </a>
Example:
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>
Under the Educational Information, include a link to the Chisholm website and/or any other educational institution that you included in your list.
Hyperlinks and Anchors
Use the global id= attribute to name a particular spot on your webpage.
Click here for details on global attributes
Use <a href="#nameofid"> to move to the named spot on your webpage. An example is to have a go to top link at the bottom of your page.
<h1 id="topofpage">Personal Information</h1>
**** This will name your heading Personal Information as topofpage ****
At the bottom of your page you could include something similar to the following:
<a href="#topofpage">Go to the top of the page</a>
Add a placeholder at the top of your Resume web page
Add a link at the bottom of your Resume web page that takes you to the top.
Email link
The third type of hyperlink is an email link.
The syntax is:
<a href="mailto:emailaddress">Email Me</a>
Add an email link under your Personal Information heading
Try creating your Resume using 4 different pages (html documents) - One page for each of
*** More Advanced Activity ***
At the end of each page, add 3 links that will allow you to open up any of the other pages.
Do this for each page.
I demonstrated how to swap between your text editor and your Browser to update the view.
We covered the minimum required elements that make up a web page:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
We also learnt about the:
Header element <h1> through to <h6>
Paragraph element <p>
Line Break element <br />
This week we will continue to look at some of the basic HTML elements
Activity 1
Using the elements you learnt in the previous lesson, create a single web page Resume. Include sections for:- Personal information
- Career goal
- Educational information
- Personal Interests
Lists
There are two types of lists that you can be created in HTML. They are the Ordered List and the Unordered List.Ordered Lists
An ordered list is a numbered list.
1. First Item
2. Second Item
3. Third Item etc.
To create an Ordered List use the <ol> element
Unordered Lists
An unordered list is created using the <ul> element
The <ul> element will create a bulleted list
- Item 1
- item 2
- item 3
With both of these list types, use the <li> </li> for each line item
Below is an example of how to use the Ordered list element:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Activity 2
Using the Resume page that you created in Activity 1Display your Educational details and Personal Interests as an Unordered list.
Make sure you save the file and reload your browser.
Horizontal Rule
The Horizontal Rule element is used to place a line in your HTML document. It is a great way to separate different sections of a page.The syntax is <hr> (or <hr /> for compatibility)
The default horizontal rule is 100% wide and 2 pixels high.
Activity 3
Separate the sections of your Resume using a Horizontal RuleMake sure that you save the file and reload your browser to see the changes.
Hyperlinks
There are three types of hyperlinks that are 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.
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">
<a href="webpage.html"> for linking to a page within the same domain.
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
NOTE: Any text that is between the opening element and the closing element will become your link.
<a href=" "> This will be the link </a>
Example:
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>
Activity 4
Under the Educational Information, include a link to the Chisholm website and/or any other educational institution that you included in your list.
Hyperlinks and Anchors
Use the global id= attribute to name a particular spot on your webpage.
Click here for details on global attributes
Use <a href="#nameofid"> to move to the named spot on your webpage. An example is to have a go to top link at the bottom of your page.
<h1 id="topofpage">Personal Information</h1>
**** This will name your heading Personal Information as topofpage ****
At the bottom of your page you could include something similar to the following:
<a href="#topofpage">Go to the top of the page</a>
Activity 5
Add a placeholder at the top of your Resume web page
Add a link at the bottom of your Resume web page that takes you to the top.
Email link
The third type of hyperlink is an email link.
The syntax is:
<a href="mailto:emailaddress">Email Me</a>
Activity 6
Add an email link under your Personal Information heading
Activity 7
*** Advanced Activity ***Try creating your Resume using 4 different pages (html documents) - One page for each of
- Personal information
- Career goal
- Educational information
- Personal Interests
*** More Advanced Activity ***
At the end of each page, add 3 links that will allow you to open up any of the other pages.
Do this for each page.
Comments
Post a Comment