• Published on

  • View

  • Download


  • Slide 1

CHAPTER 2 LIST-FORMATTING AND EDITING CHAPTER 2 LIST-FORMATTING AND EDITING Slide 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 Slide 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 Slide 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 Slide 5 Marking a List Example: Primary Area Transition Secondary Area Closing Area Slide 6 Marking a List Example: Primary Area Transition Secondary Area Closing Area Slide 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 Slide 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 Slide 9 Marking a List Slide 10 Exposition Primary Area Transition Secondary Area Development Recapitulation Primary Area Secondary Area Coda Slide 11 Marking a List Slide 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 Slide 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. Slide 14 Definition Lists Slide 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 Slide 16 Slide 17 Font formatting : format text in a fixed way text Slide 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) Slide 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 Slide 20 Font formatting Use the Style with and tag: Ex: i H c Cng Nghi p TP. HCM Slide 21 Font formatting Example: i Hc Cng Nghip TP. HCM Slide 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) Slide 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 Slide 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) Slide 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 Slide 26 Foreground & Background Colors To change the color scheme of web page you use Body tag Slide 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). Slide 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 Slide 29 Understanding URLs If a URL includes no path, then it indicates the topmost folder in the servers directory tree. If a URL does not specify a filename, the server searches for a file named index.html or index.htm. Slide 30 Working with Links Create a hypertext link: Ex: Go to page 2 WWU The target Attribute: Defines where the linked document will be opened. Ex: WWU Link text Slide 31 Working with Links Create a mailto link: This is a mail link: Send Mail %20again Result on browser: This is a mail link: Send MailSend Mail Slide 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. Slide 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 Slide 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. Slide 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. Slide 36 Working with Links Slide 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 Slide 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 files location, or path, so that browsers can find it. HTML supports two kinds of paths: relative and absolute. Slide 39 Working with Links An absolute path: Specifies a files precise location within a computers entire folder structure A relative path: Specifies a files location in relation to the location of the current document. Slide 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 Slide 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: Slide 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: Slide 43 IMAGES-IMAGE MAP Optional Attributes Slide 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. Slide 45 Images-image map Slide 46 HTML align Attribute Slide 47 Images-image map Example: Slide 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. Slide 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. Slide 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: Slide 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 Slide 52 Images-image map Example: Slide 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. Slide 54 Images-image map Create an image map: Surround hotspots with the element hotspots Add this attribute to the : Slide 55 Images-image map Example:


View more >