Scribd
Upload
2 views

Lec 2-HTML

The document provides an overview of HTML and its standards, including the structure of HTML documents, various tags, and elements used for formatting text, creating lists, hyperlinks, images, and tables. It also introduces HTML5, highlighting new tags and features that enhance web content structure and multimedia integration. Key objectives include understanding hypertext, HTML elements, and creating basic HTML files.

Uploaded by

Bảo Kiều
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Lec 2-HTML

The document provides an overview of HTML and its standards, including the structure of HTML documents, various tags, and elements used for formatting text, creating lists, hyperlinks, images, and tables. It also introduces HTML5, highlighting new tags and features that enhance web content structure and multimedia integration. Key objectives include understanding hypertext, HTML elements, and creating basic HTML files.

Uploaded by

Bảo Kiều
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

HTML

Objectives

• Describe hypertext and HTML standards


• Understand HTML elements and markup tags
• Create the basic structure of an HTML file
• Learn HTML5 tags

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

2
Outline

1. Basic HTML
• hypertext
• tags & elements
• text formatting
• lists, hyperlinks, images
• tables

2. HTML5

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

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
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

4
Hypertext & HTML (cont.)

•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, 1995): tried to standardize these & other
features, but late in 1994-96, Netscape & IE added many new,
divergent features
•HTML 3.2 (W3C, 1997): attempted to unify into a single
standard but didn't address newer technologies like Java applets
& streaming video
•HTML 4.0 (W3C, 1997): attempted to map out future directions
for HTML, not just react to vendors
•HTML 5 (W3C, 2014): adds new tags and attributes
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

5
HTML Document Structure

An HTML document has two main structural elements


• HEAD contains setup information for the browser & the Web page
• BODY contains the actual content to be displayed in the Web page
<!DOCTYPE html>
<html>
<head>
<title>
My first HTML document
</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>

Try and view page at: W3School


TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

6
<head> and <body> elements

•<head> element
• Title
• Cascading Style sheet information
• Metadata, such as who authored the page,
keywords
• JavaScript code

•The <body> element


• Paragraphs
• Tables and lists
• Images
• JavaScript code
• PHP code
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

7
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: <tagname>Content</tagname>
• <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

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

8
Text Layout

<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
but the browser
ignores it. <p>: defines a paragraph.
</p> A paragraph always starts on a
<p> new line, and browsers
This paragraph
contains a lot of spaces
automatically add some white
in the source code, space (a margin) before and after
but the browser a paragraph.
ignores it.
</p>
</body>
</html>
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

9
Text Layout

Tag Description
<p> Defines a paragraph
<hr> Defines a thematic change in the content
<br> Inserts a single line break
<pre> Defines pre-formatted text

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

10
Text Layout

•<h1>…</h1>: a large, bold <!DOCTYPE html>


heading <html>
<body>
•<h2>…</h2>: a slightly smaller
heading <h1>Heading 1</h1>
<h2>Heading 2</h2>
•. . . <h3>Heading 3</h3>
<h4>Heading 4</h4>
•<h6>…</h6>: a tiny heading <h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

11
The Basic Web page – A Worked Example

<!DOCTYPE html>
<html>
<head>
<title>SOICT</title>
</head>
<body>
<h1>SOICT</h1>
<h2>Introduction</h2>
<p>The educational philosophy is “Towards excellence in
digital age.”
</p>
<hr/>
<h2> Organizational structure</h2>
<p> 02 Departments;
04 Research Center;
02 Support Training, Scientific Research and
Technology Transfer Center;
01 Administration – office – Academic Affairs </p>
<hr/>
</body>
</html>

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

12
The Basic Web page – A Worked Example

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

13
Text Appearance

<!DOCTYPE html>
<html>
<body> •<b>… </b> specify bold
•<i>… </i> specify italics
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p> •<big>… </big> increase size
<p>This is<sub> subscript</sub>
•<small>… </small> decrease size
and <sup>superscript</sup></p> •<em>…</em> put emphasis
<p><em>This text is italic •<strong>…</strong> put emphasis
too</em></p> •<sub>… </sub> a subscript
</body> •<sup>… </sup> a superscript
</html>

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

14
Lists

<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> • There are 3 different types:
<h2>An Ordered HTML List</h2> • <ol>…</ol>: an ordered list
<ol>
<li>Coffee</li>
• <li> identifies each list item
<li>Tea</li> • <ul>…</ul> unordered list
<li>Milk</li>
</ol> • <li> identifies each list item
• <dl>…</dl> a definition list
</body>
</html> • <dt> identifies each term
• <dd> identifies its definition
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

15
Hyperlinks

<!DOCTYPE html>
<html>
<body>

<h2>Absolute URLs</h2>
<a href="https://www.w3.org/">W3C</a>
<br>
<a
href="https://www.google.com/">Google</a>

<h2>Relative URLs</h2>
<a href="html_images.asp">HTML Images</a>
<br> • <a href="URL">…</a>
<a href="/css/default.asp">CSS
Tutorial</a>

</body>
</html>

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

16
Images

<img src="URL (or filename)" height="n" width="n" alt="text" title=


"text" />

<!DOCTYPE html>
<html>
<body>

<h2>Image Size</h2>

<img src="image.jpg" alt=”Text of Image"


width="500" height="600">

</body>
</html>

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

17
Images (cont.)

§ src - specifies the file name (and can include a URL)


§ width and/or height - dimensions in pixel
§ title - displayed when the mouse is “hovered” over the picture
§ alt - text that is displayed when the image is missing, can’t be
loaded

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

18
Tables

<!DOCTYPE html>
<html>
<body>

<table>
<tr>
<th>MSSV</th>
<th>Lớp</th>
</tr> <table>…</table>: a table element
<tr>
<td>20202020</td> <th>...</th>: a header cell
<td>KHMT 01</td>
</tr> <tr>…</tr>: a row in the table
<tr>
<td>20212021</td> <td>…</td>: a cell
<td>Việt Nhật 02</td>
</tr>
</table>

</body>
</html>
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

19
Outline

1. Basic HTML

2. HTML5

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

20
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

21
HTML5 New Tags

<!DOCTYPE html> •HTML 5 DOCTYPE as follows: <!DOCTYPE html>


<html>
<head> •Character Encoding as follows: <meta charset="UTF-8">
<meta charset="utf-8"> •New tags introduced in HTML5 for better structure
<title>…</title>
</head> • header − header of a section.
<body>
<header>...</header>
• footer − footer for a section
<nav>...</nav> • nav − section of the document intended for
<article>
<section>…</section> navigation.
</article> • dialog − mark up a conversation.
<aside>...</aside>
<figure>...</figure> • figure − associate a caption together with some
<footer>...</footer> embedded content, such as a graphic or video.
</body>
</html>

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

22
HTML5 New Tags

Header
• section − a generic document or
Navigation application section. It can be used
together with h1-h6 to indicate the
Article
Section document structure.
Footer
• article − an independent piece of
Article content of a document, such as a blog
Asid entry or newspaper article.
e Footer

Article • aside − a piece of content that is only


Footer
slightly related to the rest of the page.

Footer

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

23
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>

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

24
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';
}

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

25
HTML5 New Tags

• New input elements:

month
button number
checkbox password
color radio
date range
datetime reset
datetime-local search
email submit
file tel
hidden text
image time
url
week

TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG


School of Inform ation and Com m unication Technology

26
Google page history

1997 1998

1999
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology
2000
27
Google page history

2001 2002

2003
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
2004
School of Inform ation and Com m unication Technology

28
Google page history

2005
2006

2007 2025
TRƯ Ờ NG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Inform ation and Com m unication Technology

29

You might also like