Scribd
Upload
4 views

Handout 02. HTML

Uploaded by

Ha Cao Thu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Handout 02. HTML

Uploaded by

Ha Cao Thu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

9/20/2024

HTML

Objectives

❑ Describe hypertext and HTML standards


❑ Understand HTML elements and markup tags

❑ Create the basic structure of an HTML file


❑ Insert an HTML comment

❑ Work with block-level elements

❑ Create lists, tables, hyperlinks and insert images

❑ Learn HTML5 tags

❑ Work with forms and inputs

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


School of Information and Communication Technology

1
9/20/2024

Outline

1. Basic HTML
❖ hypertext
❖ tags & elements
❖ text formatting
❖ lists, hyperlinks, images
❖ tables, frames
2. HTML5

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


School of Information and Communication Technology

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 Information and Communication Technology

2
9/20/2024

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 Information and Communication Technology

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 Information and Communication Technology

3
9/20/2024

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----> HTML documents : <html> and </html> tags
<head>
<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

view page

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


School of Information and Communication Technology

<head> and <body> elements

• <head> element
• Title
• Cascading Style sheet information
• “Meta” data, 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 Information and Communication Technology

4
9/20/2024

Text Layout

❑ For the most part, layout of the text is left to the <html>
<!–- CS443 page02.html 17.09.14 -->
browser <head>
<title>Text Layout</title>
❖ whitespace is interpreted as a single space </head>

❖ browser automatically wraps the text to fit the window <body>


<p>
size This is a paragraph of text<br/>
made up of two lines.
❑ Can override some text layout </p>

❖ can specify a new paragraph (starts on a new line, <p>


preceded by a blank line) using <p>…</p> This is another paragraph with a
&nbsp; GAP &nbsp; between
❖ can cause a line break using the <br/>
some of the words.
</p>
❖ can force a space character using &nbsp;
<p>
&nbsp;&nbsp; This paragraph is<br/>
indented on the first line<br/>
but not on subsequent lines.
</p>
</body>

</html>
view page

view page
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

Separating Blocks of Text


<html>
❑ Can specify headings for paragraphs or blocks of text <!–- CS443 page03.html 15/08/06 -->
<head>
❖<h1>…</h1> tags produce a large, bold heading <title>Blocks of Text</title>
</head>
❖<h2>…</h2> tags produce a slightly smaller heading
<body>
❖. . . <h1>Major heading 1</h1>
❖<h6>…</h6> tags produce a tiny heading
<p>
Here is some text.
</p>

❑ Can insert a horizontal rule <h2>Subheading</h2>


<p>
Here is some subtext.
❖<hr/> draws line across window </p>

<hr/>

<h1>Major heading 2</h1>


<p>
Here is some more text.
</p>
</body>

</html>
view page

view page
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

10

10

5
9/20/2024

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

view page

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


School of Information and Communication Technology

11

11

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

</html> view page


TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

12

12

6
9/20/2024

Lists
<html>
❑ There are 3 different types of list elements <!–- CS443page07.html 23.09.08 -->
❖ <ol>…</ol> specifies an ordered list
<head> <title>(Sort of) Simple Lists</title>
<style type="text/css">
➢ <li> identifies each list item .my_li:before { content: counter(list) ": ";
counter-increment: list; }
❖ <ul>…</ul> specifies unordered list (using a bullet </style> </head>
for each) <body>

➢ <li> identifies each list item <ul style="list-style-type: square;">


<li> ... first list item... </li>
❖ <dl>…</dl> specifies a definition list <li> ... second list item... ... </li>
➢ <dt> identifies each term </ul>
<dl> <dt> Dweeb </dt>
➢ <dd> identifies its definition <dd> young excitable person who may
mature into a <em>Nerd</em> </dd>
<dt> Hacker </dt>
<dd> a clever programmer </dd>
<dt> Nerd </dt> <dd> technically bright but
socially inept person </dd>
</dl>
<ol style="list-style-type: none;
counter-reset: list 29;" >
<li class="my_li">Makes first item number 30.</li>
<li class="my_li">Next item continues to number
31.</li>
</ol>

</body> view page

</html> view page


TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

13

13

Hyperlinks

❑Perhaps the most important HTML element is the <html>


hyperlink, or ANCHOR <!–- CS443page08.html 17.10.14 -->

<head>
❑ <a href="URL">…</a> <title>Hyperlinks</title>
➢ where URL is the Web address of the page </head>
➢ if the page is accessed over the Web, must start with http://
<body>
➢ if not there, the browser will assume it is the name of a local file
<p>
<a href="http://www.liv.ac.uk">
The University of Liverpool</a>
❖ <a href="URL" target="_blank">…</a> <br/>
➢ causes the page to be loaded in a new Window <a href="page07.html"
target="_blank">
Open page07 in a new window</a>
</p>
</body>

</html>
view page

view page

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


School of Information and Communication Technology

14

14

7
9/20/2024

Hyperlinks (cont.)
<html>
❑ for long documents, you can even have links to <!–- CS443 page09.html 21.09.12 -->
other locations in that same document <head>
<title>Internal Links in a Page</title>
❖ <xxxx id="ident">…</xxxx> </head>

➢ ident is a variable for identifying this location <body>


➢ "xxxx" can be any HTML element
<p>
[ <a href="#HTML">HTML</a> |
<a href="#HTTP">HTTP</a> |
<a href="#IP">IP</a> |
❖ <a href="#ident">…</a> <a href="#TCP">TCP</a> ]
➢ will then jump to that location within the file </p>
<p>
Computer acronyms:
<dl>
❖ <a href="URL#ident">…</a> <dt id="HTML">HTML</dt>
➢ can jump into the middle of another file just as <dd>HyperText Markup Language
<dt id="HTTP">HTTP</dt>
easily <dd>HyperText Transfer Protocol…</dd>
<dt id="IP">IP</dt>
<dd>Internet Protocol…</dd>
<dt id="TCP">TCP</dt>
<dd>Transfer Control Protocol…</dd>
</dl>
</p>

</body> view page

</html> view page


TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

15

15

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

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

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


School of Information and Communication Technology

16

16

8
9/20/2024

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 Information and Communication Technology

17

17

Tables

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

view page

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


School of Information and Communication Technology

18

18

9
9/20/2024

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

</html> view page

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


School of Information and Communication Technology

19

19

Table Width

❑ by default, the table is sized to fit the data <html>


<!-- CS443 page13.html 17.10.14 -->
❑ can override & specify the width of a table relative <head>
<title>Table Width</title>
to the page </head>
For example
<table style="width: 60%"> <body>
<table style="width: 100%;">
<tr>
<td>left-most </td>
<td style="text-align: right;">
right-most</td>
</tr>
</table>
</body>
</html>
view page

view page

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


School of Information and Communication Technology

20

20

10
9/20/2024

Other Table Attributes


<html>
❖Can control the space between cells & margins within cells using <!-- CS443 page14.html 17.10.14 -->
<head>
“padding” attribute <title>Table Formatting</title>

<style type="text/css" media="screen">


table { border: 1px solid; padding: 1px;}
❖Can add headings th, td { border: 1px solid; padding: 10px;
<th> is similar to <td> but displays heading centered in bold </style>
text-align: center; }

</head>

❖Can have data that spans more than one column <body>
<table>
<td colspan="2"> <tr>
<th>HEAD1</th> <th>HEAD2</th>
<th>HEAD3</th>
</tr>
❖Can span more than one row <tr>
<td>one</td> <td>two</td> <td>three</td>
<td rowspan="2"> </tr>
<tr>
<td rowspan="2"> four </td>
<td colspan="2"> five </td>
</tr>
<tr>
<td> six </td> <td> seven </td>
</tr>
</table>
</body> view page

</html> view page


TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

21

21

Content vs. Presentation

• Most HTML tags define content type, independent of presentation.


❖ exceptions? (e.g. <b> …… </b> for bold text and <i> ….. </i> for italicized text)
• Style sheets associate presentation formats with HTML elements.
❖ CSS1: developed in 1996
❖ CSS2: released in 1998
❖ CSS3: introduced in 1999, lastest version (as of 2022)
• The trend has been towards an increasing separation of the content of webpages from the
presentation of them.
• Style sheets allow us to maintain this separation, which allows for easier maintenance of
webpages, and for a consistent look across a collection of webpages.

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


School of Information and Communication Technology

22

22

11
9/20/2024

Content vs. Presentation (cont.)

❑ Style sheets can be used to specify how tables should be rendered, how lists should be
presented, what colors should be used on the webpage, what fonts should be used and how
big/small they are, etc.
❑ HTML style sheets are known as Cascading Style Sheets, since can be defined at three different
levels
1. inline style sheets apply to the content of a single HTML element
2. document style sheets apply to the whole BODY of a document
3. external style sheets can be linked and applied to numerous documents, might also specify how
things should be presented on screen or in print lower-level style sheets can override higher-level
style sheets
❑ User-defined style sheets can also be used to override the specifications of the webpage
designer. These might be used, say, to make text larger (e.g. for visually-impaired users).

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


School of Information and Communication Technology

23

23

Inline Style Sheets


<html>
❑ Using the style attribute, you can specify presentation style for a single <!–- CS443 page17.html 17.10.14 -->
HTML element
❑ within tag, list sequence of property:value pairs separated by semi-colons <head>
<title>Inline Style Sheets</title>
font-family:Courier,monospace </head>
font-style:italic
<body>
font-weight:bold <p style="font-family:Arial,sans-
font-size:12pt font-size:large font-size:larger serif;
text-align:right">This is a
right-justified paragraph in a sans
color:red color:#000080
serif
background-color:white font (preferably Arial), with some
<span style="color:green">green
text-decoration:underline text</span>.
text-decoration:none </p>
text-align:left text-align:center
<p>And <a style="color:red;
text-align:right text-align:justify text-decoration:none;
vertical-align:top vertical-align:middle font-size:larger;"
vertical-align:bottom href="page01.html">here</a>
is a formatted link.
</p>
text-indent:5em text-indent:0.2in </body> view page

</html> view page


TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

24

24

12
9/20/2024

Inline Style Sheets (cont.)


<html>
<!–- CS443 page18.html 17.09.09 --> •more style properties & values
<head>
<title>Inline Style Sheets</title> margin-left:0.1in margin-right:5%
</head>
margin:3em
<body> padding-top:0.1in padding-bottom:5%
<p>Here is an image
<img src="VictoriaBldg.jpeg" padding:3em
alt="image of Victoria Building"
style="margin-left:0.3in;
margin-right:0.3in; border-width:thin border-width:thick
vertical-align:middle; border-width:5
border-style:double;
border-color:blue" /> border-color:red
embedded in text. border-style:dashed border-style:dotted
</p>
border-style:double border-style:none
<ol style="list-style-type:upper-alpha">
<li> one thing</li>
<li> or another</li> whitespace:pre
<ul style="list-style-type:square;
whitespace:pre">
<li> with this</li> list-style-type:square
<li> or that</li>
</ul> list-style-type:decimal
</ol> list-style-type:lower-alpha
</body>
</html> list-style-type:upper-roman
view page

view page 25

25

Inline Style Sheets (cont.)


<html>
❑ style sheets can be applied to tables for <!–- CS443 page19.html 17.10.14 -->

interesting effects <head>


<title> Inline Style Sheets </title>
</head>

<body>
<table style="font-family:Arial,sans-serif">
<caption style="color:red;
font-style:italic;
text-decoration:underline">
Student data. </caption>
<tr style="background-color:red">
<th> name </th> <th> age </th>
</tr>
<tr>
<td> Chris Smith </td> <td> 19 </td>
</tr>
<tr>
<td> Pat Jones </td> <td> 20 </td>
</tr>
<tr>
<td> Doogie Howser </td> <td> 9 </td>
</tr>
</table>
</body> view page

</html> view page

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


School of Information and Communication Technology

26

26

13
9/20/2024

Document Style Sheets

• Inline style sheets apply to individual elements in the page.


❖ using inline style directives can lead to inconsistencies, as similar elements are formatted
differently
➢ e.g., we might like for all <h1> elements to be centered
❖ inline definitions mix content & presentation
➔ violates the general philosophy of HTML

• As a general rule, inline style sheet directives should be used as sparingly as


posible
• Alternatively, document style sheets allow for a cleaner separation of content
and presentation.
❖ style definitions are placed in the <head> of the page (within STYLE tags)
❖ can apply to all elements, or a subclass of elements, throughout the page sible.
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

27

27

Document Style Sheets

❑document style sheets ensure that similar <html>


<!–- CS443 page20.html 17.10.14 -->

elements are formatted similarly <head>


<title>Document Style Sheets</title>
❑can even define subclasses of elements and <style type="text/css">
h1 {color:blue;
specify formatting text-align:center}
p.indented {text-indent:0.2in}
p.indented defines subclass of paragraphs </style>
</head>
• inherits all defaults of <p> <body>
• adds new features <h1> Centered Title </h1>

to specify this newly defined class, place <p class="indented">This paragraph


will have the first line indented, but
class="ID" attribute in tag subsequent lines will be flush. </p>

<p>This paragraph will not be


indented.

❑ note how "clean" the <body> element is </p>

<h1> The End </h1>

</body> view page

</html> view page

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


School of Information and Communication Technology

28

28

14
9/20/2024

Document Style Sheets (cont.)

❑document style sheets are especially useful in <html>


formatting tables <!–- CS443 page21.html 17.10.14 -->

<head>
❑effectively separates content from presentation <title> Inline Style Sheets </title>
<style type="text/css">
❑ what if you wanted to right-justify the column of table {font-family:Arial,sans-serif}
caption {color:red;
numbers? font-style:italic;
❑ what if you changed your mind?
text-decoration:underline}
th {background-color:red}
</style>
</head>

<body>
<table>
<caption> Student data. </caption>
<tr><th> name </th> <th> age</th></tr>
<tr><td> Chris Smith </td> <td> 19 </td></tr>
<tr><td> Pat Jones </td> <td> 20 </td></tr>
<tr><td> Doogie Howser </td> <td> 9 </td></tr>
</table>
</body>
</html>
view page

view page

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


School of Information and Communication Technology

29

29

Pseudo-Elements
<html>
❑ pseudo-elements are used to address sub-parts of elements <!–- CS443 page23.html 17.10.14 -->

❖ can specify appearance of link in various states <head>


<title>Title for Page</title>
:visited :active :hover <style type="text/css">
a {color : red;
❖ can specify format of first line in page or paragraph text-decoration : none;
font-size : larger}
:first-line a:visited {color : black}
❖ can specify format of first letter in page or paragraph a:active {color : orange}
a:hover {color : blue}
:first-letter p:first-letter {font-size : large;
color : white;
background-color : darkblue}
</style>
❑ Danger : changing the look of familiar elements is confusing </head>

<body>
<p> Welcome to my Web page. I am so
happy you are here.
</p>
<p> Be sure to visit
<a href="http://www.cnn.com">CNN</a>
for late-breaking news.
</p>
</body>
</html> view page

view page
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

30

30

15
9/20/2024

External Style Sheets

• modularity is key to the development and reuse of software


❖ design/implement/test useful routines and classes
❖ package and make available for reuse
❖ saves in development cost & time
❖ central libraries make it possible to make a single change and propagate the
changes

• external style sheets place the style definitions in separate files


❖ multiple pages can link to the same style sheet, consistent look across a site
❖ possible to make a single change and propagate automatically
❖ represents the ultimate in content/representation separation
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

31

31

Modularity & Style Sheets


<html>
❑ Ideally, the developer(s) of a Web site would place all <!–- CS443 page26.html 17.10.14 -->
formatting options in an external style sheet. <head>
❑All Web pages link to that same style sheet for a uniform look. <title>Title for Page</title>
<link rel="stylesheet"
❖ simplifies Web pages since only need to specify
type="text/css"
structure/content tags href="myStyle.css"
❖ Note: no <style> tags are used in the external style sheet
title="myStyle“ />
</head>

<body>
<h1>Centered Title</h1>

<p class="indented">This paragraph


will have the first line indented, but
subsequent lines will be flush.</p>

<p>This paragraph will not be


indented.
</p>

/* myStyle.css CS443 02.09.05 */ <h1>The End</h1>

h1 {color : blue; text-align : center} </body>


p.indented {text-indent:0.2in}
view page

</html> view page


TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

32

32

16
9/20/2024

<div> and <span> Tags

❑ Problem: font properties apply to whole elements, which are often too large
❖ Solution: a new tag to define an element in the content of a larger element - <span>
❖ <span> is an inline element used to mark up a part of text

<p> Now is the <span> best time </span> ever! </p>

❑ Use <span> to apply a document <style type = "text/css">


style sheet definition to its content .bigred {font-size: 24pt;
font-family: Ariel; color: red}
❖ The <span> tag is similar to other HTML tags, </style>
they can be nested and they have id and ... ...
<p> Now is the <span class="bigred">
class attributes best time </span> ever!
</p>
view page

view page

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


School of Information and Communication Technology

33

33

Outline

1. Basic HTML

2. HTML5

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


School of Information and Communication Technology

34

34

17
9/20/2024

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


School of Information and Communication Technology

35

35

HTML5 New Tags

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


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

36

36

18
9/20/2024

HTML5 New Tags

❑ section − This tag represents a generic document or


application section. It can be used together with h1-h6 to Header
indicate the document structure.
Navigation
❑ article − This tag represents an independent piece of
content of a document, such as a blog entry or newspaper Section
article. Article
❑ aside − This tag represents a piece of content that is only Footer

slightly related to the rest of the page. Article


Aside Footer

Article
Footer

Footer
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
School of Information and Communication Technology

37

37

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 Information and Communication Technology

38

38

19
9/20/2024

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 Information and Communication Technology

39

39

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 Information and Communication Technology

40

40

20

You might also like