Scribd
Upload
9 views43 pages

Lec2 HTML

The document provides an overview of HyperText Markup Language (HTML), detailing its objectives, structure, and various elements such as tags, lists, hyperlinks, images, and tables. It explains the evolution of HTML standards and emphasizes the importance of understanding low-level HTML for better control and adherence to web standards. Additionally, it covers the basic structure of an HTML file, including the head and body sections, as well as text formatting and layout techniques.

Uploaded by

tminh250404
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
9 views43 pages

Lec2 HTML

The document provides an overview of HyperText Markup Language (HTML), detailing its objectives, structure, and various elements such as tags, lists, hyperlinks, images, and tables. It explains the evolution of HTML standards and emphasizes the importance of understanding low-level HTML for better control and adherence to web standards. Additionally, it covers the basic structure of an HTML file, including the head and body sections, as well as text formatting and layout techniques.

Uploaded by

tminh250404
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

HyperText Markup

Language
Objectives
 Describe hypertext and HTML standards
 Understand HTML elements and markup
tags
 Create the basic structure of an HTML file
 Insert an HTML comment
 Work with block-level elements
 Create lists, tables, hyperlinks and insert
images
 Learn HTML5 tags
 Work with forms and inputs

2
Outline
1. Basic HTML
 hypertext
 tags & elements
 text formatting
 lists, hyperlinks,
images
 tables, frames

2. Advanced HTML

3
Hypertext & HTML
• HyperText Markup Language (HTML) is the language for
specifying the static content of Web pages (based on
SGML, the Standard Generalized Markup Language)

 hypertext refers to the fact that Web pages


are more than just text
• can contain multimedia, provide links for
jumping within the same document & to other
documents

 markup refers to the fact that it works by


augmenting text with special symbols (tags) that
identify the document structure and content type
Hypertext & HTML (cont.)
• HTML is an evolving standard (as new technology/tools are added)
 HTML 1 (Berners-Lee, 1989): very basic, limited integration of
multimedia
in 1993, Mosaic added many new features (e.g., integrated images)

 HTML 2.0 (IETF, 1994): tried to standardize these & other features, but
late
in 1994-96, Netscape & IE added many new, divergent features

 HTML 3.2 (W3C, 1996): attempted to unify into a single standard


but didn't address newer technologies like Java applets & streaming video

 HTML 4.0 (W3C, 1997): current standard (but moving towards XHTML)
attempted to map out future directions for HTML, not just react to vendors
 XHTML 1.0 (W3C, 2000): HTML 4.01 modified to conform to XML
standards
 XHTML 1.1 (W3C, 2001): “Modularization” of XHTML 1.0
 HTML 5 (Web Hypertext Application Technology Working Group, W3C,
2006)

5
Web DevelopmentTools
• Many high-level tools exist for creating Web pages
e.g., Microsoft FrontPage, Netscape Composer, Adobe PageMill,
Macromedia DreamWeaver, HotDog, …
also, many applications have "save to HTML" options (e.g., Word)

Don’t use these tools!!


for most users who want to develop basic, static Web pages, these are fine (but
many of these programs produce very poorly structured HTMLcode)
why are we learning low-level HTML using a basic text editor?
 may want low-level control
 may care about size/readability of pages
 may want to “steal" components from other pages and integrate into existing pages
 may want dynamic features such as scripts or applets
 remote editing of web pages may only be possible using a basic text editor
 sticking to (internationally and industrially) agreed upon standards will help
ensure your web documents are rendered as you intend them to look and
operate as you desire
6
Tags and Elements
• HTML specifies a set of tags that identify
structure of the document and the content
type
 tags are enclosed in < >
• <img src="image.gif" /> specifies an image
 most tags come in pairs, marking a beginning and ending
• <title> and </title> enclose the title of a page

• An HTML element is an object enclosed by a


pair (in most cases) of tags
 <title>My Home Page</title> is a TITLE element
 <b>This text appears bold.</b> is a BOLD element
 <p>Part of this text is <b>bold</b>. </p>
is a PARAGRAPH element that contains a BOLD element
An HTML document is a collection of elements
(text/media with context).

7
Structural Elements
• an HTML document has two main structural elements
 HEAD contains setup information for the browser & the Web
page
• e.g., the title for the browser window, style definitions, JavaScript code, …
 BODY contains the actual content to be displayed in the
Web page
<html> HTML documents begin and
<!–- Version information -- end with
-- File: page01.html --
-- Author: CS443--
<html> and </html> tags
-- Creation: 22.09.09 -- Comments appear between <!--
-- Description: introductory page -- and -->
-- Copyright: U.Liverpool --
-->
HEAD section enclosed between
<head>
<head>
<title>My first HTML document</title> and </head> tags
</head> BODY section enclosed between
<body>
<body>
<p> Hello world! </p>
</body> and </body>
</html>

8
<head> and <body>elements
 The <head> element is where you include a <title> element (that appears in the
title bar of the browser).
 You can also include lots of other type of information in the <head> element.
o Cascading Style sheet information, or a link to an external style sheet (or several)
o “Meta” data, such as who authored the page, the type of content, and clues that
search engines may (or may not) use to help categorize your page
o JavaScript code
 The <body> element contains the main bulk of the material to be displayed on the
webpage.
o Paragraphs
o Tables and lists
o Images
o JavaScript code
o PHP code can be included here too (if passed through a PHP parser beforebeing
served to the client’s browser)
o Other embedded objects

9
Text Layout
<html>
<!–- CS443 page02.html 17.09.14 -->
for the most part, layout of
<head> the text is left to the browser
<title>Text Layout</title>
</head>  (almost) every sequence of whitespace is
interpreted as a single space
<body>
<p>  browser automatically wraps the text to
This is a paragraph of text<br/> fit the window size
made up of two lines.
</p>

<p>
This is another paragraph with a
&nbsp; GAP &nbsp; between
 can override some text
some of the words.
</p>
layout
 can specify a new paragraph (starts
<p>
&nbsp;&nbsp; This paragraph is<br/>
on a new line, preceded by a blank
indented on the first line<br/> line) using
but not on subsequent lines. <p>…</p>
</p>  can cause a line break using the <br/> tag
</body> (“self- closing” tag)
</html>  can force a space character using
the symbol for a “non-breaking
space”: &nbsp;

10
Separating Blocks of Text
<html>
<!–- CS443 page03.html 15/08/06 --> can specify headings for
<head>
<title>Blocks of Text</title> paragraphs or blocks of text
</head>
 <h1>…</h1> tags produce a
<body>
<h1>Major heading 1</h1>
large, bold heading
<p>  <h2>…</h2> tags
Here is some text.
</p>
produce a slightly
smaller heading
<h2>Subheading</h2> ...
<p>
Here is some subtext.  <h6>…</h6> tags produce a
</p> tiny heading
<hr/>

<h1>Major heading 2</h1> can insert a horizontal rule


<p>
Here is some more text.
to divide sections
</p>
</body>
 <hr/> draws line across
</html> window
view page

11
Text Appearance
<html>
<!–- CS443 page25.html 15.08.06 -->  can specify styles for fonts
<head>
<title>Text Variations and Escape  <b>… </b> specify bold
Sequences</title>  <i>… </i> specify italics
</head>
<body>  <tt>… </tt> specify
<h1>Text Variations</h1> typewriter-like (fixed-width) font
<p>We can use <b>simple</b> tags to  <big>… </big> increase the
<i>change</i> the appearance of
<strong>text</strong> within
size of the font
<tt>Web pages</tt>.  <small>… </small> decrease
Even super<sup>script</sup> the
and sub<sub>scripts</sub> are
<em>supported</em>.</p> size of the font
 <em>…</em> put emphasis
<h1>Text Escape Sequences</h1>
<p>
 <strong>…</strong> put
&amp; &lt; &gt; &quot; &copy; even more emphasis
</p>  <sub>… </sub> specify a
<h1>Preformatted text</h1>
subscript
<pre>
University of Liverpool  <sup>… </sup> a superscript
Department of Computer Science  <pre>…</pre> include
Ashton Building, Ashton Street
Liverpool, L69 3BX, UK
ready- formatted text
</pre>  &amp; &al; &gt; &quot; &copy;
</body> escape characters used in HTML
</html> control

 Find more info on text tags! 12


Lists
<html>
<!–- CS443page07.html 23.09.08 -->
<head> <title>(Sort of) Simple Lists</title>
there are 3 different
<style type="text/css">
.my_li:before { content: counter(list) ": "; types of list elements
counter-increment: list; }  <ol>…</ol> specifies an ordered
</style> </head>
<body> list (using numbers or letters to
label each list item)
<ul style="list-style-type: square;">
•<li> identifies each list item
<li> ... first list item... </li>
<li> ... second list item... ... </li> • can set type of ordering, start
</ul> index
<dl> <dt> Dweeb </dt>
<dd> young excitable person who may
 <ul>…</ul>specifies unordered
mature into a <em>Nerd</em> </dd> list (using a bullet for each)
<dt> Hacker </dt>
<dd> a clever programmer </dd>
• <li> identifies each list item
<dt> Nerd </dt> <dd> technically bright but
socially inept person </dd>
</dl>  <dl>…</dl> specifies a definition
<ol style="list-style-type: none;
counter-reset: list 29;" >
list
<li class="my_li">Makes first item number 30.</li> • <dt> identifies each term
<li class="my_li">Next item continues to number • <dd> identifies its definition
31.</li>
</ol>

</body>
</html>

13
Hyperlinks
<html>
<!-- CS443page08.html 17.10.14 -->
perhaps the most important
HTML element is the
<head>
<title>Hyperlinks</title> hyperlink, or ANCHOR
</head>  <a href="URL">…</a>
•where URL is the Web address of the
<body> page to be displayed when the user
<p> clicks on the link
<a href="http://www.liv.ac.uk"> •if the page is accessed over the Web,
The University of Liverpool</a>
must start with http://
<br/> •if not there, the browser will
<a href="page07.html"
target="_blank">
assume it is the name of a local file
Open page07 in a new window</a>
 <a href="URL"
</p>
target="_blank">…</a>
</body>
•causes the page to be loaded in a
</html> new Window

14
Hyperlinks (cont.) for long documents, you can
<html>
even have links to other
<!–- CS443 page09.html 21.09.12 --> locations in that same
<head> document
<title>Internal Links in a Page</title>
</head>
 <xxxx id="ident">…</xxxx>
<body>
<p> •where ident is a variable for
<a href="#HTML">HTML</a>
<a href="#HTTP">HTTP</a>
identifying this location, where
<a href="#IP">IP</a> "xxxx" can, in principle, be any
<a href="#TCP">TCP</a>
</p>
HTML element
<p> •(this is actually an HTML5
Computer acronyms:
<dl> language specification, but
<dt id="HTML">HTML</dt> seems to work in
<dd>HyperText Markup Language
<dt id="HTTP">HTTP</dt> most browsers)
<dd>HyperText Transfer Protocol…</dd>
<dt id="IP">IP</dt>
<dd>Internet Protocol…</dd>  <a href="#ident">…</a>
<dt id="TCP">TCP</dt>
•will then jump to that location
<dd>Transfer Control Protocol…</dd>
</dl> within the file
</p>

</body>  <a href="URL#ident">…</a>


</html>
•can jump into the middle of
another file just as easily
15
Images
 can include images using img
 by default, browsers can display GIF and JPEG files, more modern browsers
can also typically support PNG files and SVG graphics (of course, use at
your own risk)
 other image formats may require plug-in applications for display
•<img src="URL (or filename)" height="n" width="n"
alt="text" title= "text" />
•again, if file is to be accessed over the Web, must start with http://
(if not, will assume local file)
• Find more info on <img/>
<html>
<!–- CS443 page10.html 18.09.13 -->
<head>
<title>Image example</title>
</head>
<body>
<img
src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/HTML/Cathedral.jpg"
title="Liverpool's Anglican cathedral"
alt="image of Liverpool's Anglican Cathedral" width="400" />
<p>The Anglican Cathedral of Liverpool</p> </body>
</html>

16
Images (cont.)
 src - specifies the file name (and can include a URL)

 width and/or height - dimensions in pixels (often only need to


specify one of them and the other is automatically scaled to match,
where possible pictures should be resized using other programs to
save on bandwidth and problems that some (older) browsers
might have with resizing images)

 title - displayed when the mouse is “hovered” over the picture

 alt - text that is displayed when the image is missing, can’t be


loaded (e.g. if file permissions aren’t set correctly), or if the client
has disabled loading images in his/her browser

17
Tables
• tables are common tools for arranging complex layout on a Web page
 a table divides contents into rows and columns
 by default, column entries are left-justified, so you must provide for your own
alignment when needed (using Cascading Style Sheets, for example)

<html>
<!–- CS443 page11.html 17.10.14 -->
<head>
<title>Tables</title>
</head>
<body>
<table>…</table> specify a
<h2>A Simple Table</h2> table element
<table>
<tr>
<td> Left Column </td> <tr>…</tr> specify a row in
<td> Right Column </td>
</tr> the table
<tr>
<td> Some data </td>
<td> Some other data </td> <td>…</td> specify table data
</tr>
</table>
(i.e., each column entry in the
</body> table)
</html>

18
Layout in a Table
<html>
<!-- CS443 page12.html 17.10.14 --> can have a border on tables using
the “style” attribute
<head>
<title>Table Layout</title>
<table style= "border: 1px
</head> solid;">
increasing the number makes the border
<body> thicker
<table style="border: 1px solid;">
<tr style="text-align: center;">
<td style="border: 1px solid;"> can control the horizontal
Left<br/>Column</td>
<td style="border: 1px solid; & vertical layout within cells
vertical-align: top;"> <td style= "text-align:center">
Right Column</td> <td style= "vertical-align: bottom">
</tr>
<tr>
<td style="border: 1px solid;">  can apply layout to an entire row
Some data</td> <tr style="text-align: center">
<td style="border: 1px solid;"> <tr style="vertical-align: top">
Some data</td>
</tr>
</table> We will explore this more with
</body>
</html> Cascading Style Sheets
(CSS).

19
Table Width
<html>
<!-- CS443 page13.html 17.10.14 -->
by default, the
<head> table is sized to fit
<title>Table Width</title> the data
</head>

<body> can override & specify


<table style="width: 100%;"> the width of a table
<tr>
<td>left-most </td>
relative to the page
<td style="text-align: right;"> For example
right-most</td>
</tr> <table style="width:
</table>
60%">
</body>
</html>

20
Other Table Attributes
<html>
<!-- CS443 page14.html 17.10.14 -->
can control the space between cells
<head> & margins within cells
<title>Table Formatting</title> This is the “padding” attribute in the
<style type="text/css" media="screen"> table and
table { border: 1px solid; padding: 1px;} th,td style sheet declarations
th, td { border: 1px solid; padding: 10px;
text-align: center; }
(more on this with Cascading Style
</style> Sheets).
</head>

<body>
 can add headings
<table> <th> is similar to <td> but displays
<tr>
<th>HEAD1</th> <th>HEAD2</th>
heading centered in bold
<th>HEAD3</th>
</tr>
<tr> can have data that spans more
<td>one</td> <td>two</td> <td>three</td>
</tr> than one column
<tr> <td colspan="2">
<td rowspan="2"> four </td>
<td colspan="2"> five </td>
</tr>  similarly, can span more than one
<tr>
<td> six </td> <td> seven </td> row
</tr> <td rowspan="2">
</table>
</body>
</html> (This example uses CSS style sheet
commands in the page
<header>.) 21
Frames
• Frames provide the ability to split the screen into independent parts
 Frames are going out of fashion, partly because they interact poorly
with web search engines (i.e. search engines cannot generally access
the data stored in the inset frame objects).

 Frames can also “break” the regular behaviour of browsers, most


notably the “Back” button on the browser can behave in unexpected
ways.

 Because of these drawbacks to frames, I will not be discussing them


in this course.

 If you wish to design websites using frames (why would you??), I would
encourage you to use the XHTML XFrames specifications (see the W3C
website for more details), but this specification isn’t fully supported by
all browsers at this time.

 Frames are also not supported by the HTML 5 specification.

22
Content vs. Presentation
• Most HTML tags define content type, independent of
presentation.
 exceptions? (e.g. <b> …… </b> for bold text and <i> ….. </i> for italicized
text)

• Style sheets associate presentation formats with HTML


elements.
 CSS1: developed in 1996 by W3C
 CSS2: released in 1998, but still not fully supported by all browsers
 CSS3: specification still under development by the W3C, “completely
backwards compatible with CSS2” (according to the W3C)

• The trend has been towards an increasing separation of the


content of webpages from the presentation of them.
• Style sheets allow us to maintain this separation, which
allows for easier maintenance of webpages, and for a
consistent look across a collection of webpages.
23
Content vs. Presentation (cont.)
Style sheets can be used to specify how tables should
be rendered, how lists should be presented, what colors
should be used on the webpage, what fonts should be
used and how big/small they are, etc.
HTML style sheets are known as Cascading Style Sheets,
since can be defined at three different levels
1.inline style sheets apply to the content of a single HTML
element
2.document style sheets apply to the whole BODY of a document
3.external style sheets can be linked and applied to
numerous documents, might also specify how things should
be presented on screen or in print lower-level style sheets
can override higher-level style sheets
User-defined style sheets can also be used to override the
specifications of the webpage designer. These might be
used, say, to make text larger (e.g. for visually-impaired
users).
24
Inline Style Sheets
<html> Using the style attribute, you
<!–- CS443 page17.html 17.10.14 -->
can specify presentation style for a
<head> single HTML element
<title>Inline Style Sheets</title>
</head>  within tag, list sequence of
property:value pairs separated by
<body> semi-colons
<p style="font-family:Arial,sans-
serif; font-family:Courier,monospace
text-align:right">This is a font-style:italic
right-justified paragraph in a sans font-weight:bold
serif font-size:12pt font-size:large font-size:larger
font (preferably Arial), with some
<span style="color:green">green color:red color:#000080
text</span>.
</p> background-color:white

<p>And <a style="color:red; text-decoration:underline


text-decoration:none; text-decoration:none
font-size:larger;" text-align:center
text-align:left
href="page01.html">here</a>
text-align:right text-align:justify
is a formatted link.
</p> vertical-align:top vertical-align:middle
</body> vertical-align:bottom
</html> text-indent:5em text-indent:0.2in

25
Inline Style Sheets(cont.)
<html>
<!–- CS443 page18.html 17.09.09 -->
more style properties & values
<head> margin-left:0.1in margin-right:5%
<title>Inline Style Sheets</title> margin:3em
</head>
padding-top:0.1in padding-
<body> bottom:5%
<p>Here is an image padding:3em
<img src="VictoriaBldg.jpeg"
alt="image of Victoria Building"
style="margin-left:0.3in; border-width:thin border-width:thick
margin-right:0.3in;
vertical-align:middle;
border-width:5
border-style:double; border-color:red
border-color:blue" />
embedded in text.
border-style:dashed border-style:dotted
</p> border-style:double border-style:none
<ol style="list-style-type:upper-alpha">
<li> one thing</li> whitespace:pre
<li> or another</li>
<ul style="list-style-type:square;
whitespace:pre"> list-style-type:square
<li> with this</li>
<li> or
list-style-type:decimal
that</li>
</ul> list-style-type:lower-alpha
</ol> list-style-type:upper-roman
</body>
</html>

26
Inline Style Sheets (cont.)
<html>
<!–- CS443 page19.html 17.10.14 -->

<head>
<title> Inline Style Sheets </title>
</head>

<body>
<table style="font-family:Arial,sans-serif">
<caption style="color:red;
style sheets can be
font-style:italic;
text-decoration:underline">
applied to tables for
Student data. </caption>
<tr style="background-color:red">
interesting effects
<th> name </th> <th> age </th>
</tr>
<tr>
<td> Chris Smith </td> <td> 19 </td>
</tr>
<tr>
<td> Pat Jones </td> <td> 20 </td>
</tr>
<tr>
<td> Doogie Howser </td> <td> 9 </td>
</tr>
</table>
</body>
</html>

27
Document StyleSheets
• Inline style sheets apply to individual elements in the
page.
 using inline style directives can lead to inconsistencies, as
similar elements are formatted differently
• e.g., we might like for all <h1> elements to be centered
 inline definitions mix content & presentation
 violates the general philosophy of HTML

• As a general rule, inline style sheet directives


should be used as sparingly as pos
• Alternatively, document style sheets allow for a
cleaner separation of content and presentation.
 style definitions are placed in the <head> of the page (within
STYLE tags)
 can apply to all elements, or a subclass of elements, throughout
the page sible.

28
Document Style Sheets
<html>
<!–- CS443 page20.html 17.10.14 --> document style sheets ensure
<head>
that similar elements are
<title>Document Style Sheets</title> formatted similarly
<style type="text/css">
h1 {color:blue;  can even define subclasses of elements
text-align:center}
p.indented {text-indent:0.2in}
and specify formatting
</style>
</head>
p.indenteddefines subclass
<body>
<h1> Centered Title </h1> of paragraphs
<p class="indented">This paragraph • inherits all defaults of <p>
will have the first line indented, but • adds new features
subsequent lines will be flush. </p>

<p>This paragraph will not be to specify this newly defined


indented.
</p> class, place class="ID"
<h1> The End </h1> attribute in tag
</body>
</html>
 note how "clean" the <body>
element is
29
Document Style Sheets (cont.)
<html>
<!–- CS443 page21.html 17.10.14 --> document style sheets
<head>
are especially useful in
<title> Inline Style Sheets </title> formatting tables
<style type="text/css">
table {font-family:Arial,sans-serif}
caption {color:red;
font-style:italic; effectively separates
text-decoration:underline}
th {background-color:red} content from presentation
</style>
</head>
 what if you wanted to
right- justify the column
<body>
<table> of numbers?
<caption> Student data. </caption>
<tr><th> name </th> <th> age</th></tr>
 what if you changed
<tr><td> Chris Smith </td> <td> 19 </td></tr> your mind?
<tr><td> Pat Jones </td> <td> 20 </td></tr>
<tr><td> Doogie Howser </td> <td> 9 </td></tr>
</table>
</body>
</html>

30
Pseudo-Elements
<html>
<!–- CS443 page23.html 17.10.14 --> pseudo-elements are used to
<head>
address sub-parts of elements
<title>Title for Page</title>
<style type="text/css">  can specify appearance of link
a {color : red;
text-decoration : none;
in various states
•:visited :active :hover
font-size : larger}
a:visited {color : black}
a:active {color : orange}
 can specify format of first line
a:hover {color : blue} in page or paragraph
p:first-letter {font-size : large; •:first-line
color : white;
background-color : darkblue}
</style>  can specify format of first
</head>
letter in page or paragraph
<body> •:first-letter
<p> Welcome to my Web page. I am so
happy you are here.
</p> Danger : changing the look of
<p> Be sure to visit
<a href="http://www.cnn.com">CNN</a> familiar elements is confusing
for late-breaking news.
</p>
</body>
</html> Careful : current browsers do
not support all CSS2 features
31
External Style Sheets
• modularity is key to the development and
reuse of software
 design/implement/test useful routines and classes
 package and make available for reuse
 saves in development cost & time
 central libraries make it possible to make a single
change and propagate the changes

• external style sheets place the style


definitions in separate files
 multiple pages can link to the same style sheet, consistent
look across a site
 possible to make a single change and propagate automatically
 represents the ultimate in content/representation separation

32
Modularity & StyleSheets
<html> /* myStyle.css CS443 02.09.05 */
<!–- CS443 page26.html 17.10.14 -->
h1 {color : blue; text-align :
<head> center}
<title>Title for Page</title> p.indented {text-indent:0.2in}
<link rel="stylesheet"
type="text/css"
href="myStyle.css"
title="myStyle“ /> Ideally, the developer(s) of aWeb
</head> site would place all formatting
<body> options in an external stylesheet.
<h1>Centered Title</h1>

<p class="indented">This paragraph All Web pageslink to that same


will have the first line indented, but
subsequent lines will be flush.</p>
style sheet for a uniformlook.
<p>This paragraph will not be
indented.
 simplifies Webpages since only need
</p> to specify structure/contenttags
<h1>The End</h1>
 Note: no <style> tags are used in the
</body> external style sheet
</html>

33
<div> and <span>Tags
• Problem: font properties apply to whole elements, which are often too large
 Solution: a new tag to define an element in the content of a larger element -
<span>
 The default meaning of <span> is to leave the content as it is (i.e. unchanged)

<p> Now is the <span> best time </span> ever! </p>

• Use <span> to apply a document style sheet definition to its content


<style type = "text/css">
.bigred {font-size: 24pt; The <span> tag is similar
font-family: Ariel; color: red} to other HTML tags, they
</style> can be nested and they
... ...
<p> Now is the <span class="bigred"> have id and class attributes
best time </span> ever!
</p>

 Another tag that is useful for style specifications: <div>


Used to create document sections (or divisions) for which style can be
specified e.g., a section of five paragraphs for which you want some
particular style
34
Web rules of thumb (ok, my rules of thumb…)
• HTML and CSS provide lots of neat features,
but just because you can add a feature doesn't mean you should!
don't add features that distract from the content of the page
 use color & fonts sparingly and be careful how elements fit together
e.g, no purple text on a pink background, no weird fonts
e.g. I find bright white text on a black background
difficult to read Consider the needs of visually
impaired users of your website!!
 use images only where appropriate
e.g., bright background images can make text hard to read
e.g., the use of clickable images instead of standard HTML buttons or links can slow access
 don't rely on window or font size for layout
e.g., font size may be adjusted by viewer, window constrained
 don’t be annoying
e.g., lots of pop-up windows, excessive advertising, silly music
 break a large document into several smaller ones or provide a
menu for navigation
 stick to standard features and test as many browsers as possible (and
versions
of the same browser)
 utilize style sheets to make changes easy & ensure consistency
35
Outline
1. Basic HTML

2. Advanced HTML
 HTML5 tags and
attributes
 forms & inputs

36
HTML5 Tags
 HTML5 has lots of flexibility:
• Uppercase tag names
• Quotes are optional for attributes
• Attribute values are optional
• Closing empty elements are optional
 HTML5 tag names are case
insensitive
• convention is to use all lower case
 HTML added support for
multimedia
HTML5 Attributes
 Elements may contain attributes
 used to set various properties of an element.
 Some attributes are defined globally and can be used
on any element, others are defined for specific
elements only.
 All attributes have a name and a value
 Attributes defined in CSS
 Attributes may only be specified within start tags
and must never be used in end tags.
 attributes are case insensitive
 convention is to stick with lower case.
HTML5 New Tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>…</section>
</article>
<aside>...</aside>
<figure>...</figure>
<footer>...</footer>
</body>
</html>

39
HTML5 New Tags
 section − This tag
represents a generic
document or application
section. It can be used
together with h1-h6 to
indicate the document
structure.
 article − This tag
represents an independent
piece of content of a
document, such as a blog
entry or newspaper
article.
 aside − This tag
represents a piece of
content that is only
slightly related to the
rest of the page.

40
HTML5 New Tags
 HTML5 offers new elements for media content:

<audio controls="true">
<source src="audiodemo.ogg" />
<source src=" audiodemo.mp3" />
<source src=" audiodemo.wav" />
Not supported.
</audio>

<video src="video.ogv" controls poster="poster.jpg"


width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>

41
HTML5 New Tags
 <canvas> element:

function draw() {
var ctx =
document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = 'images/backdrop.png';
}

42
HTML5 New Tags
 New input elements:
button month
checkbox number
color password
date radio
datetime range
datetime-local reset
email search
file submit
hidden tel
image text
time
url
week

43

You might also like