CIS 285 WINTER 2005 HTML CIS 285 Sinclair Community College Instructor: Mary Robinson.

CIS 285 WINTER 2005

HTML

CIS 285Sinclair Community CollegeInstructor: Mary Robinson

CIS 285 WINTER 2005

Agenda

HTML – Tables, Lists, Links, Anchor Tags, Email, and Forms

XHTML Discuss Assignment #1 Syllabus Changes

CIS 285 WINTER 2005

Objectives

Define Hypertext Markup Language (HTML) and the standards used for Web development

Become familiar with HTML documents and basic HTML commands

Discuss Web browsers and identify their purpose

Discuss tables, links, lists and forms

CIS 285 WINTER 2005

Internet Worldwide collection of networks that link

together millions of businesses, the government, educational institutions, and individuals

A network is composed of a group of computers that are connected together to share resources and information

The Internet backbone is a high-speed data line that connects major computer systems

An Internet Service Provider (ISP) is a company with a permanent connection to the Internet backbone

CIS 285 WINTER 2005

World Wide Web

Part of the Internet that supports multimedia and consists of a collection of linked documents, called Web pages

A Web site is a collection of Web pages that are created and maintained by an organization or individual

Relies on Hypertext Markup Language (HTML)

CIS 285 WINTER 2005

Web Servers

Web pages are stored on a Web server or host

Publishing is the process of copying files to a Web server

HTTP (Hypertext Transfer Protocol) is a set of rules for exchanging text, graphics, sound, video and other multimedia

CIS 285 WINTER 2005

Web Site Types and Purposes Internet

Anyone Access – Public Share information with public (anyone)

Intranet Employees or members of organization Access – Private Share information among employees, members

only Extranet

Select business partners or customers Access – Private Share information with partners or customers

CIS 285 WINTER 2005

Web Browsers

Web Browsers are required to view Web pages Microsoft Internet Explorer Netscape Navigator

Uniform Resource Locator (URL) Web pages are linked together by

the use of hyperlinks Clicking a hyperlink allows you to

move quickly from one Web page to another

CIS 285 WINTER 2005

Using A Browser To View A Web Page

After you save your HTML file, you may view your Web page in a browser Extensions - .html or .htm

The HTML file displays in your browser just as it would on the Web

Windows allows you to view the page in your browser while keeping Notepad open

CIS 285 WINTER 2005

How Browsers Affect Your Work

One of the greatest challenges facing HTML authors is designing pages that display properly in multiple browsers

Every browser contains a program called a parser that interprets the markup tags in an HTML file and displays the results in the canvas area of the browser interface

CIS 285 WINTER 2005

How Browsers Affect Your Work

The logic for interpreting the HTML tags is different in every browser, resulting in varying interpretations of the way the HTML file is displayed

Although it’s a good idea to test with the latest browsers, it’s also prudent to test your work in older browsers as well

CIS 285 WINTER 2005

How Browsers Affect Your Work

Lowest common denominator coding - use an older version of HTML to ensure portability

Cutting-edge coding - push the medium forward by coding to the latest standard and using the latest enhancements

Browser-specific coding - specify a particular brand and version of browser to access the site

CIS 285 WINTER 2005

Viewing Your Web Page Source

You can view the HTML code on any Web page from within your browser

This allows you to see how others created their Web pages

CIS 285 WINTER 2005

HTML

HTML is an application of the Standard Generalized Markup Language (SGML)

Intended to represent simple document structure

Uses hypertext to link related topics Designed for use over the internet The document expression capabilities of

HTML are currently pushed to the limit

IRG-Sklar

CIS 285 WINTER 2005

HTML As A Markup Language A markup language is a structured language that

lets you identify common sections of a document such as headings, paragraphs, and lists.

An HTML file includes text and HTML markup elements

The browser interprets the HTML markup elements and displays the results, hiding the actual markup tags from the user

HTML is intended to express logical document structure, not display characteristics

IRG-Sklar

CIS 285 WINTER 2005

Hypertext Markup Language

Hypertext Markup Language (HTML) is used to create Web pages Set of special instructions called tags

and markups Web page files contain text and

HTML tags Tags mark the text to define how it

displays when viewed in a browser Ex. <b> <p> <hr>

CIS 285 WINTER 2005

Hypertext Markup Language

HTML is platform independent Can be created on one type of

computer and viewed on another type of computer

World Wide Web Consortium maintains HTML standards www.w3c.org Several versions of HTML exist today Each new version expands capabilities

CIS 285 WINTER 2005

HTML Elements

HTML is a subset of Standard Generalized Markup Language (SGML) SGML is a standard for how to organize

and tag elements of a document

<b>sample text</b>

CIS 285 WINTER 2005

HTML Coding Practices

Use lower case tags to separate tags from contents

Use ending tags whenever possible If there are NO ending tags (ex.

<br> <img>) do the following: <br /> <img />

Separate sections of HTML code with spaces

CIS 285 WINTER 2005

Web Editors

Text Editor Program that allows a user to

enter, change, save, and print text, such as HTML

No advanced features Allows you to develop HTML

documents easily

CIS 285 WINTER 2005

Web Editors

HTML Editor / Converter Program that provides basic text-

editing functions (Notepad, Textpad …) Microsoft’s Save as Web Page feature

WYSIWYG Editor Utilizes a graphical user interface Microsoft FrontPage, Cold Fusion Macromedia Dreamweaver

CIS 285 WINTER 2005

Entering HTML and Text Four tags define the overall structure of

standard Web pages: <html> and </html>

Indicates file is an HTML document <head> and </head>

Introduction to the rest of the file Indicates the area where the title will be placed

<title> and </title> Indicates the title that will display in the title

bar <body> and </body>

Indicates the boundaries of the Web page

CIS 285 WINTER 2005

Headings

Used to separate text and introduce new topics

Vary in size, from <h1> through <h6>

Level 1 headings use a very large font size, and level 6 headings use a very small font size

Use the same sized heading for the same level of topic

CIS 285 WINTER 2005

Modifying Text Alignment

Headings are always left-justified by default

The HTML align attribute allows different alignment

The basic syntax of an opening level 1 heading tag with the align attribute is: <h1 align= “desired_alignment”>

Alignment values are center, right, and left

CIS 285 WINTER 2005

Modifying Text Alignment

Style attribute: another way to change the alignment of Web page text

Style attribute syntax is style= “style_name :style_value” Style_name parameter identifies

the style, such as the font size or background color

Style_value parameter specifies the corresponding style value

CIS 285 WINTER 2005

Text Formatting Commands Tags and special characters must be added

to display blank spaces and to create line breaks

Special formatting characters can add non-keyboard elements such as bullets

The <p> tag has an optional ending tag Remember correct coding practice is to use an

ending tag or space plus/> as the closing for a tag that does not have an ending tag.

When a browser finds a <p> tag, it starts a new line and adds a paragraph break

The line break tag (<br />) inserts a line break

CIS 285 WINTER 2005

Text Formatting Commands

Align attribute specifies paragraph alignment

Paragraph tag syntax with align attribute:

<p align=“desired_alignment”> Character entities are numbers or

character strings inserted directly within the Web page body text

Character entity codes are always preceded with an ampersand (&) and followed by a semicolon (;)

CIS 285 WINTER 2005

Text Formatting Commands

HTML character tags help specify text properties- boldface, superscript, or italic font styles

Text can be enclosed in multiple character tags to specify multiple formatting instructions

To comply with the XHTML standard, the tags must be nested, with closing tags in the reverse order of the opening tags

CIS 285 WINTER 2005

Creating Lists

CIS 285 WINTER 2005

Creating A List Lists structure your text in outline

format Unordered (bulleted) lists <ul> and </ul> marks the beginning and

end of unordered lists Ordered (numbered) lists

<ol> and </ol> marks the beginning and end of ordered lists

The <li> and </li> tags define list items The TYPE attribute defines the default

bullet or number type

CIS 285 WINTER 2005

Coding The Lists

Unordered list: <ul>

<li></li> <li></li>

</ul> Ordered list

<ol> <li></li> <li></li>

</ol>

CIS 285 WINTER 2005

Definition Lists

Syntax is not as straightforward as <ul>, <ol>, or <li>

<dl> and </ dl > start and end the list

Used to list information without the standard bullet or numbered list symbols

< dt > and < dd > are used to create the actual list elements, terms, and definitions

CIS 285 WINTER 2005

Hyperlinks

CIS 285 WINTER 2005

Hyperlinks Hyperlinks (or links) enable users to jump to

another location Can be reference object on the same Web

page or a separate HTML document Could be associated with a Web processing

program that creates a dynamic Web page Links can also be used to create an email link Either text (single or group of words) or an

image can be used as a hotspot for a link The mouse pointer usually changes when positioned

over a hotspot and URL appears on status bar

CIS 285 WINTER 2005

Hyperlinks

Can be associated Links can also be used to create an

email link Either text or an image can be used

as a hotspot for a link The mouse pointer usually changes

when positioned over a hotspot URL appears on status bar when the

mouse pointer is over a hotspot

CIS 285 WINTER 2005

Hyperlinks

With text links, always use descriptive text as the clickable word(s)

Unless otherwise stated, the color of text links is dependent upon browser-defined defaults

Format to change link colors:

<body link=“color” vlink=“color” alink=“color”>

CIS 285 WINTER 2005

Linking Within A Web Page

Allows visitors to move quickly from one section of the Web page to another

Important for large Web pages Commands Table of contents

CIS 285 WINTER 2005

Linking

The <a> and </ a > tags are used to create links Referred to as anchor tags

Use the Hyperlink REFerence (href) attribute to link to another Web page

Two items required Text or image to act as hotspot Name of the file to which you want to link

CIS 285 WINTER 2005

Anchor Tag Anatomy

<a href=“sample1.htm”>sample</a>

link to sample.htm page end of link

Demonstrates a relative path.

CIS 285 WINTER 2005

E-mail Link Anatomy

<a href=“mailto:[email protected]”>[email protected]</a>

link to email address end of link

Email address

CIS 285 WINTER 2005

Graphic Images

CIS 285 WINTER 2005

Graphic Images Classes of Images

Inline images – appear directly on Web page External images

Image types jpeg, gif, png, interlaced gif

Image tag: Displays an inline graphic image in a Web page <img src=“image_filename” /> The src attribute specifies the image source file Image_filename value is the name of a graphics

file(.jpe .gif .png)

CIS 285 WINTER 2005

Graphic Images The image_file value can be

An absolute file path An relative file path An absolute URL location

Absolute file path: exact location of a file in the browser’s file system, including the drive letter, complete folder path, and file-name

Relative file path: file location relative to the location of the current HTML file

Absolute URL: location of a graphics file on a Web server

CIS 285 WINTER 2005

Graphic Images Images appear on the left edge of a Web page

by default Width and height can be specified with the

width attribute and the height attribute within the image tag using the following syntax:

<img src=“image_filename” width=“desired_width”“height”=“desired_height”

Alternate method: use the style attribute and values for the WIDTH and HEIGHT style names, with the general syntax:

Style=“WIDTH: Npx”

CIS 285 WINTER 2005

Graphic Images

Horizontal rule: horizontal line that separate a Web page into sections for easier reading

Horizontal rule tag creates a horizontal rule

Syntax: <hr />

CIS 285 WINTER 2005

Comments in HTML Documents

Comments: Not visible when the Web page

appears in a Web browser Users can view the HTML source code

for the page and view the comments Opening comment tag syntax: <!— Closing comment tag syntax: —>

CIS 285 WINTER 2005

Creating Tables

CIS 285 WINTER 2005

Tables Tables allow you to position elements

easily on a Web page Useful for displaying data retrieved from

a relational database Tables can have text and/or images You can use a table to wrap text around

an image Tables give you more control over the

placement of the text and image Tables help make the content on Web

pages clear, interesting, and easy to read

CIS 285 WINTER 2005

Table Elements Tables consist of rows, columns, and

cells <table><table_contents><table> A row is a horizontal line of information

(<tr>) A column is a vertical line of information A cell is the intersection of a row and a

column or the individual element (<td>) Heading cells display text as bold and center-

aligned Data cells display normal text that is left-aligned

Elements within table data tags can be text, graphic images, lists, other tables or most other types of web elements

CIS 285 WINTER 2005

Table Size And Alignment Web browsers determine

Width of a table based on the widths of the data values in the individual table columns

Height based on the number of data rows Tables size can also be specified using

width and height attributes within the table tag

By default, browser tables align on the left side of the page

The align attribute (“desired_alignment”) can change the table alignment

CIS 285 WINTER 2005

Column Headings

Heading row displays the column heading text in a larger, boldface type

Create column headings with the table heading tag (<>) in place of the table data tag for the first column row

Table headings appear centered within table columns by default

A table can have multiple heading rows

CIS 285 WINTER 2005

Other Table Parts

Border attribute: Instructs the browser to display a table

border Gridlines around the table columns and

rows Syntax: border=“thickness”

Table caption is descriptive text located above or below the table that further describes the purpose of the table

CIS 285 WINTER 2005

Cellspacing and Cellpadding Cellspacing and Cellpadding alter

the size of table cells Cells are the minimum size when

you don’t specify cellpadding or cellspacing

Cellspacing is the number of pixels between cells Syntax cellspacing=“spacing”

Cellpadding is the number of pixels within a cell Syntax cellpadding=“padding”

CIS 285 WINTER 2005

Specifying Table Column Widths

Web browsers automatically size the width of table columns based on the data values they contain

Width attribute: Specify the widths of the table columns

explicitly Added to the table heading tag for each

column in the row that contains the table headings, usually the first row of the table

In WebSphere Studio, HTML designers can visually resize the columns

CIS 285 WINTER 2005

Aligning Table Objects

By default, table data items appear left-justified and vertically centered within table cells

Align and vertical align attributes control vertical align and vertical text placement

Syntax: valign=“vertical_alignment”

CIS 285 WINTER 2005

Coding The Table <table width=“90%” cellpadding=“5”

cellspacing=“3” border=“2”> <tr> <td width=“25%”

align=“right”></td><td width=“75%” align=“left”></td>

<td></td><td></td> <td></td><td></td> </tr> <tr width=“100%”> </tr>

</table>

CIS 285 WINTER 2005

Another Table Example

CIS 285 WINTER 2005

Note On Deprecated Elements

Deprecated elements are elements that the W3C has identified as obsolete. They will not be included in future releases of HTML

Some examples of these elements are <font> and <center>

IRG_131_Sklar

CIS 285 WINTER 2005

Creating Your Home Page

CIS 285 WINTER 2005

Creating A Home Page

A home page is the main page of a Web site Visitors usually view the home

page first Identify the purpose of your Web

site Links should be apparent Include an e-mail link

CIS 285 WINTER 2005

Home Page Lab - TBD

Needs to contain the following elements: Image Title List Table Three or more hyperlinks Email W3C Validator http://validator.w3.org - must

be XHTML compliant

CIS 285 WINTER 2005

Thank You For Contributing

To The Class