Understanding XHTML and the Web-Publishing Processatsadvweb.weebly.com/uploads/2/3/6/1/2361107/html_basics.pdf · Editing an Existing HTML File Using a Text Editor Since HTML files

HTML: 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.

The exercises in this document require files distributed during the workshop. Please make sure that you have a copy of these files.

• Include an image in a Web page

Academic Technology & Creative Services 1 Spring 2006

HTML: The Basics

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


HTML: The Basics

An Introduction to HTML (Hypertext Markup Language) HTML, or HyperText Markup Language, is the authoring language that describes how a Web page should be displayed by a Web browser. It has two essential features: hypertext and universality. Hypertext means when a visitor clicks a link on a Web page, the visitor is led to another Web page or document. Universality means that because HTML documents are saved as text files, virtually any computer can read a Web page.1

But what is XHTML?

XHTML, or eXtensible HyperText Markup Language, is a later version of HTML that includes additional standards set forth by the international organization called the World Wide Web Consortium (W3C). Both HTML and XHTML can be understood by most browsers, but for increased accessibility to your Web pages, we recommend using XHTML when creating your Web pages.

Below is an example of an HTML file that uses XHTML standards:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en" lang="en"> <head>

<title>"Understanding XHTML…" </title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head> <body>

<img src="images/ambitious.gif" width="150" height="150" border=0 alt="a hand raised up as if ambitious" align="right"> <h1>Welcome to "Understanding XHTML and the Web-Publishing Process"!</h1> During the course of this workshop, it is our intention to teach you how to read and create HTML tags, understand Web page structure, and build a Web page. 

</body> </html>

A basic HTML paragraph tag.

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.


HTML: The Basics

How is HTML used?

• The formatting “rules” (HTML tags) that are applied to content (a syllabus, for example) are interpreted by programs (browsers) designed to display Web pages as specified by the HTML.

Why is HTML important?

• HTML is the foundation of all Web pages. • For the same reasons we learn how to perform mathematical

operations long-hand before we use a calculator, learning HTML can be useful.

• Because HTML pages (Web pages) are really just text-files they can

be created with a simple text-editor (Notepad, WordPad, TextPad, SimpleText, Write). HTML editors may not always be available, warranting the use of a text-editor.

“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

2 Castro, Elizabeth, “HTML for the World Wide Web.” 1996. Peachpit Press, Berkeley, CA. P. ix.


HTML: The Basics

Anatomy of an HTML Tag HTML tags are pre-defined elements written between less than (<) and greater than (>) signs, also known as angle brackets. There is usually an opening and closing tag. The affected text is contained within the two tags. Opening tag Closing tag

 Bold text 

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



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

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

Affected text B

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.


HTML: The Basics

Structure of an HTML File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml: lang="en" lang="en"> <head> <title>My Webpage</title>


</head> <body> My webpage content </body> </html>

At the foundation of every HTML file is a set of structure tags that divide an HTML file into a head section and a body section. These two sections are enclosed between an opening <HTML> tag and end with the closing </HTML> tag. Following is a simple example of an HTML file that highlights the structure tags that are required within every XHTML file: Doctype

declaration Opening html tag

Head section

Body section Closing html tag

• 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.

<head> <title>My Webpage</title>


</head>

• 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.


HTML: The Basics

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 close the Web page content section.

Type <body> to begin the Web page content section.

<body> My Webpage content </body>

• 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.


HTML: The Basics

Editing an Existing HTML File Using a Text Editor Since HTML files are simply text-files, they can be edited using a text-editor such as Notepad (PC), WordPad (PC) or TextEdit (Mac). To open an HTML file for editing, it must be opened directly through a text-editor. To open an HTML using Notepad or TextEdit:

Step 1. Locate and open either Notepad (PC) or TextEdit (Mac).

Step 2. Open the HTML file in the text editor:

a. If you are using Notepad:

i. Click on File > Open. From the Open dialog box, using the Files of Type drop down menu, select All Files:

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 text-editor.


HTML: The Basics

Saving an HTML File This section only applies if you are saving a new HTML file. To Save an HTML file:

Step 1. From your text-editor, click File on the toolbar. Step 2. Click Save As…

Step 3. Choose where you want to save your file.

Step 4. Name your file your_file.htm where your_file is the name of your choice.

Step 5. 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].


HTML: The Basics

Viewing an HTML File Using a Browser To view your HTML file in a browser window, you can double-click on your saved file or follow the subsequent steps:

Step 1. Open a Web browser (Internet Explorer or Netscape Navigator). Step 2. In your browser select File from the toolbar and choose Open or Open Web Location.

Internet Explorer

Netscape Navigator

Step 3. 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


HTML: The Basics

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.


HTML: The Basics

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 you’ve 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.

HTML Tags – Basic Tags for Text Format & Appearance From this point on, all tags that will be covered should only be entered within the body section (<body>…</body>).

Some Basic Tags • Italics: Italics text • Bold: Bold text • Underline: Underlined text (try not to use this tag)

Example:

<body>

Recommended book: XHTML for the World Wide Web. Author: Elizabeth Castro. Edition: 5th edition.

</body>


HTML: The Basics

Viewed using a browser:

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: (where n is a number from 1 to 7) • Font face: (where the face name is a system font) • Font 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:

• Example:

<body> Request CSUS Web Account:

Faculty have a choice between four web accounts: Departmental Web account, Faculty Web account, SacLink Web account or a WebCT course account.



 Any Questions? 

</body>


HTML: The Basics


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 you’ve 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.


HTML: The Basics

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: A paragraph (this tag will produce a double line-break) • Line breaks: (notice that the opening and closing tag are contained within ONE tag) • Single-spaces: (a space is a special character, hence the special code)

Example:

<body>

Request CSUS Web Account

Faculty have a choice between four web accounts: Departmental Web account, Faculty Web account, SacLink Web account or a WebCT course account.

 Any Questions?

Let's continue to Step 2: "Gather Materials..."

</body>



HTML: The Basics

Alignment Text within an HTML file can be centered, left justified, right justified or justified. Left justified is the default.

• Paragraph align: A paragraph (where position is left, right, center or justified).

• Division align: <div align=“position”>Content section</div> (where position is left, right, center or justified; can be used to align any webpage element).

• Block quote: <blockquote>Block quoted text</blockquote> (the affected text is indented from both sides)

Example: Viewed using a browser:

<body> <div align="center">

The Web Process - The Second Step

</div> 

Gather Materials:

<blockquote>Assignments, Syllabus, Handouts, Textbook Info Images, Photographs, Data, etc.</blockquote>

 </body>


HTML: The Basics

Exercise 4 – Text Appearance: Spacing & Alignment

Exercise 4 – Text Appearance: Spacing & Alignment Using the file you’ve 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.


HTML: The Basics

Other Tags • Headings: <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)

• Horizontal rule: <hr width=“90%” /> (notice that the opening and closing tag are contained within ONE tag)

Example:

<body>

<h2>The Web Process - The Third Step</h2>

Create/Edit HTML documents: 

Text Editors: Notepad, TextPad, SimpleText, Write Web Editors: Macromedia Dreamweaver, Microsoft Frontpage 

 <hr width="80%" /> </body>



HTML: The Basics

Exercise 5 – Text Appearance: Headings and Horizontal Rules

Exercise 5 – Text Appearance: Headings and Horizontal Rules Using the file you’ve 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.


HTML: The Basics

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.

close anchor tag

<a href=”http://www.csus.edu”>CSUS Homepage</a>

href attribute

open anchor tag

label

destination

Example: <body>

<h1>Favorite Links:</h1>

<a href=”http://www.csus.edu”>CSUS Homepage</a> </body>

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.


HTML: The Basics

#1: Links to an Outside Source The first type of hyperlink is one that points to a file located outside of your Web site.

<a href=”http://www.csus.edu/web/”>Web Resources</a>

week1

week2

root directory

index.htmimages

banner.jpg icon.gif

wk1_lesson1.htmwk1_lesson2.htm

wk2_lesson1.htm

http://www.csus.edu/web/

Hyperlink within Web site to “outside” source.

#2: Links Within a Web site

The second type of hyperlink points to a file located inside of your Web site.

<a href=”tag_examples.htm”>Examples of HTML Tags</a>

OR

<a href=”week1/wk1_lesson1.htm”>Week 1</a>

OR

<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.

week1

week2

root directory

index.htmimages

banner.jpg icon.gif

wk1_lesson1.htmwk1_lesson2.htm

wk2_lesson1.htm

All hyperlinks point to a file within the Web site.


HTML: The Basics

Exercise 6: Hyperlinks

Exercise 6: Hyperlinks Utilizing the information you just learned regarding hyperlinks, recreate the section entitled Sample Links (from the file index.htm) using the following guidelines: Step 1: Make each of the lines under the heading entitled “Sample Links” a link:

a. Locate the text that reads “Sample HTML document structure”. This text should be a link to the HTML structure document you created in the first exercise. Using the anchor tag, create a link using the text “Sample HTML document structure”. The URL (destination) for the hyperlink should be “structure.htm”.

b. “Web Central at Sac State” – should be a link to the following URL: http://www.csus.edu/web

Step 3: Save your file in the HTML Basics folder on the desktop. Step 4: View the file using your Internet browser. Advanced Add links to your favorite Web sites in the Sample Links section!

The Image Tag HTML documents can contain images (and/or graphics). These images can be photographs, designs, logos, or icons. To include an image on a Web page, you’ll need to use the image tag. Before we proceed, here are the specifics on the image tag (notice that the opening and closing tag are contained within ONE tag): The format of the HTML image tag is: <img src=”image_path” height=”height” width=”width” alt=”alt_text” /> where:

image_path (attribute of the <img> tag) is the location (or path) of the image. For example, images/banner.jpg. This example represents a relative path to the file. This attribute is REQUIRED.

height The height 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.


http://www.csus.edu/web

HTML: The Basics

width 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.

alt_text (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 Used to align the text appearing directly after the image tag. Align can be set to left, right, and center.

border 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.

image

In Browser… index.htm

banner.jpg

icon.gif

root directory 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: <img src=”images/icon.gif” alt=”Law icon” /> My image, icon.gif, is located within the images folder of my Web site directory, according to the value of the src attribute.

3 This type of absolute path will only exist when the image file is located on the local computer..


HTML: The Basics

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).


http://www.csus.edu/web/campus.html

http://www.csus.edu/web

HTML: The Basics

Testing Your Pages in Different Browsers Different browsers (and browser versions) interpret HTML slightly different. To be certain your pages appear as you intend, test your Web pages using different browsers:

• Internet Explorer (www.microsoft.com) • Netscape Navigator (www.netscape.com) • Mozilla Firefox (www.mozilla.org) • Safari (Mac) (www.apple.com)

Netscape 6.2

Internet Explorer 6.0

Exercise 8 – Web Page Testing

Exercise 8 – Web Page Testing Using your completed Web site files, preview them using both Internet Explorer and Netscape Navigator.

1. Using Internet Explorer, open the file, “index.htm”, from the HTML Basics folder. Navigate through your “Web site”, noting how the content is formatted.

2. Using Netscape Navigator, open the same file, “index.htm”, from the HTML Basics

folder. Navigate through your “Web site”, noting how the content is formatted.

3. Compare the view of your Web site offered by both browsers. Minimize the screens and compare them side-by-side as done in the last example featuring Netscape 6.2 and Internet Explorer 6.0.

Are there any differences? Can you accommodate for any differences?


http://www.microsoft.com/

http://www.netscape.com/

http://www.mozilla.org/

http://www.apple.com/

Documents

Understanding XHTML and the Web-Publishing Processatsadvweb.weebly.com/uploads/2/3/6/1/2361107/html_basics.pdf · Editing an Existing HTML File Using a Text Editor Since HTML files