Scribd
Upload
2 views12 pages

Chapter 1 - Introduction To HTML - 2

The document provides an introduction to HTML, detailing its evolution from HTML 4 to HTML5, including the introduction of new elements and features such as audio, video, and canvas. It also covers new form elements and the use of iframes, as well as the importance of meta tags in HTML documents. The content is presented in a structured format with examples and references for further learning.

Uploaded by

minhkhang.fptu
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
2 views12 pages

Chapter 1 - Introduction To HTML - 2

The document provides an introduction to HTML, detailing its evolution from HTML 4 to HTML5, including the introduction of new elements and features such as audio, video, and canvas. It also covers new form elements and the use of iframes, as well as the importance of meta tags in HTML documents. The content is presented in a structured format with examples and references for further learning.

Uploaded by

minhkhang.fptu
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

Chapter 1

Introduction to HTML (cont)

Lectured by:
Nguyễn Hữu Hiếu
New Doctype

n <!DOCTYPE html>

n Works now in all browsers for “standards mode” start


using it!

n [Link]
THE EVOLUTION OF HTML

HTML 4 XHTML HTML5


1997 2000 Work In Progress

Had some Written in XML Can be used today


presentational
elements Presentational
elements removed
n - Recent versions:
n - HTML 4.0 – 1997
n - HTML 4.01 - 1999 - A cleanup of 4.0
n - XHTML 1.0 - 2000
n - Just 4.01 defined using XML, instead of SGML
n - XHTML 1.1 – 2001
n - Modularized 1.0, and drops frames
n - W3C worked on XHTML 2.0; WHAT worked on a new
version of HTML
n - In 2009, XHTML 2.0 was stopped; W3C took over
development of HTML5
Content Elements
<header>
<nav>
<article>
<aside>
<section>
<footer>

<summary>
<details>
Audio and Video

n Native Audio Element


<audio>
<source src="[Link]" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>

n Native Video Element


<video src="[Link]" controls poster="[Link]"
width="320" height="240">
<a href="[Link]">Download movie</a>
</video>
Audio and Video
n Making your own video controls
<video src="[Link]" id="video"></video>
<script>
var video = [Link]("video");
</script>
<p>
<button onclick="[Link]();">Play</button>
<button onclick="[Link]();">Pause</button>
<button onclick="[Link] = 0;">Rewind</button>
</p>
Canvas - 2d Drawing
function draw() {
var ctx = [Link]('canvas').getContext('2d');
var img = new Image();
[Link] = function(){
[Link](img,0,0);
[Link]();
[Link](30,96);
[Link](70,66);
[Link](103,76);
[Link](170,15);
[Link]();
}
[Link] = 'images/[Link]';
}

[Link]
New Form Elements
n New Input Types
tel, search, url, email, datetime, date, month, week,
time, datetime-local, number, range, color

n New Elements
<datalist>
<meter>
<progress>
<output>
Iframes
<iframe width="450" height="350"
src="[Link]
q=moma+new+york&amp;output=embed"
frameborder="0"
scrolling="0">
</iframe>
META TAGS

<head>
<title>Essay</title>
<meta name="description” content="installation art">
<meta name="keywords” content="essay,installation art">
<meta charset=″utf-8″>
<meta name=“generator” content=“Notepad++”>
<meta name=“author” content=“Brian Iris”>
<meta name=“copyright” content=“Brian Iris 2009”>

<meta name=“expires” content=“13 March 2021”>


<meta http-equiv=“refresh” content=“5; url=[Link]”>

<meta name=“robots” content=“all”>

</head>

You might also like