CH**NG 1 - SaigonTech
advertisement
eXtensible Markup Language (XML) Tutorial 1 Developing a Book Info Webpage Contents I. Objectives II. Problem Description III. Solution 2 I. Objectives • • • • • • • • • Create the basic structure of an HTML file Insert an HTML comment Insert headings Insert paragraphs Insert images Create horizontal lines Create ordered and unordered lists Work with character sets and codes Compare one-sided and two-sided tags 3 II. Problem Description A student wants to create a webpage introducing the brief information about the book that he is reading. The web page is as follow: 4 III. Solution 1. Analysis and Design 2. Implementation 5 1. Analysis and Design Title Headings Image Horizontal Line The Brief Information of the book 6 2. Implementation 2.1 Marking Elements with Tags 2.2 Creating a Webpage Folder 2.3 Developing the Title 2.4 Developing the Headings 2.5 Inserting the Image 2.6 Developing the Horizontal Line 2.7 Developing the Brief Information 7 2.1 Marking Elements with Tags The core building block of HTML is the tag Two-sided tag <element>content</element> • <element> is opening tag • </element> is opening tag • Example: <p>Welcome to HTML Tag</p> One-sided tag <element attribute=“value”/> 8 2.2 Creating a Webpage Folder 2.2.1 Creating a new html file 2.2.2 Moving the book image 2.2.3 Creating the Standard Structure 2.2.4 Insert a comment 9 2.2.1 Creating a new html file Suppose that you have a folder named My Webpage. In the folder, Right-click > New > Text Document. Rename to book_info.html with html is the extension. Open it with Notepad. 10 2.2.2 Moving the book image Suppose you have an image named xml_book.jpg, copy it into the My Webpage folder. 11 2.2.3 Creating the Standard Structure An HTML document must be surrounded with <html> tag. It’s also called root element. An HTML document is divided into two sections: a <head> tag and a <body> tag. 12 2.2.4 Insert a comment Use the tag <!-- comments --> to insert comments HTML document. All comments are ignored by the browser. But they help explain your code to yourself and others 13 2.3 Developing the Title The title of a web page must be inserted within the <head> element. Use the <title> tag to create the title. 14 2.4 Developing the Headings 2.4.1 Inserting the Book’s Name 2.4.2 Inserting the Book’s Author 15 2.4.1 Inserting the Book’s Name Use the <h1> tag to insert the book name heading and the align=“center” attribute. The <h1> tag must be placed in the <body> tag. 16 2.4.2 Inserting the Book’s Author Similarly, use the <h3> tag to insert the book’s author heading and the align=“center“ attribute 17 2.5 Inserting the Image Use the tag <img> to insert an image. 18 2.6 Developing the Horizontal Line Use the tag <hr> to insert a horizontal line. 19 2.7 Developing the Brief Information 2.7.1 Inserting the Book Description part 2.7.2 Inserting the Table of Contents part 2.7.3 Inserting the Footer part 20 2.7.1 Inserting the Book Description part Create a paragraph with <p> tag. 21 2.7.2 Inserting the Table of Contents part Use the <ol> and <li> tags to insert an ordered list. 22 Use the <ul> and <li> tags to insert an unordered list. Change the marker type with attribute type=“ square” Put the unordered list inside the ordered list, also called nested list. 23 2.7.3 Inserting the Footer part 24 References New Perspectives HTML, XHTML, and XML (Patrick Carey & Mary Kemper) - Course Technology Publisher Creating Cool Web Sites with HTML, XHTML and CSS - Taylor, Dave, Wiley 25 List-Style-Type Reference List-Style-Type Marker(s) disc circle square decimal 1, 2, 3, 4, … decimal-leading-zero 01, 02, 03, 04, … lower-roman I, ii, iii, iv, … upper-roman I, II, III, IV, … lower-alpha a, b, c, d, … upper-alpha A, B, C, D, … none No marker 26 Special Characters 27
