Scribd
Upload
3 views

L1 - HTML

This document serves as an introductory lecture on HTML, covering its definition, structure, and essential components such as tags, attributes, and common elements. It explains the purpose of HTML as a markup language for creating web pages and provides a roadmap for learning about HTML5 features, forms, and the differences between XHTML and HTML. Additionally, it outlines the history of HTML and offers practical tips for writing HTML documents.

Uploaded by

luciawty1019
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

L1 - HTML

This document serves as an introductory lecture on HTML, covering its definition, structure, and essential components such as tags, attributes, and common elements. It explains the purpose of HTML as a markup language for creating web pages and provides a roadmap for learning about HTML5 features, forms, and the differences between XHTML and HTML. Additionally, it outlines the history of HTML and offers practical tips for writing HTML documents.

Uploaded by

luciawty1019
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 80

Lecture 1: roadmap

• 1.1 Introduction
• 1.2 HTML tags
• 1.3 HTML attributes
• 1.4 Common tags
• 1.5 Forms
• 1.6 New features in HTML 5
• 1.7 XHTML v.s. HTML
• 1.8 HTML DOM
• 1.9 Practices

1
1.1 Introduction

2
What is HTML?

 HTML stands for Hyper Text Markup


Language
 HTML is a language for creating web pages
 HTML is not a real programming language.
 It is a markup language.
 A markup language is a set of markup tags.
 The markup tags describe how text should
be displayed.
3
TIP: Markup language
 Markup languages are designed for the processing,
definition and presentation of text.
 The language specifies code for formatting, both the layout
and style, within a text file.
 The code used to specify the formatting are called tags.
 Examples:
 HTML, XHTML
 XML
 Tex
 SVG (Scalable Vector Graphics)

4
A Simple HTML Document

HTML Tags
 The <!DOCTYPE html> declaration defines
<!DOCTYPE html> this document to be HTML5
<html>  The <html> element is the root element
<head> of an HTML page
<title>Page Title</title>  The <head> element contains meta
</head> information about the document
<body>  The <title> element specifies a title for
<h1>My First Heading</h1> the document
<p>My first paragraph.</p>  The <body> element contains the visible
<p>This is another page content
paragraph.</p>  The <h1> element defines a large heading
</body>
</html>
 The <p> element defines a paragraph

5
HTML Page Structure
Below is a visualization of an HTML page structure:

Note: Only the content inside the <body> section (the white area
above) is displayed in a browser.
6
Web Browsers

• The purpose of a web browser (Chrome, Edge, Firefox,


Safari) is to read HTML documents and display them.
• The browser does not display the HTML tags, but uses them
to determine how to display the document:

7
HTML Editors
 Write HTML Using Notepad or TextEdit
 Web pages can be created and modified by using
professional HTML editors.
 However, for learning HTML we recommend a simple
text editor like Notepad (PC) or TextEdit (Mac).
 I recommend the following IDEs.

WebStorm Visual Studio Code

8
HTML History
Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 W3C Recommendation: HTML 3.2

1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

9
1.2 HTML Tag

10
HTML Tags
• HTML is comprised of “elements” and “tags”
• HTML tags are keywords surrounded by angle
brackets like <html>.
• HTML tags normally come in pairs like <p> and
</p> .
 XHTML must be come in pairs.
• Tags are nested one inside another: the first tag in
a pair is the start tag, the second tag is the end tag.
Note: The start and end tags are also called the
opening and closing tags.

11
First HTML file

<!DOCTYPE HTML PUBLIC


"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html> Opening tag
<head>
<title>My First HTML Page</title>
</head>
Closing tag
<body>
<p>This is some text...</p>
</body>
</html>

12
HTML Tags
• Do not forget the end tag.
• Some HTML elements will display correctly, even if you
forget the end tag:

<html>
<body>
The example above works in all
<p>This is a paragraph
<p>This is a paragraph
browsers, because the closing
tag is considered optional.
</body>
</html>

Warning: Never rely on this. It might produce unexpected


results and/or errors if you forget the end tag.

13
HTML Tags
• HTML elements with no content are called empty elements.
• <br> is an empty element without a closing tag (the <br> tag
defines a line break):
<p>This is a <br> paragraph with a line
break.</p>

• Empty elements can be “closed” in the opening tag like this:


<br />
• HTML5 does not require empty elements to be closed.
• But if you want stricter validation, or if you need to make
your document readable by XML parsers, you must close all
HTML elements properly. 14
HTML Tags
• HTML tags are not case sensitive: <P> means the
same as <p>.
• The HTML5 standard does not require lowercase
tags.
• but W3C recommends lowercase in HTML,
and demands lowercase for stricter document
types like XHTML.
• By default, we always use lowercase tags.

15
1.3 HTML Attribute

16
HTML - Attributes
• Attributes provide additional information about HTML elements.
• All HTML elements can have attributes
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"

Attribute name

<a href="https://www.w3schools.com">This is a
link</a>

Attribute
value
HTML links are defined with the <a> tag. 17
HTML - Attributes

• HTML images are defined with the <img> tag.


• The filename of the image source is specified in
the src attribute:

<img src="img_girl.jpg">
• HTML images also have width and height attributes, which
specifies the width and height of the image:

<img src="img_girl.jpg" width="500" height="


600">
The width and height are specified in pixels by default; so width="500"
means 500 pixels wide.

18
HTML - Attributes

• The alt attribute specifies an alternative text to be used, if an


image cannot be displayed.
• The value of the alt attribute can be read by screen readers.
This way, someone "listening" to the webpage, e.g. a vision
impaired person, can "hear" the element.

<img src="img_girl.jpg" alt="Girl with a


jacket">
The alt attribute is also useful if the image cannot be
displayed (e.g. if it does not exist):

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_alt_error

19
HTML - Attributes

• The style attribute specifies the style of an HTML tag.


• The style has the following syntax:

<tagname style="property:value
;">
• This example sets the background color for a page to powderblue:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles_background-color

20
HTML - Attributes

• The id attribute specifies a unique id for an HTML element


(the value must be unique within the HTML document).

<h1 id="myHeader">My Header</h1>

• The name attribute specifies a name for the element (the


name could be not unique within the HTML document).

<fieldset name="personalia">
Name: <input type="text"><br>
Email: <input type="text"><br>
</fieldset>

21
HTML - Attributes

• The HTML5 standard does not require lowercase attribute


names.
• W3C recommends lowercase in HTML,
and demands lowercase for stricter document types like
XHTML.
• Double quotes around attribute values are the most common
in HTML, but single quotes can also be used.
• In some situations, when the attribute value itself contains
double quotes, it is necessary to use single quotes:

<p title='John "ShotGun"


Nelson'>
<p title="John 'ShotGun'
Nelson">
22
HTML - Attributes

• Summary
 All HTML elements can have attributes
 The title attribute provides additional "tool-tip"
information
 The href attribute provides address information for links
 The width and height attributes provide size information
for images
 The alt attribute provides text for screen readers
 At W3Schools we always use lowercase attribute names
 At W3Schools we always quote attribute values

23
HTML - Attributes
Below is an alphabetical list of some attributes often used in
HTML, which you will learn more about in this lecture:
Attribute Description
alt Specifies an alternative text for an image, when the image cannot
be displayed
disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool
tip)

https://www.w3schools.com/tags/ref_attributes.asp

24
1.4 Common Tags

25
HTML & Head
 HTML Tag:
 <html> … </html> (Required!)
 Basic tag to identify portion of file that contains HTML
 <html> is an opening tag
 </html> is a closing tag (note the direction of the slash!)
 text between the opening and closing tag is called the “content”

 Head Tag:
 <head> … </head> (Required!)
 placed at the top of document immediately after the <html> tag
 tags information about the document, e.g. author, style, etc.
 contains the required document <title>...</title> tag

26
Meta

 Meta Tag:
 <meta>
 It is used to specify keywords that describe a
document’s contents as well as a short description.
 Two necessary attributes – "name" & "content"
 <meta name="keywords" content="baseball, soccer,
tennis"/>
 <meta name="description" content="Sports
information page"/>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_meta

27
Title & Body
 Title Tag:
 <title> … </title> (Required!)
 included as an element inside the <head>…</head> section
 element of this tag is the title displayed in title bar of the browser
 may also be used as title of page when page is bookmarked
 should be meaningful and uniquely identify the page
 Body Tag:
 <body> … </body> (Required!)
 included as the second element inside the <html>…</html> tags.
 follows the <head>…</head> portion of the document
 contains the information to be displayed in the browser window
 any attributes set on this tag will apply to the entire page

28
Paragraphs & Document Type
 Paragraph tag:
 <p> … </p>
 included as an element inside the <body>…</body>
section
 Surrounds a paragraph of text

 Document Type Tag:


 DOCTYPE (Optional)
 Must be the very first line of your file, before <html>
 NOT an HTML tag; it is an instruction to your web browser
 Tells the browser what version of HTML to expect
 In this course we use only the “strict” HTML version 4.01
type:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN” "http://www.w3.org/TR/html4/strict.dtd">

29
Preformatted Text
 Preformatted text tag:
 <pre></pre>
 the HTML <pre> element defines preformatted text.
 The text inside a <pre> element is displayed in a fixed-width
font (usually Courier), and it preserves both spaces and line
breaks
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_pre

30
Headings

 Heading Tag:
 <h1> … </h1> through <h6> ... </h6>
 used to identify text as a Level 1 (major) to Level 6 (minor) heading
 Code: Output:
<h1>This is first heading</h1> This is first
heading
<h2>This is first heading</h2> This is first
heading
<h3>This is first heading</h3> This is first
heading
<h4>This is first heading</h4> This is first heading
<h5>This is first heading</h5> This is first heading 31
<h6>This is first heading</h6> This is first heading
Headings
 Heading Tag:
 Search engines use the headings to index the structure and
content of your web pages.
 The HTML <head> element is a container for metadata. HTML
metadata is data about the HTML document. Metadata is not
displayed.
 Horizontal Rules:
 The <hr> tag defines a thematic break in an HTML page, and is
most often displayed as a horizontal rule.
 The <hr> element is used to separate content (or define a
change) in an HTML page:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_headings_hr

32
Links

The Anchor Tag OR Hyper Linking Tag
 <a> … </a> (Local link)
 one major attribute – the location of the hyperlink:
 href=”string”
 element is clickable/selectable as a document
hyperlink
 browser attempts to load the page specified by
the href= attribute
 the href= string can be a relative URL on the
same server:
 without the leading http://host/ it is in the same directory
structure:
 e.g. <a href=“page2.html”>Click here to continue</a>
 e.g. <a href=”images/box.jpg”>See the box here.</a>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links 33
Links
 Anchor Tag:
 <a>…</a> (Hyper link)
 The href= string can be an absolute URL on any
server:
 string can be any HTTP URL (web address) you like:
 e.g. <a href=“http://www.gnu.org/philosophy/”>Free Software</a>
 e.g <a href=“http://google.com” target=“_blank”>Google</a>
 The href= string can be an email address:
 string can be an email address preceded by “mailto:”
 e.g. <a href=”mailto:[email protected]”>Ian! D. Allen email</a>
 Attempts to open an email client (specified in the web browser's
options) and places the specified email address in the To: field of a
new email message.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links
34
Links
 Anchor Tag - Bookmarks
 <a>…</a> (Inside link, Bookmark)
• To name/mark a section of a document so that it
can be referred to by name later
• Identified by a name
• <a name=“itemname”>…</a>
• Referred to by a leading # within the same document
• <a href=“#itemname”>…</a>
• Or referred to from a different document
• <a href=“URL#itemname”>…</a>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_bookmark

35
Links
 HTML Links – The target Attribute:
 The target attribute specifies where to open the linked
document. The target attribute can have one of the
following values:
 _blank - Opens the linked document in a new window or tab
 _self - Opens the linked document in the same window/tab as it
was clicked (this is default)
 _parent - Opens the linked document in the parent frame
 _top - Opens the linked document in the full body of the window

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_target

36
Images
 Image Tag:
 <img> (no closing tag needed)
 used to display pictures (.jpeg, .png, .gif) in your web pages
 you must specify the URL for the image source
 the basic attributes of <img> are:
 src=”string” - the absolute or relative location of the image file
 alt=”string” - Alternate Text for people who don't see images
 height=”string” - image height, percent or absolute pixels (optional)
 width=”string” - image width, percent or absolute pixels (optional)
<img src="pic_trulli.jpg" alt="Italian Trulli">
<img src="https://www.w3schools.com/images/
w3schools_green.jpg" alt="W3Schools.com">

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_size 37
Images
 Links – Image as link

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial”>
</a>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_image

38
Image Map
 Image Maps
 The <map> tag defines an image-map. An image-map is an image with
clickable areas.
 The idea behind an image map is that you should be able to perform
different actions depending on where in the image you click.
 To create an image map you need an image, and a map containing some
rules that describe the clickable areas.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer
.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm
">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"
>
</map>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map2
39
Image Map
 Image Maps
• You must define the shape of the area, and you can choose
one of these values:
• rect - defines a rectangular region
• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer
.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm
">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"
>
</map>
40
TIP: Coordinates
• You must define some coordinates to be able to place the clickable area
onto the image.
• The coordinates come in pairs, one for the x-axis and one for the y-axis.
• The coordinates 34, 44 is located 34 pixels from the left margin and 44
pixels from the top:
• The coordinates 270, 350 is located 270 pixels from the left margin and 350
pixels from the top:

41
Picture
 Picture Element
 HTML5 introduced the <picture> element to add more flexibility
when specifying image resources.
 The <picture> element contains a number of <source> elements,
each referring to different image sources. This way the browser
can choose the image that best fits the current view and/or
device.
 Each <source> element have attributes describing when their
image is the most suitable.

<picture>
<source media="(min-width:
650px)" srcset="img_food.jpg">
<source media="(min-width:
465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_picture1
42
Comments
 Comments:
 To comment a section of a document
 <!-- comments -->
 <comment> comments </comment>
 May appear any place in a document

<!-- Do not display this image at the moment


<img border="0" src="pic_trulli.jpg"
alt="Trulli">
-->

43
Text Formatting
 Text Formatting
 HTML uses elements like <b> and <i> for formatting
output, like bold or italic text.
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
https://www.w3schools.com/html/tryit.asp
?filename=tryhtml_formatting_intro <ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text

44
Table
 Table elements
 <table>…</table>
<table>
<tr>
<th>Firstname</
th> • Each table row is defined with
<th>Lastname</ the <tr> tag.
th>
<th>Age</th> • A table header is defined with
</tr> the <th> tag.
<tr>
<td>Jill</td> • By default, table headings are bold
<td>Smith</td> and centered.
<td>50</td>
</tr>
• A table data/cell is defined with
<tr> the <td> tag.
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_intro
45
Table
 Table elements
 To add a caption to a table, use the <caption> tag
 To make a cell span more than one column, use the colspan attribute:

<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</
th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_colspan

46
Table
 Table elements
 To add a caption to a table, use the <caption> tag
 To make a cell span more than one row, use the rowspan attribute:
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_rowspan

47
Table
 Table elements
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup>


element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

https://www.w3schools.com/tags/tag_thead.asp 48
Lists
 Unordered List
 <ul>…</ul>
 An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
 The list items will be marked with bullets (small black
circles) by default:

<ul>
<li>Coffee</
li>
<li>Tea</li>
<li>Milk</li>
</ul>

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered

49
Lists
 Ordered List:
 <ol>…</ol>
 An ordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
 The list items will be marked with numbers by default:
Type Description
<ol> type="1" The list items will be numbered with numbers
<li>Coffee</ (default)
li> type="A" The list items will be numbered with
<li>Tea</li> uppercase letters
<li>Milk</li> type="a" The list items will be numbered with
</ol> lowercase letters
https://www.w3schools.com/html/tryit.asp?file type="I" The list items will be numbered with
name=tryhtml_lists_ordered_numbers
uppercase roman numbers
type="i" The list items will be numbered with
lowercase roman numbers
50
Grouping
 Block-level element
 <div>…</div>
 A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
 The <div> element is often used as a container for other HTML elements.
 The <div> element has no required attributes, but both style and class are
common.
 When used together with CSS, the <div> element can be used to style blocks of
content:
<div style="background-
color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the
most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.</p>
</div>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test
51
Grouping

 Inline element
 <span>…</span>
 The <span> element is often used as a container for some text.
 The <span> element has no required attributes, but
both style and class are common.
 When used together with CSS, the <span> element can be used to
style parts of the text:
<h1>My <span style="color:red">Important</
span> Heading</h1>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_inline_span

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
52
Iframe

 Iframe element
 <iframe src="URL"></iframe>
 An iframe is used to display a web page within a web page.
Use the height and width attributes to specify the size of
the iframe.
<iframe src="demo_iframe.htm" height="200" width="300"></
iframe>
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_height_width_css
 An iframe can be used as the target frame for a link.
The target attribute of the link must refer to
the name attribute of the iframe:
<iframe src="demo_iframe.htm" name="iframe_a"></
iframe>
<p><a href="https://
www.w3schools.com" target="iframe_a">W3Schools.com</
a></p> https://www.w3schools.com/html/tryit.asp?filename=tryhtml_iframe_target 53
HTML – Entities
 Reserved characters in HTML must be replaced with character
entities.
 Characters that are not present on your keyboard can also be
replaced by entities.
Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;


< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;
' single quotation mark &apos; &#39;
(apostrophe)
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

54
HTML – Symbols
 Many mathematical, technical, and currency symbols, are not
present on a normal keyboard. To add such symbols to an
HTML page, you can use an HTML entity name.
 If no entity name exists, you can use an entity number, a
decimal,
Char
or hexadecimal
Number Entity
reference.
Description
∀ &#8704; &forall; FOR ALL
∂ &#8706; &part; PARTIAL DIFFERENTIAL
∃ &#8707; &exist; THERE EXISTS
∅ &#8709; &empty; EMPTY SETS
∇ &#8711; &nabla; NABLA
∈ &#8712; &isin; ELEMENT OF
∉ &#8713; &notin; NOT AN ELEMENT OF
∋ &#8715; &ni; CONTAINS AS MEMBER
∏ &#8719; &prod; N-ARY PRODUCT
∑ &#8721; &sum; N-ARY SUMMATION

UTF-8 Math Terms: https://www.w3schools.com/charsets/ref_utf_math.asp 55


HTML – Emojis
 Emojis look like images, or icons, but they are not.
 They are letters (characters) from the UTF-8
(Unicode) character set: 😄 😍 💗
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_emojis_size

Emoji Value
🗻 &#128507;
🗼 &#128508;
🗽 &#128509;
🗾 &#128510;
🗿 &#128511;
😀 &#128512;
😁 &#128513;
😂 &#128514;
😃 &#128515;
😄 &#128516;
😅 &#128517;

Reference: https://www.w3schools.com/charsets/ref_emoji.asp
56
1.5 HTML Forms

57
What are forms?
• <form> is just a group of HTML tags
• Forms are used to create GUIs on Web pages
• Usually the purpose is to ask the user for information
• The information is then sent back to the server
• A form is an area that can contain form tags
• The syntax is: <form attributes> ...form tags... </form>
• Form elements include: buttons, checkboxes, text fields, radio
buttons, drop-down menus, and so on.
• Other kinds of tags can be mixed in with the form elements
• A form usually contains a Submit button to send the information in
he form elements to the server
• The form’s attributes tell JavaScript how to send the information to
the server (there are two different ways it could be sent)
• Forms can be used for other things, such as a GUI for simple
programs
58
The <form> tag
• The <form attributes> ... </form> tag encloses form elements (and probably
other elements as well)
• The attributes to form tell what to do with the user input
• action=“url” (required)
• Specifies where to send the data when the Submit button is clicked
• method=“get” (default)
• Form data is sent as a URL with ?form_data info appended to the
end
• Can be used only if data is all ASCII and not more than 100
characters
• method="post"
• Form data is sent in the body of the URL request
• Cannot be bookmarked by most browsers
• target="target"
• Tells where to open the page sent as a result of the request
• target= _blank means open in a new window
• target= _top means use the same window
59
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit
The <input> tag
• Most, but not all, form elements use the input tag, with a
type="..." argument to tell which kind of element it is
• type can be text, checkbox, radio, password,
hidden, submit, reset, button, file, or image
• Other common input tag arguments include:
• name: the name of the element
• id: a unique identifier for the element
• value: the “value” of the element; used in different
ways for different values of type
• readonly: the value cannot be changed
• disabled: the user can’t do anything with this element
• Other arguments are defined for the input tag but have
meaning only for certain values of type
60
The <input> tag
• https://www.w3schools.com/html/html_form_input_types.asp

61
1.6 HTML 5

62
New Functions in HTML5

The most interesting new API's in HTML5


are:
• HTML Geolocation (JS)
• HTML Drag and Drop (JS)
• HTML Local Storage （ JS ）
• HTML Application Cache (JS)
• HTML Web Workers (JS)
• HTML SSE (Server Sent Event, JS)

63
New Semantic Elements in HTML 5
Tag Description
<article> Defines an article in a document
<aside> Defines content aside from the page content

The most
<bdi>
interesting new API's in HTML5
Isolates a part of text that might be formatted in a different direction from other text outside it
<details> Defines additional details that the user can view or hide

are:
<dialog>
<figcaption>
Defines a dialog box or window
Defines a caption for a <figure> element
<figure> Defines self-contained content
• HTMLDefines
<footer> Geolocation
a footer for a document or section
<header> Defines a header for a document or section
• HTMLDefines
<main> Drag and
the main content Drop
of a document
<mark> Defines marked/highlighted text

• HTMLDefines
<menuitem>
Local Storage
a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)

•
<nav>
HTML
<progress>
Application Cache
Defines navigation links
Represents the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
•
<rt> HTML Web
Defines Workers
an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
• HTMLDefines
<section> SSE a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break
64
https://www.w3schools.com/html/html5_semantic_elements.asp
New Graphics in HTML 5

Canvas
 <canvas> … </canvas>
 The HTML <canvas> element is used to draw graphics, on the
fly, via JavaScript.
 The <canvas> element is only a container for graphics. You
must use JavaScript to actually draw the graphics.
 Canvas has several methods for drawing paths, boxes, circles,
text, and adding images.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid


#000000;">
</canvas>

https://www.w3schools.com/html/html5_canvas.asp
65
New graphics in HTML 5

SVG
 <svg> … </svg> (Scalable Vector Graphics)
 The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, boxes, circles, text,
and graphic images.

<svg width=“100” height=“100”>


<circle cx=“50” cy=“50” r=“40” stroke=“green” stroke-
width="4" fill="yellow" />
</svg>

https://www.w3schools.com/html/html5_svg.asp

66
New Media Elements in HTML 5

Tag Description
<audio> Defines sound content
<embed> Defines a container for an external (non-HTML) application
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines video or movie

 Before HTML5, media files could only be played in a browser with a


plug-in (like flash).
 The HTML5 media element specifies a standard way to embed audio in
a web page.

67
New Media Elements in HTML 5

Audio
 <audio> … </audio>
 The controls attribute adds audio controls, like play, pause, and
volume.
 The <source> element allows you to specify alternative audio
files which the browser may choose from. The browser will use
the first recognized format.
 The text between the <audio> and </audio> tags will only be
displayed in browsers that do not support the <audio> element.

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio
element.
</audio>

https://www.w3schools.com/html/html5_audio.asp

68
New Media Elements in HTML 5

Video
 <video> … </video>
 The controls attribute adds video controls, like play, pause, and
volume.
 It is a good idea to always include width and height attributes. If
height and width are not set, the page might flicker while the video
loads.
 The <source> element allows you to specify alternative video files
which the browser may choose from. The browser will use the first
recognized format.
 The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video> element.

<video width="320" height="240" controls>


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

https://www.w3schools.com/html/html5_video.asp 69
New Media Elements in HTML 5
Format File Description
MPEG .mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the
.mpeg web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4).

AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and
TV hardware. Plays well on Windows computers, but not in web browsers.

WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras
and TV hardware. Plays well on Windows computers, but not in web browsers.

QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays
well on Apple computers, but not in web browsers. (See MP4)
RealVideo .rm RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still
.ram used for online video and Internet TV, but does not play in web browsers.

Flash .swf Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web
.flv browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
WebM .webm WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by
HTML5.
MPEG-4 .mp4 MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used
or MP4 in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended
by YouTube.

Multimedia Formats
70
Browser Support of HTML 5

Test browser support: https://html5test.com 71


1.7 HTML vs XHTML

72
XHTML

What Is XHTML?
• XHTML stands for eXtensible HyperText Markup Language
• XHTML is almost identical to HTML
• XHTML is stricter than HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers

73
Difference between HTML and XHTML

Many pages on the internet contain "bad" HTML.


This HTML code works fine in most browsers (even if it does not
follow the HTML rules):

<html>
<head>
<title>This is bad
HTML</title> Ambiguity
<body>
<h1>Bad HTML<p> </p> </h1>
<p>This is a paragraph
</body>

74
Difference between HTML and XHTML
Document Structure
• XHTML DOCTYPE is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
XHTML Elements
• XHTML elements must be properly nested
• XHTML elements must always be closed
• XHTML elements must be in lowercase
• XHTML documents must have one root element
XHTML Attributes
• Attribute names must be in lower case
• Attribute values must be quoted
• Attribute minimization is forbidden

XHTML is HTML redesigned as XML! 75


1.7 HTML DOM

76
HTML DOM
 When a web page is loaded, the browser
creates a Document Object Model of the
page.
 The HTML DOM model is constructed as a
tree of Objects:

77
HTML DOM
 The HTML DOM is a standard object model and programming
interface for HTML. It defines:
 The HTML elements as objects
 The properties of all HTML elements
 The methods to access all HTML elements
 The events for all HTML elements
 In other words: The HTML DOM is a standard for how to get,
change, add, or delete HTML elements.

78
1.8 Practice

79
Self-Exercises

 Task 1: download and study the following HTML:


http://www.csszengarden.com/examples/index
 Task 2: Investigate new features of HTML5.
 Task 3: Finish the HTML Exercise:
https://www.w3schools.com/html/exercise.asp

80

You might also like