.jpg)
.jpg)
.jpg)
NOTE: This is a collection of information and links collected over the years that might provide useful information. A Safer Company LLC does not guarantee, endorse or approve any of these links or their scripts. Use these links to other websites at your own risk.
Getting started with HTML
HTML
stands for Hyper Text Markup Language. It
is a markup language which uses markup tags.
Have you ever seen HTML code? Did you know that you can view the source code of most web pages? In Internet Explorer go to <Page> <View Source> in the menu bar.
At first glance, HTML can look very confusing, but if you take it step by step, you will be able to write HTML code for a web page.
Browser
You will need a browser to view your HTML code. This is the fun part where you get to see what your HTML code does.
Editor
To develop a website you will need some type of editor to use to create the code.
You will need an editor to start writing HTML code. There are many editors that can be used. It can be as simle as using Windows NotePad or Mac TextEdit.Depending on how much you know about HTML and how much you want to pay will help you determine which editor is best for you. Free and Purchase Editors
Mac Users NOTE: Mac users need format your document as plain text before it can be saved with the .html extension. In TextEdit, it can be set in the Format menu's Make Plain Text option.
To open a HTML file in your editor, go to File Open and find the location of your website folder and select the file to open.
Storing Your HTML Files
You will be creating or coding HTML files and you need somewhere to store the HTML file that you create. It can be on your computer, a flash drive (memory stick), or a read/write CD.You will want to put all of the files for your website on a folder to make it easy to find your files and to upload them to your web hosting.
I suggest making a folder called website. In Windows Vista, this is how it will look.
The website folder will be the place you store all of your website files. Now make another folder and call it images. This will be the folder where you store all of your images.
Go to My Documents and change to the location of your website folder. Double click on your file to open it in your default browser.
HTML Elements
HTML is made up of HTML elements which starts with a start tag and ends with an end tag and the element content is everything between the start and the end tag. Some HTML elements have empty content and are closed in the start tag.
- Most HTML elements can have attributes
General Rules for HTML Elements
- must be spelled correctly
- must be wrapped around the text
- cannot cross over other tags
For example: <p>this is my first <strong>paragraph</strong></p>
For example this code will not work correctly: <p>this is my first <strong>paragraph</p></strong>
Paragraphs
The paragraph tag is <p>. The paragraph starts with the <p> and then the paragraph ends with the </p> which is the ending tag.
<p>This is my first paragraph. It may have many sentences in it or just one sentence. It may also cover several lines in my editor or it may just be on one line. A web page may have many paragraphs.</p>
Bold Text
You can make your text bold by using the <strong>Strong tag</strong>
<strong>Strong tag</strong>
Title
The title appears at the very top of the browser page in the window caption bar. The title does not appear in the actual web page, but it is very important to search engines. It also helps users to find the page if they have several pages opened in different browser windows.
<title>This is the Title of My Page</title>
Headings
Headings are used to help format a document. Headings can be added to different sections of a document to let the reader know that they are starting a separate section. They also make a document easier to read. By using headings, the document easier to maintain consistency of fonts, colors,font sizes, background colors and positioning. You may have used headings in Microsoft Word. HTML has six levels where H1 is the most important, H2 is the a little less important and continuing to H6 which is the least important.
<h1>An important heading</h1>
<h2>A slightly less important heading</h2>
<p>This is the first paragraph.</p> <p>This is the second paragraph.</p>
Line Breaks
To force a line break, you use the <br /> tag.
<p>This is the first part of the sentence or paragraph<br />
this is the second part of the sentence.</p>
The br element never needs an end-tag. Elements that don't take end-tags are known as empty elements.
Italics
The <em></em> tag is used to italicize words.
<em>These words are italicized.</em>
Horizontal Rule
A horizontal rule is a single horizontal line using the <hr> tag. It can have a width either in pixels or percentage.
<hr width="60%" />
Comments
It is a good idea to add comments to a web page especially when you are first getting started.
<!-- Comment Goes Here -->
Blockquote
The blockquote indents the right and left side of the text. Blockquote can be used to emphasize a block of text.
<blockquote>this text is indented </blockquote>
Bullets Lists
Just like in MS Word, you can use bullets in HTML code.
- HTML uses unordered list or the <ul> </ul> tag.
- The list starts and ends with these tags.
- Each item in the list has the <li></li> tag.
<ul>
<li>first bullet</li>
<li>second bullet</li>
<li>third bullet</li>
</ul>
Numbered Lists
Just like in MS Word, you can use numbered list in HTML code.
- HTML uses ordered list or the <ol> </ol> tag.
- The list starts and ends with these tags.
- Each item in the list has the <li></li> tag.
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
Images
Images can be used to make your website interesting and they can also be informative. They can be in the format of .jpg, .gif or .png files. You can get digital images from a digital cameras, a cell phone camera or scanning an image. You can design images in MS Word or Adobe Photoshop. Since digital cameras have very high and very good resolution, you may need to reduce the size of the image for your website. Larger files take longer to load to a website.
<img src="ASC.jpg" width="200" height="150" alt="A Safer Company Logo">
- src - names the image file
- The width and height are not required but help to speed the display of your web page. Width and Height are are specified in pixels. Dreamweaver and Photoshop are pixel-based programs and Flash and Illustrator are vector-based programs.
- alt = "A Safer Company Logo" - gives the short description of the image or a text label for the image and is used if you do not load images to your web pages and by people who can not see the image and use screen readers.
- align="left" - image will be placed on the left side of the page and the text will flow around the right side of the graphic
- align="right" - image will be on the right side of the page and the text will flow around the left side of the graphic
- border ="2" - puts a 2 pixel border around the image.
Links to Other Pages
Web pages link to pages with the same website or to other website pages.
Please click <a href="MoreInformation.html">this link</a> to get more information.
The <a> tag starts the link and the </a> ends the link. Lets define a link to the page defined in the file "peter.html" in the same folder/directory as the HTML file you are editing:The text between the <a> and the </a> is used as the caption for the link. It is common for the caption to be in blue underlined text.
File Locations/Directories
Same Folder
If a file that you are using is in the same folder as the HTML page then you can use the file name.
<img src="ASC.jpg" width="200" height="150" alt="A Safer Company Logo">
Please click <a href="MoreInformation.html">this link</a> to get more information.
Parent Folder
If the file is in a parent folder, put ../ in front of the file name. This tells the browser to go up one folder.
<img src="../ASC.jpg" width="200" height="150" alt="A Safer Company Logo">
Please click <a href="../MoreInformation.html">this link</a> to get more information.
A Folder
If the file you are linking to is in a folder, put the name of the folder followed by / in front of the file name.
<img src="foldername/ASC.jpg" width="200" height="150" alt="A Safer Company Logo">
Please click <a href="foldername/MoreInformation.html">this link</a> to get more information.
Folder off the Root
If the file you are linking to is in a folder off the root folder, put / and the name of the folder followed by / in front of the file name.
<img src="/foldername/ASC.jpg" width="200" height="150" alt="A Safer Company Logo">
Please click <a href="/foldername/MoreInformation.html">this link</a> to get more information.
Relative Paths
The use of relative paths allows you to link to a file by walking up and down the tree of directories as needed.
<a href="../contactus/address/ASCaddress.html">ASC Address</a>
This example will look in the parent folder for another folder named "contactus", then will look in the folder at named "address" for a file named "ASCaddress.html".
Another Website
To link to a page on another website you need to give the full web address or URL.
This is a link to <a href="http://www.asafercompany.com/">A Safer Company LLC</a>.
Linking with Images
An image can be used to link to another page.
<a href="/"><img src="/images/ASC.jpg" alt="A Safer Company Home Page"></a>
This uses "/" to refer to the home page. The home page is usually index.html but can also be other pages.
HTML Structure
The basic HTML structure should be set up to help your web page be found by search engines.
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML code usually starts with a declaration of which version of HTML has been used
- <html xmlns="http://www.w3.org/1999/xhtml"> <html> tag
- <head> starts the head section for the browser and included things like the title, style sheets or css, javascript or other scripts and meta tags
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> meta tag
- <meta name="Description" content="This is the description that SEARCH ENGINES sometimes displays" /> meta tag for the description of the page and needed for search engines.
- <meta name="Keywords" content="These are the keywords that search engines use" /> meta tag for the keywords of the page and needed for search engines
- <title>Untitled Document</title> Title tag
- </head> Ends the Head tag
- <body> contains the HTML code when will be displayed on your web page
- your HTML Code
- </body>
- </html>
You can copy and paste this code into your text editor to get started.
Tables
Tables can be used to group information. Note: Tables should not be used for the layout of your website.
Tables are made up of cells that are arranged into rows and columns.
Tags
- <table></table> define the table REQUIRED
- <tr></tr> a container for each table row REQUIRED
- <td></td> - container for each cell or the table details
- <th> </th> - containers for heading or table heading
Table Element Attributes:
- width="80%" - width of the table and can be a % or pixels
- width="100%" will fill the margins
- width="400" - the table will be 400px wide.
- if the width is not specified, the browser to automatically size the table to match the contents
- border="1" - the border around the table and cells. For no border use border="0".
- cellpadding="3" - the number of pixels between the contents of a cell and the cell border.
- cellspacing="0" - the number of pixels between cells and the border.
| Subject | Grade |
|---|---|
| Web Design | A |
| Perl Programming | A |
<table border="1" width="200" cellpadding="3" cellspacing="0">
<tr>
<th width="185"><p>Subject</p></th>
<th width="107">Grade</th>
</tr>
<tr>
<td>Web Design</td>
<td>A</td>
</tr>
<tr>
<td>Perl Programming</td>
<td>A</td>
</tr>
</table>
Text Alignment within Cells
Use the align attribute to change the default alignment. The valign attribute aligns the data vertically.
- align="right"
- align="left"
- align="center"
- valign="top"
- valign="middle"
- valign="bottom"
<td align="right" valign="bottom">
Empty Cells
An empty cell will need to have the special character for a space so the border of the cell are displayed.
<td> </td>
Cells that span more than one row or column
Columns or rows can be spanned.
- colspan="2"
- rowspan="2"
<th rowspan="2">Course</th>
| Course | Grades | ||
|---|---|---|---|
| John | Sally | Lily | |
| Web Design | A | B | C |
| Perl | B | A | C |
Linking to a Section of a Web Pages
There are reasons that you may have a long web page. For example this web page is fairly long and notice the links to go to the top of the page and the index or table of content at the top of the page. It is good to divide web pages into sections using headers to make a page easier to read. For example:
<h2>Linking to a Section of a Web Pages</h2>
Anchor
To link to this section of a web page, you must place an anchor at the location you want to link to.
<h2><a name="LinkingSection" id="LinkingSection"></a>Linking to a Section of a Web Pages</h2>
- name="LinkingSection"- The name attribute specifies the name you will use to identify the link target.
Link
Once you have set up a anchor, you can link to it.
- Linking to a Section of a Web Page - The index or table of contents on the same page can now link to this anchor. The # character is needed before the target name.
<a href="#LinkingSection">Linking to a Section of a Web Pages</a> - Linking to a Section of a Different Web Page -
<a href="/directoryPath/filename#LinkingSection">Linking to a Section of a Different Web Page</a>
Non-breaking Spaces
To prevent the browser from wrapping text use in place of the space in the code.
This is the name of the company: A Safer$nbsp;Company.
Use CSS to indent text instead of using repeated non-breaking spaces.
Other HTML Tags
These are examples of other HTML tags.
- <em>emphasis or italics</em>
<code>This is an example of code.</code>- <var>This is an example of variable</var>
- <sample>This is an example of sample</sample>
- <kbd>keyboard</kbd>
- <cite>citation</cite>
- <delete>
deleted</delete> - <ins>inserted</ins>
- <dfn>definition</dfn>
- <abbr title="A Safer Company">ASC Abbr- mouse over this code to see what it does.</abbr>
- <acronym title="test" lang="asc">acronym</acronym>
Special Characters
Special characters may not appear on your keyboard. For example: copyright or trademarks. These characters will have to be added to the HTML code using the special character listed below:
| Accented Characters and Miscellaneous Symbols | |||||
|---|---|---|---|---|---|
| Symbol | Special Characters | Latin-1 character set | Symbol | Special Characters | Latin-1 character set |
| Copyright © 2009 ASC | © | © | < Less than | < | |
ASC ® |
® | ® | > Greater than | > | |
| ¼ | ¼ | ¼ | ÷ | ÷ | ÷ |
| Trademark ASC™ |
™ | ™ | ± | ± | ± |
| ½ | ½ | ½ | ¶ | ¶ | ¶ |
| ¾ | ¾ | ¾ | em dash — | — | |
| nonbreaking space | |   | & (Ampersand) | & | |
| quotation mark " | " | ||||
| Other | |||||
| ¡ | ¡ | ¡ | Ô | Ô | Ô |
| ¢ | ¢ | ¢ | Õ | Õ | Õ |
| £ | £ | £ | Ö | Ö | Ö |
| ¤ | ¤ | ¤ | × | × | × |
| ¥ | ¥ | ¥ | Ø | Ø | Ø |
| ¦ | ¦ | ¦ | Ù | Ù | Ù |
| § | § | § | Ú | Ú | Ú |
| ¨ | ¨ | ¨ | Û | Û | Û |
| ª | ª | ª | Ü | Ü | Ü |
| « | « | « | Ý | Ý | Ý |
| ¬ | ¬ | ¬ | Þ | Þ | Þ |
| | ­ | ­ | ß | ß | ß |
| ¯ | ¯ | ¯ | à | à | à |
| ° | ° | ° | á | á | á |
| ² | ² | ² | â | â | â |
| ³ | ³ | ³ | ã | ã | ã |
| ´ | ´ | ´ | ä | ä | ä |
| µ | µ | µ | å | å | å |
| · | · | · | æ | æ | æ |
| ¸ | ¸ | ¸ | ç | ç | ç |
| ¹ | ¹ | ¹ | è | è | è |
| º | º | º | é | é | é |
| » | » | » | ê | ê | ê |
| ¿ | ¿ | ¿ | ë | ë | ë |
| À | À | À | ì | ì | ì |
| Á | Á | Á | í | í | í |
| Â | Â | Â | î | î | î |
| Ã | Ã | Ã | ï | ï | ï |
| Ä | Ä | Ä | ð | ð | ð |
| Å | Å | Å | ñ | ñ | ñ |
| Æ | Æ | Æ | ò | ò | ò |
| Ç | Ç | Ç | ó | ó | ó |
| È | È | È | ô | ô | ô |
| É | É | É | õ | õ | õ |
| Ê | Ê | Ê | ö | ö | ö |
| Ë | Ë | Ë | ø | ø | ø |
| Ì | Ì | Ì | ù | ù | ù |
| Í | Í | Í | ú | ú | ú |
| Î | Î | Î | û | û | û |
| Ï | Ï | Ï | ü | ü | ü |
| Ð | Ð | Ð | ý | ý | ý |
| Ñ | Ñ | Ñ | þ | þ | þ |
| Ò | Ò | Ò | ÿ | ÿ | ÿ |
| Ó | Ó | Ó | |||
Page last updated: May 31, 2012 10:27 AM
Content and Navigation...