Upload
clinton-pitts
View
214
Download
0
Tags:
Embed Size (px)
Citation preview
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