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 Opening HTML tags are, closing are –Eg: The Page 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: –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 ANU CSIT Building Fan Site …

7. Basic HTML Tags The HTML body tag – page content Headings – Biggest – Smallest Paragraphs – paragraph Line Breaks – Comments – … The ANU CSIT Building Fan Page By Trystan Upstill This page has been created to teach … …

8. HTML Text Formatting Text Formatting Tags: –Font-type: –Size : –Position : Text Block Tags –Address: –Quote : –Citation: More in CSS, HTML becoming deprecated … The Department of Computer Science … Australian National University ANU. The CSIT building houses the Department … Winner, Master Builders Association of the Australian Capital …. The building is…

9. HTML Character Entities Special Characters > > < < & & “ " © © x ×  ÷

10. HTML Links Anchor Tag – link –Attributes [attr] href – page link Relative: Absolute: Same Page to Anchor: target – target window name – anchor name … The building is divided into wings and levels. The North and South Wing … … The South Wing: is used by CSIRO Mathematical and Information Sciences. … The levels of the North Wing …

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/c omp3400.html ANU CSIT fan page level section –http://cs.anu.edu.au/~Trystan.Upstill/coursework/c omp3400.html#levs File transfer protocols –ftp://example.anu.edu.au/blah/example.html Email Link –mailto:trystan@cs.anu.edu.au

13. HTML Lists Unordered Lists – item Ordered Lists – item Definition Lists – term definition … The North Wing: is used … The South Wing: is used … The levels of … Undergraduate … Department of …

14. HTML Images Images: Attributes: –src – image location –width, height, align –alt – alternate text –usemap – link maps Also image maps and image areas – … this picture was taken from http://cs.anu.edu.au Some Interesting …

15. HTML Tables Tables – –Have Headings, Rows, Elements and Captions, & –Table Attributes border, bgcolor, height, width, cellpadding, cellspacing –Row width, bgcolor, align, valign …statistics Statistic Value Size 6400 square metres …

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 – & (noframes optional) –Attributes = rows OR cols –example: Frames Reqd!

17. (More) Advanced HTML: Forms Forms can provide input for dynamic content –CGI, MOD, ASP (coming soon…) Form tags – … Input tags –type, name and value fields type = type of input ( checkbox, radio, text ) name = name of the input field value = default value Also:,, 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 … … document.write("Hello World!") …

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