HTML (4.0) Overview
Introduction · At The Top · Head · The Body · Font Changes · Emphasis & Lists · Links · Images · End Tags & Notes
Introduction
HTML stands for "hypertext markup language", and is used to create website pages, such as the one you are currently viewing. Throughout the years, HTML has gotten many revisions and new rules. Think of it as any other language- it is ever-changing and needs to follow a system of rules to be understood. The newest version is 5.0, however, it is still in development. Most website designers currently rely on coding with the 4.0 version set by W3C, the website development language "authority". This tutorial will cover the basics of HTML regarding the standard 4.0 version. To view upcoming changes, read W3C's draft page.
If you are using this tutorial in combination with Dreamweaver, Adobe's program will often do much of the work for you in "design mode". You should use these codes in "code mode" in Dreamweaver, or a raw-HTML editor such as Notepad or Text Editor. Dreamweaver is an excellent program, however it will not always work 100%. With HTML coding knowledge, a website developer can understand how to analyze and fix the problem. No matter what version of HTML or XHTML one uses, < and > are used to specify that text being typed is code. All codes have the ability to be used together to acheive certain effects, however they must all have their own <> (beginning tags) and </> (ending tags).
Note on XHTML vs HTML
Professional website designers often like to code using XHTML, a coding that is like HTML except that it is much more "strict" in following the rules. This overview is meant for the beginner to intermediate website developer, so not much time will be spent on XHTML. To learn more about this, visit W3's XHTML Basics page.
HTML at the Top
Every page made in HTML requires certain tags (codes), to let the Internet know that a website page is loading. The order of these tags matter. The order in which this tutorial reads is how the average HTML website coding should be.
DOCTYPE
This tag does what it sounds like it should- say what type of document the page is, in addition to a few more attributes. For the vast majority of any website project, a DOCTYPE example would be:
The !DOCTYPE tells the Internet that this page is coded with HTML. It is public, rather than private. The //W3C// & http://www.w3.org/ coding justifies that this website should follow the standards set by W3C HTML 4.0 language. The .dtd file is literally the "dictionary" for all HTML vocabulary so the Internet knows how to translate into the graphic interface visitors see.
HTML
The tag <html> is used to say that your website page does indeed use the HTML language. The basic tag is required in HTML, and in XHTML, a little more is required. For the sake of our example, let's stick with:
Meta Tags
Meta tags provide additional information about your website page that are fed to your visitor's browsers and search engines such as Google. Search engines have their own "robots" or "spiders" that constantly surf the web and archive data about the websites they visit. They use the metadata to translate the results during searches. By making this data precise, your visitors will be able to search your pages much more easily. A basic example is below:
This lists a description of the website, the keywords that should pop-up in a search, (each separated by a comma with no space), the author of the page, and what type of character encoding the page contains. Only edit between the parentheses. Also, most pages do not need a different character encoding unless they are typing in a non-roman alphabet.
Head Tag Attributes
The head tag starts the begining of the actual coding for the website. The basic version is just:
Title
If you guessed that this titles the website page, you would be correct! By entering this code, you can customize what the page title will be. In most modern browsers, this edits what the page tab is called at the top. In Dreamweaver's interface, the title can be easily changed at the top of any page. In code, simply edit between the start and end tags.
Javascript
Javascript is a dynamic programming language that has a variety of uses. Without going into much detail, let's just say that it can make your pages do more than HTML is capable of. Often times, Javascript will need to be placed within the head tags of the HTML document to work properly. A Javascript tutorial is currently in the works. In the meantime, here is an example of Javascript working to its maximum. The code is after the title, and before the ending of the HTML tag:
External & Internal CSS Stylesheets
You may have noticed in the Javascript example image that there is a bit of coding embedded that mentions a stylesheet. CSS stands for cascading style sheets, and deserve their own tutorial. In short, CSS controls a majority of the design aspects of website pages. It is often very useful to include one for your website page to pull coding from. External stylesheet files are the perfered options, as they don't add as much clutter to each page. They must be added before the end of the head tag and must be in a .css file-format. This same <link> tag may also be used for other advanced attributes:
Internal stylsheets are embedded in the head tags, and act exactly the same as external, except you must add them for every website page. A detailed CSS tutorial is in the works, but the following is an example:
Ending the Head Tag
Certain codes may require being placed in-between the head tags, such as Javascript. The above examples cover the basics. When these are in place, close the head tag:
The Body
The body of of any HTML page will by-far be the largest portion of the coding. It includes all of the coding that a viewer will recognize as the actual content of the page. Intuitively, the start of the basic body code is:
For the rest of this tutorial, some of the more common HTML body elements will be explained. However, tags such as <div> (dividing layers) and <table> (tables) often make up the core structure of any website template. These deserve their own tutorial and explanation.
Header Tags
There are many different options for header tags, however the most common is <h#>. The numbering normally starts at <h1>, being the largest of the sizes, and increasing numbers denote a smaller and smaller font size of the header. These need to be specified in a stylesheet before being used.
For example, the St. Olaf default template has five header styles predefined as seen in the photo on the left. This is a portion of the external stylesheet in CSS, the cascading stylesheet format. It tells the Internet that whenever the website designer uses the <h1> tag, a new header will be created with a font size of 18 pixels, a 10 pixel bottom margin of white space, with a line-height of 24 pixels on screen. To utilize this predefined style, simple use the appropriate "h" (for heading) and the corresponding number:
In Dreamweaver, it will know how to use your predefined styles as long as you specified them with external or internal CSS. In the bottom toolbar, you can set your text to type with the heading style by choosing the appropriate number in the format drop-down menu:
Paragraph Tags
This tag defines the text between it as a new paragraph. By default, most will not indent, however, that is customizable through the CSS. Normally, this will make a nice line break between the blocks of text. In Dreamweaver, simply use the same format drop-down menu and choose paragraph. In HTML the code is:
Line Breaks
These are very useful when you would like to separate text on different lines. Editors such as Dreamweaver will automatically add these when the user presses the return or enter key. In HTML code a line break is:
The line break is an empty tag because it does not need an ending tag such as </p>. A line break may also look like the following, especially when dealing with XHTML:
Font Color, Size & Family
Changing Font Color
Although most website designers control font colors, size and family through an external CSS sheet, it is also possible to change the color of distinct strings of text. HTML coding allows for the following colors to be typed with their English name or their Hex Color Code:
aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white (white) yellow
The other option is to use the color code. This works well to get an exact color on a website page. You can find these on a variety of websites, but you can also find them in Photoshop or Dreamweaver by using the color-picker tool. To use this in Dreamweaver, click on the box of color next to the font size and bullet options. A box of colors will then pop-out. Choose any of these, or hover over any of your website typing space to have the color picker come alive. Just click to get the color of the object that the color picker is hovering over:
The process is almost identical in Photoshop-- double-click on either color in the color palette, hover over a part of an image, and click once to grab the color number. When coding by hand, copy the color number into the following code:
Notes: The font hex code is always six characters in length, a combination of numbers and/or letters, following a # sign. Letters are not case-sensitive. The above font names for HTML coding are the only officially supported names for cross-browser compliancy, however, others may work. It is recommended to use a color code whenever possible. For a master list of the most common hex-codes, download and print this image.
Changing Font Size
For a quick font-size change outside of CSS, HTML coders may specifiy a size on a scale of 1-7. The default size is 2 or 3, (depending on screen resolution), which is about 11 pixels. Dreamweaver users have the option to change size with a variety of options in the formatting toolbar, which are often more stable for different screen sizes.
1 2 3 4 5 6 7
Changing Font Family
This is also known as a font-face. A string of text may also have it's font family changed outside of CSS by using HTML. In theory, HTML coding will accept any kind of font in the coding below. However, the website visitor needs to have the font installed on a computer in order to view the text correctly. Because of this, the standards of HTML accept the following font families:
Generic Family Font Family Serif Times New Roman Georgia
serif
Sans-Serif Arial
Verdana
sans-serif
Monospace Courier New
Lucida Console
monospace
Cursive Comic Sans
cursive
Fantasy Impact
fantasy
Notes: The font names are not case-sensitive. The generic family name are most safe for any browser. It is always a good idea to have a backup font by using the comma to list multiple. Always use CSS whenever possible for all font changes.
Change Color, Size and Family Together
It's very easy to change all major font-style attributes of text at once. For example, text that looks like this is cursive, with a font color of #10a625 and a size of 4.
Font Emphasis and Organized Lists
Making Text Bold
Making a string of text bold may be one of the most common elements of changing the body styles with HTML. In previous coding, it simply was <b>..</b>, however, the new style uses strong instead:
Making Text Emphasized (Italicized)
In Microsoft Word, this same effect is called italics, however HTML now refers to this as emphasized text. In past versions, the <i></i> code denoted emphasized text. Dreamweaver uses the i button on the format toolbar to make italicized/empahsized text. To be compliant with current and future versions of HTML, use the "em" instead when coding by hand -- it is short for emphasized.
Subscript and Superscript
These tags act like their word-processing counterparts and will make text half a character above (superscript) or below (subscript) the baseline. Subscripts are useful in math equations such as x2=y6, and superscipts are often used for footnotes or endnotes such as "so said Robert Smith[1]".
Strikethrough and Edited (Underlined) Text
This tag is useful when a string of text has been
deletedor edited, but the original should be shown as a reference. In older versions of HTML, the strikethrough tag was <s> or <strike> and the underline was the simple <u>. It now is refered to as delete and insert. Both do not necessarily have to be used near each other.
Bulleted (Unordered) Lists
Just as it is called, this tag will make a bulleted list, i.e. one that does not have numbering. Thus, ul stands for unordered list, and li stands for list item. There is no limit to how many list items. Indentation and bullet shape is controlled by CSS. Dreamweaver has this in the formatting toolbar. The browser interprets the coding as such:
- List Item 1
- List Item 2
- List Item 3
- List Item #
Numbered (Ordered) Lists
This is the same idea as the bulleted list, except that it is numbered.
- Number 1
- Number 2
- Number 3
- Number #
Hyperlinks
Basic Hyperlink
The most basic version of a hyperlink, (also simply called a link), consists of the following tag:
The result is: St. Olaf MDC. The a denotes the following text as an anchor, metaphorically, the place to land. The next part of code, href (hypertext reference), tells the location. Links are one of the most common and customizable elements of HTML. Colors and other styles should be changed through CSS. Again, Dreamweaver users will use the formatting toolbar. Simply highlight a string of text and enter the URL in the "link" field.
Targeting Links
A useful addition to the basic hyperlink code is to tell in what page the "anchor should land". By default, a link will open in the same window. However, this kind of link opens in a new window (or tab for many browsers). There are also options such as _parent and framename for websites that use frames as a way to display information.
In-Page Anchors
For longer website pages, it is a wise idea to have an in-page navigation. For example, the bottom of this page has a link to go back up to the top. There are two steps to this process. First, choose where the visitor is taken, a different place on the same page. The place for a "top" anchor should be directly after the <body> and uses both the name and id tags:
Notice that nothing is between the <a></a> tags. Also, the redudancy with name and id is needed for cross-browser and HTML version compliancy. The second step is to make a string of text be the link to the top. Dreamweaver users enter #name into the link field.
Embedding Images
Images are a nice way to add more information to your pages. There are many additional attributes that are optional for images, however these should be specified in CSS. There are two elements required for every image in HTML, src (source) and alt (alternative text). The source is the URL of the image, and the alternative text is much like a hover-over caption. The border element is common in HTML, however it is preferred to be in CSS.
That code will result in the logo seen on the right. It is a .jpg image, with the alternative text of MDC with no border. The border number can be changed to almost any number within reason. The number denotes how thick of an overall border, in pixels. The source code can handle almost any type of image file, but the most compliant are .jpg, .jpeg, .gif, .png and .bmp.
Alignment of an image can be specified using the align="--" tag. The alginment choices are left, right and middle.
Wrapping It Up
Ending Tags
For almost every tag, it will have a beginning and an end. If the tags do not have a closing, the entire page may become unusable. All tags that have a closing tag except for body and html should end directly after the desired string of text. A </> denotes an ending tag. For example, at the end of each paragraph for most website projects, a </p> is needed. Tags such as the line break and image code are empty, meaning they do not need a true beginning or ending tag. At the end of the website HTML, the ending tags tell the browser to cut off the page.
Ending Notes
This marks the completion of the HTML 4.0 overview. This tutorial was developed mainly as an aid in understanding the foundation of the HTML language, and how WYSIWYG (what you see is what you get) editors such as Dreamweaver, translate their coding. HTML is a vast language, with more rules and vocabulary than listed on this page. For a master list of everything, consider reading W3C's website. This is very "techy", so also try reading W3Schools HTML tutorials. After learning basic HTML, expand on your skills and incorporate other languages such as CSS, Java and PHP. If you have further questions, please email us at mdc@stolaf.edu.