1 / 20

Basic HTML

Basic HTML. Trystan Upstill Comp3400 Lecture 06/03/2001. Introduction. H yper T ext M arkup L anguage Driven by Netscape and Microsoft IE Formalised/Compiled by W3C Looking at HTML > 3.2 4.0 defined, not yet completely supported by Netscape HTML Creation WYSIWYG vs TC Today… TC.

trent
Download Presentation

Basic HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic HTML Trystan Upstill Comp3400 Lecture 06/03/2001

  2. Introduction • HyperText Markup Language • Driven by Netscape and Microsoft IE • Formalised/Compiled by W3C • Looking at HTML > 3.2 • 4.0 defined, not yet completely supported by Netscape • HTML Creation • WYSIWYG vs TC • Today… TC

  3. HTML Considerations • Uniformity • How will your page look on different systems • Concerns specifying font sizes, using non-standard HTML Tags • Can common browsers view your page • Try on several systems MSIE and Netscape Navigator (and Lynx if you are keen) • Can search engines extract information from your page • Do you want them to? • This Lecture • Markup language is standard in IE3.0+ and Netscape 3.0+. • Generally HTML 3.2 compliant.

  4. HTML Constructs • HTML document construction • HTML documents contain HTML elements • HTML elements are marked up by HTML tags • Elements normally have opening and closing HTML tags • HTML tags are text bounded by < and > • Opening HTML tags are <tag>, closing are </tag> • Eg: <title>The Page Title</title> • HTML Tags not case-sensitive • Lower-case tags recommended • HTML Tags may contain attributes

  5. HTML Tag Standards • HTML Tag Attribute values surrounded by “ characters • Eg: <body color=“#FFFFFF”> • HTML colours described in hex RGB components • #RRGGBB • Widths, Heights given in % of screen or pixels • eg: width=“25%” OR width=“400”

  6. Starting an HTML document: HTML headers <html> <head> <title>ANU CSIT Building Fan Site</title> <meta name="description" content=“ANU CSIT Building and DCS Fan Site"> <meta name="keywords" content=“ANU, DCS, CSIT, Fan Site,Indoor Fun"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> … </html>

  7. Basic HTML Tags … </head> <body color=“#FFFFFF”> <center> <h1>The ANU CSIT Building <i>FanPage</i> </h1> <br> <h2>By Trystan Upstill</h2> <p>This page has been created to teach … </p> … </body> </html> • The HTML body tag • <body>page content </body> • Headings • <h1>Biggest</h1> • <h6>Smallest</h6> • Paragraphs • <p>paragraph</p> • Line Breaks • <br> • Comments • <!– comment -->

  8. HTML Text Formatting … </p> <p> The Department of Computer Science …<b><i>Australian National University</i></b> <sup>ANU</sup>.</p> <p>The CSIT buildinghouses the Department … </p> <p><blockquote> Winner, Master Builders Association of the Australian Capital ….</blockquote></p> <p>The building is… • Text Formatting Tags: • Font-type: <b><i> • Size:<big><small><em> • Position:<sub><sup> • Text Block Tags • Address: <address> • Quote:<blockquote> • Citation: <cite> • More in CSS, HTML <font> becoming deprecated

  9. HTML Character Entities • Special Characters

  10. HTML Links … <p> The building is divided into <ahref=“#wings">wings</a> and <ahref=“#levs">levels</a>. </p> <p><a name="wings"></a> The North and South Wing …</p> … The South Wing:</i> is used by <a href="http://www.csiro.au" target="_blank"> CSIRO Mathematical and Information Sciences </a>. … <p><a name=“levs”></a>The levels of the North Wing … • Anchor Tag • <a [attr]>link</a> • Attributes [attr] • href – page link • Relative:<a href=“page.htm”> • Absolute:<a href=“http://cool.com”> • Same Page to Anchor:<a href=“#anchor_name”> • target – target window <a href=“p.html” target=“_blank”> • name – anchor name<a name=“anchor_name”>

  11. HTML Links (cont…) • URL Form: • scheme://host.domain:port/path/filename • scheme: type of service • host: defines host name (www by default) • domain: internet domain name (eg: anu.edu.au) • port: port the Web server is running on. • path: path to the documents on the server. • filename: path to the files

  12. HTML Link Examples • local copy of the ANU CSIT fan page: • file:/home/trystan/comp3400/example-webpage.html • Web copy of the ANU CSIT fan page: • http://cs.anu.edu.au/~Trystan.Upstill/coursework/comp3400.html • ANU CSIT fan page level section • http://cs.anu.edu.au/~Trystan.Upstill/coursework/comp3400.html#levs • File transfer protocols • ftp://example.anu.edu.au/blah/example.html • Email Link • mailto:trystan@cs.anu.edu.au

  13. HTML Lists … </p> <ul> <li><i>The North Wing: </i> is used …</li> <li><i>The South Wing:</i> is used … </li> </ul> <p><a name="levels"></a>The levels of … </p> <ol> <li>Undergraduate … </li> <li>Department of … </li> <li>Department of … </li> </ol> <img …> • Unordered Lists • <ul><li>item</li></ul> • Ordered Lists • <ol><li>item</li></ol> • Definition Lists • <dl><dt>term</dt><dd>definition</dd></dl>

  14. HTML Images • Images: <img> • Attributes: • src – image location • width, height, align • alt – alternate text • usemap – link maps • Also image maps and image areas • <map> • <area> … </ol> <img align=“center” src="csfront.gif" width="284" height="219“ alt=“CSIT Front”><br> <font size="-3">this picture was taken from http://cs.anu.edu.au</font><p><b><i>Some Interesting …

  15. HTML Tables …statistics</i></b></p> <table width="80%" border="1" cellspacing="0" cellpadding="1" bgcolor="#CCCCCC"> <th bgcolor="#000000"> <font color="#FFFFFF"> <b>Statistic</b> </font> </th> <th bgcolor="#000000”> <font color="#FFFFFF"> <b>Value</b> </font> </th> <tr> <td>Size</td> <td>6400 square metres</td> </tr> …</table> • Tables • <table> </table> • Have Headings, Rows, Elements and Captions • <th>, <tr> & <td> <caption> • Table Attributes • border, bgcolor, height, width, cellpadding, cellspacing • Row • width, bgcolor, align, valign

  16. (More) Advanced HTML:Frames • Used to display more that one HTML document in the same browser window. • Setting up frames • Create an extra HTML file • <frameset> & <noframes> (noframes optional) • Attributes = rows OR cols • example:<frameset cols=“25%, 75%”> <frame src=“frame1.htm> <frame src=“frame2.htm> </frameset> <noframes> <body>Frames Reqd!</body> </noframes>

  17. (More) Advanced HTML: Forms • Forms can provide input for dynamic content • CGI, MOD, ASP (coming soon…) • Form tags • <form action=“run.cgi”> … </form> • Input tags • type, name and value fields • type = type of input (checkbox, radio, text) • name = name of the input field • value = default value • Also: <textarea>, <select>, <button> • Submit • <input type=Submit value="Submit">

  18. (More) Advanced HTML: Tables for Layout • Potential Uses: • Advanced Text Layout • Vertical spacing • However, height attribute not official HTML 3.2 • Multiple columns of Text • Using 2 cols • Sophisticated Table Borders • Using “table-within-a-table” • Making your page the same at all resolutions and on all browsers • Experiment with no border tables and alignment, cell-padding and cell-spacing

  19. (More) Advanced HTML: Inserting Scripts … </head> <body> … <script language="JavaScript"> document.write("Hello World!") </script> … </body> </html>

  20. HTML Creation Links • WYSIWYG Editors • Macromedia Dreamweaver 4.0 • 30 Day Trial • http://www.macromedia.com • Netscape Composer • Free • http://www.netscape.com and on iwaki • Microsoft Frontpage • Part of Microsoft Office • Frontpage lite available free • Further Tutorials / More Info • http://www.w3schools.com • http://www.stars.com

More Related