In this tutorial we will be altering the title for the blank HTML template and adding a few paragraphs and title headers.
The code below will produce a page with the title Untitled Document in the browser tab. I have left this unchanged on purposed because you need to know where this can be altered in the code.
<html> <head> <title>Untitled Document</title> </head> <body> </body> </html> |
To change the title that will be shown on the browser tab you alter the text within the <title></title> tabs.
To put some material in the web page we will be writing text within the <body></body> tags. Every thing that you want to appear on a web page is input in between these tabs.
<html> <head> <title>My Programing Journey</title> </head> <body> </body> </html> |
For this tutorial we will be adding some text and headings with the <h></h> tags.
As you will see from the code below you can make the heading text different sizes. Each heading tag depending on the size and importance of the text needed will have a numeric digit next to the h. The HTML default for <h1> which is important through to <h6> which is the least important.
For this web page heading type My Programing Journey in between <h1></h1> tags. Next we will alter the text position so that it is centered on the page with align="center" next to the h1 in the opening tag.
Next we need to set up the sub headings for each tutorial section on the web page, ie Links and Buttons.
For the tutorial section heading we will be using <h2> and we will be using <h4> for the individual tutorials for each tutorial section.
To separate each tutorial section we will be using the <hr> tag which will draw a separating line across the screen in between each section. This will allow a user to know when a particular section has finished.
| HTML code | Sample of code output | |
| <html> <head> <title>My Programing Journey</title> </head> <body> <h1 align="center">My Programing Journey</h1> <h2>Links:</h2> <h4>Text link:</h4> <h4>Text link with target attribute:</h4> <hr> <h2>Buttons:</h2> <h4>Clickable Button:</h4> <h4>Onclick Event Button:</h4> <h4>URL Link Button:</h4> </body> </html> | My Programing JourneyLinks:Text link:Text link with target attribute:Buttons:Clickable Button:Onclick Event Button:URL Link Button: |
To finish up this tutorial we will be adding text to each sub heading. With HTML you can just type text onto the page. If you want to add alterations at a later stage with CSS / javascript you can add a paragraph tag as follows<p>. I will cover the paragraph tags in a later tutorial.
Under each section heading we are going to input the associated tags and we will be adding an explanation under each sub section. We will create hyperlinks to the associated tutorial at a later stage.
| A tiny bit of advanced coding - Encoding symbols For this part of the tutorial only we will be replacing the "<" and ">" symbols with "<" and ">" consecutively without the inverted commas for the button and links tags (you can type the next line tag <br> as is ). The reason for this is because if we add the greater than and less than symbols a button will replace the text that we want to show when viewed on a browser. |
Under the Button heading type
The following HTML tags are used to create a link:
<br>Opening tag <a>
<br>Closing tag </a>
| HTML code | Sample of code output | |
| <html> <head> <title>My Programing Journey</title> </head> <body> <h1 align="center">My Programing Journey</h1> <h2>Links:</h2> The following HTML tags are used to create a link: <br>Opening tag <a> <br>Closing tag </a> <h4>Text link:</h4> <h4>Text link with target attribute:</h4> <hr> <h2>Buttons:</h2> <h4>Clickable Button:</h4> <h4>Onclick Event Button:</h4> <h4>URL Link Button:</h4> </body> </html> | My Programing JourneyLinks:The following HTML tags are used to create a link:•Opening tag <a> •Closing tag </a> Text link:Text link with target attribute:Buttons:Clickable Button:Onclick Event Button:URL Link Button: |
Under the Text link heading type
This is a preview of what is produced from the Text link tutorial
Under the Text link with target attribute heading type
This is a preview of what is produced from the Text link with target attribute tutorial
Under the Buttons heading type
The following HTML tags are used to create a button:
<br>Opening tag <button>
<br>Closing tag </button>
Under the Clickable button heading type
This is a preview of what is produced from the clickable button tutorial
Under the Onclick Event Button heading type
This is a preview of what is produced from the Onclick Event Button tutorial
Under the URL Link Button heading type
This is a preview of what is produced from the URL Link Button tutorial
Save your HTML document and test on browser of choice. If you wish to continue following the tutorials type Yes into the table data column after HTML introduction in the completed tutorials table.
| <tr> <td>HTML introduction</td> <td>Yes</td> </tr> |
In the next tutorial I will be talking about creating a table of contents with an ordered list.
| Previous tutorial | Next tutorial |
0 comments:
Post a Comment
Please feel free to leave comments or ask questions related to the tutorials.