CHAPTER 2LIST-FORMATTING AND EDITING
Contents
Marking a List
Font formatting
Working with Color in HTML
Defining Foreground and Background colors
Understanding URLs
Working with Links
Images-image Map
Marking a List
Ordered Lists: Use an ordered list for items that must appear in a numeric order. – Use <ol> tag. Each item within that ordered list
is subsequently– The syntax of an ordered list is:
<OL type=x start=n><LI type=x1 value=m>Item1</li>…<LI type=x1 value=m>Item n</li>
</OL>
Marking a List
- x: Type the characters you want to use in the list:– A: Uppercase– a: Lowercase– I: Numbered with Roman– i: Code is usually– 1: For the number of
-n: The first value of the list-x1: Character is used for this line and the next
line, losing the effect of x-m: The value of the first line, change the value of n
Marking a List
Example:<ol type=A> <li> Primary Area</li> <li> Transition</li> <li type="1" value=2> Secondary Area</li> <li> Closing Area </li></ol>
Marking a List
Example:<ol> <li> Primary Area</li> <li> Transition</li> <li> Secondary Area</li> <li> Closing Area </li></ol>
Marking a List
Unordered Lists: To mark a list in which the items do not need to occur in any special order.– Syntax:
<UL type=shape1><LI type=shape2>Item 1</li>…<LI shape=shape2>Item n</li>
</UL>Shape1, shape2: circle, square, Disc
Marking a List
Example:
<body>
<p>Education<br/>
Colorado State University (1999-2001)</p>
<ul type="square">
<li> Graduated May: 2001.M.A. International Telecom</li>
<li> Grade Point Averge: 3.5 overrall , 3.9 in major</li>
<li> Dean's List :September 1999-May 2001</li>
<li> Member,Phi Alpha Omega Honor Society</li>
</ul>
</body>
Marking a List
Marking a List
<ol>
<li>Exposition
<ul>
<li> Primary Area</li>
<li> Transition</li>
<li> Secondary Area</li>
</ul>
</li>
<li> Development</li>
<li> Recapitulation
<ol>
<li> Primary Area</li>
<li> Secondary Area</li>
</ol>
</li>
<li> Coda </li>
</ol>
Marking a List
Definition Lists
Definition list: which contains a list of terms, each followed by the term's description. – The syntax for creating a definition list is
<dl><dt>Term1</dt><dd>description1 </dd>…<dt>Termn</dt><dd>descriptionn </dd>
</dl>
Definition Lists<HTML>
<HEAD><TITLE>Learning HTML</TITLE></HEAD><BODY><h2> Definition List</h2><DL><DT>Pixel<DD> Short for picture element. A pixel refers to the small dots that make up an image on the screen. Pixel depth refers to the number of colours which may be displayed.<DT>Resolution<DD>The quality of the display on a monitor. The higher the resolution, the sharper the image. The number of pixels that can be displayed on a screen defines resolution.<DT>Scanner<DD> A hardware device that allows the user to make electronic copies of graphics or text.</DL></BODY>
</HTML>
Definition Lists
<blockquote>
<p>Doc-Centric Sales: Northeast Region<br />
The Northeast region had a mixed sales year last year. Some models like the C300-25 performed admirably, while others like the C200-20 had disappointing years. </p>
</blockquote>
blockquote
blockquote
Font formatting
<font>: format text in a fixed way<font size=“value” color=“value” face=“face”>
text </font>
Font formatting
Font size: Absolute units define a font size using one of five standard units of measurement:– Millimeters (mm)– Centimeters (cm)– Inches (in)– Points (pt)– Picas (pc)
Font formatting
Font size: The style to change the font size of text within an element: font-size: valueExample:
font-size: 150%font-size: 0.5infont size: 20 px (default)
<font style="font-size:36px">ĐHCNTP. HCM</font>
Font formatting
Use the Style with <span> and <div> tag:– <Span>
Ex:<font style="font-size:36px">Đ i H c <span style="color: ạ ọ#F00">Công Nghi p TP. HCM </span> </font>ệ
Font formatting
– <div>Example: <font style="font-size:36px">Đ i H c ạ ọ<div style="color:#F00">Công Nghi p TP. HCM </div> ệ</font>
Font formatting
Spacing and Indentation:– Space between words and phrases
word-spacing: value (default = 0px)– Space between pairs of letters
letter-spacing: value (default = 0px)– Space between lines of text
line-height: value(default =1.2*the font size)
Font formatting
Font Styles and Weights: – font-style: type
type= normal, italic, or oblique– font-weight: weight
weight = 100, 200, …,900, or bold, normal, …– text-decoration: type
(type=none, underline, overline) To change the appearance of text
Font formatting
Decorative Features– Underline, overline:
text-decoration: underline, overline– Capitalize:
text-transform: (capitalize, uppercase, lowercase, none)
– Uppercase letters, small font: font-variant: type (type = normal or
smallcaps)
Foreground & Background Colors
Foreground color definition: color: color– Color is either the color value or the color name Ex <h1 style=“color: blue”>
Background color definition:
Ex <h1 style=“background-color : yellow”>– You can apply foreground and background
colors to any page element.
background-color: color
Foreground & Background Colors
To change the color scheme of web page you use Body tag
<BODY BGCOLOR=color TEXT=color LINK=color VLINK=color>
Understanding URLs
URL (Uniform Resource Locator): – Specifies the precise location of a resource on the
Internet.– To create a link to a resource on the Internet, you
need to know its URL.Protocol:
– Set of rules defining how information is exchanged between two resources.
– Your Web browser communicates with Web servers using the Hypertext Transfer Protocol (HTTP).
Understanding URLs
– The URLs for all Web pages must start with the scheme “http”.
– Other Internet resources use different protocols and have different scheme names.
– A sample URL for a Web page
Understanding URLs
– If a URL includes no path, then it indicates the topmost folder in the server’s directory tree.
– If a URL does not specify a filename, the server searches for a file named “index.html” or “index.htm”.
Working with Links
Create a hypertext link:
Ex: <a href="page2.html" >Go to page 2</a><a href=http://www.wwu.edu>WWU</a>
The target Attribute: – Defines where the linked document will be
opened. Ex: <a href=http://www.wwu.edu target="_blank“>
WWU </a>
<a href = URL>Link text </a>
Working with Links
Create a mailto link:<p>This is a mail link:
<a href=mailto:[email protected]?subject=Hello%20again>Send Mail</a>
</p>– Result on browser:
This is a mail link: Send Mail
Working with Links
Creating Links Within a Document: – Using a link to access information at the bottom
of a Web page instead scrolling down.
Working with Links
Creating Links Within a Document: – Step1: Create an anchor
– Step 2: Create a link to anchor:
The # in the href attribute defines a link to a named anchor.
<a ID="label">Any content</a>
<a href="#label">Any content</a>
Working with Links
ID attribute: to identify elements in an HTML document. Id names must be unique.
An anchor element marks a specific location within a document.
Example:<HTML><HEAD><TITLE> Using htm links</TITLE> </HEAD><BODY><A HREF = “#Internet”>Internet</A><BR><A HREF = “#HTML”>Introduction to HTML</A><BR><A id = “Internet”>Internet</A>
The Internet is a standardized, global system of interconnected computer networks linking millions of people worldwide. It is a network of networks that consists of millions of private and public, academic, business, and government networks of local to global scope that are linked by copper wires, fiber-optic cables, wireless connections, and other technologies.
<A id = “HTML”>Introduction to HTML</A><BR>HTML, which stands for Hyper Text Markup Language, is the predominant
markup language for web pages. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists etc as well as for links, quotes, and other items.
</BODY></HTML>
Working with Links
Working with Links
Linking to a location within another Document:– When linking to a location within another
document, you must use the anchor name of the location within the document and the filename.
<a href = “ filename#ID”>content</a>
Working with Links
Linking to Documents in other Folders– To create a link to a file located in a different
folder than the current document, you must specify the file’s location, or path, so that browsers can find it.
– HTML supports two kinds of paths: relative and absolute.
Working with Links
– An absolute path: Specifies a file’s precise location within a
computer’s entire folder structure– A relative path:
Specifies a file’s location in relation to the location of the current document.
Working with Links
– If the file is in the same location as the current document, you do not have to specify the folder name.
Ex: <a href=Page1.html>Link to Page1</a>– If the file is in a subfolder of the current
document, you have to include the name of the subfolder.
Ex: <a href=Subfolder/Page1.html>Link to Page1 </a>
Working with Links
– If you want to go one level up the folder tree, you start the relative path with a double period (..) and then provide the name of the file.EX: <a href=../page1.html>
– To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder.EX: <a href=../subfolder/page1.html>
Images-image map
<Image> : Insert an Image on your web page
– <img> is an empty tagLink images: To mark an image as a hypertext
link, you enclose the <IMG> tag within <a> tag.
– Optional Attributes:
<img src="url" />
<a href=url><img src=url><a>
IMAGES-IMAGE MAP
Optional Attributes
Images-image map
<p><img src=“../Images/h15.jpg” alt="Angry" align="left" width="50" height="50"/> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.
</p><p>
<img src=“../Images/h19.jpg” alt="Angry" align="right“ width="50" height="50"/>A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.
</p>
Images-image map
Images-image map
HTML <img> align Attribute
Images-image map
Example:
<IMG src=hinh.gif Align=top>
<IMG src=hinh.gif Align=middle>
<IMG src=hinh.gif Align=bottom>
Images-image map
Types of images for web:– JPEG (Joint Photographic Experts Group)– JPEG images can use the full spectrum of colors
(16.7 different colors)– Animation and transparency not supported.– General rule: Use JPEGs when dealing with
photographs, use GIFs for illustrations that use few colors.
Images-image map
– GIF (Graphics Interchange Format) is the most commonly used image format on the Web. Compatible with virtually all browsers.
– GIF files are limited to displaying 256 colors.– Often used for graphics requiring fewer colors,
such as clip art images, line art, logos, and icons.
Images-image map
Background Image:– With the Background property of the <Body>
tag, you can use a graphic file as a background image for your page.
– Syntax:
Example:<BODY BACKGROUND =“../IMAGE/Bg.gif”>
<BODY BACKGROUND=“Image file”>
Images-image map
The Values of the Background-Image attribute:– Background-Image– Background-Image: repeate– Background-Image: repeate-x– Background-Image: repeate-y– Background-Image: no-repeate
Images-image map
Example:
Images-image map
Image maps: – Split the image into some regions. Each region is
a hyperlink.A hotspot: is a defined area of the image that acts
as a hypertext link.
shape : Rect/Circle/Poly Image maps: is list the positions of all hotspots
within an image.
<area shape=“shape” coords=“coordinates” href=“url” alt=“text” />
Images-image map
Create an image map: – Surround hotspots with the <map> element
<map name=“mapID” id=“mapID”>hotspots
</map>– Add this attribute to the <img>:
<img usemap=“# mapID”>
Images-image map
Example:<img src="../Images/images.jpg" width="353" height="266" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="172,146,204,201" href="bdvn.html" /><area shape="poly" coords="106, 24, 55, 89, 104, 131, 153, 142, 209, 155, 246, 124, 233, 79, 283, 59, 295,32" href="tq.html" />
</map>