Scribd
Upload
12 views69 pages

Lec 2

Uploaded by

trinhbaduong287
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
12 views69 pages

Lec 2

Uploaded by

trinhbaduong287
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/ 69

COS10005

Web Development
Module 2 – HTML Part 1
Contents
• HTML Document Structure and Markup Basics
• HTML Doctypes and Templates
• HTML Elements
– Comments
– Heading and Paragraph
– Phrase Tags and Special Characters
– Lists and Table
– Anchor and Image
• HTML Development Process
2 - Web Development, © Swinburne
What is HTML ?
HTML = HyperText Markup Language
ie. “HyperText” using a “Markup Language” !
• Simple text that uses markup code
to define the structure and content of the page.
<h1>This is a heading</h1>
<p>This is a paragraph with a <a href="…">link</a>
and an image <img … /></p>
<form> … </form> DEMO!
<table> … </table> and more … index.html

• Web browsers understand the meaning of the


markup codes and render or display the text and its
content, as web page elements.

3 - Web Development, © Swinburne


HTML: Document Structure
The simple basic structure of
HTML documents: <html>

<!DOCTYPE ...> <head>


<html>

<head> </head>
<title>...</title> <body>
</head>

<body>

... All body content


goes here ...

</body>

</html>

Every HTML web page needs one and only one


<html> element, <head > element and </body>
<body> element.
</html>
4 - Web Development, © Swinburne
First HTML5 Example
<!DOCTYPE html > doctype definition
<html lang="en">
<head>
<meta charset="utf-8"> character encoding
<title>First HTML Example</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<hr />
<p>HTML is <em>really</em> easy. It is just simple text with
<strong>meaning</strong>.</p>
<p>In fact, we can just keep adding text and keep typing and adding
more characters and more typing and just go on and on.</p>
</body>
</html>
<title>…</title>

<h1>…</h1>
<hr />
<p> … </p>
<p> … </p>

5 - Web Development, © Swinburne


HTML: Document Structure
• Some HTML elements can be “containers” for other
elements, which might also contain other elements,
and so on.
• Hierarchical Structure
– A “parent” element contains the “children” elements
• E.g., <html> is the parent element of <head> and <body>
– Children elements of the same parent element are called
“siblings”
• E.g., <head> and <body> are sibling elements.

This kind of nesting of elements creates a tree.

6 - Web Development, © Swinburne


HTML: Document Structure
• The <html> element, the “root” element of any html document, usually
contains only two children: the <head> element and the <body> element.
The <head> element contains the <title> element, and some other
elements.
The <body> element can contain many other elements.
<!DOCTYPE html >
<html> <html>
<head>
<title>...</title>
</head> <head> <body>
<body>
<div>
<h1>...</h1> <title> <div> <table>
<p>...</p>
</div>
<table> <h1> <p> <tr>
<tr>
<th>...</th>
<td>...</td>
</tr> <th> <td>
</table>
</body>
</html>
7 - Web Development, © Swinburne
HTML: Elements
• HTML element structure includes start tag with tag name,
may include attributes, element content (the text affected by
the tag meaning), and an end tag.

HTML Element
Start Tag Element Content End Tag
Attributes
<h1 id="intro">Introduction Heading</h1>
Tag
Attribute Attribute
Name
Name Value

8 - Web Development, © Swinburne


HTML: Elements
• An HTML element begins with a start tag and
usually finishes with an end tag.
• For example: DEMO!
<h1>This is a major heading.</h1>
<p>This is a paragraph.</p>
<em>This is text that is emphasised.</em>
<strong>This is really important text.</strong>
• A tag pair fully encloses an HTML element.
• An elements might contain other elements
<p>content .. <em> .. Content .. </em>
..content</p>
(i.e. elements might be nested)

9 - Web Development, © Swinburne


HTML: Elements
• Void/empty elements have no content and no end
tag
• All void/empty elements should be self-closed
<meta … />
<hr />
<br /> DEMO!
<img … />
<input … />
• DO NOT add end tags to void/empty elements:
<hr>…</hr>
<br>…</br>
<img>…</img>
X
10 - Web Development, © Swinburne
HTML: Elements
Elements are either:
block-level elements or DEMO!

inline elements.
• Block-level elements would normally be
displayed on a new line in the web page, e.g.,
<h1>, <table>, <p>.
• Inline elements are displayed within block-
level elements without starting a new line,
e.g., <a>, <img>, <em>.
<p>This is a paragraph about <em>The Matrix</em></p>

11 - Web Development, © Swinburne


HTML: White Space
• HTML source files can contain “white space”
characters like “spaces”, “tabs” and “line breaks”
DEMO!
• This make the HTML source text easier to read.
• This doesn’t affect the way the content is presented by
the browser.
• A browser does not display more than one white space
character when the page is presented,
– This means that 1, 2 or 10 source “spaces” will only be
displayed as 1 space in the browser!
– If you do need to ‘hard-code’ an extra space,
you can use the non-breaking space entity &nbsp;

12 - Web Development, © Swinburne


Contents
• HTML Document Structure and Markup Basics
• HTML Doctypes and Templates
• HTML Elements
– Comments
– Heading and Paragraph
– Phrase Tags and Special Characters
– Lists and Table
– Anchor and Image
• HTML Development Process
13 - Web Development, © Swinburne
HTML: <!DOCTYPE> declaration
• It must be the very first item in the HTML document,
• It is not an HTML element – it is an instruction,
indicating the version of HTML the page is written in,
• It allows browsers to know how to render the
content correctly.
• Doctype keywords are case insensitive.

Tip: refer to http://www.w3schools.com/tags/tag_doctype.asp for the right


way to specify different types of HTML documents, e.g., HTML4 and XHTML.

14 - Web Development, © Swinburne


HTML5: <!DOCTYPE> declaration
• HTML5
<!DOCTYPE html>
• In HTML5
– attribute values must be quoted;
<h1 id="myid" class="myclass">Heading</h1>
– void/empty elements can stay unclosed;
• <hr>, <img>, <br>, <meta>
– place inline elements only inside block level
elements.
• We will use HTML5 in this unit.

15 - Web Development, © Swinburne


HTML5 or XHTML
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">

<html lang="en"> <html


xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head> <head>
<meta charset="utf-8"> <meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>HTML5</title> <title>XHTML</title>
</head> </head>
<body> <body>
<h1>HTML5</h1> <h1>XHTML</h1>
<hr> <hr />
</body> </body>
</html> </html>

Void elements must self close


Void elements are not closed

16 - Web Development, © Swinburne


HTML5: Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Web development"
/>
<meta name="keywords"
content="HTML,CSS,JavaScript" />
<meta name="author" content="Your Name" />
<title>TITLE</title>
</head>
<body>

</body>
</html> Replace the highlighted text with your code.

17 - Web Development, © Swinburne


Webpage Validation
• The W3C has an on-line validator (http://validator.w3.org/)
that allows us to validate our HTML5 webpages against
a DOCTYPE:
– <!DOCTYPE …> included within our webpage,
– or against other selected document standards.
• We can validate a webpage using either:
– “Validate by URI”
– validating a file on a server
– “Validate by File Upload”
– uploading a file saved on our local computer drives
– “Validate by Direct Input”
– cut and paste the webpage source to a textarea
18 - Web Development, © Swinburne
Webpage Validation
• Web Developer (Add on for Firefox)

19 - Web Development, © Swinburne


Webpage Validation
• Web Developer (Extension for Chrome)

20 - Web Development, © Swinburne


Contents
• HTML Document Structure and Markup Basics
• HTML Doctypes and Templates
• HTML Elements
– Comments
– Heading and Paragraph
– Phrase Tags and Special Characters
– Lists and Table
– Anchor and Image
• HTML Development Process
21 - Web Development, © Swinburne
HTML: Comment
• <!-- --> used to insert comments or
explanation in the source code
• It is NOT displayed by browsers.

<!-- First HTML5 Example -->

Then why do we need comments in our web pages?

22 - Web Development, © Swinburne


Contents
• HTML Document Structure and Markup Basics
• HTML Doctypes and Templates
• HTML Elements
– Comments
– Head and Body
– Heading and Paragraph
– Phrase Tags and Special Characters
– Lists and Table
– Image and Anchor
• HTML Development Process
23 - Web Development, © Swinburne
HTML: Head and Title Elements
• <head>…</head> is the container for all the
head elements.
– <head> must include a <title> for the document,
– <head> can include scripts, styles, meta
information, and more.
• <title>…</title> defines the title for the HTML
document:
<head>
<title>HTML5 Page</title>
</head>

24 - Web Development, © Swinburne


HTML5: Meta Tags
• Describe the metadata of an HTML document
• Placed as part of the <head> element
content
<head>
<title>HTML5 Page</title>

<meta charset="UTF-8" />


<meta name="description" content="Web development"
/>
<meta name="keywords"
content="HTML,CSS,JavaScript"/>
<meta name="author" content="John Smith" />
</head>
25 - Web Development, © Swinburne
HTML5: Body Element
• <body>…</body> defines the document's
body.
• It contains all the contents of an HTML page,
such as text, hyperlinks, images, tables, lists,
forms, etc.
<head>
…
</head>
<body>
… HTML contents …
</body>

26 - Web Development, © Swinburne


Contents
• HTML Document Structure and Markup Basics
• HTML Doctypes and Templates
• HTML Elements
– Comments
– Head and Body
– Heading and Paragraph
– Phrase Tags and Special Characters
– Lists and Table
– Anchor and Image
• HTML Development Process
27 - Web Development, © Swinburne
HTML: Heading Elements
• <h#>…</h#> is a logical block level element
used to mark the significance of a heading,
where # is a number from 1 to 6
• There are six (6) levels from the top-level <h1>
to the bottom-level important <h6>.
– It’s very similar to the headings in Word documents.
• Browsers display all headings larger and/or
bolder than normal text.

28 - Web Development, © Swinburne


HTML: Headings (continued)
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

DEMO!
heading.html

29 - Web Development, © Swinburne


HTML: Headings (continued)
• Example: Headings are logical markup,
used to convey the order of
importance of content.
...
<h1>Main Heading</h1>
<h2>Section Heading</h2>
<p>A paragraph with some details
about this secion ...</p>
<h2>Another Section Heading</h2>
<p>Another paragraph with details
about this second section ...</p>
<h3>A sub-section Heading</h3>
<p>Text, text and more text, here,
with details about this sub-section
...
</p>

DO NOT use headings simply as a way


to increase font size and make the
text bold
30 - Web Development, © Swinburne
HTML: Paragraph Element
• <p>…</p> is a logical block level element used to
mark paragraphs.
– Note: <p> cannot contain other block-level
elements
– Browsers will place an empty line before and after a
paragraph because it is a block-level element.
• <br /> an empty inline element used to insert a
single line break.
– DO NOT use line breaks to separate paragraphs.

31 - Web Development, © Swinburne


HTML: Paragraph (continued)
<p id="paragraph1">This is a paragraph.</p>
<p id="paragraph2">This is a paragraph.</p>
<p id="paragraph3">Roses are red<br />
Violets are blue</p>

DEMO!

32 - Web Development, © Swinburne


HTML: Horizontal Rule
• <hr /> an block level element used to visually
separate content in an HTML page.

<h1>HTML</h1>
<p>HTML is a markup language
for describing the contents
and structure of web
pages.</p>

<hr />

<h1>CSS</h1>
<p>CSS defines the style or
how to present the contents
and structure of web
pages.</p>

33 - Web Development, © Swinburne


HTML: Block Quote
• <blockquote>…</blockquote > a block level
element used to specify a section that is
quoted from another source.
– Browsers usually indent <blockquote> elements.
• Cite the source of quote using a ‘cite’
attribute

34 - Web Development, © Swinburne


HTML: Block Quote (continued)
<body>
<h1>Average Web Page Size
Triples Since 2008</h1> Average Web Page Size
<p>Here is a quote from
Website Optimization Triples Since 2008
website:</p>
<blockquote Here is a quote from Website
cite="http://www.websiteoptim
Optimization website:
ization.com/speed/tweak/avera
ge-web-page/">
The size of the average web The size of the average web page of
page of the top 1000 websites the top 1000 websites has more
has more than tripled since than tripled since 2008 (our last
2008 (our last update in May update in May 2011 found it had
2011 found it had more than more than septupled since 2003).
septupled since 2003).
</blockquote>
</body>

35 - Web Development, © Swinburne


HTML: Preformatted Text
• <pre>…</pre> is a block level element used to
mark preformatted text.
• This is useful if you have information presented in
a way that depends on maintaining white space
(tabs, returns, multiple spaces) for meaning, like
mathematics, formula, computer code
– The <pre> element is typically presented in a
monospaced font (like “courier new”) so that all
characters are the same width.
– Browsers will not flow or “wrap” the text to fit the
browser window, and will display horizontal scroll bars
if required.

36 - Web Development, © Swinburne


HTML: Preformatted Text (continued)
<pre>
if (document.getElementById('EmailAddress').value
!= document.getElementById('EmailAddress2').value)
{
alert('- Email address and its confirmation do not match\n');
return false;
}
</pre> if (document.getElementBy
{
alert('- Email address
DEMO! return false;
preformatted.html }

37 - Web Development, © Swinburne


Contents
• HTML Document Structure and Markup Basics
• HTML Doctypes and Templates
• HTML Elements
– Comments
– Heading and Paragraph
– Phrase Tags and Special Characters
– Lists and Table
– Anchor and Image
• HTML Development Process
38 - Web Development, © Swinburne
HTML: Phrase Elements
• <em> <strong> <dfn> <code> <samp> <kbd>
<var> are logical inline phrase elements that
define the meaning of the enclosed text
– Do not use those elements just for presentation
<em> Defines emphasized text – rendered as italics
<strong> Defines important text – rendered as bold
<dfn> Defines a definition term
<code> Defines a piece of computer code
<samp> Defines sample output from a computer program
<kbd> Defines keyboard code
<var> Defines a variable

39 - Web Development, © Swinburne


HTML: Phrase Elements (continued)
<p>
<em>Emphasized text</em><br />
<strong>Strong text</strong><br />
<dfn>Definition term</dfn><br />
<code>A piece of computer
code</code>
<br />
<samp>Sample output from a
computer program</samp>
<br />
<kbd>Keyboard input</kbd>
<br />
<var>Variable</var>
</p>
DEMO!

40 - Web Development, © Swinburne


HTML: Phrase Elements (continued)
• <i>…</i> should be avoided. Use <em>
Defines a part of text in an alternate voice or mood.
The content of the <i> tag is usually rendered in italics
– The <i> tag can be used to indicate a technical term,
a phrase from another language
(eg. scientific name), a thought, or a ship name, etc.
• <b>…</b> should be avoided. Use <strong>
According to the HTML 5 specification, use only as a
LAST resort, when no other tag is more appropriate.

41 - Web Development, © Swinburne


HTML: Phrase Elements (continued)
Superscript and Subscript
• <sup>…</sup> defines superscript text
– It appears as a half character above the baseline
– Often used to show an exponent in a
mathematical equation such as (x + y)2 or a
footnote / citation reference.
• <sub>...</sub> defines subscript text.
– It appears as a half character below the baseline.
– Often used in chemical formulas, such as H2O.
DEMO!

42 - Web Development, © Swinburne


HTML: Phrase Elements (continued)
<p>H<sub>2</sub>O</p>
<p>(x + y)<sup>2</sup></p>

43 - Web Development, © Swinburne


HTML: Special Characters
 To encode reserved characters in HTML into the
contents special characters &…; are used
 Some of the common codes are listed below:
Decimal Entity
Character Named Entity Description
Number

" &#34; &quot; quotation mark


' &#39; &apos; apostrophe
& &#38; &amp; ampersand
< &#60; &lt; less-than
> &#62; &gt; greater-than

44 - Web Development, © Swinburne


HTML: Special Characters (continued)
Decimal Entity
Character Named Entity Description
Number
&#160; &nbsp; non-breaking space
© &#169; &copy; copyright
&#173; &shy; soft hyphen
® &#174; &reg; registered trademark
¯ &#175; &macr; spacing macron
° &#176; &deg; degree
± &#177; &plusmn; plus-or-minus
× &#215; &times; multiplication
÷ &#247; &divide; division
Character entity references in HTML4
http://www.w3.org/TR/REC-html40/sgml/entities.html DEMO!
Wikipedia List of XML and HTML character entities
http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character
_entity_references
45 - Web Development, © Swinburne
Contents
• HTML Document Structure and Markup Basics
• HTML Doctypes and Templates
• HTML Elements
– Comments
– Heading and Paragraph
– Phrase Tags and Special Characters
– Lists and Table
– Anchor and Image
• HTML Development Process
46 - Web Development, © Swinburne
HTML: List Elements
• Ordered List
1. first item
– <ol> … </ol> 2. second item
3. third item
• Unordered List
• first item
– <ul> … </ul> • second item
• third item
• List Items
– <li>…</li>: used to mark each list item in ordered
and unordered lists.

DEMO!

47 - Web Development, © Swinburne


HTML: List (continued)
• Ordered list example
<ol>
1. first item
<li>first item</li> 2. second item
<li>second item</li> 3. third item
<li>third item</li>
</ol> • first item
• second item
• Unordered list example • third item

<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>

48 - Web Development, © Swinburne


HTML: List (continued)
• Nested list example:
<ul>
<li>first item</li>
<li>second item
<ol>
<li>first sub-item</li>
<li>second sub-item</li>
<li>third sub-item</li>
</ol>
</li>
<li>third item</li>
</ul> DEMO!
list.html

The inner list must be inside a list item of the outer list.

49 - Web Development, © Swinburne


HTML: Definition List
• <dl>…</dl> element defines a definition list.
• <dt>…</dt> is used to define the item in the
list and;
• <dd>…</dd> is used to describe the item in
the list
• The browser will render the item and the
definition on separate lines, and the definition
will be indented
• Do not use definition list to create second
level indentation
50 - Web Development, © Swinburne
HTML: Definition List (continued)
<dl>
<dt>Alcohol</dt> Alcohol
<dd>The antidote to The antidote to reality.
reality. Selfies per Minute
Unit of measurement
</dd> for narcissism.

<dt>Selfies per
Minute</dt>
<dd>Unit of
measurement for
narcissism.
</dd>
</dl>

51 - Web Development, © Swinburne


HTML: Table
• <table> …</table>
– block level element for organising data in a tabular
format.
– Do not used table for page layout presentation.
• Table elements:
– <table> … </table> declares a table
– <caption> … </caption> specifies the table caption
– <tr> … </tr> defines a table row
– <th> … </th> defines a table head cell
– <td> … </td> defines a table data cell
– <thead>, <tfoot>, <tbody> defines table sections

52 - Web Development, © Swinburne


HTML: Table (continued)
<table border="1">
<caption>Table of Monthly Savings</caption>
<thead> <!–- the table head section -->
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody> <!–- the table body section -->
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot> <!–- the table foot section -
<tr>
<th>Total</th>
<th>$180</th>
</tr>
</tfoot>
</table>
DEMO!
table.html
53 - Web Development, © Swinburne
HTML: Table (continued)
<table border="1">
<caption>Table of Monthly Savings</caption>
<thead>
<tr>
<th rowspan="2">Month</th>
<th colspan="3">Savings</th>
</tr>
<tr>
<th>Salary</th>
<th>Interest</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$60</td>
<td>$40</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$40</td>
<td>$40</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Grand Total</th> The rowspan and colspan attributes for
<th>$180</th>
</tr> <td> and <th> allows a more complex table
</tfoot>
</table> to be built.

54 - Web Development, © Swinburne


Contents
• HTML Document Structure and Markup Basics
• HTML Doctypes and Templates
• HTML Elements
– Comments
– Heading and Paragraph
– Phrase Tags and Special Characters
– Lists and Table
– Anchor and Image
• HTML Development Process
55 - Web Development, © Swinburne
HTML: Anchor element
• <a> … </a> is an inline element that defines
a hyperlink, used to link from one page to
another.
<a href="http://www.google.com.au">GOOGLE</a>

• The href attribute - indicates the location of


the target resource for the hyperlink
– The target resource can be a
• A web page or a location within a web page
• A file
• An email address
– A relative or absolute (URL) path can be used
56 - Web Development, © Swinburne
Note: Specifying Resource Locations
• Relative path is best used in specifying target
resources hosted on the same website, such
as files, images and web pages.
e.g., <a href="help.html">HELP</a>
• Absolute path is used if the target resource is
not part of the website
e.g., <a href="http://www.swin.edu.au/index.html ">Swinburne</a>

57 - Web Development, © Swinburne


Relative Paths
The relative link from this
bio.htm back to index.htm is
"../index.htm"

The relative link from


index.htm to bio.htm is
"lee/bio.htm"

The relative link from chem.htm back to


index.htm is "../../index.htm"

58 - Web Development, © Swinburne


HTML: Anchor (continued)
• Resource location within a web page is
specified starting with a # symbol
<a href="home.htm#section10">Section 10</a>
and is identified by an id attribute in the page
<h1 id="section10">Section Ten</h1>
• By default, links are displayed as follows:
– An unvisited link is underlined and blue
– A visited link is underlined and purple
– An active link is underlined and red

59 - Web Development, © Swinburne


HTML: Anchor (continued)
<a
href="http://ilearn.swin.edu.au">Bla
ckboard</a>

<a
href="http://www.swinburne.edu.au/contac
ts-
campuses/campuses/hawthorn/documents/haw
thorn.pdf">Hawthorn Campus Map</a>

Click <a
href="mailto:[email protected]">here
</a> to contact Nathan.

<a
href="http://en.wikipedia.org/wiki/Smile
y">
<img src="smiley.jpg" alt="Smiley Face"
/></a>

DEMO!
60 - Web Development, © Swinburne anchor.html
HTML: Image Element
• <img … /> is an inline element that defines an
image in an HTML page.
– Must have the two required attributes: src and
alt
<img src="images/logo.jpg" alt="Swinburne Logo Image“ />

• src - indicates the location and filename of the


image
– A relative or absolute (URL) path can be used
• alt - something to be displayed when the image
cannot be found, e.g., “image missing”
DEMO!
61 - Web Development, © Swinburne image1.html
Note: Specifying Resource Locations
• Relative path is best used in specifying target
resources hosted on the same website, such
as files, images and web pages.
e.g., <img src="logo.jpg" alt="Logo" />
<img src="images/logo.jpg" alt="Logo" />
• Absolute path is used if the target resource is
not part of the website
e.g., <img src="http://www.swin.edu.au/media/swinburneeduau/style-
assets/images/logo-2013.jpg" alt="Swinburne Logo" />
DO NOT specify local driver: src="C:\images\logo.jpg"
DEMO!
image2.html
62 - Web Development, © Swinburne
HTML: Image (continued)
• The three well supported image formats for the
Web are:
– PNG (Portable Networks Graphics) *.png
– JPEG (Joint Photographic Experts Group) *.jpg or
*.jpeg
– GIF (Graphics Interchange Format) *.gif
• An image can be used as a hyperlink, by nesting an
<img … /> element as the anchor’s element content
<a href="http://www.google.com.au">
<img src="smiley.jpg" /></a>

63 - Web Development, © Swinburne


HTML: Image (continued)
Height and Width
height attribute
width attribute
<p>
<img src="smiley.jpg"
alt="Smiley face" />
<img src="smiley.jpg"
alt="Smiley face"
height="50px" width="50px" /> alt displays
<img src="smiley.jpg" if image is
alt="Smiley face" height= not found
"100px" width="100px" /> All images are on the same line, as
<img src="ismily.jpg" <img> elements are inline
alt="Smiley face" /> elements.
</p>
64 - Web Development, © Swinburne
Contents
• HTML Document Structure and Markup Basics
• HTML Doctypes and Templates
• HTML Elements
– Heading and Paragraph
– Phrase Tags and Special Characters
– Lists and Table
– Anchor and Image
• HTML Development Process

65 - Web Development, © Swinburne


HTML: Development Process
• Step 1: Choose a document type, HTML or XHTML and
a version
• Step 2: Create an HTML document by typing HTML
markup text using a text editor
• Step 3: Save the HTML document with the .html or
.htm filename extension
• Step 4: View and test the web page locally
• Step 5: Upload the HTML document to the web server
using FTP / SCP software, e.g., WinSCP or FileZilla
• Step 6: View the HTML page on the server in a web
browser
• Step 7: Validate the HTML page to ensure quality

66 - Web Development, © Swinburne


HTML: W3C References
• World Web Web Consortium (W3C):
http://www.w3.org
Home Page
http://www.w3.org/Markup
HyperText Markup Language (HTML) Home Page
http://www.w3.org/MarkUp/#tutorials
W3C HTML Introductory Tutorials
http://validator.w3.org/
W3C HTML Validator

67 - Web Development, © Swinburne


HTML: Syntax References
Syntax references:
http://www.w3.org/
The W3C HTML Standards / References
http://reference.sitepoint.com/
HTML Tutorials / References
http://www.htmlhelp.com/
HTML References
http://www.w3schools.com/
HTML Tutorials / References
See also: Web Links on Canvas

68 - Web Development, © Swinburne


HTML ELEMENTS
TO BE CONCLUDED
IN THE NEXT LECTURE

You might also like