Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 37 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
37
Dung lượng
3,95 MB
Nội dung
Create by TrungNT EXAMPLES FOR HTML COURSE Create by mrtblack From : www.w3schools.com VP, 22-07-11 Table of contents : Basic Tags A very simple HTML document 4 How text inside paragraphs is displayed More paragraphs The use of line breaks Poem problems (some problems with HTML formatting) Heading tags Center aligned heading Insert a horizontal rule Comments in the HTML source Add a background color 5 Add a background image Formatting Text Text formatting Preformatted text (how to control line breaks and spaces) Different computer-output tags Insert an address 6 Abbreviations and acronyms Long and short quotations How to mark deleted and inserted text 7 Links How to create hyperlinks Set an image as a link 8 Open a link in a new browser window Jump to another part of a document (on the same page) Break out of a frame 10 How to link to a mail message (will only work if you have mail installed) Frames How to create a vertical frameset with 3 different documents 11 How to create a horizontal frameset with 3 different documents How to mix a frameset in rows and columns 12 How to create a navigation frame Inline frame (a frame inside an HTML page) 13 Jump to a specified section within a frame Jump to a specified section with frame navigation 14 KTCN-CTT Create by TrungNT Tables Simple tables Different table borders 15 Table with no borders Headings in a table 16 Empty cells Table with a caption 17 Table cells that span more than one row/column 18 Tags inside a table 19 Cell padding (control the white space between cell content and the borders Cell spacing (control the distance between cells) Add a background color or a background image to a table 20 Add a background color or a background image to a table cell 21 Align the content in a table cell The new frame attribute Lists An unordered list 22 An ordered list 23 Different types of ordered lists Different types of unordered Lists 24 Nested list Nested list 2 25 Definition list Forms and Input How to create input fields 26 Password fields Checkboxes Radiobuttons 27 Simple drop-down box (a selectable list) Another drop-down box with a pre-selected value Textarea (a multi-line text input field) Create a button Draw a border with a caption around data Form with an input field and a submit button 28 Form with checkboxes and a submit button Form with radiobuttons and a submit button Send a mail from a form 29 Images Insert images Insert images from another folder or another server Align an image within a text 30 Let the image float to the left/right of a paragraph 31 Adjust images to different sizes 32 Display an alternate text for an image (if the browser can't load images) Make a hyperlink of an image Create an image-map, with click-able regions Backgrounds KTCN-CTT Create by TrungNT Good background and text color Bad background and text color Good background image Good background image 2 Bad background image Styles Styles in the head section of an HTML document 33 Link that is not underlined 34 Link to an external style sheet The Head Section Set a title of a document One target for all links on a page The Meta Tag Document description Document keywords Redirect a user to another URL 35 KTCN-CTT Create by TrungNT 1. A very simple HTML document <html> <body> The content of the body element is displayed in your browser. </body> </html> 2. How text inside paragraphs is displayed <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>Paragraph elements are defined by the p tag.</p> </body> </html> 3. The use of line breaks <html> <body> <p> To break<br>lines<br>in a<br>paragraph,<br>use the br tag. </p> </body> </html> 4. Heading tags <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> KTCN-CTT Create by TrungNT <p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p> </body> </html> 5. Add a background color <html> <body bgcolor="yellow"> <h2>Look: Colored Background!</h2> </body> </html> 6. Text formatting <html> <body> <b>This text is bold</b> <br> <strong> This text is strong </strong> <br> <big> This text is big </big> <br> <em> This text is emphasized </em> <br> This text is bold This text is strong This text is big This text is emphasized This text is italic This text is small This text contains subscript This text contains superscript 7. Insert a horizontal rule <html> <body> <p>The hr tag defines a horizontal rule:</p> The hr tag defines a horizontal rule: KTCN-CTT Create by TrungNT <hr> <p>This is a paragraph</p> <hr> <p>This is a paragraph</p> <hr> <p>This is a paragraph</p> </body> </html> This is a paragraph This is a paragraph This is a paragraph 8. Insert an address <html> <body> <address> Donald Duck<br> BOX 555<br> Disneyland<br> USA </address> </body> </html> Donald Duck BOX 555 Disneyland USA 9. How to create hyperlinks <html> <body> <p> <a href="lastpage.htm"> This text</a> is a link to a page on this Web site. </p> <p> <a href="http://www.microsoft.com/"> This text</a> is a link to a page on the World Wide Web. </p> This text is a link to a page on this Web site. This text is a link to a page on the World Wide Web. KTCN-CTT Create by TrungNT </body> </html> 10. Preformatted text (how to control line breaks and spaces) <html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html> This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i = 1 to 10 print i next 11. How to mark deleted and inserted text <html> <body> <p> a dozen is <del>twenty</del> <ins>twelve</ins> pieces </p> <p> Most browsers will overstrike deleted text and underline inserted text. </p> a dozen is twelve pieces Most browsers will overstrike deleted text and underline inserted text. Some older browsers will display deleted or inserted text as plain text. KTCN-CTT Create by TrungNT <p> Some older browsers will display deleted or inserted text as plain text. </p> </body> </html> 12. Set an image as a link <html> <body> <p> You can also use an image as a link: <a href="lastpage.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> </p> </body> </html> You can also use an image as a link: 13. Open a link in a new browser window <html> <body> <a href="lastpage.htm" target="_blank">Last Page</a> <p> If you set the target attribute of a link to "_blank", the link will open in a new window. </p> </body> </html> Last Page If you set the target attribute of a link to "_blank", the link will open in a new window. 14. Jump to another part of a document (on the same page) <html> <body> See also Chapter 4. KTCN-CTT Create by TrungNT <p> <a href="#C4"> See also Chapter 4. </a> </p> <p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <a name="C4"><h2>Chapter 4</h2></a> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p> Chapter 1 This chapter explains ba bla bla Chapter 2 This chapter explains ba bla bla Chapter 3 This chapter explains ba bla bla Chapter 4 This chapter explains ba bla bla Chapter 5 This chapter explains ba bla bla Chapter 6 This chapter explains ba bla bla Chapter 7 This chapter explains ba bla bla Chapter 8 This chapter explains ba bla bla Chapter 9 This chapter explains ba bla bla Chapter 10 This chapter explains ba bla bla Chapter 11 KTCN-CTT Create by TrungNT <h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p> </body> </html> This chapter explains ba bla bla Chapter 12 This chapter explains ba bla bla Chapter 13 This chapter explains ba bla bla Chapter 14 This chapter explains ba bla bla Chapter 15 This chapter explains ba bla bla Chapter 16 This chapter explains ba bla bla Chapter 17 This chapter explains ba bla bla 15. Break out of a frame <html> <body> <p>Locked in a frame?</p> <a href="http://www.w3schools.com/" target="_top">Click here!</a> </body> </html> Locked in a frame? Click here! 16. How to link to a mail message (will only work if you have mail installed) <html> KTCN-CTT [...]... TrungNT < /html> 19 How to mix a frameset in rows and columns < /html> ... KTCN-CTT Create by TrungNT < /html> 21 Inline frame (a frame inside an HTML page) Some older browsers don't support iframes. If they don't, the iframe will not be visible. < /html> 22 Jump to a specified... properly < /html> This is a mail link: Send Mail Note: Spaces between words should be replaced by %20 to ensure that the browser will display your text properly 17 How to create a vertical frameset with 3 different documents < /html> 18 How to create... section within a frame KTCN-CTT Create by TrungNT < /html> 23 Jump to a specified section with frame navigation < /html> 24 Simple tables KTCN-CTT Create by TrungNT Each table starts... < /html> 34 An unordered list An Unordered List: • • An Unordered List: Coffee Tea Milk • Coffee Tea Milk < /html> 35 An ordered list An Ordered List: An Ordered List: Coffee Tea Milk 1 Coffee 2 Tea 3 Milk < /html> 36 Different types of ordered lists ... called html_ form_action.asp If you click the "Submit" button, you will send your input to a new page called html_ form_action.asp < /html> 46 Form with checkboxes and a submit button I have a bike: I have a car: Submit If you click the "Submit" button, you send your input to a new page called html_ form_action.asp... in the text An image before the text An image after the text < /html> 50 Let the image float to the left/right of a paragraph KTCN-CTT 56 The Meta Tag : Document keywords Create by TrungNT The meta attributes of this document describe the document and its keywords The meta attributes of... versions of Netscape don't understand the id attribute. < /html> 53 Styles in the head section of an HTML document This is header 1 This is header 3 h1 {color: red} h3 {color: blue} This is header 1 This is header 3 < /html> 54 Link that is not underlined THIS IS A LINK! KTCN-CTT Create by TrungNT 44 Another drop-down box with a pre-selected value Volvo Saab Fiat Audi < /html> 45 Form with an input field and a submit button . simple HTML document < ;html& gt; <body> The content of the body element is displayed in your browser. </body> < /html& gt; 2. How text inside paragraphs is displayed < ;html& gt; <body> <p>This. that.</p> </body> < /html& gt; 5. Add a background color < ;html& gt; <body bgcolor="yellow"> <h2>Look: Colored Background!</h2> </body> < /html& gt; 6. Text formatting < ;html& gt; <body> <b>This. documents < ;html& gt; <frameset cols="25%,50%,25%"> <frame src="tryhtml_frame_a.htm"> <frame src="tryhtml_frame_b.htm"> <frame src="tryhtml_frame_c.htm"> </frameset> < /html& gt; 18.