CSI315 - Web Technology and Applications: in This Topic We Will Look at

In this topic we will look at:
• Basic principles of markup languages

• HTML5 element structure
• HTML5 document structure
• HTML5 semantic layout elements
CSI315 – WEB TECHNOLOGY AND
• Block level and inline elements
APPLICATIONS
• Headings, paragraphs, lists etc.
• Document validation
Introduction to HTML5
• HTML (HyperText Markup Language)  HTML5 is more flexible than XHTML:

– The language used to write web pages
• Describes the content and structure of information on a • Allows uppercase tag names. i.e. HTML tags are not case
web page sensitive: <P> means the same as <p>.
– Which part of a document is a heading, paragraph, list, table, etc
• Quotes are optional for attributes.
• HTML does not define the presentation (appearance on
screen) • Closing empty elements is optional.
– We use CSS for that
• The <html>, the <body>, and the <head> tag can be
omitted.
3
 New Semantic Elements − These are like <header>,
<footer>, and <section>.
 Forms 2.0 − New attributes have been introduced for

<input> tag.
 Audio & Video − You can embed audio or video on

your web pages without resorting to third-party
plugins.
 Geolocation − Now visitors can choose to share their

physical location with your web application.
<h1>Welcome to HTML</h1> <em> element
Opening tag Content Closing tag

<h1>Welcome to <em>HTML</em></h1>
• HTML documents are made up of a number of elements <h1> element

• An element consists of • Elements can be placed inside other elements
– An opening tag - <h1> • This is known as nesting
– A closing tag - </h1>
• The <em> element is nested inside the <h1> element
– The content - Welcome to HTML
– The word ‘HTML’ is part of the heading and emphasised
• The tags tell the browser the meaning of the content.
• The <em> element specifies emphasis
– Tags: element names contained in pairs of angle brackets
– Browsers often display this as italicised text.
• Most whitespace is insignificant in HTML5 (ignored
or collapsed to a single space)
9 10
<em> element
<h1>Welcome to <em>HTML</h1></em> <hr /> <br />
• Some elements don’t contain any content.

<h1> element
• They define standalone features on a web page.
• There is no closing tag.
• It is important that we nest elements properly
• In this example, the <em> and <h1> elements overlap • Empty elements have a slash before the closing
– It isn’t clear if the <em> element is part of the <h1> element. angle bracket, but HTML5 allows omitting the
slash.
• <hr/> - horizontal rule, <br/> - line break
11 12
<a href="http://www.w3.org/"> <img src="logo.png" alt="Company Logo" />
The World Wide Web Consortium
</a>
• Elements can feature several attributes
• Attributes tell us extra information about elements
• This <img/> element has
• In this example href is an attribute
– A src attribute with a value of logo.png
– It tells us the address of the web page that the text will link to
– An alt attribute with a value of Company Logo
• Attributes always have the same structure.
name="value"
• In HTML5, the attribute values may be placed inside

double, single or no quotation marks.
13 14
<!DOCTYPE html>
<html lang="en"> • The document type declaration specifies the version of
<head> HTML that the page uses
<title>Add a title here</title>
<meta charset=utf-8" /> <!DOCTYPE html>
</head> <html lang="en">
<body> <head>
<p>Add some content here.</p> <title>Add a title here</title>
</body> <meta charset=utf-8" />
</html> </head>
<body>
<p>Add some content here.</p>
</body>
</html>
15 16
• There many different versions of (X)HTML including:
– HTML 4.01 • We will the new HTML5 Standard.
– XHTML 1.0 Strict
– HTML5
– XHTML is eXtensible HyperText Markup Language
– It is HTML re-written to conform to the rules of XML.
– It has stricter syntax than HTML.
– HTML5, current version used.
– Syntax rules not as strict as XHTML
– Has more features that improve HTML capabilities.
17 18
• The root element <html> encloses all other elements • The <head> element provides information about the
document.
• lang attribute
<!DOCTYPE html>
– This attribute specifies the language used to write the <html lang="en">
document. <head>
<meta charset=utf-8" />
– It is important for accessibility applications (e.g. screen </head>
readers) and search engines. …
</html>
<!DOCTYPE html>
<html lang="en">
…
</html>
19 20
• The <title> element specifies the page title • Meta data <meta /> is used to specify information
– Visible in the browser’s title bar/tab. about the document.
– Metadata is not displayed.
– Is the text identifying a page when users add your page to their – In this example, the meta element is used to specify the
list of Favorites or Bookmarks. character encoding and author.
– Used for displaying page in search engine results. <head>

<meta charset=utf-8" />
– Is compulsory, even in HTML5.
<meta name=“author” content=“Rammidi”/>
</head>
21 22
Defines a default address or a

<base> default target for all links on a
• The body element encloses the page contents
page – Everything that it is visible in the browser window i.e. what
you want your customers to see.
Defines the relationship
between a document and an <!DOCTYPE html>
<link>
external resource e.g. a style <html lang="en">
sheet file. <head>
Defines a client-side script e.g.
<script> <meta charset=utf-8" />
a Javascript </head>
Defines style information for a <body>
<style> document e.g. the font color <p>Add some content here.</p>
</body>
for all heading h1
</html>
24
 Blank slide 
Semantic elements are elements with a meaning.
 To the web developer and web browser.
◦ Older HTML versions used code like <div

id="nav"> and <div class="header"> to
indicate navigation links, header of the web
document etc.

HTML5 introduced new semantic layout elements

For example, <header> and <nav> to indicate the
header and navigation links, respectively.
•
<header> - Defines a header
(introductory content) for a document or
a section
•
<nav> - Defines a container for
navigation links, a block of links.
•
<section> - Defines a section in a
document.
•
<article> - Defines an independent self-
contained article e.g. forum posts
•
<aside> - Defines content aside from the
content (like a sidebar), should be
related.
•
<footer> - Defines a footer for a
document or a section e.g. copyright
information, author
•
<main> - Defines main content of a
page, unique content. Only 1 per page.
 <!– This is a comment-->
◦ Same syntax for single line and block comments
 Blank slide • Block-level elements:

– may appear only within a <body> element
– typically are formatted with a line break before and after the
element (thereby creating a stand-alone block of content).
• That is, they take up the width of their containers.
– Formatting: By default, block-level elements begin on new lines.

– Content model: Generally, block-level elements may contain
inline elements and other block-level elements.
– Examples: <h1>, <p>, <ul>, <table>
32
• Inline elements <h2>List of dams in Botswana</h2>
– can appear within block-level or other inline elements.
– They take up the width of their contents.
• There are six different levels of heading
– Heading element h1 is considered the most significant heading
– Content model: Generally, inline elements may contain only data and is rendered in the largest font
and other inline elements.
– Each successive heading element (i.e., h2, h3, etc.) is rendered
in a progressively smaller font
– Formatting: By default, inline elements do not begin with new
line.
– Examples: <td>, <a>, <img> • Headings should appear in the correct order.
– A <h3> shouldn’t appear before a <h1>
33 34
1
2 <!DOCTYPE html>
• Headings shouldn’t be nested inside other headings.

3
4
5 
6 
• Screen readers allow users to navigate by headings.

7 <html>
8 <head>
9 <title>Headings</title>
10 </head>
11
12 <body>
13 <h1>Level 1 Heading</h1>
14 <h2>Level 2 heading</h2>
19 </body>
20 </html>
3
29
35 6
<p> • The <blockquote> element is used to define a
The purpose of this page is to demonstrate a basic quotation.
HTML document.
– Browsers usually indent <blockquote> elements.
</p>
– In HTML, the <blockquote> must contain other block-level
elements.
• The <p> element defines a paragraph. – The cite attribute is used to indicate the source of a quote
• When a browser displays a paragraph, it adds a new line • In this example
http://www.w3.org/WAI/intro/accessibility.php
before the paragraph.
<blockquote cite="http://www.w3.org/WAI/intro/accessibility.php">
• Paragraphs should not be nested inside other <p> It is essential that the Web be accessible in order to
provide equal access and equal opportunity to
paragraphs. people with disabilities.
</p>
</blockquote>
37 38
<p> <font face="verdana" size="6" color="red">

The purpose of this <strong>page</strong> is to Using this tag is a bad idea
demonstrate <em>a basic XHTML document.</em> </font>
</p>
• Inline elements are used to markup small portions of • HTML used to feature many ‘physical style’ tags
text. – Tags such as font specify the colour, typeface and size of text.
• Inline elements must always be nested inside a block • These tags have been ‘deprecated’:
level element. – Will still work in many browsers
– No longer in use
• The <strong> element is used to specify strong
– We shouldn’t use them in our pages! We use CSS.
emphasis.
39 40
 Blank slide • HTML5 provides a number of different ways for us to
structure a list of items.
• Unordered list element ul
– creates a list in which each item in the list begins with a bullet
symbol (called a disc), by default.
– Each entry is an li (list item) element. Most web browsers

render these elements with a line break and a bullet symbol at
the beginning of the line.
– Other list item markers are circle, square and none.
4
1 42
2 <!DOCTYPE html>
4
5
6 
7 
8 <html>
9 <head>
10 <title>Links</title>
11 </head>
12 <body> Creates an unordered list • The ordered list element ol creates a list in which each
13 <h1>Here are my favorite sites</h1>
14 <p><strong>Click on a name to go to that page.</strong></p> item begins with a number, by default.
15
16 
17 <ul> Makes hyperlinked
18  elements into Each entry is an li (list item) element.
19 <li><a href = "http://www.deitel.com">Deitel</a></ li>
individual list items
20 <li><a href = "http://www.w3.org">W3C</a></li>
21 <li><a href = "http://www.yahoo.com">Yahoo!</a></li>
22
23
<li><a href = "http://www.cnn.com">CNN</a></li>
</ul>
Other list item markers are : uppercase letters,
24 </body>
25 </html>
lowercase letters, uppercase roman numbers and
lowercase roman numbers.
43 44
List can be displayed horizontally, e.g. To create a
menu. Use CSS.
• Lists may be nested to represent hierarchical data

relationships
45 46
<dl>  Blank slide

<dt>Triangle</dt>
<dd>A three sided shape.</dd>
<dt>Quadrilateral</dt>
<dd>A four sided shape.</dd>
<dt>Pentagon</dt>
<dd>A five sided shape.</dd>
</dl>
• A definition list can structure content such as

glossaries.
– The <dl> tags define the start and end of the list
– The <dt> element specifies the definition term
– The <dd> element specifies the actual definition
4
47 8
• HTML5 provides special characters or character entity • Most browsers render a horizontal rule, indicated by the
references (in the form &code;) for representing <hr /> tag, as a horizontal line.
characters that cannot be rendered otherwise
• The code can be:
• The hr element also inserts a line break above and
– Word abbreviations
– Numbers
below the horizontal line
• Decimal
• Hexadecimal
• In HTML5, hr element has a semantic meaning, it
• Example: & (ampersand) character represented by: is used to separate content.
– &
– & (decimal)
– & (hexadecimal)
49 50
 Blank slide • There are many specific rules for HTML

– These rules are specified in a Document Type Definition (DTD)
• The XHTML Strict 1.0 DTD can be viewed at:
http://tinyurl.com/5n5xq
– If an HTML document follows all the rules of the DTD, it is

described as being valid.
• We can check if our web pages are valid using validation
services such as the W3C’s validation service
http://validator.w3.org/
5
1 52
• Validating web pages checks we are using web  End
standards.
– Accessibility
– Support standards compliant browsers
– Support a range of devices
5
53 4

CSI315 - Web Technology and Applications: in This Topic We Will Look at

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSI315 - Web Technology and Applications: in This Topic We Will Look at

Uploaded by

Copyright:

Available Formats

In this topic we will look at:

• Basic principles of markup languages

• HTML (HyperText Markup Language)  HTML5 is more flexible than XHTML:

 Forms 2.0 − New attributes have been introduced for

 Audio & Video − You can embed audio or video on

 Geolocation − Now visitors can choose to share their

Opening tag Content Closing tag

• HTML documents are made up of a number of elements <h1> element

<h1>Welcome to <em>HTML</h1></em> <hr /> <br />

• Some elements don’t contain any content.

• In HTML5, the attribute values may be placed inside

– Used for displaying page in search engine results. <head>

Defines a default address or a

◦ Older HTML versions used code like <div

◦ Same syntax for single line and block comments

 Blank slide • Block-level elements:

– Formatting: By default, block-level elements begin on new lines.

• Headings shouldn’t be nested inside other headings.

• Screen readers allow users to navigate by headings.

<p> <font face="verdana" size="6" color="red">

– Each entry is an li (list item) element. Most web browsers

– Other list item markers are circle, square and none.

• Lists may be nested to represent hierarchical data

<dl>  Blank slide

• A definition list can structure content such as

 Blank slide • There are many specific rules for HTML

– If an HTML document follows all the rules of the DTD, it is

You might also like