Slide 01-2 - Introduction To HTML

Vietnam and Japan Joint ICT HRD Program
Content
1. HTML Basic 2. Structured Document 3. DOM (Document Object Model) 4. Common HTML Elements
ICT 5 Web Development
Lesson 11-2. Introduction to HTML

Nguyen Thi Thu Trang
trangntttrangntt -fit@mail.hut.edu.vn
2
Content
What is HTML? (review)

Hypertext
Markup Language Markup Language for web pages

Markup Language
a
set of annotations to text that describe how something is to be structured with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click or key press sequence
4
Hypertext
text
HTML Example
<html> <head> h d <title>Test Page</title> </head> <body> g / <h1>Test Page</h1> <p>This is a test page.</p> </body> </html>
5
Element and Tag
Element
<h1>Test page</h1>
Opening tag or Start tag Content Closing tag or End tag
Attribute
Most
Hyperlink
A link from a document to another document Anchor element with href attribute
of elements can have attributes An attribute describes a property of an element
<h1 id=title>Test Page</h1>

Attribute name Attribute value
href has a URI, an absolute path or a relative path Example: <a href= href=http://www http://www.yahoo.com/ yahoo com/>Yahoo!</a> >Yahoo!</a>
Yahoo!
Images
Images (2)
Insert image
<img src src= = image.ext> image ext> <img src src= = folder/image.ext> E.g. <p><img <p><img src src= = awards.jpg>
Change the size of the images

<img src= src myImg myImg.jpg jpg width width=x x height height=y>, y> where x, y is in pixel E.g. <p><img src=folder1/award1.jpg width=20 height=30> My awards here
Add a border to the image

set attribute as <img <img src src= = image image.ext ext border=n>, > where n means the thickness of the border in pixels
show the words over the image

<img g src=hut.jpg jpg alt= Hanoi University y of Technology>
10
Content
2. Structured Document
Most
of Documents have a structure

Part, Chapter, Section, Paragraph,
Article
Title,
CV
Name,
Education, Work Experiences, Skills,
Markup
Language is a way to express structured document

Nested Elements
11
12
2.1. Nested Elements

Tree
2.1. Nested Elements (2)
structure expressed by Markup Language Language
Rule of Nested Elements

Opening tags must be matched to closing tags The latest opening tag must be closed before other opening tag
Correct
html <html> <head> head <title>Test</title> title </head> <body> <b d > body <h1>Test</h1> h1 <p>Paragraph</p> </body> p </html>
example
Test
<head><title> <head> <title>Title Title</title> </title></head> </head>

Incorrect
example
Test Paragraph
13
<head><title> <head> <title>Title Title</head> </head></title> </title>
14
2.2. Global structure of HTML Document

<html>
<html> <h d> <head> <title>Test</title> </head> <body> <h1>Test</h1> <p>Paragraph</p> </body> </html>
Content
root of document
<head>
meta information of document

title, ,
meta, , link, ,
<body>
content of document
h1 h1-h6,
p, address,
15 16
3. DOM (Document Object Model)
3. DOM (2)
DOM
API for HTML Documents

defines a standard way for accessing and manipulating HTML documents Object Oriented Supported by various programming languages
in JavaScript
DOM representation
Logical tree structure Hierarchy of node objects root: Document Node: Element, Attr, Text,
E.g. get all of paragraphs in the document and display the first one of them var paragraphs = document.getElementsByTagName(p"); alert(paragraphs[0].nodeName);
17
18
Content
4. Structured HTML Elements

List Table Emphasis
19
20
4.1. List
Unordered
Unordered List
<ul> <li>Apple</li> <li>Banana</li> <li>Grape</li> </ul> Attributes: TYPE
List Ordered List Definintion List
Apple Banana Grape
TYPE is DISC, CIRCLE, or SQUARE
21
22
<UL TYPE="DISC"> <LI>The UL tag <UL TYPE="CIRCLE"> <LI>TYPE <UL TYPE="SQUARE"> <LI>DISC <LI>CIRCLE <LI>SQUARE </UL> <LI>COMPACT </UL> <LI>The LI tag <UL TYPE="CIRCLE"> <LI>TYPE Q <UL TYPE="SQUARE"> <LI>DISC <LI>CIRCLE <LI>SQUARE </UL> <LI>VALUE </UL> </UL>
UL: Custom Bullets
Ordered List
<ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> /
1. 2. 3. One Two Three
23
Attributes: TYPE, START - TYPE: 1, a, A, i, I - START=1 or 2 a or b
24
<OL TYPE="I"> <LI>Headings <LI>Basic Text Sections <LI>Lists <OL TYPE="A"> <LI>Ordered <OL TYPE="1"> <LI>The OL tag <OL TYPE="a"> <LI>TYPE <LI>START <LI>COMPACT </OL> <LI>The LI tag </OL> <LI>Unordered <OL TYPE="1"> <LI>The UL tag <LI>The LI tag </OL> / <LI>Definition <OL TYPE="1"> <LI>The DL tag <LI>The DT tag <LI>The DD tag </OL> </OL> <LI>Miscellaneous </OL>
Nested Ordered Lists
Definition List
<dl> <dt>Apple</dt> <dt>A l </dt> <dd>A fruit or a computer company</dd> <dt>Grape</dt> <dd>A juicy purplepurple - or greengreen -skinned fruit</dd> </dl>
Apple A fruit or a computer company Grape A juicy purple- or green-skinned fruit
25
26
4.2. Table
<table> <caption>Users</caption> Users <tr> Name Email <th>Name</th> <th>Email</th> John Smith smith@example.org </tr> Amy Wine amy@yahoo.com <tr> <td>John Smith</td> <td>smith@example.org</td> </tr> / <tr> <td>Amy Wine</td> <td>amy@yahoo.com</td> </tr> </table>
27
4.2. Table (2)
Adding a border
<table border=10> border 10>
Changing the border color

<table border=10 bordercolor=green> <table border=10 bordercolorlight=green bordercolordark=red>
Setting the width of a cell or table

<table border=0 border 0 width=320> width 320> <table border=0 width=100%> <td width=320> data </td> <td width=30%> data </td>
28
4.2. Table (3)
4.2. Table (3)
Centering a table on a page

<table border=0 width=320 align=center>
Controlling space in and around cells

Cellpadding=m Cellpadding m, where m is the number of pixels desired between the contents and the walls of the cell <table cellpadding=8>
Aligning a cells contents:

<td align=d1 valign=d2>;
d1: d2:
left, right or center top, bottom, middle or baseline C Cellspacing=n, ll i where h ni is th the number b of f pixels desired between each cell <table cellspacing=8>
<td align=left g valign=top> g p
29
30
4.2. Table (4)
4.2. Table (5)
Spanning a cell across columns -- <td colspan=n>
Spanning a cell across rows -- <td rowspan=n>
<table border= 2 bordercolor=green align=left>
<tr> <!- > <td> data 11 </td> <td > data 12 </td> </tr> <tr> <!- > <td> Data 21 </td> <td> d Data 22 </td> / d </tr> <tr> <!- > <td colspan=2> Data 3 last row??? </td> </tr> </table>
<table border= 2 bordercolor=green align=left> <tr> <!- > <td> data 11 </td> <td > data 12 </td> </tr> <tr> <!- > <td rowspan=2> p Row 23 </td> <td> Data 21 </td> </tr> <tr> <!- > <td > Data 31 </td> </tr> </table>
31 32
4.3. Emphasis
<p> Here is an emphasized <em>paragraph</em> </p> <p>
This is a strongly emphasized <strong>text</strong>
4.4. Quote
Short quote: <q>
includes only text IE 8 doesnt support <q> <p>He said, <q>Im lucky</q>.</p>
</p>
Long quote: <blockquote>

includes blockblock-level elements like headings, headings lists, paragraphs or divs inserts white space before and after a blockquote element
33
34
4.4. Quote (2)

This is a test before a blockquote. <blockquote cite=http://en.wikipedia.org/wiki/HTML> <p>Hypertext MarkMark-up Language - HTML, is the predominant markup language for web pages.</p> </blockquote> This is a test after a blockquote.

4.5. Other structuring of text

dfn code samp kbd var cite br abbr accronym pre ins del sub sup

35
36
Question?
37
10

Slide 01-2 - Introduction To HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Slide 01-2 - Introduction To HTML

Загружено:

Авторское право:

Доступные форматы

Vietnam and Japan Joint ICT HRD Program

ICT 5 Web Development

Lesson 11-2. Introduction to HTML

What is HTML? (review)

Markup Language Markup Language for web pages

Element and Tag

of elements can have attributes An attribute describes a property of an element

<h1 id=title>Test Page</h1>

Change the size of the images

Add a border to the image

show the words over the image

of Documents have a structure

Education, Work Experiences, Skills,

Language is a way to express structured document

2.1. Nested Elements

2.1. Nested Elements (2)

structure expressed by Markup Language Language

Rule of Nested Elements

<head><title> <head> <title>Title Title</title> </title></head> </head>

<head><title> <head> <title>Title Title</head> </head></title> </title>

2.2. Global structure of HTML Document

meta information of document

3. DOM (Document Object Model)

API for HTML Documents

4. Structured HTML Elements

List Ordered List Definintion List

Apple Banana Grape

TYPE is DISC, CIRCLE, or SQUARE

UL: Custom Bullets

Attributes: TYPE, START - TYPE: 1, a, A, i, I - START=1 or 2 a or b

Nested Ordered Lists

4.2. Table (2)

Changing the border color

Setting the width of a cell or table

4.2. Table (3)

4.2. Table (3)

Centering a table on a page

Controlling space in and around cells

Aligning a cells contents:

<td align=left g valign=top> g p

4.2. Table (4)

4.2. Table (5)

Spanning a cell across columns -- <td colspan=n>

Spanning a cell across rows -- <td rowspan=n>

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

Long quote: <blockquote>

4.4. Quote (2)

4.5. Other structuring of text

Вам также может понравиться