CSIT 128 - Introduction To Web Technology
Subscripts and Superscripts
1. <sub> </sub> 2. <sup> </sup>
The first tag of a Web page is
<HTML> Everything in the document comes between the opening <html> tag and the closing </html> tag
Link - target within document
<a href="#Proofs"> Proofs</a> <h3 id="Proofs">Proofs</h3> (Think of the blue jumpy links on Wikipedia)
Link
<a href="http://www.uow.edu.au" target="_blank">Visit UOW</a> Within the link tag <a href...> </a>, we can put any text or image. _blank : open the link in a new window or tab _self : open the link in the same frame (this is default)
Block quotations
<blockquote>
Comments
<body> <!-- this is a long comment it will not be displayed on the web page --> </body>
Self-closing line break tag
<br />
Computer code tag
<code> </code> (Encase it within a pre tag to preserve line spacing and characters)
Description list
<dl> </dl> (A term, followed by its description) 1. <dt> </dt> : Description term 2. <dd> </dd> : Description definition
Formatting text (Changing font)
<font size="1">This is the smallest size</font> <font size="2">smaller than the default</font> <font size="3">This is the default font size</font> <font size="4">larger than the default</font> <font size="5">larger than the default</font> <font size="6" color="red">larger than the default</font> <font size="7" color="blue">This is the largest size</font>
Heading tags
<h1> the most important heading <h6> the least important heading (Decreases in size between those two)
Horizontal line
<hr />
Formatting text
<i>italic text</i> <br /> <b>bold text</b> <br /> <mark>highlighted text</mark> <br /> <del>deleted text</del> <br /> <ins>inserted text</ins>
Self-closing image tag
<img src=" " alt=" " />
Image tag
<img src="uow-logo.png" height="300" width="200" alt="logo of UOW" />
Formatting text in a table
<ins>My timetable:</ins> <ul> <li><b>MATH222</b>: Mon 8:30-10:30 <i>lecture</i></li> <li><b>CSCI204</b>: Tue 9:30-11:30 <i>lab</i></li> <li><b>ISIT206</b>: Wed 8:30-10:30 <i>lecture</i></li> </ul>
Ordered List
<ol></ol> (Numbered) 1. <li> </li> : List item
Paragraph tag
<p> </p>
Preformatted text
<pre> </pre> The pre element is shown in monospace, it preserves the character and line spacing
Giving a table a border
<table border = "1">
Creating a table
<table> </table> 1. <tr> </tr> : Creates a row 2. <th> </th> : Gives a cell a heading 3. <td> </td> : Gives a cell a description
Tag attributes
<tagname attribute1="value1" </tagname> ● HTML elements can have attributes ● Attributes provide additional information about an element ● Attributes are always specified in the start tag
Vertical alignment for text
<tagname valign= top/bottom/middle> </tagname>
Unordered List
<ul></ul> (Bulletins) 1. <li> </li> : List item
non-breaking spaces
A non-breaking space is a space that will not break into a new line use for non-breaking space
Relative URL
A relative URL points to an image file within a website
Absolute URL
An absolute URL points to another website
Formatting a table
Changing width : <table width = x% / x pixels> Caption : <caption> </caption> Changing text alignment : <td/tr/th align=left/right/center> </td>
HTML elements
Everything between the start and end tag
Important thing to remember about formatting
Everything that comes between the format tags will be formatted. This includes links
Describe HTML tags
HTML tags describe different document content, are are thus wide and varied.
Describe HTML
Hypertext Markup Language is the programming language used to create the content we see on webpages. It is often known as the "noun" of the internet
Ways XHTML is stricter
Nesting <b><i>bold and italic - not nested correctly</b></i> <b><i>bold and italic - nested correctly</i></b> Elements must always be closed <p>paragraph closed</p> Elements must be in lower case <head> Attribute names must be in lower case <img src="logo.png" alt="UOW logo" /> attribute values must be quoted <img src="logo.png" alt="UOW logo" />
Self-closing tag
Sometime we have an element with no content (an empty element) With an empty element, we can combine the start-tag and end-tag into one self-closing tag: <tagname />
Describe the body tag
The visible part of the HTML document is between <body> and </body>
Alt attribute
● If a browser cannot find an image, it will display the alt text. ● Sometimes, to save bandwidth, user can disable image display, in this case, the alt text will be display. ● A screen reader is a software program that can read what is displayed on a screen which is very useful to people who are blind or visually impaired. Screen readers can read the alt text.
Character entity
● Some characters are reserved in HTML. ● Reserved characters in HTML must be replaced with character entities. For instance, & is &
XHTML
● XHTML stands for extensible HyperText Markup Language ● XHTML is stricter than HTML
HTML5
● version 5 of the HTML standard ● introduces new tags : <header> <footer> <article> <section> <svg> <canvas> <audio> <video> ● introduces new APIs ○ Drag and Drop ○ Local Storage ○ Geolocation
Something HTML does not give regard to
White space
Title tag
an HTML tag that defines the page's title
