HTML Introduction
Description
Html stands for "Hypertext Markup Language", it is the language that web pages are written in. It is a markup language which means that it contains information about the content it contains. Html is pretty simple to get a hang of and with a little practice you can get pretty good at it.
Creating HTML Documents
Required Programs
Creating web pages doesn't require any special programs. All you need to create an html document is a simple text editor such as NotePad for windows, or TextEdit on a Mac. You have to be sure to save the files in simple text format so that the text editor doesn't add any formating values to the document. Your web page files also need to be saved with an extension of ".html" to be properly displayed as html.
There are also many hmtl editors that allow you to create you web pages in a visual, word processor styled interface. These editors are referred to as "What You See Is What You Get" editors, or WYSIWYG editors for short. Microsoft Frontpage and Adobe Dreamweaver are two of the most common, with Dreamweaver being one of the best in my opinion.
Saving HTML Files
To save a html file in windows notepad, you have to select "save as", then in the "Save as file type" drop down menu select the "all types" option. Also be sure to append ".html" to the file name. For example, if your web page is named "index" (which is the default name for the home page file) you would save the file as "index.html" as an all types file. This will keep notepad from adding any formatting to the file.
When creating a web page with Mac TextEdit you have to make the file plain text first by selecting Format→Make Plain Text (or hitting shift+command+T) and then save it as "index.html".
Setting Up Your Practice Environment
When developing html web pages I recommend setting up a folder on your hard drive or desktop that you will store your files in. This will make it easy to find your files and link them together as we run through these examples. Name it something like webdesign with no spaces in the name (this is good practice as it is never recommended to have spaces in file names).
This way when you want to view a web file you have created you will simply choose the "open file" option from your browser, navigate to that folder and select the specific file. This will also make it easy to use "relative paths" in your web links (we will cover this more later).
HTML Tags
Opening Tags
Html is created by using tags to surround the content. A tag is a html command that is surrounded by the less-than and greater-than symbols, such as <html>. The opening tags tell the browser to start treating the text it contains in a certain way.
Closing Tags
Almost all html tags that have an opening tag have a closing tag. Closing tags are the same as the opening tag except they have a preceding slash (/) after the <. The closing tag tells the browser that the tag is over and to stop treating the text in the way the opening tag specified. For example, the opening <html> tag tells the users browser to treat and display the document as a html document, while the closing </html> tag tells the browser that the html has ended.
Elements
A complete open and closed tag is referred to as an element. Elements can be thought of as containers. They describe the contents they contain. The html tag to contain a paragraph (<p>) tells the browser to treat the content within the element as a single paragraph. To start a paragraph you use the "Opening" <p> tag, when you are done with that paragraph you close it with the "Closing" </p> tag. This will cause the web browser to treat the content between the opening and closing tags as a single paragraph, applying any style rules associated with a paragraph and ending it by creating a new line (like hitting enter in a text editor).
There are a few tags that we will discuss that don't have a formal closing tag, such as the image tag. These tags will have a slash at the end of their opening tag like "<img src="myimage.jpg" />". This is because the tag already contains all the information necessary for the browser to display its content, such as the source of the file in the image tag.
Tag "Attributes"
Tags can have attributes that describe, modify or name their content. An attribute for a tag will be found in the opening tag, such as:
Attributes can be used to add styles to the content, such as with the css "style" attribute, or to add a classification or identifier to the content to be used by a style sheet or javascript with the "class" or "id" attribute. As we work through the tutorials we will discuss the different attributes and their uses.
Lets Get Started!
Each tutorial will cover a new aspect of html and how to apply it. We will explain the elements, show the code used for creating them and show how they should display in a browser. You will be able to cut the html code from the tutorials and paste it into your text editor to test for yourself. As far as CSS (Cascading Style Sheets) goes, will only cover inline CSS style properties in these tutorials. For a more in depth look at CSS look to our CSS Tutorials.