1. CHAPTER 2 LIST-FORMATTING AND EDITING 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 tag. Each item within that ordered list is subsequently – The syntax of an ordered list is: Item1 … Item n

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: Primary Area Transition Secondary Area Closing Area

6. Marking a List  Example: Primary Area Transition Secondary Area Closing Area

7. Marking a List  Unordered Lists: To mark a list in which the items do not need to occur in any special order. – Syntax: Item 1 … Item n Shape1, shape2: circle, square, Disc

8. Marking a List  Example: Education Colorado State University (1999-2001) Graduated May: 2001.M.A. International Telecom Grade Point Averge: 3.5 overrall, 3.9 in major Dean's List :September 1999-May 2001 Member,Phi Alpha Omega Honor Society

9. Marking a List

10. Exposition Primary Area Transition Secondary Area Development Recapitulation Primary Area Secondary Area Coda

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 Term1 description1 … Termn descriptionn

13. Definition Lists Learning HTML Definition List Pixel 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. Resolution 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. Scanner A hardware device that allows the user to make electronic copies of graphics or text.

14. Definition Lists

15. Doc-Centric Sales: Northeast Region 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. blockquote

17. Font formatting  : format text in a fixed way  text

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) ĐHCNTP. HCM

20. Font formatting  Use the Style with and tag: – Ex: Đ ạ i H ọ c Công Nghi ệ p TP. HCM

21. Font formatting – Example: Đại Học Công Nghiệp TP. HCM

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  Background color definition: Ex – 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

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: Go to page 2 WWU http://www.wwu.edu  The target Attribute: – Defines where the linked document will be opened. Ex: WWU http://www.wwu.edu Link text

31. Working with Links  Create a mailto link: This is a mail link: Send Mail mailto:someone@microsoft.com?subject=Hello %20again – Result on browser: This is a mail link: Send MailSend 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. Any content

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: Using htm links Internet Introduction to HTML Internet 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. Introduction to HTML 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.

36. Working with Links

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

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: Link to Page1 – If the file is in a subfolder of the current document, you have to include the name of the subfolder. Ex: Link to Page1

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: – 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:

42. Images-image map  : Insert an Image on your web page – is an empty tag  Link images: To mark an image as a hypertext link, you enclose the tag within tag. – Optional Attributes:

43. IMAGES-IMAGE MAP  Optional Attributes

44. Images-image map 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. 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.

45. Images-image map

46.  HTML align Attribute

47. Images-image map  Example:

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 tag, you can use a graphic file as a background image for your page. – Syntax: Example:

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

52. Images-image map  Example:

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

54. Images-image map  Create an image map: – Surround hotspots with the element hotspots – Add this attribute to the :

55. Images-image map Example: