1 / 55

CHAPTER 2 LIST - FORMATTING AND EDITING

CHAPTER 2 LIST - 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.

ewa
Download Presentation

CHAPTER 2 LIST - FORMATTING AND EDITING

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CHAPTER 2 LIST-FORMATTING AND EDITING

  2. Contents • Marking a List • Font formatting • Working with Color in HTML • Defining Foreground and Background colors • Understanding URLs • Working with Links • Images-image Map

  3. 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>

  4. 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

  5. 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>

  6. Marking a List • Example: <ol> <li> Primary Area</li> <li> Transition</li> <li> Secondary Area</li> <li> Closing Area </li> </ol>

  7. 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

  8. 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>

  9. Marking a List

  10. 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>

  11. Marking a List

  12. 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>

  13. 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>

  14. Definition Lists

  15. blockquote <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>

  16. blockquote

  17. Font formatting • <font>: format text in a fixed way • <font size=“value” color=“value” face=“face”>text </font>

  18. 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)

  19. Font formatting • Font size: The style to change the font size of text within an element: font-size: value Example: font-size: 150% font-size: 0.5in font size: 20 px (default) <font style="font-size:36px">ĐHCNTP. HCM</font>

  20. Font formatting • Use the Style with <span> and <div> tag: • <Span> Ex:<font style="font-size:36px">ĐạiHọc<span style="color: #F00">CôngNghiệp TP. HCM </span> </font>

  21. Font formatting • <div> Example: <font style="font-size:36px">ĐạiHọc<div style="color:#F00">CôngNghiệp TP. HCM </div> </font>

  22. 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)

  23. 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

  24. 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)

  25. 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

  26. Foreground & Background Colors • To change the color scheme of web page you use Body tag <BODY BGCOLOR=color TEXT=color LINK=color VLINK=color>

  27. 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).

  28. 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

  29. 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”.

  30. 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>

  31. Working with Links • Create a mailto link: <p>This is a mail link: <a href=mailto:someone@microsoft.com?subject=Hello%20again>Send Mail</a> </p> • Result on browser: This is a mail link: Send Mail

  32. Working with Links • Creating Links Within a Document: • Using a link to access information at the bottom of a Web page instead scrolling down.

  33. 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>

  34. 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.

  35. 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>

  36. Working with Links

  37. 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>

  38. 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.

  39. 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.

  40. 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>

  41. 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>

  42. Images-image map • <Image> : Insert an Image on your web page • <img> is an empty tag • Link 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>

  43. IMAGES-IMAGE MAP • Optional Attributes

  44. 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>

  45. Images-image map

  46. Images-image map • HTML <img> align Attribute

  47. Images-image map • Example: <IMG src=hinh.gif Align=bottom> <IMG src=hinh.gif Align=middle> <IMG src=hinh.gif Align=top>

  48. 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.

  49. 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.

  50. 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”>

More Related