HTML

Download Report

Transcript HTML 

HTML
• Hypertext Markup Language
– First proposed by CERN in 1989
– It is non-linear so it allows you to jump from place to
place
– Markup refers to the structure of the language so you
can identify what is going on
• Source code example
• W3C – new governing body that regulates HTML
coding
– W3 consortium
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
XML: An Open Standard
• XML is the Extensible Markup Language
• XML is a meta-language; not a language
itself, but a language that lets you describe
other languages
• XML describes data, not presentation
• XML allows better access to data
• XML lends itself to customized information
XML Syntax Rules
•
•
•
•
•
Documents must be well-formed
Elements must nest correctly
XML is case-sensitive
End tags are required
Empty elements are signified by a
closing slash
• Attribute values must be quoted
XHTML: The Future of HTML
• XHTML is a reformulation of HTML 4.01
in XML
• Brings data-handling benefits of XML to
HTML
• Style sheets are required
• Stricter syntax rules
HTML Limitations
• HTML (HyperText Markup Language) is a very general
language designed to place information on web pages.
It is not a word processing or desktop publishing tool.
The sooner you come to grips with this fact, the faster
you will become an effective webdesigner. Here's why:
– No two browsers show a page quite the same way.
– Even if everyone were to use the same browser, not
everyone would have the same resolution as you.
– It really never was intended to be as specific as a word
processor, and its fundamental structure reflects this.
– Nobody owns the web. Therefore, standards are rather
difficult to enforce.
File Names and URLs
• Names
– Front door URL
– Page names
• Case Sensitivity
• Character Exceptions that you CANNOT USE
– /,/,&,*, <,>, and blank spaces
• File Extensions
–
–
–
–
–
–
.htm
.html
.asp
.xls
.gif
.jpg
Complete URLs and Directory
Structure
• http://isec.sandiego.edu/carl/gba576.asp
• Versus gba576.asp
• Relative versus absolute paths
Web Page Elements
•
•
•
•
•
•
•
Title
Bookmarks
Body
Background
Normal text
Paragraph
Bulleted list
•
•
•
•
•
•
•
Headings
Images
Horizontal Rules
Image map
Hotspot
Animated images
Hyperlinks
Web Page Elements
title
heading
horizontal rule
image
paragraph
body
links
bulleted list
animated image
Entering HTML Tags 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
HTML Tags and Functions
Entering Initial HTML Tags
initial tags
insertion point
It is good form to be consistent
when you type tags, adhering
to a standard practice
Entering Initial HTML Tags
all Web page content will be placed here
ending BODY and HTML tags
If you notice an error in the text,
use the BACKSPACE key to
erase all the characters back to
and including the one that is
incorrect
Headings
• Used to separate text and introduce new
topics
• Vary in size, from <H1> through <H6>
• Use the same sized heading for the same
level of topic
Paragraphs
• Most text on Web pages is in paragraph
format
• The <P> tag has an optional ending tag
• When a browser finds a <P> tag, it starts a
new line and adds a paragraph break
• Try not to type large sections of text without
having paragraph breaks
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
Unordered Lists
<H3>Unordered Lists</H3>
<UL TYPE=“disc”>
<LI>First item – type disc</LI>
<LI>Second item – type disc</LI>
</UL>
<UL TYPE=“square”>
<LI>First item – type square</LI>
<LI>Second item – type square</LI>
<UL>
<UL TYPE=“circle”>
<LI>First item – type circle</LI>
<LI>Second item – type circle</LI>
</UL>
Ordered Lists
<H3>Ordered Lists</H3>
<OL TYPE=“1”>
<LI>First item – type 1</LI>
<LI>Second item – type 1</LI>
</OL>
<OL TYPE=“A”>
<LI>First item – type A</LI>
<LI>Second item – type A</LI>
</OL>
<OL TYPE=“a”>
<LI>First item – type a</LI>
<LI>Second item – type a</LI>
</OL>
<OL TYPE=“I”>
<LI>First item – type I</LI>
<LI>Second item – type I</LI>
</OL>
<OL TYPE=“i”>
<LI>First item – type i</LI>
<LI>Second item – type i</LI>
</OL>
Creating a Bulleted List
bulleted list
tags and text
Saving the HTML File
• You must save the file before you can view
it in your browser
• HTML files must end with an extension of
.htm or .html
• .html extensions only work on Web servers
running an operating system that supports
long filenames
maximize
button
Internet Explorer Window
Your Browser
menu bar
address bar
default
startup page
status bar
standard
buttons
toolbar
Your Web Page
title
main heading
paragraph
H2 heading
body of
Web page
bulleted list
Adding Background Color
Locate the
6-character code
of the color you
wish to use
Adding Background Color
Background color code goes
at the end of the BODY tag
Centering the Heading
• Text can be aligned differently on the page
– ALIGN = “LEFT”
– ALIGN = “RIGHT”
– ALIGN = “CENTER”
• The default alignment for headings is leftalignment
Centering the Heading
center-alignment code
Adding a Horizontal Rule
• Horizontal Rules are graphical images that
act as dividers
• The tag used to insert a Horizontal Rule is
<HR>
• Horizontal Rules are easy to insert
Adding a Horizontal Rule
• Horizontal Rules are graphical images that
act as dividers
• The tag used to insert a Horizontal Rule is
<HR>
• Horizontal Rules are easy to insert
Adding a Horizontal Rule
<HTML>
<HEAD><TITLE>Horizontal Rules</TITLE>
</HEAD>
<BODY BGCOLOR=#94D6E7>
<P>Default HR</P>
<HR>
<P>HR with size=1</P>
<HR SIZE=1>
<P>HR with size=5</P>
<HR SIZE=5>
<P>HR with size=10</P>
<HR SIZE=10>
<P>HR with size=10 and noshade</P>
<HR SIZE=10 NOSHADE>
</BODY>
</HTML>
Adding a Horizontal Rule
horizontal
rule tag
Viewing the Modified File in Your
Browser
after saving the modified file,
click the Refresh button in
your browser
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
Definition Lists
• Used to list information without the
standard bullet or numbered list symbols
• Syntax is not as straightforward as <UL>,
<OL>, or <LI>
• <DL> and </DL> start and end the list
• <DT> and <DD> are used to create the
actual list elements, terms, and definitions
Definition Lists
definition list start
definition
term start
definition
start
definition list end
definition terms
definitions
Summary
• Identify elements of a Web Page
• Enter the <HTML>, <HEAD>, <TITLE>,
and <BODY> tags
• Enter a paragraph of text, a bulleted list, and
HTML tags
• Save an HTML file