HTML Coding Chapter 6 Learn how to… Explain the concept of a markup language. Use HTML tags for text, paragraphs, list, and anchor points. Capture and

HTML Coding

Chapter 6

Learn how to…

• Explain the concept of a markup language.

• Use HTML tags for text, paragraphs, list, and anchor points.

• Capture and convert images to include in a Web page.

• Use proper hypermedia design to link pages into well-structured Webs.

How HTML Works

Understanding Markup

• Hypertext markup language (HTML) is used to create hypertext documents for the World Wide Web.

• To mark up a text means to insert special codes called tags into the text.– The tags control how the text appears on a

Web page.– Tags always appear <inside> brackets.

HTML Version of Web Page

HTML Tag Formats

• Paired tags come in pairs consisting of a start tag and a stop tag.– Stop tags always

include a slash.– For example, <h1>

and </h1> are used for headings.

• Single tags function on their own.– For example, <hr> is

used to insert a horizontal rule or line.

Versions of HTML

• Standard Generalizable Markup Language (SGML) is the parent language to HTML.– HTML may contain “loose” coding where stop

tags may not appear in the proper order and where not all tags require stop tags.

• eXtensible Markup Language (XML) enables you to extend a document’s structure by defining new tags.

XHTML

• XHTML includes most of the classic HTML codes, but they appear in the context of an XML schema (hence the X) that XML tools can understand.

• HTML and XHTML specifications are found at www.w3.org/MarkUp

http://www.w3.org/MarkUp

Families of HTML Tags

• Page structure tags provide a framework for the document as a whole. They identify that the document is encoded in HTML and provide titling, framing, and header information that defines the structure of the file.

• Block-style tags control the flow of text into blocks on the screen. The most common block style is the paragraph.

• Logical font-style tags include styles for abbreviations, acronyms, citations, and quotations.


• Physical font-style tags allow users to format text as blinking, bold, italic, subscripted, superscripted, or underlined.

• Heading tags allow users to create headings in six different levels or sizes of importance.

• Lists and miscellaneous tags allow you to create numbered lists, bulleted lists, menus, directories, horizontal dividing lines, and line breaks.

• Form tags allow you to create input fields, buttons, and selection boxes for gathering information from users.


• Table tags allow you to define tables that present data in neat rows and columns.

• Character entities provide a wide range of Greek characters and special symbols used in mathematical and scientific notation.

• Anchor/link tags allow you to create bookmarks, hypertext, and hyperpictures, and link them to any resource or file on the World Wide Web.


• Image tags allow you to insert figures, align pictures, flow text around images, or place little icons inline in the midst of your text.

• Object tags provide a means for defining a way to interact with plug-ins, media handlers, and Java applets, which are little applications that get downloaded to your computer along with a Web page.

HTML Tags

Creating Your Web Page Resume

Starting the Page

Creating the Page Title

• The page title is the name that appears in the browser’s title bar when people visit your Web page on the Internet.

Writing the Heading

• The heading goes within the body of the document between the <body> and </body> tags.

Saving the Page

Viewing the Page

• Open the file in your browser using File | Open.

Writing Paragraphs

Creating Lists

• Create lists with the unordered list <ul> start and </ul> stop tags for a bulleted list, or the ordered list <ol> start and </ol> stop tags for a numbered list. Use <li> and </li> for each item within the list.

Horizontal Rules

• A horizontal rule is a Web page element that creates a neat dividing line between different parts of a Web page.

• Use the <hr> tag to create a horizontal rule.

Inserting a New Heading

• It is common for Web pages to have a title displayed in the largest-sized heading, <h1>, and then to use the next smaller size, <h2>, for subheads.– For example,

<h2>Educational Qualifications</h2>

Named Anchor Bookmarks

• A named anchor is a bookmark to which you can create links that, when clicked, take users to that spot on the page.

Hypertext Links

• href stands for hypertext reference.• The # sign tells the browser that the target of the

link is a named anchor bookmark.

Returning to the TOC

• You should provide a way to return to the Table of Contents.– Create a named anchor bookmark at the start

of the bulleted list to which you want users to return.

• <a name="contents"></a>

– Then, create a return link to that bookmark at the end of each section in your document.

• <a href="#contents">Return to Contents</a>

Linking to URLs

• You can link from your document to any Web site on the Internet.– For example:

<a href="http://www.udel.edu">University of Delaware</a>

• Use anchor start and stop tags as shown.• Include the URL for the Web page you want to

link.• Include the text you want the user to click on

(University of Delaware).

Web Page Owner

• It is good netiquette to identify the Web page owner at the end of the page.– Use paragraph start and stop tags.– For example:

<p>

This Web page is owned by Santa Claus. My e-mail address is [email protected]

</p>

mailto:[email protected]

Mailto Links

• A mailto is a link that, when clicked, opens a new message window addressed to the person identified in the link.– For example:

My e-mail address is <a href= "mailto:[email protected]"> [email protected]</a>

Creating White Space

• One way to create white space is with paragraph <p> start and </p> stop tags.

• The break tag <br> can be used to make the browser go to the next line.

• For a single white space character, use a non-breaking space code

• Do not use the Enter key to create space.

Character Attributes

• Underlining indicates hyperlinked text in a Web page. Therefore, to emphasize something, use bold or italics.– To make characters bold, use <strong> and

</strong> start and stop tags.– To italicize, use <em> and </em> start and

stop tags.

HTML Graphics and Animated GIFs

Obtaining Images

• Pictures taken with an ordinary camera can be developed and provided on CD by your local photo developer.

• Pictures taken by a digital camera can be downloaded to your PC ready to use.

• Existing photographs can be scanned into your PC.

Preparing Images

• Images must be in one of two graphic formats to be used in a Web page:– Use GIF if your image has 256 colors or less or if you

want one of the colors to be transparent.– Use JPEG if your image has more than 256 colors or

needs true color.

• Resize images with a graphics editor, and not your Web editing software.

• You can reduce the number of colors in your image to make the file size smaller.

Paint Shop Pro

• Paint Shop Pro is a full-featured graphics program.– You can also browse the images on your

computer to see them in small thumbnails.– You can download an evaluation copy of Paint

Shop Pro at www.jasc.com• To set up to capture graphics based on the version

you use, select:– File | Import | Screen Capture | Setup– Capture | Hot Key Setup

http://www.jasc.com/

Capturing Images

• To capture images using Paint Shop Pro:– Start the program with the image you wish to capture.– Start Paint Shop Pro and press the Start Capture

button.• Alternatively, select, Import | Screen Capture | Start

– Use Alt+Tab to switch to the program with the image.– Press the Start Capture hot key.– Click and drag to select the area you want to capture.– The selected area now appears in the Paint Shop Pro

window where you can manipulate it or save it.

Converting Images

• Open the image in Paint Shop Pro.

• Then, use File | Save As– Save the file in

the same folder as your Web page.

Resizing Images

• Open the image in Paint Shop Pro.

• Choose Image | Resize• Change the Width and

Height settings.– Check Maintain Aspect Ratio

to keep the same proportions as the original.

– Save the image.

Color Adjustments

• You should convert your image to 256 colors unless for some reason. – This will reduce the file size and allow the

image to load much faster on a Web page.

• Open the image in Paint Shop Pro.– Colors | Decrease Color Depth | 256 colors– If you are planning to publish this image to the

Web, choose Standard/Web-safe.

Inserting an Image

• Simply use an image tag where you want to insert the image.– <img src="fred.gif" align="right">

• Use the align attribute with “left” or “right” to make the text wrap around the image.

Tiling an Image

• To tile an image means to draw it repeatedly across and down the screen until the entire window has been covered.

• To include a tiled image, modify the <body> tag as follows:<body background=" filename.gif">

Transparent Images

• Transparency is a special effect in which one of the colors in a bitmap becomes translucent. Instead of seeing that color, you see through it into the background color or image on the screen.

Transparent Images

• Use Paint Shop Pro to create a transparent image.– Use the eyedropper tool to set the background

color.– Select Colors | Set Palette Transparency to set the

color to the current background.– Save the image.

• Then, use the image tag to insert it into your document.<img src=" filename.gif">

Animated Images

• An animated GIF is a graphic that contains multiple images intended to be shown in a sequence at specific times and locations on the screen.

• There are two utilities you could use to create an animated GIF:– GIF Construction Set at

http://www.mindworkshop.com/alchemy/gifcon.html where there is also a tutorial.

– Animation Shop that is part of Paint Shop Pro.

http://www.mindworkshop.com/alchemy/gifcon.html

http://www.mindworkshop.com/alchemy/gifcon.html

Clip Art

• Clip art is pre-drawn artwork organized into a catalog or library that you can browse in search of appropriate icons, buttons, banners, backgrounds, tiles, or animated GIFs for use on Web pages.

• Microsoft has a library available for free at http://office.microsoft.com/clipart/default.aspx?lc=en-us

http://office.microsoft.com/clipart/default.aspx?lc=en-us



HTML Tables and Web Page Layouts

Tables

No table format With table format

Tables

• A table divides the screen into a grid of rectangular regions called cells that may contain text or graphics.

• The lines that form the boundaries of the grid may or may not be made visible.

• The width and height of each cell can be adjusted to create a variety of Web page layouts.

• Multiple tables can be include on a page and can be nested inside one another.

Nested Tables

Creating a Table

• Three tags are used to create a table:– The <table> start and </table> stop tags

begin and end the table.– The <tr> start and </tr> stop tags begin and

end each row of the table (table row).– The <td> start and </td> stop tags begin and

end each data cell (table data).• Text or graphics go inside the table data tags.

Creating a Table

<table width="100%"><tr align="left" valign="top"><td>Put data here</td></tr></table>

– Hundred percent makes the table use the entire width of the page.

– The second line aligns data left horizontally and vertically at the top of the cell.

– To see the table’s edges, use <table width="100%" border="1">

Table Structure

Table Attributes

• Attributes added to the table tag modify the table’s formatting.

• You can change the border thickness of the table.For example, <table border="2"> creates a border of thickness 2.

• Horizontal alignment tags can be used with the <table>, <tr>, and <td> tags.–Alignment can be left, center, right, or justified; by default, the alignment is left.

• <td align="right">

Table Attributes

• Vertical alignment tags can be used with <td>.– Alignment can be top, middle, or bottom; by

default, the alignment is middle.• <td valign="bottom">

• Both horizontal and vertical alignment can be included within one tag:– <td align="right" valign="bottom">

Cell Spacing and Padding

• Cell spacing is the amount of space the browser puts between the borders of the cells.

• Cell padding is the amount of white space the browser puts inside the borders of the cells.

– The amount of spacing can be integer values or percentages of the table’s width.

Coloring Tables and Cells

Tables, rows, and cells can have background colors.<table bgcolor="silver">

<table bgcolor="#RRGGBB">

RR=Red

GG=Green

BB=Blue


• Tables, rows, and cells can have background colors.<table bgcolor="silver">


• Hexadecimal values can be used for a wider variety of colors.<table bgcolor="#RRGGBB">

• RR=Red, GG=Green, BB=Blue• You can see the hex values for any color by

double-clicking on the foreground or background color in Paint Shop Pro.

• Always choose colors that do not detract from the readability of the text.

Indenting Table Tags

• For clarity, table tags can be indented as appropriate – it will not show up on the actual Web page.

Subdividing Table Cells

• You can put tables inside other tables to create an unlimited amount of page layouts.

• You can also expand a cell to make it span more than one column or row.<td rowspan="2" colspan="3">

• Spans 2 rows and 3 columns



HTML Hyperlinks and Web Design

Design Paradigms

• Whenever you link two or more Web pages, you create a hypermedia design that can be visualized.

• It is irritating to click more than three to four times to find the required information.

• The following slides show five different design paradigms.

Linear List

• The linear list paradigm enables users to move back and forth through a serial sequence of pages, moving forward to new materials or backward to review.– Most appropriate for a slideshow format.

Menu

• A menu paradigm permits users to select one from a number of choices listed onscreen.

Hierarchy

• In a hierarchy paradigm, each object provides users with a menu of choices that trigger more menus with more choices.

Network

• With the network paradigm, objects can be linked in multiple ways in any direction and to any object in your Web.

Hybrid

• A hybrid paradigm provides multiple navigational pathways by employing linear lists, menus, hierarchies, and network designs throughout a large Web site.

Hybrid

Documents

HTML Coding Chapter 6 Learn how to… Explain the concept of a markup language. Use HTML tags for text, paragraphs, list, and anchor points. Capture and