S2 Computer Literacy HTML Hypertext Markup Language (HTML) is the most common markup language that is used to create web pages. It consists of special symbols called tags to define the document structure. An HTML document is a plain text file containing a number of HTML tags. It is divided into two sections - the head and the body. The following HTML document shows how HTML tags are used to construct a web page. 1 The purpose of a web browser (like Chrome or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. HTML Basic Document <html> <head> <title>Document name goes here</title> </head> <body> Visible text goes here </body> </html> Heading Elements <h1>Largest Heading</h1> <h2> . . . </h2> <h3> . . . </h3> <h4> . . . </h4> <h5> . . . </h5> <h6>Smallest Heading</h6> Text Elements <p>This is a paragraph</p> <br /> (line break) <hr /> (horizontal rule) <pre>This text is preformatted</pre> Logical Styles <em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code> Physical Styles <b>This text is bold</b> <i>This text is italic</i> 2 HTML elements can have attributes. They provide additional information about the element. Attributes are always specified in the start tag. They come in name/value pairs like: name="value". For example: HTML links are defined with the anchor <a> tag. The link address is provided as an attribute "href" called hyperlink reference. Links and Anchors <a href="http://www.example.com/">This is an absolute path</a> <a href="computer/memory.htm">This is a document relative path</a> <a name="tips">Useful Tips Section</a> <a href="#tips">Jump to the Useful Tips Section</a> Images, Audio and Streaming Video <img src="../images/linux.gif" width="79" height="89" /> <audio controls> <source src="school_song.mp3" type="audio/mpeg"> </audio> <iframe width="560" height="315" src="//www.youtube.com/embed/5d7-qnFk_sk" frameborder="0" allowfullscreen></iframe> Unordered list <ul> <li>First item</li> <li>Next item</li> </ul> Ordered list <ol> <li>First item</li> <li>Next item</li> </ol> 3 CSS Positioning <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 207px; top: 62px;">How are you? </div> Tables <table width="600" border="0"> <tr> <td>Row 1, Col 1 </td> <td>Row 1, Col 2 </td> <td>Row 1, Col 3 </td> </tr> <tr> <td>Row 2, Col 1 </td> <td>Row 2, Col 2 </td> <td>Row 2, Col 3 </td> </tr> </table> Iframe <iframe src="page1.html" width="200" height="200"></iframe> <iframe src="page1.html" name="iframe_a"></iframe> <p><a href="http://www.shcc.edu.hk" target="iframe_a">SHCC</a></p> HTML head Elements The head element defines information about a web page. The following tags can be added to the head section: <title>, <meta>, <base>, <style>, <link>, and <script>. Tag <title> <meta /> <base /> <style> <link /> <script> Description Define the title of a web page Specify description, keywords, and author of a web page. Define a default address or a default target for all links on a web page Define an internal style sheet Link to an external style sheet Define or link to a client-side program, such as JavaScript. 4 Revision The following figures show how to upload and download files from an Internet account. 5 (a) With reference to the above figures, draw the directory structure in the Internet account. You should include all the folders and files in your diagram. (b) When you set up a hyperlink to the web page “hw1.htm” in “index.htm”, Dreamweaver automatically generates a relative path to the web page in the HTML source code. What is the relative path from “index.htm” to “hw1.htm”? (c) When you insert a video “beijing.wmv” into the web page “hw1.htm”, Dreamweaver automatically generates a relative path to the video file in the HTML source code. What is the relative path from “hw1.htm” to “beijing.wmv”? (d) If the host name of the web server is “student.shcc.edu.hk” and the user name of the FTP account is “s081234”, what is the URL of the file “hw2.htm”? (e) Which file in the Internet account cannot be browsed on the web? 6
