html 4.0 history and application by: marc mayzes
TRANSCRIPT
HTML 4.0
History and Application
By: Marc Mayzes
Introduction to HTML
• HTML was developed by Tim Berners-Lee.
• HTML was not very popular until the WWW explosion.
• Originally developed for text-based navigation.
• Further development adds more features for graphics-based navigation.
HTML Structure
• Head and Body
• Paragraph
• Headings
• Center
• Title
• Ending Tags
Head and Body
• All HTML documents begin with a <html> tag.
• Head and body tags follow the <html> tag.• <head>- The information in the head
section of a document contains titles and scripts.
• <body>- The information to be shown.• Head and Body Example
Body Attributes
• Bgcolor – background color is defined within the <body> tag. Colors are defined with a 6 digit Hexadecimal number.– <body bgcolor=“#c7c7c7”>
– Colors with key words:• Black Silver Gray White Maroon Red Purple Fuchsia
• Green Lime Olive Yellow Navy Blue Teal Aqua
• Bgcolor Example Text Color Example
Paragraph
• <p>- Formats text by adding double spacing between different paragraphs.
• Each paragraph has its own set of tags.
• Paragraph Example
Headings
• Used for structure of HTML documents.
• Headings are displayed bold and usually have a larger font size.
• Headings Example
Center
• Used to center text and objects within an HTML document.
• <center> … </center>
• Center Example
Title
• <title>- The title tag is found in the <head> section of an HTML document.
• The information in the title tag is displayed on your browser’s main title bar.
• Title Example
Ending Tags
• Ending tags must be placed on all HTML documents.
• All ending tags follow the same format.– <html> … </html>– <body> … </body>– <head> … </head>
Lists
• Why use lists?
• Types of lists– Unordered (bullets)– Ordered (numbers)– Definition
Unordered Lists
• Unordered lists begin with <UL> and ends with </UL>
• Each list item begins with <LI> and ends with </LI>
• Three bullet types <UL type=“…”>– Disc Example– Circle Example– Square Example
Ordered Lists
• Ordered lists use numbers to organize data.• All ordered lists start with <OL> and end with
</OL>• Five number types <OL type=“…”>
– Arabic numbers (1,2,3,…) Example– Uppercase Roman (I,II,III,…) Example– Lowercase Roman (i,ii,iii,…) Example– Uppercase Alpha (A,B,C,…) Example– Lowercase Alpha (a,b,c,…) Example
Definition List
• Displays list items in a glossary-type format.
• All definition lists begin with <DL>
• Definition terms begin with <DT>
• Definitions begin with <DD>
• Definition List Example
Layout
• Tables can be used to alter the layout of web pages.
• Use of table will help the alignment of information and objects.
Tables
• Syntax• Columns• Table Attributes• Border Attributes• Width• Cellspacing,
Cellpadding• Caption
• Cell Attributes• Layout
Table Syntax
• All tables begin with <table> and end with </table>.– All table rows begin with <tr> and end with
</tr>• All table cells begin with <td> and end with </td>
• Basic Table Example
Table Attributes
• The two table attributes are ALIGN and VALIGN. (vertical alignment)
• These attributes are defined within the <table> tag.
• <table align=“(left, center, right”>
• <table valign=“(top, center, bottom)”>
Table Attributes
• Presentation attributes can be defined for individual objects including tables.
• Attributes are defined within the <table> tag.– Bgcolor Example– Font Example– Font color Example
Border Attributes
• Border attributes are defined within the <table> tag.
• Attributes– Borderwidth Example– Bordercolor Example
Width
• Table widths can be defined in pixels and in percentages.
• The width attribute is defined within the <table> tag.
• Width Example
Cellspacing and Cellpadding
• Cellspacing is the space between the borders of individual cells in a table.
• Cellpadding is the space between the text/object within a cell and the cell border.
• Cellspacing Example
• Cellpadding Example
Caption
• The caption function allows information to be included at the top or bottom of a table.
• The caption property begins with <caption> and ends with </caption>
• The caption tag is placed between the <table> and <tr> tags.
• Caption Example
Cell Attributes
• Cell attributes are defined within the <td> tag.
• Cell attributes– Bgcolor Example– Font Example– Font color Example– Size of cell Example
Presentation
• These attributes are used to alter the presentation of a web page.
• Presentation Elements– Font– Font Style– Images– Horizontal Rule
Font – DepricatedUse CSS instead
• The font element defines size, font, and color of text.
• The font element begins with <font> and ends with </font>.
• Font attributes are defined within the <font> tag.
Font Style
• Different properties may be set for different sets of text.
• Font Elements– Bold Example– Italics Example– Underline Example
Bold
• The bold text element begins with <b> and ends with </b>
• Tags must be placed right before and right after desired text.
Italics
• Italics text elements begin with <i> and end with </i>.
• Italics tags are placed right before and right after desired text.
Underline
• Underline text elements begin with <u> and end with </u>.
• Underline tags are placed right before and right after desired text.
Horizontal Rule
• The horizontal rule element places a bar across the width of a web page.
• <hr> is the only tag needed to place a horizontal rule.
• Attributes such as width and color can be included
• HR Example
Images
• All images to be placed in an HTML document are defined with the <img> tag.
• Important attributes to the <img> tag…– <img src=“file location”>– <img width=“pixel width” height=“pixel
height”>– <img alt=“Alternate Text Description”>
• Image Example
Hyperlinks
• There are four main types of hyperlinks.– Text links– Images– Image Maps– Anchors (targets)
Anchor (Targets)
• Anchors are used to link to different areas within the same document.
• All targets must have a name– <a name=“…”>
• Hyperlink to the target.– <a href=“#…”>text or image</a>
• Anchor Example
Source and Destination
• All hyperlinks begin with <a> and end with </a>.
• The source and destination must be defined for the hyperlink to work.– <a href=“destination file”>Source (text, image,
etc.)</a>
Text Links
• The source of the hyperlink is simply text.– <a href=http://www.yahoo.com>Yahoo</a>.
• Text Link Example
Image Links
• Images are used for the source instead of text.– <a href=“…”><img src=“imagefile”…></a>
• Image Link Example
Image Maps
• Image maps allow multiple hyperlinks to be defined to a single image.
• Linkable areas are defined by pixel locations.
• Types of shapes– Rectangle– Circle– Polygon
Image Maps
• Image Maps are defined with the <map> and </map> tags.
• Each image map used must have a name.– <Map Name=“mymap”>
• Each linkable area must be defined under the <map> tag with the <area> element.– <area href=“weblocation”
coords=“x1,y1,x2,y2”>
Image Maps
• Types of Shapes <area type=“poly”…>– Rectangle (rect default: x1,y1,x2,y2)– Circle (circle: center point, radius)– Polygon (poly: x1,y1,x2,y2,…,x1,y1)
• Image Map Example
Forms• Forms are used to send information from a user to a web
server.• Form components
– Text box– Check box– Radio Buttons– List Box– Text Area– Button– Password– Hidden– Submit
Forms Example
Frames
• Frames are used to load two HTML documents in the same window.
• Frames are defined with– <frameset>– <frame>
• A frame document is a normal html file in which the <body> tag is replaced with <frameset>
• Frames Example
Frameset
• Frameset defines the number and size of rows and columns.
• <frameset cols=2 width=150,*>• <frameset rows=“20%,*”>• Width is defined in pixels. * is wildcard. It
uses all remaining space for the remaining frames.
example
Frame Attributes
• Names and source files must be defined in the <frame> tag.
• Names are used to target incoming web pages to specific frames.
• Scrolling, noresize – allows author to enable or disable scrolling and frame resizing.
• <Noframe> - not all browsers support frames.
Cascading Style Sheets
• Cascading style Sheets are mainly used to separate the presentation aspects of a web page from the content aspects.
• CSS are used for presentation, HTML is used for structure.
• Things to keep in mind…– Human disabilities - version of browser– Text based browsers– Handheld internet devices
Why Cascading style sheets?
• They are referred to cascading because the browser will apply default values first if no other style is included. Then it will apply external, internal, inline/custom in that order.
Types of CSS
• External – ideal when same style is applied to several pages
• Internal – style is applied to a single document
• Inline – Single occurrence within a page (ie. Single word, cell of table)
• Class – custom style
External Style Sheet
• Separate from .html file• Tag placed in .html to link .html to .css
(external style sheet file)<head><link rel=“stylesheet” type=“text/css” href=“filename.css”></head>example
Internal Style Sheet• Created within the .html file between
<head><style type=“text/css”>…</head> tags• Format includes 3 parts: selector {property: value}• Selector (html tag), property (attribute), valueIE. body {color:black} ; p {font-family:”times new roman”;color: red;text-align: center}
Inline Style Sheets
• Use this sparingly, mixes content with presentation
• Tag placed around text, image that you are applying the attribute
Ie. <p style="color: sienna; margin-left: 20px"> Text goes here</p>
Class
• Define different styles for same html tag– Ie. One <p class=“right”> align right, another <p
class=“center”> align center
<head>p.right{text-align: right} p.center{text-align:center}</head>
• You can omit the html tag and create your own class.right {text-align=right}
<div class=“right”>text to be aligned right</div>
Cascading Style Sheets
• Examples – Athletics page
• Explanation
Scripts• Browser Scripting
Learn JavaScriptLearn DHTMLLearn VBScriptLearn WMLScript
• Server Scripting Learn SQLLearn ASPLearn ADOLearn PHP
Separate program for a specific purpose
Javascript
• Java and Javascript are NOT the same thing.
• Javascript was developed with similar ideas as Java, but is totally incompatible with Java.
• Javascript was developed by Netscape and first appeared in Netscape Navigator.
Javascript
• What Javascript is used for– Cause events from
• Mouseover
• Keystroke
• Action on a form
– Actions of Events• Image swap
• Alert box
Examples
Examples