Professional Documents
Culture Documents
THE BASICS
WORKSHOP DESCRIPTION
This workshop covers the explanation and basics of HTML. Participants will gain a better idea of how HTML is used to create a Web page and will gain an understanding regarding the rules and conventions that must be followed when developing any Web page in HTML. In addition to learning HTML syntax, participants will learn how to format text in HTML, and learn how HTML is used to create a hyperlink and include images on a Web page.
PREREQUISITES
Accessibility workshop and an understanding of Windows 95 or higher or Mac OS 8 or higher, basic computer skills, knowledge of the Web, and basic Web browser skills.
OBJECTIVES
Participants attending this workshop will: Learn how HTML is used and the importance of learning it. Create a new Webpage utilizing basic HTML commands. Format text using various HTML commands. Link to other Web site files. Include an image in a Web page
The exercises in this document require files distributed during the workshop. Please make sure that you have a copy of these files.
Spring 2006
TABLE OF CONTENT
An Introduction to HTML (Hypertext Markup Language)......................................... 3 But what is XHTML? ............................................................................................ 3 How is HTML used? ............................................................................................ 4 Why is HTML important? ..................................................................................... 4 Anatomy of an HTML Tag......................................................................................... 5 Attributes.............................................................................................................. 5 Values.................................................................................................................. 5 Nested Tags ........................................................................................................ 5 Structure of an HTML File ........................................................................................ 6 Head Section ....................................................................................................... 6 Body Section........................................................................................................ 7 Editing an Existing HTML File Using a Text Editor................................................ 8 Saving an HTML File................................................................................................. 9 Viewing an HTML File Using a Browser................................................................ 10 Exercise 1 Basic Web Page Structure ........................................................ 11 Page Properties ...................................................................................................... 11 Exercise 2 Give Your Web Page Properties ............................................... 12 HTML Tags Basic Tags for Text Format & Appearance ........................................ 12 Some Basic Tags............................................................................................... 12 The Font Tag ..................................................................................................... 13 Exercise 3 Text Appearance: Basic Tags ................................................... 14 Spacing.............................................................................................................. 15 Alignment........................................................................................................... 16 Exercise 4 Text Appearance: Spacing & Alignment................................. 17 Other Tags......................................................................................................... 18 Exercise 5 Text Appearance: Headings and Horizontal Rules ................ 19 Hyperlinks ............................................................................................................... 19 Creating a Hyperlink ............................................................................................... 20 Hyperlink Types ................................................................................................. 20 Exercise 6: Hyperlinks ................................................................................... 22 The Image Tag......................................................................................................... 22 Using an Image within a Web page ................................................................... 23 Exercise 7: Using Images in a Web page ..................................................... 24 Testing Your Pages in Different Browsers ........................................................... 25 Exercise 8 Web Page Testing ...................................................................... 25
Spring 2006
Note: Throughout the rest of this document we will use the term HTML to refer to the markup languages HTML and XHTML.
1
Castro, E. (2003). HTML for the World Wide Web, Fifth Edition, with XHTML and CSS: Visual QuickStart Guide. 3 Spring 2006
HTML is not hard to learn or master. It is much more an exercise in careful typing and consistency than in mind blowing, complicated procedures.2
Castro, Elizabeth, HTML for the World Wide Web. 1996. Peachpit Press, Berkeley, CA. P. ix. 4 Spring 2006
<strong> Bold text </strong> Attributes Many tags have special attributes that offer a variety of options for the contained text. The attribute is entered between the element word and the final greater than symbol. Tag attribute <font face=arial > Values Attributes also have values. These values are the parameters by which the attributes behave (the value of the attribute defines the attribute). Values should be enclosed in quotation marks. Tag attribute value <font face=arial > The text affected by this particular FONT tag will be displayed using an Arial font-face. Nested Tags You may want to modify your page contents with more than one tag. For example, you may want to add bold formatting to a word within a particular font tag.
A
Here order is everything. Whenever you use a closing tag it should corresponding to the last unclosed opening tag. In other words, first A then B, then /B, and then /A.
Spring 2006
The head and body sections are contained within the opening html tag and the closing html tag. The Doctype declaration is found at the beginning of every XHTML file. It is the only tag that can contain uppercase text.
Head Section Contains the title of the webpage and information pertaining to the entire Web page. Contains any meta tags. The meta tag shown in the example below is required in all XHTML files. Nothing in the head section is visible in the browser window except for the title, My Webpage that is found between the title tags (<title>My Webpage</title>).
Type <head> to begin the head section
The title goes between the title tags. Type </head> to end the head section.
Spring 2006
Body Section Contains the file contents that are visible in the browser window. In other words, whatever you find within the body tags is what you will see in the browser window!
Type <body> to begin the Web page content section. Type </body> to close the Web page content section.
Viewed in its entirety using a browser, the Web page would look like this:
The Web page title contained within the head tags. The content contained within the body tags.
Spring 2006
ii. Using the Open dialog box, browse for the HTML file that you would like to open. When you have found the file, click the Open button. b. If you are using TextEdit: i. Click File > Open. Locate your HTML file using the Open dialog box. ii. Click the Open button in the lower right-hand corner to open the file in TextEdit. Step 3. Once your file is opened as a text file, you can edit the HTML code. Step 4. When you have finished editing your file, save it by clicking on File > Save or File > Save As. The file will be saved as HTML by default. As a shortcut, you can edit HTML files by right-clicking (or Ctrl+click on a Mac) on the HTML filename. From the right-click menu, go to Open With > Notepad or Open With > TextEdit.
Remember there are two methods of opening an HTML file from an Internet browser or from a texteditor.
Spring 2006
Choose where you want to save your file. Name your file your_file.htm where your_file is the name of your choice. Click Save.
NOTE: If you are saving an HTML file for the first time, and are using a Windows machine, you must select all files next to the save as type field. If you miss this step, your file will be saved as a text file [.txt extension].
Spring 2006
Netscape Navigator
In Internet Explorer click on the Browse button; choose the file on your computer that you would like to view.
Browse button
On Netscape, click on the Choose File button; choose the file on your computer that you would like to view.
Choose File button
10
Spring 2006
Exercise 1 Basic Web Page Structure Exercise 1 Basic Web Page Structure
In this exercise, we will work with a basic HTML file. 1. From the workshop folder named HTML Basics on your desktop, open the file, template.htm in Notepad or TextEdit. 2. Identify the structure tags and the different section that each tag identifies or belongs to. The most important section to recognize is the BODY section <body> </body>. Any content that you want displayed on your Webpage will be entered between these two tags which identify the body section. 3. Type a title for your page between the title tags (<title> </title>). 4. Type some text between the body tags (<body> </body>). 5. Using the Save as option on the File menu of the text editor you are using, save your file in the HTML Basics folder. Give your file the name structure.htm. 6. View your file in the browser window.
Page Properties
Page properties refer to elements such as page background color, text or link color. These properties are established within the opening body (<body>) tag. Example: <body bgcolor=yellow text=gray> The <body> tag above is read by the browser to produce A background color of yellow (bgcolor=yellow) Gray body text
Color values can be represented by any of the 16 named colors or a hexadecimal color-code (shown in example). For further information on color values, see the XHTML Essentials handout that has been provided to you as part of this workshop.
11
Spring 2006
Exercise 2 Give Your Web Page Properties Exercise 2 Give Your Web Page Properties
Using the file you created in the first exercise (structure.htm), add page properties to the body tag. To keep it simple, use the example of body background and text color given in this section. 1. If your file is not already open, open the HTML document from the first exercise, structure.htm in the text-editor youve been working in. 2. Add page properties to the body tag (background and text color). 3. Save your file in the HTML Basics folder on your desktop. 4. View your file in the browser window. Advanced Experiment with different background colors using the color reference in the XHTML Essentials handout. Use both named and hexadecimal color values.
<em>Italics text</em> <strong>Bold text</strong> <u>Underlined text</u> (try not to use this tag)
Example:
<body> Recommended book: <em>XHTML for the World Wide Web</em>. Author: <strong>Elizabeth Castro</strong>. Edition: <u>5th edition</u>. </body>
12
Spring 2006
The Font Tag Within the font tag, the font size, face (arial, verdana, etc), and color can be set using font tag attributes. Font size: Font face: Font color: <font size=n> (where n is a number from 1 to 7) <font face=name> (where the face name is a system font) <font color=color> (where color can be any of the 16 named colors or a hexadecimal color-code see the XHTML Essentials handout)
Multiple attributes of a tag element can be combined: <font size=n face=name color=color>
Example:
<body> <font face="arial"> <font color="red">Request CSUS Web Account</font>: Faculty have a choice between four web accounts: Departmental Web account, Faculty Web account, SacLink Web account or a WebCT course account. </font> <font face="verdana" size="2" color="gray"> Any Questions? </font> </body>
13
Spring 2006
Exercise 3 Text Appearance: Basic Tags Exercise 3 Text Appearance: Basic Tags
The following exercises are based on the HTML file, index.htm, which can be found in the HTML Basics folder on the desktop. 1. Using the text-editor youve been working in, open the HTML file from the HTML Basics folder with the filename index.htm. 2. Format the following text using the HTML tags highlighted in this section: Format the first Web Accounts: using a size 5 font. These two words should also be bold. Within that same paragraph, italicize the second Web accounts and the term Web servers. Format the last sentence of the paragraph using a red font color. 3. Save your file in the HTML Basics folder. 4. View your file in the browser window. Advanced Add your own content using the HTML tags highlighted in this section as well as those referenced in the XHTML Essentials handout.
14
Spring 2006
Spacing Web browsers will ignore extra spaces and returns that exist between the tags in your HTML file. Browsers treat ALL spaces as one space. To represent spaces in an HTML file, the following tags are used. Paragraph: Line breaks: <p>A paragraph</p> (this tag will produce a double line-break) <br /> (notice that the opening and closing tag are contained within ONE tag)
Example:
<body> <p><strong><font size="4" color="red">Request CSUS Web Account</font></strong></p> Faculty have a choice between four web accounts: Departmental Web account, Faculty Web account, SacLink Web account or a WebCT course account. <br /> <strong>Any Questions?</strong> <p>Let's continue to Step 2: "Gather Materials..."</p> </body>
15
Spring 2006
Alignment Text within an HTML file can be centered, left justified, right justified or justified. Left justified is the default. Paragraph align: Division align: Block quote: <p align=position>A paragraph</p> (where position is left, right, center or justified). <div align=position>Content section</div> (where position is left, right, center or justified; can be used to align any webpage element). <blockquote>Block quoted text</blockquote> (the affected text is indented from both sides)
Example:
<body> <div align="center"> <strong><font size="5" color="red">The Web Process The Second Step</font></strong> </div> <p align="left"> <strong>Gather Materials:</strong> <blockquote>Assignments, Syllabus, Handouts, Textbook Info Images, Photographs, Data, etc.</blockquote> </p> </body>
16
Spring 2006
Exercise 4 Text Appearance: Spacing & Alignment Exercise 4 Text Appearance: Spacing & Alignment
Using the file youve been working with (index.htm), format the following content. 1. Format the following text using the HTML tags highlighted in this section: Insert an opening paragraph tag right before Building Your Website. Close the paragraph tag directly after the sentence that ends with here is what you will need: Insert the tag used for a line break directly after each of the comma-separated items to make each appear on its own line. Center the last two sentences (XHTML is picky) in the section using the division align HTML tag or the paragraph align tag. 2. Save your file in the HTML Basics folder on the desktop. 3. View your file in the browser window.
17
Spring 2006
<h1>Heading size 1</h1> (where h1 can be from h1 to h6, h1 being the largest; headings are always displayed in bold, with a blank line before and after) <hr width=90% /> (notice that the opening and closing tag are contained within ONE tag)
Horizontal rule:
Example:
<body> <h2><font color="red">The Web Process - The Third Step</font></h2> <strong>Create/Edit HTML documents:</strong> <p align="left"> <strong>Text Editors:</strong> Notepad, TextPad, SimpleText, Write<br /> <strong>Web Editors:</strong> Macromedia Dreamweaver, Microsoft Frontpage<br /> </p> <hr width="80%" /> </body>
18
Spring 2006
Exercise 5 Text Appearance: Headings and Horizontal Rules Exercise 5 Text Appearance: Headings and Horizontal Rules
Using the file youve been working with (index.htm), format the following content. 1. Format the following text using the HTML tags highlighted in this section: Format the line of text that begins Web Page Editing using the heading tag (size 3) HTML tag. On the line following the list, insert the HTML tag for a horizontal rule, using a width of 80%. 2. Save your file in the HTML Basics folder on the desktop. 3. View your file in the browser window. Advanced Play around with the attributes of the horizontal rule tag, referencing the XHTML Essentials handout as needed. Try using different heading sizes.
Hyperlinks
Hyperlinks are used to connect files that are on the Web or within a Web site. Hyperlinks can be clickable text or images within a Web page. The screenshot below represents a hyperlink that, when clicked, connects the user to another page within the same Web site.
19
Spring 2006
Creating a Hyperlink
There are two main parts to a hyperlink the destination and the label. Once the destination (URL) and label are determined, they are incorporated into an HTML file by using the anchor tag.
open anchor tag destination close anchor tag
Example:
When interpreted using a browser, the label portion is usually underlined to indicate that it is a hyperlink:
Hyperlink Types There are four categories of hyperlinks (links to outside pages, links within a Web site, email links and anchor links). We will be covering the two most common link types links to outside pages and links to pages within a Web site.
20
Spring 2006
#1: Links to an Outside Source The first type of hyperlink is one that points to a file located outside of your Web site.
root directory index.htm images banner.jpg Hyperlink within Web site to outside source. icon.gif week1 wk1_lesson1.htm wk1_lesson2.htm week2 wk2_lesson1.htm #2: Links Within a Web site
The second type of hyperlink points to a file located inside of your Web site.
<a href=../help/index.htm>Help</a>
NOTE: The sequence ../ is used to denote that the file is located one directory up from the current location.
root directory index.htm images banner.jpg icon.gif week1 wk1_lesson1.htm wk1_lesson2.htm week2 wk2_lesson1.htm All hyperlinks point to a file within the Web site.
21
Spring 2006
height
22
Spring 2006
width alt_text
The width of the image. This tag can be used to promote a faster download of the image. This attribute is NOT required. However, it should be included. (attribute of the <img> tag) the text that will be displayed by text Web browsers such as LYNX and used by screen readers. On some browsers, the text that appears within the alt attribute will display when the mouse cursor is held stationary over the image. The alt attribute contains a description of the image.
Additional tags include: Align border Used to align the text appearing directly after the image tag. Align can be set to left, right, and center. A border can be placed around an image. If you use your image as a link, you will need to set the border attribute of the image to 0 unless you want a blue border around your image.
Example using all of these attributes: <img src=images/picture.jpg width=200 height=230 border=1 align=left alt=Picture of children playing /> Using an Image within a Web page The image tag is inserted wherever you want an image to appear in your Web page. It is important to note that you are merely creating an image link that causes an image to appear on a Web page you are not inserting or embedding the image into the page. root directory index.htm image banner.jpg icon.gif When an image file is located within your Web site (or directory), the value for the src attribute of the <img> tag should be relative. One of the most common problems is when img src values are indicated in the absolute, like this: C://mydocs/images/smiley.gif.3 This will be a problem when the Web site is moved to a server. Here is an example of the src attribute using a relative URL for the image:
In Browser
This type of absolute path will only exist when the image file is located on the local computer..
23 Spring 2006
Okay, now it is your turn to try inserting an image that is located within your Web site directory
Exercise 7: Using Images in a Web page Exercise 7: Using Images in a Web page
Referring to the completed Web Design document you were given at the beginning of the workshop, insert the banner image at the top (using the file index.htm): Step 1. Insert the image of the Web Design banner located in the images folder in the HTML Basics folder (images/banner.gif). This image should appear in the same place as the one displayed on the Web Design handout. Step 2. Save your file using the same filename. Step 3. View the file using your Internet browser. Advanced Add in some of the other images located within the images folder. You can also visit the following Web address: http://www.csus.edu/web/campus.html. Read the instructions located at the top of the Web page to include the image(s) of your choice on your Web page. Explore the above-mentioned site a bit if you like. Use the hyperlink tag to make the Sac State banner image at the top of your page a link to Web Central (http://www.csus.edu/web).
24
Spring 2006
Netscape 6.2
25
Spring 2006