Scribd
Upload
8 views29 pages

Lec 2-HTML - 1.5m

The document provides an overview of HTML, including its standards, elements, and structure. It covers topics such as hypertext, HTML tags, text formatting, lists, hyperlinks, images, and tables, along with examples of basic HTML code. The document aims to educate readers on creating and understanding HTML5 documents.

Uploaded by

phamnguyenphu14
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
8 views29 pages

Lec 2-HTML - 1.5m

The document provides an overview of HTML, including its standards, elements, and structure. It covers topics such as hypertext, HTML tags, text formatting, lists, hyperlinks, images, and tables, along with examples of basic HTML code. The document aims to educate readers on creating and understanding HTML5 documents.

Uploaded by

phamnguyenphu14
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/ 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
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).


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

6
Structural Elements

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

<html>
<!–- First file---->
<head>
HTML documents : <html> and </html> tags
<title>My first HTML document</title> Comments: <!-- and -->
</head>
<body> HEAD section: <head> and </head> tags
<p> Hello world! </p>
</body> BODY section: <body> and </body>
</html>

view page

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


School of Inform ation and Com m unication Technology

7
<head> and <body> elements

•<head> element
• Title
• Metadata, such as who authored the page, keywords
• Cascading Style sheet information
• 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

8
Text Layout

<html>
<!–- CS443 page02.html 17.09.14 -->
<head>
<title>Text Layout</title>
</head>
• For the most part, layout of the text is
<body>
<p>
left to the browser
This is a paragraph of text<br/>
made up of two lines.
• whitespace is interpreted as a single space
</p> • browser automatically wraps the text to fit
<p> the window size
This is another paragraph with a
&nbsp; GAP &nbsp; between
some of the words.
• Can override some text layout
</p>
• can specify a new paragraph (starts on a
<p> new line, preceded by a blank line) using
&nbsp;&nbsp; This paragraph
is<br/> <p>…</p>
indented on the first line<br/>
but not on subsequent lines. • can cause a line break using the <br/>
</p>
</body> • can force a space character using &nbsp;
</html>

view page

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


School of Inform ation and Com m unication Technology

9
Separating Blocks of Text

<html>
<!–- CS443 page03.html 15/08/06 -->
<head>
<title>Blocks of Text</title>
</head> • Can specify headings for
<body> paragraphs or blocks of text
<h1>Major heading 1</h1>
<p>
Here is some text.
•<h1>…</h1> tags produce a large,
</p> bold heading
<h2>Subheading</h2> •<h2>…</h2> tags produce a
<p>
Here is some subtext.
slightly smaller heading
</p> •. . .
<hr/> •<h6>…</h6> tags produce a tiny
<h1>Major heading 2</h1> heading
<p>
Here is some more text.
</p>
</body>
• Can insert a horizontal rule
</html>
•<hr/> draws line across window
view page

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


School of Inform ation and Com m unication Technology

10
The Basic Web page – A Worked Example

<html>
<!–- CS443 page22.html 17.10.14 -->
<head>
<title> Bill Smiggins Inc. </title>
</head>
<body>
<h1>Bill Smiggins Inc.</h1>
<h2>About our Company...</h2>
<p>This Web site provides clients, customers,
interested parties and our staff with all of
the information that they could want on
our products, services, success and failures.
</p>
<hr/>
<h3> Products </h3>
<p> We are probably the largest
supplier of custom widgets, thingummybobs, and bits
and pieces in North America. </p>
<hr/>
</body>
</html>

view page

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


School of Inform ation and Com m unication Technology

11
Text Appearance

<html>
<!–- CS443 page25.html 15.08.06 -->
<head>
<title>Text Variations and Escape
• can specify styles for fonts
Sequences</title>
</head> •<b>… </b> specify bold
<body>
<h1>Text Variations</h1>
<p>We can use <b>simple</b> tags to •<i>… </i> specify italics
<i>change</i> the appearance of
<strong>text</strong> within •<big>… </big> increase the size
<tt>Web pages</tt>.
Even super<sup>script</sup>
and sub<sub>scripts</sub> are
•<small>… </small> decrease the size
<em>supported</em>.</p>
•<em>…</em> put emphasis
<h1>Text Escape Sequences</h1>
<p>
&amp; &lt; &gt; &quot; &copy;
•<strong>…</strong> put more emphasis
</p>
<h1>Preformatted text</h1> •<sub>… </sub> specify a subscript
<pre>
University of Liverpool
Department of Computer Science
•<sup>… </sup> a superscript
Ashton Building, Ashton Street
Liverpool, L69 3BX, UK
</pre>
</body>
</html>

view page

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


School of Inform ation and Com m unication Technology

12
Lists
<html>
<!–- CS443page07.html 23.09.08 -->
<head> <title>(Sort of) Simple
Lists</title> • There are 3 different types of list
elements
<style type="text/css">
.my_li:before { content: counter(list)
": ";
counter-increment: list; • <ol>…</ol> specifies an ordered
list
}
</style> </head>
<body>
<ul style="list-style-type: square;"> • <li> identifies each list item
<li> ... first list item... </li>
<li> ... second list item... ... </li>
</ul>
<dl> <dt> Dweeb </dt> • <ul>…</ul> specifies unordered
<dd> young excitable person who may
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>
<ol style="list-style-type: none;
• <dl>…</dl> specifies a definition
counter-reset: list 29;" > list
<li class="my_li">Makes first item number
30.</li>
<li class="my_li">Next item continues to
• <dt> identifies each term
number 31.</li>
</ol>
• <dd> identifies its definition
</body> view page
</html>

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


School of Inform ation and Com m unication Technology

13
Hyperlinks

<html>
<!–- CS443page08.html 17.10.14 -- • Perhaps the most important HTML
>
element is the hyperlink, or ANCHOR
<head>
<title>Hyperlinks</title>
</head>
• <a href="URL">…</a>
<body>
•URL is the Web address
<p>
<a href="http://www.liv.ac.uk"> •<a href="URL"
The University of Liverpool</a>
<br/> target="_blank">…</a>
• causes the page to be loaded in a
<a href="page07.html"
target="_blank">
Open page07 in a new window</a>
</p> new Window
</body>

</html>

view page

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


School of Inform ation and Com m unication Technology

14
Hyperlinks (cont.)

<html>
<!–- CS443 page09.html 21.09.12 -->
• for long documents, you can even
<head> have links to other locations in that
<title>Internal Links in a Page</title>
</head> same document
<body> • <xxxx id="ident">…</xxxx>
<p>
[ <a href="#HTML">HTML</a> |
<a href="#HTTP">HTTP</a> |
• ident is a variable for identifying
<a href="#IP">IP</a> |
<a href="#TCP">TCP</a> ]
this location
</p>
<p>
• "xxxx" can be any HTML element
Computer acronyms:
<dl>
<dt id="HTML">HTML</dt>
<dd>HyperText Markup Language • <a href="#ident">…</a>
<dt id="HTTP">HTTP</dt>
<dd>HyperText Transfer Protocol…</dd>
<dt id="IP">IP</dt>
• will then jump to that location
<dd>Internet Protocol…</dd>
<dt id="TCP">TCP</dt>
within the file
<dd>Transfer Control Protocol…</dd>
</dl>
</p>
• <a href="URL#ident">…</a>
• can jump into the middle of
</body>
</html>

another file
view page

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


School of Inform ation and Com m unication Technology

15
Images

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


alt="text" title= "text" />

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

view page

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


School of Inform ation and Com m unication Technology

16
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

17
Tables

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

view page

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


School of Inform ation and Com m unication Technology

18
Layout in a Table

<html>
<!-- CS443 page12.html 17.10.14 --> • Border on tables using the “style” attribute
<head> <table style= "border: 1px
<title>Table Layout</title>
</head> solid;">
<body>
<table style="border: 1px solid;">
<tr style="text-align: center;">
• Horizontal & vertical layout within cells
<td style="border: 1px solid;">
Left<br/>Column</td>
<td style= "text-align:center">
<td style="border: 1px solid; <td style= "vertical-align:
vertical-align: top;">
Right Column</td> bottom">
</tr>
<tr>
<td style="border: 1px solid;">
Some data</td> • Layout to an entire row
<td style="border: 1px solid;">
Some data</td> <tr style="text-align: center">
</tr>
</table> <tr style="vertical-align:
</body>
</html> top">
view page

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


School of Inform ation and Com m unication Technology

19
Table Width

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

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

view page

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


School of Inform ation and Com m unication Technology

20
Other Table Attributes

<html>
<!-- CS443 page14.html 17.10.14 -->
<head>
•Can control the space between cells &
<title>Table Formatting</title>
margins within cells using “padding” attribute
<style type="text/css" media="screen">
table { border: 1px solid; padding: 1px;}
th, td { border: 1px solid; padding:
10px;
text-align: center; } • Can add headings
<th> is similar to <td> but displays
</style>
</head>

<body>
<table>
heading centered in bold
<tr>
<th>HEAD1</th> <th>HEAD2</th>
<th>HEAD3</th>
</tr>
<tr>
• Can have data that spans more than one
<td>one</td> <td>two</td> <td>three</td>
</tr> column
<tr>
<td rowspan="2"> four </td> <td colspan="2">
<td colspan="2"> five </td>
</tr>
<tr>

• Can span more than one row


<td> six </td> <td> seven </td>
</tr>
</table>
</body>
</html>
<td rowspan="2">

view page

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


School of Inform ation and Com m unication Technology

21
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

22
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

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


<html> •specify Character Encoding as follows: <meta
<head>
charset="UTF-8">
<meta charset="utf-8">
<title>…</title> •New tags introduced in HTML5 for better structure
</head> • header − This tag represents the header of a section.
<body> • footer − This tag represents a footer for a section and
<header>...</header>
can contain information about the author, copyright
<nav>...</nav>
<article> information, etc.
<section>…</section> • nav − This tag represents a section of the document
</article> intended for navigation.
<aside>...</aside>
<figure>...</figure> • dialog − This tag can be used to mark up a
<footer>...</footer> conversation.
</body> • figure − This tag can be used to associate a caption
</html> together with some embedded content, such as a
graphic or 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

Header • section − This tag represents a generic


Navigation document or application section. It can
be used together with h1-h6 to
indicate the document structure.
Article
Section
Footer • article − This tag represents an
independent piece of content of a
Article document, such as a blog entry or
Asid
e Footer
newspaper article.
Article • aside − This tag represents a piece of
Footer content that is only 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

25
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

26
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

27
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

28
Exercises

• https://www.w3schools.com/html/
• https://www.w3schools.com/html/exercise.asp

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