Shatin Tsung Tsin Secondary School S.3 Computer and Technology Web Page Design by HTML Introduction to HTML HTML (Hyper Text Markup Language) is the set of markup symbols (tags or codes) (e.g. <p>, <img>, <frame> etc) that format the text, define the layout of the page, presents images, makes clickable links, and decides what can be seen on the Web. Some tags come in pairs to indicate when a particular display effect is to begin and when it is to end. The closing tag is usually with the slash (/). HTML files are plain text files with extension of htm or html. They contain two things: plain text and HTML tags. An HTML document has two major parts: the head and the body. The head contains the document s title and similar information. The body is the major thing to be displayed. e.g. html document head body HTML tag <head> <title>my First Homepage</title> </head> <body> to my homepage </body> plain text Constructing a simple web page e.g.1 Open a notepad [! This is my first homepage.! Save the file as homepage1.htm in your folder. Double click it to open the file by internet explorer. e.g.2 Open a new file and type in! This is my first homepage.! Save the file as homepage2.htm in your folder. Double click it to open the file by internet explorer. You may find that the output of the files in e.g.1 and e.g.2 are the same. It is because there is no break line in html file like document file. In order to show break line in html file, we should add <p> or <br> at the end of the line. p.1/8
i.e.!<br> This is my first homepage.<br>!<br> Some simple HTML tags Tags Description Example Output <title> Show the title in the menu <title>my First bar. Usually used in <head> Homepage</title> <br> Starts a new line <br><br>hel lo <p> Starts a new line and adds <p><p> some additional vertical space between the lines <center> </center> Center the text <center></ce nter> <p align=center> </p> Align at center <p align=center> </p> <p align=left> </p> Align at left hand side <p align=left> </p> <p align=right> </p> Align at right hand side <p align=right> </p> <i> </i> Italic <i></i> <b> </b> Bold <b></b> <u> </u> Underline <u></u> <s> </s> Strikethrough <s></s> <sup> </sup> Superscript base<sup>index</sup> base index <sub> </sub> Subscript H<sub> 2</sub>O H 2 O <pre> </pre> Preformatted passage <pre> </pre> <h1> </h1> Header 1 <h1></h1> <h2> </h2> Header 2 <h2></h2> <h3></h3><h4></h4> Header3Header4 <h5></h5><h6></h6> Header5Header6 <h7></h7> Header7 <font color= > </font> Change font color <font color= red > STTSS</font> <font color= #00ff00> STTSS</font> <font color= #ff00ff> STTSS</font> note: <font color = # XX YY ZZ> 1 st two digits(xx): Red color, minimum value=00, maximum=ff 2 nd two digits(yy): Green color, minimum value=00, maximum=ff 3 rd two digits(zz): Blue color, minimum value=00, maximum=ff STTSS STTSS STTSS each digit s value is from 0 to f i.e. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f Red Yellow White Magenta Green Cyan Blue absolute font size <font size= > </font> Change font size <font size= 5 > </font> <font size = +3 > relative font size p.2/8
<font face= > </font> Change font type <font face= Impact > </font> <hr> Horizontal line <hr> <hr width=50> <hr width=50%> <hr size=10> <!-- --> Remark <!-- --> Ex.1 Use Notepad to write HTML tags so that the content will be displayed by a web browser as follows: title:my Homepage Header1 horizontal line Header2 bold italic underline Font size:5 Font color: red Font:Impact strikethrough Answer: Font size=5 Font color: red Font: Impact Strikethrough p.3/8
Order list and Unorder list Write down the output of the following HTML in a web browser. e.g.3 <ol> <li>english</li> <li>chinese</li> <li>mathematics</li> </ol> e.g.4 <ol type= A > <li>english</li> <li>chinese</li> <li>mathematics</li> </ol> Type parameter Description Output 1 Number type 1, 2, 3, a Small letter type a, b, c, A Capital letter type A, B, C, i Small Roman number type i, ii, iii, I Big Roman number type I, II, III, You may try this tag to show the order list starting from 6 <ol type= 1 start= 6 > e.g.5 <ul> <li>english</li> <li>chinese</li> <li>mathematics</li> </ul> e.g.6 <ul > <li type= square >English</li> <li type= circle >Chinese</li> <li type= disc >Mathematics</li> </ul> p.4/8
Insert Table Write down the output of the following HTML in a web browser. <table> <tr> <td>english</td> row1 row2 <td>chinese</td> <td>mathematics</td> </tr> <tr> <td>physics</td> <td>chemistry</td> <td>biology</td> </tr> 3 sets of data in each row 3 sets of data in each row 3 sets of data in 1 st row 3 sets of data in 2 nd row Other attribute settings of <Table> <table width=75% border=1> <tr> <td>1</td><td>2</td><td>3</td></tr> <tr> <td>4</td><td>5</td><td>6</td></tr> <table bordercolorlight=red bordercolordark=blue width=75% border=10> <tr> <td>1</td><td>2</td><td>3</td></tr> <tr> <td>4</td><td>5</td><td>6</td></tr> <table border=5 cellspacing=5 cellpadding=15> <tr> <td>1</td><td>2</td><td>3</td></tr> <tr> <td>4</td><td>5</td><td>6</td></tr> cellspacing: the width of lines in the table cellpadding: the space between the text and the border in the table <table border=1 width=75%> <tr> <td colspan = 2>1</td> <td>2</td></tr> <tr> <td>3</td><td>4</td><td>5</td></tr> <table border=1 width=75%> <tr> <td rowspan = 2>1</td> <td>2</td><td>3</td></tr> <tr> <td>4</td><td>5</td></tr> <table border=1 width=75% height=50% bordercolor=blue> <tr> <td rowspan = 2 valign=bottom bgcolor=yellow>1</td> <td align=center>2</td> <td align=center>3</td></tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> p.5/8
Ex.2 Use Notepad to write HTML tags so that the content will be displayed by a web browser as follows: Answer: <center> <table border=1 width=75%> </center> Insert Image Tag & Attribute Description Example <body bgcolor=> Set the background color <body bgcolor=red> of the web page <body bgcolor=#00ffff> <body background=> Set the background <body background= sttss.jpg > image of the web page <img src=> Insert a image file <img src= logo.jpg > <img src= alt= > Show the name of the image when moving the mouse over the image <img src= logo.jpg alt= school logo > <img src= align=bottom> Set the position of the <img src= logo.jpg align=bottom> image at the bottom <img src= align=left> Set the position of the <img src= logo.jpg align=left> image at the left <img src= align=right> Set the position of the <img src= logo.jpg align=right> image at the right <img src= height=100> Set the height of the <img src= logo.jpg height=100> image <img src= width=200> Set the width of the image <img src= logo.jpg width=200> <table><tr><td><img src= ></td></tr> Insert an image in a table <table><tr><td><img src= logo.jpg > </td></tr> Other setting: <body bgcolor=ffff00 text=000000 link=ff0000 alink=00ff00 vlink=0000ff> text: text color, link: hyperlink color, alink: active hyperlink color, vlink: visited hyperlink color p.6/8
Set the Anchor and Hyperlink 1. Set a bookmark Using <a name = bookmark > </a> to set a bookmark in a web page 2. Go to a bookmark Using <a href = #bookmark > </a> to go to a bookmark in a web page 3. Go to a new page Using <a href = filename.htm > </a> to go to a new web page 4. Go to a web site Using <a href = http://websiteaddress > </a> to go to a web site 5. Send the e-mail Using <a href = mailto:emailaddress > </a> to launch a e-mail program to send the e-mail e.g.7 Type the following HTML code using a notepad and save the file as homepage2.htm in your folder. Double click it to open the file by internet explorer and test the hyperlinks in the web page. <head><title>my Second Homepage</title></head><body> <a name= menu >Menu</a> <ol type= I > <li><a href= #Chapter1 >Set a Bookmark</a></li> <li><a href= #Chapter2 >Go to a Bookmark</a></li> <li><a href= #Chapter3 >Go to a new page</a></li> <li><a href= #Chapter4 >Go to a web site</a></li> <li><a href= #Chapter5 >Send the e-mail</a></li></ol><p><p> Any problem? Send the e-mail to <a href= mailto:tts-tkf@hkedcity.net >me</a><p><hr> <a name= Chapter1 > <img src= ch1.jpg alt= chapter one height=400 width=500><a href = #menu ><p>back</a><p> <a name= Chapter2 > <img src= ch2.jpg alt= chapter two height=400 width=500><a href = #menu ><p>back</a><p> <a name= Chapter3 > <a href= homepage1.htm ><img src= ch3.jpg alt= chapter three height=400 width=500></a><a href = #menu ><p>back</a><p> <a name= Chapter4 > <a href= http://www.sttss.edu.hk ><img src= ch4.jpg alt= chapter four height=400 width=500></a><p><a href = #menu >back</a><p> <a name= Chapter5 > <a href= http://www.emb.gov.hk target=_blank><img src= ch5.jpg alt= chapter five height=400 width=500></a><p><a href = #menu >back</a><p> </body> p.7/8
Ex.3 Study the above web page in HTML codes and answer the following questions. (a) What is the title of the web page? (b) What is the output of order list in the web page from <ol type= I > to </ol> (c) How many bookmarks are there in the web page? What are their names? (d) What is the use of the attribute alt in the setting <img src= ch1.jpg alt= chapter one >? (e) In the web page, you may send the e-mail by clicking a word. What is the word to be clicked? What is the tag used in here to send the e-mail? (f) In the web page, you may visit the web site of EMB (www.emb.gov.hk) by clicking somewhere. Where should you click? (g) What is the different between the hyperlink settings in the image of Chapter3 and that of Chapter4? (h) What is the different between the hyperlink settings in the image of Chapter4 and that of Chapter5? What is the different of the outputs between them after clicking the hyperlinks? (i) By clicking the word back, what will be happened in the web page? p.8/8