In the HTML Basic and Intermediate Tutorials we used notepad to edit and save our files. I'll just reiterate the basic tools and setup for people that are jumping straight into the advanced tutorials. The HTML Basic and Intermediate Tutorials introduced a number of HTML tags and in these lessons we will finish our tour of HTML.
The <link /> Tag
The <link /> tag allows us to link to external resources for our HTML documents and must reside within the <head></head> element. Most often used for importing style sheets and images.
The <meta /> Tag
The <meta /> tag allows us to insert generic meta information into our HTML documents and must reside within the <head></head> element.
The <noscript> Tag
The <script> Tag
The <style> Tag
The <style> tag allows us to put style information into our HTML documents and must reside within the <head></head> element.
The Basic Tools
All we need to get going is a basic text editor such as Notepad for windows. So for instance using Windows XP:
click Start>>All Programs>>Accessories>>Notepad
Creating A Folder For Our Advanced Files
Let's create a folder for our HTML Advanced lessons
double click My Computer icon
double click C:\ drive (or whatever your local drive is)
right click the mouse in the window
from the drop down menu Select New
click the Folder option and call the folder _HTMLAdvanced and press enter.
Saving Our First File
Ok, with Notepad or a simlilar text editor open, copy and paste the following HTML code in :-
Click file from the toolbar and then click the save option.
In the Save in: tab at the top make sure you are pointing to the _HTMLAdvanced folder we created above.
In the File name: text area type lesson_1_webpage.html and then click the Save button and close the Notepad.
The .html file extension lets the system know that this is a hypertext document, you must save the file with this extension to view the document in your default web browser. If you do not save the file with the .html file extension Notepad and other text editors save the file with the .txt file extension. This will stop you viewing the file in a web browser.
Viewing Our Saved File
You Might See a Subtle Difference?
Reviewing The Code
Ok, firstly let's have a look at the <meta /> tag and its' usage. The attributes within the <meta /> tag, generally take the form of key-value pairs. The key can be name to provide a name for the following content or http-equiv to describe an equivalent HTTP-Header and the value we wish to use for it, as in our HTML code above. The value part of the key-value pair is always set to content and describes the meta information for the key specified. Sometimes a third attribute scheme is used which is either a specific data format or URL that points to a data format to apply to the data within the content attribute. Meta information is used by browsers, search engines etcetera, to extract useful information about your documents.
The <link /> tag allows us to link to external resources such as images and stylesheets for use in our HTML documents.
The <style> tag allows us to put inline style information into our HTML documents. We have used it here to make our H1 heading red. We will cover this further in our CSS tutorials.
Lesson 1 Complete
In the next lesson we complete our look at the HTML text tags.
The <link /> link to external resource tag
The <meta /> generic meta information tag
The <noscript> non script statement tag
The <script> script statement tag
The <style> style information tag