Scribd
Upload
66 views

CSIT128 / CSIT828: Joseph Tonien

Uploaded by

Pink
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
66 views

CSIT128 / CSIT828: Joseph Tonien

Uploaded by

Pink
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 43

CSIT128 / CSIT828

HTML
Joseph Tonien
HTML

is a markup language for describing web documents

used to mark parts of documents to indicate


how they should appear on a display

HTML stands for Hyper Text Markup Language

HTML documents are described by HTML tags

Each HTML tag describes different document content


The first HTML document

<html>

<head>

<title>JT</title>

</head>

<body>

Hello World!

</body>

</html>
The first HTML document

<html>

<head>

<title>JT</title>

</head>

<body>

Hello World!

</body>

</html>
HTML document structure

<html>
● A HTML document starts with
<head> <html> and ends with </html>

<title>JT</title> ● A HTML document has


a head and a body
</head>

<body> ● The visible part of the HTML


document is between
Hello World! <body> and </body>

</body>

</html>
HTML tags

<html>

<head>
tag
<title>JT</title>

</head>

<body>

Hello World!

</body>

</html>
HTML tags
tags are NOT case sensitive
<html>

<head>
tag
<title>JT</title>

</head>
most tag goes in pair
<body>
<tagname>content</tagname>
Hello World!

</body>
start tag end tag
</html>

HTML documents are made up by HTML elements.


The HTML element is everything from the start tag to
the end tag.
Heading tags
<body>

<h1>Heading 1</h1>
Heading tags: <h1>, <h2>,..., <h6>
<h2>Heading 2</h2>
<h1> the most important heading
<h3>Heading 3</h3>
<h6> the least important heading
<h6>Heading 6</h6>

Normal text...

</body>
Paragraph tag <p>
<body>

<p>This is a paragraph</p>
Extra spaces and lines will NOT
<p>Another be displayed in paragraph

paragraph</p>

<p>yet another

paragraph</p>

</body>
Line break <br />
<body>

<p>This is a paragraph</p>
<br /> tag defines a line break
<p>Another <br />
<br /> is an empty element
paragraph</p> (i.e. it is a tag with no content),
it combines the start and end
<p>yet another <br /> tags together

<br />

paragraph</p>

</body>
Horizontal line <hr />
<body>

<p>This is a paragraph</p>
similarly, we have the
<p>Another <br /> horizontal line tag <hr />
with no content
paragraph</p>

<hr />

<p>yet another <br />

<br />

paragraph</p>

</body>
Non-breaking space &nbsp;
<body>

<p>This&nbsp;&nbsp;is a
use &nbsp; for non-breaking space
paragraph</p>

<p>Another <br /> this is an example of character entities

paragraph</p>

<hr />

<p>yet another <br />

<br />

paragraph</p>

</body>
Character entity
● Some characters are reserved in HTML.

● Reserved characters in HTML must be replaced with character entities.

Character Entity Meaning

(non-breaking space) &nbsp; Non-breaking space

< &lt; Is less than

> &gt; Is greater than

& &amp; Ampersand

“ &quot; Double quote

‘ &apos; Single quote (apostrophe)

o &deg; Degree

© &copy; Copyright
Character entity
<body>

A HTML document starts with


&lt;html&gt; and ends with
&lt;/html&gt;
<body>
</body> A HTML document starts with
<html> and ends with </html>
</body>

A HTML document starts with <html>


and ends with </html>
Block quotations <blockquote>

<body>

<p>normal paragraph</p>

<blockquote>

<p>a paragraph in blockquote</p>

<p>another paragraph in blockquote</p>

</blockquote>

see the difference?

</body>
Formatting text
<body>

<i>italic text</i> <br />

<b>bold text</b> <br />

<mark>highlighted text</mark> <br />

<del>deleted text</del> <br />

<ins>inserted text</ins> <br />

</body>
Formatting text
<body>

<h1>HTML <small>Small</small> Formatting</h1>

HTML <small>Small</small> Formatting

</body>
Formatting text
<body>

Some math

x<sub>1</sub><sup>n</sup> +
x<sub>2</sub><sup>n</sup> =
y<sub>1</sub><sup>n</sup> +
y<sub>2</sub><sup>n</sup>

</body>
Preformatted text <pre>
<body>

<pre>
pre element is shown in monospace
Mary
it preserves the character and line spacing
had a

little

lamb

</pre>

</body>
Computer code
<body>

<pre>

<code>

a = 0;

b = 3;

c = 2;

sum = a + b + c;

</code>

</pre>
what would happen if we use <code> … </code>
</body> without <pre> ?
If you want to include special characters such as
Computer code < > & " '
within pre tags, they should be substituted by
<body>
character entities so that they are not subject to
<pre>
special interpretation by the browser.
<code>
#include &lt;iostream&gt;

void main( ) {
cout &lt;&lt; &quot;Hello World!&quot; &lt;&lt; endl;
}
</code>
</pre>
</body>

#include <iostream>

void main( ) {
cout << "Hello World!" << endl;
}
Image
<body>

<img src="uow-logo.png" height="300" width="200"

alt="logo of UOW" />

</body>

Attribute Description
src URL of an image, for example
src="uow-logo.png"
src="images/uow-logo.png"
src="http://www.mycom.au/staff.png"

alt alternate text for an image

height optional.
width Specifies height, width for image in pixels, or in percentage
Image alt
<body>

<img src="uow-logo.png" height="300" width="200"

alt="logo of UOW" />

</body>

● 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.
Image src
The URL of an image can be
● an absolute URL points to another website
● or a relative URL points to an image file within a website

Absolute URL

src="http://www.mycom.au/staff.png"

Relative URL

src="uow-logo.png" : the image file is in the same directory as the current


html file

src="images/uow-logo.png" : the image file is in the subdirectory called


images located at the same directory as the current html file

src="images/logo/uow-logo.png"

src="/../f1/bird.png"
Tag attributes
<body>

<img src="uow-logo.png" height="300" width="200"

alt="logo of UOW" />

</body>

HTML elements can have attributes


Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Example: img has the following attributes: src, height, width, alt
Link
<body>

<a href="http://www.uow.edu.au" target="_blank">Visit UOW</a>

<a href="contact.html">Contact us</a>

<a href="http://www.uow.edu.au" target="_blank">

<img src="uow-logo.png" alt="visit UOW"/></a>

</body>
Link
<a href="http://www.uow.edu.au" target="_blank">Visit UOW</a>

The href in this example is an absolute URL.

If user clicks on this link, http://www.uow.edu.au will be opened in a new tab

target description

_blank open the link in a new window or tab

_self open the link in the same frame (this is default)


Link
<a href="contact.html">Contact us</a>

The href in this example is a relative URL.

It is similar to the src attribute of the img tag:

href="contact.html"

href="assignment/a1.html"

href="../handout/note5.html"
Link
<a href="http://www.uow.edu.au" target="_blank">

<img src="uow-logo.png" alt="visit UOW"/></a>

Within the link tag <a href...> </a>, we can put any text or image.

In the above example, it displays an image as a link to the address


http://www.uow.edu.au
Link - target within document
Within the html document we can use the attribute id to mark a specific location

<a href="#Proofs">1 Proofs</a>


<a href="#See_also">2 See also</a>
<a href="#Notes">3 Notes</a>
<a href="#References">4 References</a>
<a href="#External_links">5 External links</a>

<h3 id="Proofs">Proofs</h3>
…

<h3 id="See_also">See also</h3>


…

<h3 id="Notes">Notes</h3>
…

<h3 id="References">References</h3>
…

<h3 id="External_links">External links</h3>


…
Link - target within document
Within the html document we can use the attribute id to mark a specific location

<a href="#Proofs">1 Proofs</a>


<a href="#See_also">2 See also</a>
<a href="#Notes">3 Notes</a>
<a href="#References">4 References</a>
<a href="#External_links">5 External links</a>

<h3 id="Proofs">Proofs</h3>
…

The id value must be unique and must contain at least one character.
The id value must not contain any space characters.
Link - target within document
We can create a link to a specific location within a html page

For example:

<a href="https://en.wikipedia.org/wiki/Euler%27s_theorem#Proofs">
Proof of the Euler theorem</a>
Unordered List
My timetable:

<ul>

<li>MATH222: Mon 8:30-10:30 lecture</li>

<li>CSCI204: Tue 9:30-11:30 lab</li>

<li>ISIT206: Wed 8:30-10:30 lecture</li>

</ul>

My timetable:

MATH222: Mon 8:30-10:30 lecture

CSCI204: Tue 9:30-11:30 lab

ISIT206: Wed 8:30-10:30 lecture


Ordered List
My timetable:

<ol>

<li>MATH222: Mon 8:30-10:30 lecture</li>

<li>CSCI204: Tue 9:30-11:30 lab</li>

<li>ISIT206: Wed 8:30-10:30 lecture</li>

</ol>

My timetable:

1. MATH222: Mon 8:30-10:30 lecture

2. CSCI204: Tue 9:30-11:30 lab

3. ISIT206: Wed 8:30-10:30 lecture


Definition List
My timetable:

<dl>

<dt>MATH222</dt>

<dd>Mon 8:30-10:30 lecture</dd>

<dt>CSCI204</dt>

<dd>Tue 9:30-11:30 lab</dd> My timetable:

<dt>ISIT206</dt> MATH222
Mon 8:30-10:30 lecture
<dd>Wed 8:30-10:30 lecture</dd>
CSCI204
</dl> Tue 9:30-11:30 lab

ISIT206
Wed 8:30-10:30 lecture
Table

<table border="1">
<tr>
<th>Username</th>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>jsmith</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td>mlee</td>
<td>Mary</td>
<td>Lee</td>
</tr>
</table>

border="0"
Table
<table border="1" width="50%">
<caption>User information</caption>
<tr>
<th width="20%">Username</th>
<th width="40%">First name</th>
<th width="40%">Last name</th>
</tr>
<tr>
<td align="center">jsmith</td>
<td align="right">John</td>
<td align="right">Smith</td>
</tr>
<tr>
<td align="center">mlee</td>
<td align="right">Mary</td>
<td align="right">Lee</td>
</tr>
</table>
Table
<table border="1" width="40%">
<tr>
<td colspan="2">STUDENT DETAILS</td>
</tr>
<tr>
<td width="30%">STUDENT NAME</td>
<td>John Lee</td>
</tr>
<tr>
<td>STUDENT NUMBER</td>
<td>1234567</td>
</tr>
<tr>
<td>UOW EMAIL</td>
<td>jlee@uowmail.edu.au</td>
</tr>
</table>
index.html

● is a default page for a directory

In this example, I have a file index.html


in the directory html2

When we go to http://www.uow.edu.au/~dong/w3/example/html2

it automatically display the page


http://www.uow.edu.au/~dong/w3/example/html2/index.html
index.html
● For security reason, it is better to have index.html for every directory

● It stops people from knowing the content and structure of your website

I don’t have index.html for the directory html, that is why everybody can see the
content of my directory
http://www.uow.edu.au/~dong/w3/example/html
https://www.lifewire.com/index-html-page-3466505

• Using a Default File Name Like index.html is a Security Feature as Well


• Most web servers start out with the directory structure visible when someone
comes to a directory without a default file. This shows them information about
the website that would otherwise be hidden, such as directories and other files
in that folder. This can be helpful during a site's development, but once a site is
live, allowing for directory viewing can be a security vulnerability that you will
want to avoid.
• If you don't put in an index.html file in a directory, by default most web servers
will display a file listing of all the files in that directory. While this can be
disabled at the server level, it means that you need to involve the server admin
in order to make it work. If you are pressed for time and want to control this on
your own, an easy workaround is to simply write a default web page and name
it index.html. Uploading that file to your directory will help close that potential
security hole. Additionally, it is also a good idea to also contact your hosting
provider and ask for directory viewing to be disabled.
Comments

<body>

<!-- this is

a long comment

it will not be displayed on the web page

-->

</body>
References

http://www.w3schools.com/html

http://developer.mozilla.org/en-US/docs/Web/HTML

You might also like