slide 01-2 - introduction to html

7/29/2019 Slide 01-2 - Introduction to HTML

http://slidepdf.com/reader/full/slide-01-2-introduction-to-html 1/10

1

Vietnam and Japan JointVietnam and Japan Joint

ICT HRD ProgramICT HRD Program

ICT 5 Web DevelopmentICT 5 Web Development

Lesson 1Lesson 1--2. Introduction to HTML2. Introduction to HTML

NguyenNguyen ThiThi ThuThu TrangTrang

[email protected]@mail.hut.edu.vn

ContentContent1.1. HTML BasicHTML Basic

2.2. Structured DocumentStructured Document

3.3. DOM (Document Object Model)DOM (Document Object Model)

4.4. Common HTML ElementsCommon HTML Elements

22

ContentContent

1.1. HTML BasicHTML Basic




33

What is HTML? (review)What is HTML? (review)

Hypertext Markup LanguageHypertext Markup Language

Markup Language for web pagesMarkup Language for web pages

––Markup LanguageMarkup Language

a set of annotations to text that describea set of annotations to text that describehow something is to be structuredhow something is to be structured

––HypertextHypertext

text with references (hyperlinks) to othertext with references (hyperlinks) to othertext that the reader can immediately access,text that the reader can immediately access,usually by a mouse click or key pressusually by a mouse click or key presssequencesequence

44



2

HTML ExampleHTML Example<html><html>

< ea >< ea >

<title>Test Page</title><title>Test Page</title>

</head></head>

<body><body>

<h1>Test Pa e< h1><h1>Test Pa e< h1><p>This is a test page.</p><p>This is a test page.</p>

</body></body>

</html></html>

55

Element and TagElement and Tag

<h1>Test page</h1><h1>Test page</h1>

Element

Opening tag

or Start tag

Closing tag

or End tag

Content

66

AttributeAttribute

Most of elements can have attributesMost of elements can have attributes

An attribute describes a property of An attribute describes a property of an elementan element

<h1 id=“title”>Test Page</h1><h1 id=“title”>Test Page</h1>Attribute nameAttribute name Attribute valueAttribute value

77

HyperlinkHyperlink

A link from a document to anotherA link from a document to another

Anchor element with href attributeAnchor element with href attribute

–– href has a URI, an absolute path or a relativehref has a URI, an absolute path or a relativepathpath

–– Example:Example:

< =“ “> < >< =“ “> < >

. .. .

Yahoo!

88



3

ImagesImages Insert imageInsert image

“ ” “ ” –– = .= .

–– <<imgimg srcsrc= “folder/image.ext”>= “folder/image.ext”>

–– E.g. <p><E.g. <p><imgimg srcsrc= “awards.jpg”>= “awards.jpg”>

Add a border to the imageAdd a border to the image

–– set attribute as <set attribute as <imgimg srcsrc==

“ ” “ ” .. ,,means the thickness of the bordermeans the thickness of the borderin pixelsin pixels

99

Images (2)Images (2) Change the size of the imagesChange the size of the images

“ ” “ ” –– = . = = ,= . = = ,where x, y is in pixelwhere x, y is in pixel

–– E.g. <p><img src=”folder1/award1.jpg” E.g. <p><img src=”folder1/award1.jpg” width=20 height=30> My awards herewidth=20 height=30> My awards here

show the words over the imageshow the words over the image

–– <im src=hut. alt= “Hanoi Universit of <im src=hut. alt= “Hanoi Universit of Technology”>Technology”>

1010

ContentContent





1111

2. Structured Document2. Structured Document

Most of Documents have a structureMost of Documents have a structure

––ArticleArticle

Title, Part, Chapter, Section, Paragraph, …Title, Part, Chapter, Section, Paragraph, …

––CVCVName, Education, Work Experiences,Name, Education, Work Experiences,

Skills, …Skills, …

Markup Language is a way toMarkup Language is a way toexpress structured documentexpress structured document

––Nested ElementsNested Elements

1212



4

2.1. Nested Elements2.1. Nested ElementsTree structure expressed by MarkupTree structure expressed by Markup

anguageanguage<html><html>

<head><head>

<title>Test</title><title>Test</title>

</head></head>

html

head

title “Test”

< o y>< o y>

<h1>Test</h1><h1>Test</h1>

<p>Paragraph</p><p>Paragraph</p>

</body></body>

</html></html>1313

body

p

h1

“Paragraph”

“Test”

2.1. Nested Elements (2)2.1. Nested Elements (2) Rule of Nested ElementsRule of Nested Elements

––

–– The latest opening tag must be closed beforeThe latest opening tag must be closed beforeother opening tagother opening tag

Correct exampleCorrect example

<head><head><title><title>TitleTitle</title></title></head></head>

Incorrect exampleIncorrect example

<head><head><title><title>TitleTitle</head></head></title></title>

1414

2.2. Global structure of HTML Document2.2. Global structure of HTML Document

<html><html> <html><html>

––root of documentroot of document

<head><head>

––meta information of meta information of documentdocument

title, meta, link,…title, meta, link,…

eaea

<title>Test</title><title>Test</title>

</head></head>

<body><body>

<h1>Test</h1><h1>Test</h1>

<p>Paragraph</p><p>Paragraph</p>

<body><body>

––content of documentcontent of document

h1h1--h6, p, address, …h6, p, address, …

1515

</body></body>

</html></html>

ContentContent





1616



6

4.1. List4.1. ListUnordered ListUnordered List

Ordered ListOrdered List

Definintion ListDefinintion List

2121

Unordered ListUnordered List<ul><ul>

<li>Apple</li><li>Apple</li>

<li>Banana</li><li>Banana</li>

<li>Grape</li><li>Grape</li>

</ul></ul>

••AppleApple

••BananaBanana

••GrapeGrape

–– TYPE is DISC, CIRCLE, or SQUARETYPE is DISC, CIRCLE, or SQUARE

2222

UL: Custom BulletsUL: Custom Bullets<UL TYPE="DISC"><UL TYPE="DISC">

<LI>The UL tag<LI>The UL tag

<UL TYPE="CIRCLE"><UL TYPE="CIRCLE">

<LI>TYPE<LI>TYPE

<UL TYPE="SQUARE"><UL TYPE="SQUARE">

<LI>DISC<LI>DISC

<LI>CIRCLE<LI>CIRCLE

<LI>SQUARE<LI>SQUARE

</UL></UL>

<LI>COMPACT<LI>COMPACT

</UL></UL>

<LI>The LI tag<LI>The LI tag

<UL TYPE="CIRCLE"><UL TYPE="CIRCLE">

<LI>TYPE<LI>TYPE

<UL TYPE="SQUARE"><UL TYPE="SQUARE">

<LI>DISC<LI>DISC

<LI>CIRCLE<LI>CIRCLE

<LI>SQUARE<LI>SQUARE

</UL></UL>

<LI>VALUE<LI>VALUE

</UL></UL>

</UL></UL> 2323

Ordered ListOrdered List

<ol><ol>

<li>One</li><li>One</li>

<li>Two</li><li>Two</li><li>Three</li><li>Three</li>

</ol></ol>

1. One

2. Two

3. Three

Attributes: TYPE, STARTAttributes: TYPE, START

-- TYPE: 1, a, A, i, ITYPE: 1, a, A, i, I

-- START=1 or 2 … a or b …START=1 or 2 … a or b …2424



7

Nested Ordered ListsNested Ordered Lists

<OL TYPE="I"><OL TYPE="I">

<LI>Headings<LI>Headings

<LI>Basic Text Sections<LI>Basic Text Sections

<LI>Lists<LI>Lists

<OL TYPE="A"><OL TYPE="A"><LI>Ordered <LI>Ordered

<OL TYPE="1"><OL TYPE="1">

<LI>The OL tag<LI>The OL tag

<OL TYPE="a"><OL TYPE="a">

<LI>TYPE<LI>TYPE

<LI>START<LI>START

<LI>COMPACT<LI>COMPACT

</OL></OL>


</OL></OL>

<LI>Unordered <LI>Unordered


<LI>The UL tag<LI>The UL tag


</OL></OL>

<LI>Definition<LI>Definition


<LI>The DL tag<LI>The DL tag

<LI>The DT tag<LI>The DT tag

<LI>The DD tag<LI>The DD tag

</OL></OL>

</OL></OL>

<LI>Miscellaneous<LI>Miscellaneous

</OL></OL> 2525

Definition ListDefinition List<dl><dl>

< > pp e< >< > pp e< >

<dd>A fruit or a<dd>A fruit or acomputercomputercompany</dd>company</dd>

<dt>Grape</dt><dt>Grape</dt>

Apple

A fruit or a computer company

Grape

A juicy purple- or green-skinned

fruit

purplepurple-- ororgreengreen--skinnedskinnedfruit</dd>fruit</dd>

</dl></dl>2626

4.2. Table4.2. Table

<table><table><caption>Users</caption><caption>Users</caption> Users

<th>Name</th><th>Name</th><th>Email</th><th>Email</th>

</tr></tr><tr><tr>

<td>John Smith</td><td>John Smith</td><td>[email protected]</td><td>[email protected]</td>

</tr></tr>

N a m e E m a il

John Smith [email protected]

Amy Wine [email protected]

<tr><tr><td>Amy Wine</td><td>Amy Wine</td><td>[email protected]</td><td>[email protected]</td>

</tr></tr></table></table>

2727

4.2. Table (2)4.2. Table (2)

Adding a borderAdding a border–– <table border=10><table border=10>

Changing the border colorChanging the border color–– <table border=10 bordercolor=green><table border=10 bordercolor=green>

––<table border=10 bordercolorlight=green<table border=10 bordercolorlight=green

bordercolordark=red> bordercolordark=red>

Setting the width of a cell or tableSetting the width of a cell or table–– <table border=0 width=320><table border=0 width=320>

–– <table border=0 width=100%><table border=0 width=100%>

–– <td width=320> data </td><td width=320> data </td>

–– <td width=30%> data </td><td width=30%> data </td>

2828

8

4.2. Table (3)4.2. Table (3) Centering a table on a pageCentering a table on a page

–– a e or er= w = a gn=cen era e or er= w = a gn=cen er

Aligning a cell’s contents:Aligning a cell’s contents:–– <td align=d1 valign=d2>;<td align=d1 valign=d2>;

d1: left, right or centerd1: left, right or center

d2: top, bottom, middle or baselined2: top, bottom, middle or baseline

––

<td ali n=left vali n=to ><td ali n=left vali n=to >

2929

4.2. Table (3)4.2. Table (3) Controlling space in and around cellsControlling space in and around cells

–– == ,,between the contents and the walls of the cellbetween the contents and the walls of the cell

<table cellpadding=8><table cellpadding=8>

–– Ce spac ng=n, w ere n s t e num er oCe spac ng=n, w ere n s t e num er o

pixels desired between each cellpixels desired between each cell

<table cellspacing=8><table cellspacing=8>

3030

4.2. Table (4)4.2. Table (4)

Spanning a cell across columnsSpanning a cell across columns ---- <td colspan=<td colspan=nn>>

<table border= 2 bordercolor=green align=left><table border= 2 bordercolor=green align=left>

<tr> <!<tr> >

<td> data 11 </td> <td > data 12 </td><td> data 11 </td> <td > data 12 </td>

</tr></tr>

<tr> <!<tr> >

<td> Data 21 </td><td> Data 21 </td>

<td> Data 22 < td><td> Data 22 < td>

</tr></tr>

<tr> <!<tr> >

<td colspan=2> Data 3<td colspan=2> Data 3 –– last row??? </td>last row??? </td>

</tr></tr>

</table></table> 3131

4.2. Table (5)4.2. Table (5)

Spanning a cell across rowsSpanning a cell across rows ---- <td rowspan=<td rowspan=nn>>

<table border= 2 bordercolor=green align=left><table border= 2 bordercolor=green align=left>

<tr> <!<tr> >

<td> data 11 </td> <td > data 12 </td><td> data 11 </td> <td > data 12 </td></tr></tr>

<tr> <!<tr> >

<td rowspan=2> Row 23 </td> <td> Data 21 </td><td rowspan=2> Row 23 </td> <td> Data 21 </td>

</tr></tr>

<tr> <!<tr> >

<td > Data 31 </td><td > Data 31 </td>

</tr></tr>

</table></table>3232



9

4.3. Emphasis4.3. Emphasis<p><p>

</p></p>

<p><p>

This is a strongly emphasized <strong>text</strong>This is a strongly emphasized <strong>text</strong>

</p></p>

3333

4.4. Quote4.4. Quote Short quote:Short quote: < q >< q >

––

–– IE 8 doesn’t supportIE 8 doesn’t support <q><q>

<p>He said, <q>I’m lucky</q>.</p><p>He said, <q>I’m lucky</q>.</p>

Long quote:Long quote: < b l o c k q u o t e >< b l o c k q u o t e >

–– -- ,,lists, paragraphs or div’slists, paragraphs or div’s

–– inserts white space before and after ainserts white space before and after ablockquote elementblockquote element

3434

4.4. Quote (2)4.4. Quote (2)

This is a testThis is a test before before a blockquote.a blockquote.

<blockquote<blockquote

cite=”http://en.wikipedia.org/wiki/HTML”>cite=”http://en.wikipedia.org/wiki/HTML”>

<p>Hypertext Mark<p>Hypertext Mark--up Languageup Language -- HTML, is theHTML, is the

predominant markup language for web pages.</p> predominant markup language for web pages.</p>

</blockquote></blockquote>

This is a testThis is a test afterafter a blockquote.a blockquote.

3535

4.5. Other structuring of text4.5. Other structuring of text

dfndfn abbrabbr

codecode

sampsamp

kbdkbd

varvar

accronymaccronym

prepre

insins

deldel

brbr supsup

3636



10

Question?Question?

3737