Create HTML page

by Training site on 16:36 No comments
MS word:
Open up Microsoft Word and start with a blank page. To save the document as a HTM or HTML page click on the Microsoft Office button or File button, (depending on your version of MS Word) hover on the save as button and select other formats in the drop down list. This will open the save as dialog box. In File name textbox type in My Programing Journey and select Web Page from the dropdown menu in the save as type selection box. When you select the Web Page option you will see an additional button appear called change title. You can type in the text that you would like to be displayed in the title bar of your selected browser at this point. You can skip this as we will be adding it at a later stage in the HTML page code. Click the save button to continue.

Some word processors will save the document as HTM and others will save as HTML. Both types will suffice when creating a web page but if you would like to read further into the subject check out the following link.
HTM v HTML explanation

Dreamweaver:
Click File and select new from the dropdown list. Under the general tab make sure that the basic page is selected under the Catagory window and select HTML under the basic page window. Click on the create button to create a fresh HTML page. Go to file, save as to bring up the save as dialog box. In the file name text box type in My Programing Journey and click the save button to continue.

When you create a blank HTML page you will get a lot of extra coding attached that is not necessary for the following tutorials. MS Word has more text than you can take in!! If you prefer to start with a basic template please download the following template basic template.

In the next tutorial I will explain the tags that are in a blank HTML page.

Next tutorial

HTML introduction

by Training site on 15:49 No comments
HTML introduction:

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 codeSample 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 Journey

Links:

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 "&lt;" and "&gt" 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 &lt;a&gt;
<br>Closing tag &lt;/a&gt;

HTML codeSample 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 &lt;a&gt;
<br>Closing tag &lt;/a&gt;
<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 Journey

Links:

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 &lt;button&gt;
<br>Closing tag &lt;/button&gt;

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>
Click the following link for the completed tutorial HTML introduction source code

In the next tutorial I will be talking about creating a table of contents with an ordered list.

Previous tutorial Next tutorial

Ordered List

by Training site on 14:00 No comments
Ordered List:
In this tutorial we will create a table of contents with an ordered list. In an ordered list the list items will be numbered.

If you want to follow the tutorial please download tutorial template here
If you are following these tutorials continue to use your own source code from previous tutorial.

We will be using the following tags:

Ordered list implementation tags
•Opening tag <ol>
•Closing tag </ol>

List item tags
•Opening tag <li>
•Closing tag </li>

The code below will provide a very basic table of contents with two list items. Firstly type Table of contents in standard font. You can alter this font at a later stage. Within the opening and closing tags for an ordered list we will add each list item with the <li> tag and close with the </li> tag.

HTML codeSample of code output
Table of contents
<ol>
   <li>Links</li>
   <li>Buttons</li>
   <li>Tutorials Completed</li>
</ol>		Table of contents
  1. Links
  2. Buttons
  3. Tutorials Completed

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 Ordered List in the completed tutorials table.

<tr>
   <td>Ordered List</td>
   <td>Yes</td>
</tr>

To download the finished example for this tutorial please click here

In the next tutorial I will extend this ordered list with unordered sub menus

Previous tutorial Next tutorial

Unordered List

by Training site on 13:15 No comments
Unordered List:
In this tutorial we will be extending the ordered list table of contents from the previous tutorial with an unordered list. In an unordered list the list items will be denoted with bullet points.

If you want to follow the tutorial please download tutorial template here
If you are following these tutorials continue to use your own source code from previous tutorial.

The code below is what we covered in the previous tutorial

Table of contents
<ol>
<li>Links</li>
<li>Buttons</li>
<li>Tutorials Completed</li>
</ol>

For each item in the ordered list we will be adding a few sub menu items with an unordered list. For example: The Links sub items will be input within the the <ul> and </ul> tags after the links <li> tag. See output below for what will be displayed on a browser.

HTML codeSample of code output
Table of contents
<ol>
  <li>Links
    <ul>
      <li> Text Link </li>
      <li> Text Link with target attribute </li>
    </ul>
  <li>Buttons
  <li>Tutorials Completed
</ol>		Table of contents
  1. Links
    • Text Link
    • Text Link with target attribute
  2. Buttons
  3. Tutorials Completed

Finally we can add the rest of the sub items for the buttons content menu. See output below for what will be displayed on a browser.

HTML codeSample of code output
Table of contents
<ol>
  <li>Links
    <ul>
      <li> Text Link </li>
      <li> Text Link with target attribute </li>
    </ul>
  <li>Buttons
    <ul>
      <li> Clickable button </li>
      <li> Onclick event button </li>
      <li> URL link button </li>
    </ul>
  <li>Tutorials Completed
</ol>		Table of contents
  1. Links
    • Text Link
    • Text Link with target attribute
  2. Buttons
    • Clickable Button
    • Onclick event Button
    • URL link button
  3. Tutorials Completed


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 Unordered List in the completed tutorials table.

<tr>
   <td>Unordered List</td>
   <td>Yes</td>
</tr>

To download the finished example for this tutorial please click here

In the next tutorial I will expand the list of contents to include internal link anchors that will link to relevant paragraphs / chapters within a webpage. 

Previous tutorial Next tutorial
Subscribe to: Posts (Atom)