Embed Size (px)
Citation preview
HTML Notes for HTML Notes for Self StudySelf Study
HTML Notes for HTML Notes for Self StudySelf Study
What you should know about HTML
• General Structure of HTML• headings, setting style• Text, paragraphs, and lists• Anchors, Names and Links• Images• Tables• fames and miscellaneous• style sheets
What is HTML• HTML was developed by Tim Berners-
Lee of CERN around 1990• HTML is understood by WWW browsers
—e.g., Netscape’s Navigator, and Microsoft’s Internet Explorer—which interpret and display the output to the viewer
• Depends on browsers, same html page may look differently.
What is HTML• Hypertext Markup Language (HTML) is a
language in which one can describe:– The display and format of text– The display of graphics– Pointers to other html files– Pointers to files containing graphics,
digitized video and sound– Forms that capture information from
the viewer
An ExampleThe nine planets of the solar system are mercury, venus, earth, mars, jupiter, saturn, uranus, neptune and pluto.
The very nearest star is about 7,000 times farther away than pluto is to our sun.
Save this file as example1.txt & as example1.html
Browser Output - Example 1
example1.html example1.txt
Example 2: Adding Some Markup
<P>The nine planets of the solar system are <B>mercury, venus, earth, mars, jupiter, saturn, uranus, neptune and pluto.</B></P>
<P>The very nearest star is about <I>7,000</I> times farther away than pluto is to our sun. </P>
General Structure• HTML documents have a head and body
– head should contain a title– body may have paragraphs
• A leading line indicates which version of HTML this document conforms to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN""http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML>
<HEAD> <TITLE>The Solar System</TITLE> </HEAD> <BODY> <P>The nine planets of the solar system are... </BODY> </HTML>
Browsers Are Tolerant
• Browsers follow the rule of being tolerant of mistakes in the input– They ignore markup they don’t understand
• Netscape Navigator/Microsoft Internet Explorer are tolerant browsers– They do not insist that the HTML document
begin and end with <HTML>– <HEAD> and/or <BODY> tags are not required– But, there is no guarantee that this behavior will
be the same for all browsers
Example - Browsers are Tolerant
• Suppose the entire document is one line, such as:<HEAD>Text placed between <ODDTAG> HEAD markers is not normally displayed.</HEAD>
HTML Elements and Tags
• Each element consists of a start tag, content, and an end tag
• E.g. <BODY> some text </BODY>• A slash after the “<“ indicates an end tag• Some elements do not require end tags, e.g. <P> paragraph tag• Some elements do not require content, e.g. <HR>
horizontal rule tag places a straight line across the page
Attributes• Elements may have parameters, called attributes• Attributes are placed in the start tag before the final ">"• Attributes have the form name=valueE.g. <H1> is the first heading tag<H1 id="Chapter1">Start of Chapter 1</H1>• Attribute values are often enclosed in quotes, either double or
single• Quotes are not required when the value contains only letters,
digits, hyphens, and periods.• Attribute names are case insensitive, but not necessarily attribute values
Comments in HTML• Comments start with
<!--and end with-->
• Comments cannot be nested– Whitespace is permitted between the -- and the closing
angle bracket, >– It is not permitted between the opening angle bracket,
exclamation point, and the --• E.g.
<BODY><!-- This is a comment and hence not displayed -->But this will be displayed</BODY>
Example of <BODY> tag attributes
• Using inline style settings to set the font size, background and color of text
<HTML>
<HEAD> <TITLE>Setting Body Attributes</TITLE> </HEAD> <BODY style="font-size: 20pt; background: green; color: fuchsia"> The nine planets of the solar system ... </BODY></HTML>
Browser Output - Body Tag Attributes
Headings• There are six levels of headings: <H1,H2,...,H6>
• Navigator and Internet Explorer render them left aligned and bold• Includes paragraph breaks before and after and sufficient white space to render the heading
<HTML><HEAD><TITLE>The Solar System Headings</TITLE></HEAD><BODY><H1>The Solar System </H1><H2>The Solar System </H2><H3>The Solar System </H3><H4>The Solar System </H4><H5>The Solar System </H5><H6>The Solar System </H6></BODY></HTML>
Browser Output
Text Styling• Underline style
– <U>…</U>
• Align elements with ALIGN attribute– right, left or center
• Close nested tags in the reverse order from which they were opened
• Emphasis (italics) style– <EM>…</EM>
• Strong (bold) style– <STRONG>…</STRONG>
• <B> and <I> tags deprecated – Overstep boundary between content and presentation
Stylizing text on Web pages
Formatting Text With <FONT>
•SIZE– To make text larger, set SIZE = “+x”– To make text smaller, set SIZE = “-x”– x is the number of font point sizes
•FACE– Font of the text you are formatting– Be careful to use common fonts like Times, Arial, Courier
and Helvetica– Browser will display default if unable to display specified
font
• Example<FONT COLOR = “red” SIZE = “+1” FACE = “Arial”>…</FONT>
1<HTML>23<!-- Fig. 3.8: main.html -->4<!-- Formatting text size and color -->56<HEAD>7<TITLE>Internet and WWW How to Program - Welcome</TITLE>8</HEAD>910<BODY>1112<H1 ALIGN = "center"><U>Welcome to Our Web Site!</U></H1>1314<!-- Font tags change the formatting of text they enclose -->15<P><FONT COLOR = "red" SIZE = "+1" FACE = "Arial">We have 16designed this site to teach about the wonders of 17<EM>HTML</EM>.</FONT>1819<FONT COLOR = "purple" SIZE = "+2" FACE = "Verdana">We have been20using <EM>HTML</EM> since <U>version<STRONG> 2.0</STRONG></U>,21and we enjoy the features that have been added recently.</FONT>2223<FONT COLOR = "blue" SIZE = "+1" FACE = "Helvetica">It 24seems only a short time ago that we read our first <EM>HTML</EM>25book.</FONT>2627<FONT COLOR = "green" SIZE = "+2" FACE = "Times">Soon you will28know about many of the great new feature of HTML 4.0.</FONT></P>2930<H2 ALIGN = "center">Have Fun With the Site!</H2></P>3132</BODY>33</HTML>
Using the FONT element to format text
Horizontal Rule• The tag <HR> causes a horizontal line
to be drawn; attributes include:– Size, thickness in pixels
• <HR SIZE="15">
– Width, either pixels or percent• <HR NOSHADE WIDTH="50" SIZE="25">• <HR NOSHADE WIDTH="25%" SIZE="25">• <HR NOSHADE WIDTH="25%" ALIGN="right"
SIZE="25">
– The default positioning of a line is centered, but that can be overridden with the ALIGN attribute; its options are left, right, and center
Example - Horizontal Rule<HTML><HEAD><TITLE>Examples of Horizontal rule</TITLE></head><BODY><H2>Examples of Horizontal Rules</H2><HR>Rules of different sizes, SIZE=5, 10, and 25.<HR SIZE=5 NOSHADE><HR SIZE=10 NOSHADE><HR SIZE=25 NOSHADE>Rules of different alignment, ALIGN=left, center and right.<HR width=50% align=left> <HR width=50% align=center> <HR width=50% align=right>Rules of different width, width=10%, 25%, and 50%<HR width=10% align=center> <HR width=25% align=center> <HR width=50% align=center>
Browser Output
Anchors
• An anchor is a way to designate a link to another document or to a specific place in the same document
• Begins with <A> and ends with </A>• The link location is given by the attribute HREF
(Hypertext Reference); e.g.,See <A HREF="http://nunki.usc.edu/file.html">Class Home Page</A> for a description of the class project
• Hypertext links are displayed using underlining, color, or highlighting – Depends on the browser defaults or the use of style
settings – Once a link is taken, it should change color
Example Using Anchors for Naming<BODY><H1>Welcome to my HTML Tutorial</H1><A HREF="#intro">Introduction</A><BR><A HREF="#chap1">Chapter 1</A><BR><A HREF="#chap2">Chapter 2</A><BR>. . . Lots of text here . . . <A NAME="intro"></A><HR>Introduction: This document contains a short tutorial on how to write HTML. ...<P><A NAME="chap1"></A><B>Chapter 1</B><BR>In this chapter we learn what a markup language. . .<P><A NAME="chap2"></A><B>Chapter 2</B><BR>In this chapter we learn about anchors and their...
Browser Output for Naming
Examples of Anchors
• <A href=myfile.html> a file in the same directory and same domain as the current page
• <a href=file://g:\351\myfile.html> a file on your local machine in directory G:\351
• <A href=http://tlaloc.sfsu.edu/mydocs/book.doc>a file in directory mydocs on machine tlaloc.sfsu.edu, a WWW site
• <A href=news:comp.compilers> the newsgroup computers.compilers
• <A href=mailto:[email protected]> opens an an e-mail window for sending a message
• <A HREF="http://www.lycos.com/cgi-bin/pursuit?Hypertext+Markup+Language"> … </A> Connects to lycos and runs pursuit with three arguments
• <A HREF="ftp://ds.internic.net/rfc/rfc1866.txt">Download RFC1866 </A> An anchor that executes the ftp program to fetch a file
<IMG> Element
• The IMG element embeds an image in the current document, e.g. <IMG SRC="file.gif">
• Some attributes of <IMG> include– Align=top, middle, or bottom to align text around an
image– border to place a border around an image
• If set to 1 or higher, places a black box around the image
• If set to 0, leaves no surrounding box– height and width to control the dimensions of the
image– Alt to replace an image with text, if the image is
unavailable or a text browser is used; e.g.,<IMG SRC="eiffel.gif" ALT="picture of the Eiffel Tower">
Image - Formats
• Four image formats are always supported by Web browsers– x-bitmaps
• Commonly found on UNIX workstations • Black and white
– x-pixelmaps• Similar to x-bitmaps, but 8 bits are given to each
pixel, permitting 256 colors in the image– Graphic Interchange Format (GIF) images
• The most common• Support black and white, grayscale, and color
– Joint Photographic Experts Group (JPEG) image format
• Designed for photographic images• Includes image compression
Active Images & Animated GIF
• Active images are images that can be clicked and, just like an anchor, they act as a hypertext link<A HREF="http://sunset.usc.edu:8080/index.html"><IMG SRC="USCimage.gif"> </A>– Active images have a border around them and the
cursor changes shape when passed over
• Active images can be quite attractive, but remember, some people run line-only browsers, while others have low-bandwidth Internet connections and typically turn off the downloading of images
• Animated GIF provides a multiframe images in one image file
Image Maps
• Image maps are active images with multiple clickable regions
• each region can be associated with a specific action (e.g., retrieve a document, run a program, etc.)
• yahoo.com starts with an image map
• When the region is activated by the user, e.g. by a mouse click, the action is taken• There are two types of image maps:
• Client-side: the pixel coordinates are interpreted by the browser. • Server-side: the pixel coordinates are interpreted by a server-side program.
