HTML Basics HTML (hypertext markup language) is the official language of the web. An HTML document consists of only text - the main text of the document and special instructions, called tags. Most tags have beginning and ending tags with each tag surrounded by angle brackets < >. A closing tag would look like: . The extension for HTML documents created in Windows 95 is htm(l). HTML Editors An HTML editor provides a visual way of creating web pages. MS Word 97 and Netscape Composer, uses WYSIWYG-what you see is what you get. Well almost. Some elements are changed or removed upon conversion to an HTML document. Some popular HTML editors include Hot Dog, Netscape Composer, and Front Page. Advantages- automatically enters tags for you, little knowledge of HTML is needed Disadvantages-may change upon conversion to HTML, offers you less control of your web page (see
Netscape Composer
List of HTML editors-http://sdg.ncsa.uiuc.edu/~mag/work/HTMLEditors/windowslist.html Text Editor A text editor is a program used to create and edit documents that contain only text. Examples are Notepad and Word Pad in the Microsoft Suite. You enter the information first, then add HTML tags to define how you want it to appear on the Web. A web browser is used to view the completed work.
Notepad
Georgia Perimeter College/OIT
1
09/23/08
HTML Source When browsing though the Web, you may find a page you really like. You can use Netscape (or other Web browser) to view the HTML tags the author used to create the page. This is a good way to find improvements to your web page. When using Netscape Navigator, choose View Page Source. The HTML source code allows you to view the HTML code of any page on the web. Remember, when you are saving the HTML code from a remote location, your browser will not retrieve the inline saved images (graphics). To save an inline image, right click the image and choose the Save As option.
To View the HTML Source (Using Netscape Navigator)
1. 2. 3. 4. 5. 6.
Find a web page you like Go the View menu Page source Highlight appropriate tags Control C (copy) Find appropriate place to place the HTML tag Control V to Paste into your web page.
*You probably will be pasting the HTML code in Page Composer, Word, or Notepad. Common Basic Tags Beginning Tag
<Body> <P> <BR>
Ending Tag </HTML> </HEAD> No ending tag
Function Starts/Ends Document Indicates start/end of title bar Provides start/end of title of Web page Contains contents of the document Starts/Ends a new paragraph Line break
Text Style Tags Beginning Tag
Function Bolds text Italicizes text Underlines text Monospace text (use instead of underline) Header size (n=1-6) 6 is the smallest Centers specified text Preformatted Text Specifies a default font size Logical emphasis Bibliographic Citation All uppercase formatting Specifies font attributes
Georgia Perimeter College/OIT
2
09/23/08
Text Styles (con't
Specifies font attributes Size of text ranges from 1-7, 7 is the largest Typeface "Arial or Times", etc. Color of text or RGB color value
For example: This text
For a complete listing of RGB colors see http://www.infi.net/wwwimages/colorindex2.html.
Lists Tags Beginning Tag -
-
TYPE=type START=x TYPE=shape ="url">
Ending Tag
--> No ending tag
Function Definition description Lists a definition Lists the term List Item Ordered list (numbered) Numbered lists such as, A, a, I, i, 1 Starting number of ordered list Unordered (bulleted list) Shape of bullet, circle, square, disc. Personal comments Inserts a graphic from a remote web server
Special Character Tags Character < > a a n a
HTML Code < > á à ñ ä
Meaning Less than Greater than Acute accent Grave accent Lowercase n with a tilde Lowercase a with umlaut
One additional special character is the nonbreaking space. This is nbsp; and allows you to force multiple spaces between items. Use notepad to enter the following example. Ex. One way to understand a nonbreakingspace is to use a sentence. If you wanted to add a space between "nonbreaking" and "space" above you would write the HTML code as follows: One way to understand a nonbreakingnbsp;space …………The nbsp; will automatically add one space.
Georgia Perimeter College/OIT
3
09/23/08
Links/Pointer Tags HREF="url" ![]()
="url"> 
No ending tag No ending tag
Anchor tag Pointer to a hyperlink reference Inserts a graphic from a remote web server Image Tag Source to the graphic Alternative text display Alignment surrounding the image, ex. top, middle, bottom, left, right Height in pixels (of graphic) Width in pixels (of graphic) Additional vertical space around graphic
A mailto link allows visitors of your web site to send you questions or comments. Usually a mailto link is placed on your home page. Ex. w/ text hyperlink
Please send comments or suggestions to A HREF="mailto:jsmith@gpc.peachnet.edu>jsmith@gpc.peachnet.edu Ex. w/graphic hyperlink
Please send comments or suggestions to A HREF= "mailto:jsmith@gpc.peachnet.edu">
Miscellaneous Tags
"RGB"> ALIGN=LEFT
No ending tag No ending tag
Define's a footer (use
first Horizontal Rule Defines Body color such as "Red, blue, etc" *
Alignment may be left, center, right, etc. For blinking text
*For listing a of RGB colors see: http://www.infi.net/wwwimages/colorindex2.html For a complete HTML overview, visit the training web page at: http://www.gpc.peachnet.edu/~training/info.htm. Select the HTML hyperlink.
Georgia Perimeter College/OIT
4
09/23/08