CHAPTER 2 LIST-FORMATTING AND EDITING CHAPTER 2 LIST-FORMATTING AND EDITING.

55
CHAPTER 2 LIST-FORMATTING AND EDITING

Transcript of CHAPTER 2 LIST-FORMATTING AND EDITING CHAPTER 2 LIST-FORMATTING AND EDITING.

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>