Basic HTML - Australian National University
Download
Report
Transcript Basic HTML - Australian National University
Basic HTML
Trystan Upstill
Comp3400 Lecture 06/03/2001
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
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.
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
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”
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>
Basic HTML Tags
• The HTML body tag
– <body>
page content
</body>
• Headings
– <h1>Biggest</h1>
– <h6>Smallest</h6>
• Paragraphs
– <p>paragraph</p>
• Line Breaks
– <br>
• Comments
– <!– comment -->
…
</head>
<body color=“#FFFFFF”>
<center>
<h1>The ANU CSIT
Building <i>Fan Page</i>
</h1>
<br>
<h2>By Trystan Upstill</h2>
<p>This page has been
created to teach … </p>
…
</body>
</html>
HTML Text Formatting
• 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
…
</p>
<p>
The Department of Computer
Science …<b><i>Australian
National University</i></b>
<sup>ANU</sup>.</p>
<p>The CSIT building houses
the Department … </p>
<p><blockquote> Winner,
Master Builders Association
of the Australian Capital
….</blockquote></p>
<p>The building is…
HTML Character Entities
• Special Characters
>
<
&
“
©
x
>
<
&
"
©
×
÷
HTML Links
• Anchor Tag
– <a [attr]>link</a>
– Attributes [attr]
• href – page link
• Relative:
…
<p>
The building is divided into
<a href=“#wings">wings</a>
and <a
href=“#levs">levels</a>.
</p>
<a href=“page.htm”>
<p><a name="wings"></a>
<a href=“http://cool.com”> The North and South Wing …</p>
…
Same Page to Anchor:
The South Wing:</i> is used by
<a href=“#anchor_name”>
<a href= "http://www.csiro.au"
target – target window target="_blank">
<a href=“p.html”
CSIRO Mathematical and
target=“_blank”>
Information Sciences </a>.
…
name – anchor name
<p><a name=“levs”></a>The
<a name=“anchor_name”>
levels of the North Wing …
• Absolute:
•
•
•
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
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:[email protected]
HTML Lists
•
•
…
</p>
<ul>
Unordered Lists
<li><i>The North Wing: </i>
– <ul><li>item</li></ul> is used …</li>
<li><i>The South Wing:</i>
Ordered Lists
is used … </li>
– <ol><li>item</li></ol> </ul>
• Definition Lists
– <dl>
<dt>term</dt>
<dd>definition</dd>
</dl>
<p><a name="levels"></a>The
levels of … </p>
<ol>
<li>Undergraduate … </li>
<li>Department of … </li>
<li>Department of … </li>
</ol>
<img …>
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 …
HTML Tables
• 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
…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>
(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>
(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>,
• Submit
<select>, <button>
– <input type=Submit value="Submit">
(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
(More) Advanced HTML:
Inserting Scripts
…
</head>
<body>
…
<script language="JavaScript">
document.write("Hello World!")
</script>
…
</body>
</html>
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