Markup and Rendering ◼ A markup language uses set of annotations describe how a text is to be structured, laid out, or formatted ◼ HTML is markup language Use tags <html>, <b>, <i>, … File extension: html, htm ◼ Latex is a markup language Use environments, commands: \begin{equation}, \textcolor{}{} … ◼ XML, WML …
Markup and Rendering ◼ Rendering = visualize HTML document with web browser ◼ Browser Is application that is installed on the client machine. reads the HTML source code and displays the page as instructed. Is used to display and navigate in web pages Popular browser: IE, Firefox ◼ HTML editor Is required for create web page Useful editor: Microsoft FrontPage, Dreamwaver, … Basic editor: NotePad or any text editor
Structure of HTML document Example <HTML> <HEAD> <TITLE> Welcome to the world of HTML</TITLE> </HEAD> <BODY> <P>This is going to be real fun </P> </BODY> </HTML>
Structure of HTML document ◼ HTML Section: Every HTML document must begin with an opening HTML tag and end with a closing HTML tag. <HTML> … </HTML> ◼ Head section: Optional <HEAD> … </HEAD> Contains document definition Contains page title which is displayed in navigation bar ◼ Body section Contains what display in the web page
Basic tags ◼ HTML uses tags for structuring and formating the document. Closed tags: ◼ <tag_name> … </tag_name> ◼ Ex: <body> …. </body> Open tags: ◼ <tag_name>… ◼ Ex: <BR> Attributes of tags ◼ <tag_name attribute=“value”>… ◼ Ex: <body bgcolor=“blue”> … </body> HTML is not case sensitive ◼ HTML standard Validate a HTML document ◼ http://validator.w3.org/
Tag <title> ◼ Tag <title> Used inside <head> Displays the title of the page in the navigation <title>Hinh anh bon mua</title>
Text ◼ Text is written inside <body> ◼ Lines are broken automatically ◼ Extra spaces are not shown ◼ Ex: <html> <body> NAUDERO, Pakistan (CNN)-- Pakistan's Central Election Commission said Monday that a decision is expected Tuesday on whether to hold parliamentary elections as scheduled on January 8. </body> </html>
Text formatting tags ◼ Line break: <BR> is added at the position where line is broken ◼ Paragraph <p> a paragraph </p> ◼ Align a paragraph <p align= “left”> <p align= “right”> <p align= “center”> <p align= “justify”>
Text formatting tags ◼ Character formatting tags <b>…</b>: bold character <i>...</i>: italic character <u>… </u>: underline character <!-- comment --> <blockquote> … </blockquote>
Lists ◼ Ordered list <ol> <li>Babies</li> <li>Women</li> <li>Cats, Dogs</li> <li>Men</li> </ol> ◼ Unordered list <ul> <li>Cats</li> <li>Dogs</li> <li>Chicken</li> <li>Pork</li> </ul>
Insert images ◼ <IMG SRC=“winter.jpg" width="600"> Attributes ◼ Src: URL of the image Absolute address Relative address ◼ Width: ◼ Height: Absolute: Pixel Relative: % in comparison with page size ◼ Alt: description of the image that will be displayed when placing mouse on the image
Table ◼ Tag <table> Contains rows ◼ <tr>… </tr>: presents a row ◼ Each row contains multiples cell of data, each one belongs to a column <td> bla bla bla </td> ◼ <th>…</th>: the first row is written in bold characters Used for displaying the title of each column
Table - Example <table border="1"> <caption> Thong tin mat hang </caption> <tr> <th>Ma hang</th> <th>Mat hang</th> </tr> <tr> <td>001</td> <td>Tu lanh 2 cua tren duoi </td> </tr> <tr> <td>002</td> <td>May giat cua truoc </td> </tr> </table>
Background ◼ Define color of the background Background with unified color ◼ <body bgcolor="#000000"> ◼ <body bgcolor="rgb(0,0,0)"> ◼ <body bgcolor="black"> ◼ Background image Image is used for background ◼ <body background="clouds.gif"> ◼ <body background="http://www.w3schools.com/clouds.gif"> Image will be repeated for filling the background if it is smaller than the size of the web page ◼ Text color <body text=“red”>
Basic colors ◼ Color name or code can be used alternatively ◼ Ex: <body bgcolor = “red” text=“white”> <body bgcolor = “#FF0000”>
Affichage des 20 premières pages. Téléchargez le document pour le voir en entier.
Aucun commentaire pour le moment. Soyez le premier !
Commentaires (0)
Aucun commentaire pour le moment. Soyez le premier !