03 HTML

Thiết kế & Lập trình Web
HTML 01
Th.S Cao Thái Phương Thanh

caothaiphuongthanh@gmail.com
Nội dung buổi học trước
1. Giới thiệu mạng máy tính
2. Các khái niệm & thuật ngữ
3. Nguyên tắc hoạt động website
4. Hosting service
SGU - Khoa CNTT -Thiết kế & Lập trình web 2

HTML
1. Ví dụ mở đầu
2. Thẻ HTML
3. Các thẻ HTML hiển thị
4. Các thẻ HTML liên kết
5. Thuộc tính stylesheet style
6. Tra cứu HTML từ Internet
7. Các thẻ HTML không nên dùng
Ví dụ mở đầu
 File html: MinhHoa\helloworld.html
<html> <p>
<head> My first paragraph.
<title>My first First line. <br>
title</title> Second line.
</head> </p>
</body>
<body> </html>
<h1>My First
Heading</h1>

Thẻ HTML
 Web page ~ tài liệu HTML (HTML document) : *.html, *.htm
 HTML : Hyper Text Markup Language

 Ngôn ngữ thể hiện trang web
 Tập hợp các thẻ HTML
 Thẻ HTML:
 Thẻ được quy định trong ngoặc nhọn. Vd: <body>
 Thường có một cặp: mở, đóng
<title>My first title</title>
Thẻ mở Nội dung thẻ Thẻ đóng
Thẻ HTML
 Thẻ HTML – HTML Element
 Thẻ mở: Start tag ~ Opening tag
 Thẻ đóng: End tag ~ Closing tag
 Thẻ rỗng: đóng thẻ
 Thẻ lồng: đặc trưng của ngôn ngữ thể hiện (markup language)
<p>
<b>Lớp <i>web</i> DCT108</b>
</p>

Thẻ HTML – Attribute (thuộc tính)
 Hầu hết thẻ HTML có thể có attribute (thuộc tính)
 Attribute cung cấp thêm thông tin cho thẻ
 Được khai báo trong thẻ mở
 Attribute : name = “value” hoặc name = ‘value’
Vd: MinhHoa\attributes.html
<body bgcolor='green'>
<a href="http://www.w3schools.com">
This is a link to w3schools.com</a>

<b title="WebDct108">Ví dụ sử dụng thuộc tính.</b>
Thẻ HTML – Cấu trúc HTML webpage
<html> <p>
<head> My first paragraph.
<title>My
i first
i First
i line.
i <br>
title</title> Second line.
</head> </p>
</body>
<body> </html>
<h1>My First
Heading</h1>

Thẻ HTML
 Tên thẻ, tên attribute không phân biệt chữ hoa, thường
 Khuyên dùng chữ thường
 Web browser : nhận

ậ tài liệu
ệ HTML,, xử lýý các thẻ HTML và
hiển thị thành nội dung trang web.
 Lưu ý: web browser tự động bỏ khoảng trắng
A B
C D<br/>E
Các thẻ HTML hiển thị
 Thẻ định dạng
 Thẻ danh sách
 Thẻ tạo bảng
 Thể hiện kí tự đặc biệt

Các thẻ định dạng
 Thẻ tiêu đề (heading) : h1, h2, … h6
 Thẻ đoạn văn (paragraph) : <p>

 Thẻ xuống hàng <br />
 Thẻ gạch ngang <hr />
MinhHoa\paragraph.html
 Thẻ định dạng chữ:

 In đậm: <b>, <strong>
 In nghiêng`: <i>, <em>
 Lệch chữ: <sup>, <sub>
Vd: 25, H2O
 http://www.w3schools.com/html/html_formatting.asp

 Thẻ danh sách:

 Danh sách không có thứ tự
 Danh sách có thứ tự
 Danh sách tự định nghĩa
 Danh sách lồng
 Sử dụng các thuộc tính
 http://www.w3schools.com/html/html_lists.asp

 Thẻ tạo bảng:
 Xác định bảng
 Xác định
ị dòng
g
+ Xác định ô trong dòng

<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
 Nội dung được thể hiện theo ô (thẻ <td>)
 Có ý nghĩa lớn trong định dạng thể hiện trang web
Vd: MinhHoa\table.html

 Các dạng sử dụng khác nhau
Vd: http://www.w3schools.com/html/html_tables.asp
http://www w3schools com/html/html tables asp
 Tiêu đề dòng, cột
 Trộn dòng / cột
 Lồng thẻ HTML trong ô

Thể hiện kí tự đặc biệt
 Kí tự đặc biệt: trùng với kí tự khóa của HTML
 web browser không thể phân biệt
Vd:
 Cần hiển thị <sgu> Kí tự < và >
 Cần cách 3 khoảng trắng Kí tự khoảng trắng
 Cần hiển thị kí hiệu : £ , ® Kí tự đặc biệt
 MinhHoa\special.html
 http://www.utexas.edu/learn/html/spchar.html
Chú thích trong file HTML
Cú pháp : 
Vd: MinhHoa\comment.html

Tra cứu thẻ HTML
Live demo:
 http://www.w3schools.com/html/
 http://www.tizag.com/htmlT/reference/htmlreference
.php
 http://www.netstrider.com/tutorials/HTMLRef/comm
ands/index.html
 www.google.com
 Ít nhất phải nắm rõ các thẻ được đề cập trong slide.
Thực hành HTML 01

 Tra cứu thẻ online
 Sử dụng chức năng Try It Yourself :
http://www.w3schools.com/html/tryit.asp?filename=tryhtml
_basic
basic  try body
 http://www.maths.surrey.ac.uk/explore/nigelspages/htmltr
y.htm  try whole page
 Real time : http://htmledit.squarefree.com/ !!!
 Sử dụng
ụ gpphần mềm Notepad:p copy
py & p
paste & soạn
ạ
thảo một số file *.html  Xem trên Firefox

03 HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

03 HTML

Uploaded by

Copyright:

Available Formats

Thiết kế & Lập trình Web

Th.S Cao Thái Phương Thanh

Nội dung buổi học trước

1. Giới thiệu mạng máy tính

2. Các khái niệm & thuật ngữ

3. Nguyên tắc hoạt động website

SGU - Khoa CNTT -Thiết kế & Lập trình web 2

3. Các thẻ HTML hiển thị

4. Các thẻ HTML liên kết

5. Thuộc tính stylesheet style

6. Tra cứu HTML từ Internet

7. Các thẻ HTML không nên dùng

SGU - Khoa CNTT -Thiết kế & Lập trình web 3

SGU - Khoa CNTT -Thiết kế & Lập trình web 4

 HTML : Hyper Text Markup Language

 Tập hợp các thẻ HTML

 Thường có một cặp: mở, đóng

<title>My first title</title>

Thẻ mở Nội dung thẻ Thẻ đóng

SGU - Khoa CNTT -Thiết kế & Lập trình web 5

 Thẻ mở: Start tag ~ Opening tag

 Thẻ đóng: End tag ~ Closing tag

 Thẻ rỗng: đóng thẻ

<b>Lớp <i>web</i> DCT108</b>

SGU - Khoa CNTT -Thiết kế & Lập trình web 6

 Attribute cung cấp thêm thông tin cho thẻ

 Được khai báo trong thẻ mở

 Attribute : name = “value” hoặc name = ‘value’

This is a link to w3schools.com</a>

SGU - Khoa CNTT -Thiết kế & Lập trình web 7

Thẻ HTML – Cấu trúc HTML webpage

SGU - Khoa CNTT -Thiết kế & Lập trình web 8

 Khuyên dùng chữ thường

 Web browser : nhận

Các thẻ HTML hiển thị

 Thẻ định dạng

 Thẻ danh sách

 Thẻ tạo bảng

 Thể hiện kí tự đặc biệt

SGU - Khoa CNTT -Thiết kế & Lập trình web 10

 Thẻ tiêu đề (heading) : h1, h2, … h6

 Thẻ đoạn văn (paragraph) : <p>

 Thẻ gạch ngang <hr />

SGU - Khoa CNTT -Thiết kế & Lập trình web 11

Các thẻ định dạng

 Thẻ định dạng chữ:

 In nghiêng`: <i>, <em>

 Lệch chữ: <sup>, <sub>

Vd: 25, H2O

SGU - Khoa CNTT -Thiết kế & Lập trình web 12

 Thẻ danh sách:

 Danh sách có thứ tự

 Danh sách tự định nghĩa

 Danh sách lồng

 Sử dụng các thuộc tính

SGU - Khoa CNTT -Thiết kế & Lập trình web 13

Các thẻ định dạng

+ Xác định ô trong dòng

 Có ý nghĩa lớn trong định dạng thể hiện trang web

SGU - Khoa CNTT -Thiết kế & Lập trình web 15

Các thẻ định dạng

 Trộn dòng / cột

 Lồng thẻ HTML trong ô

SGU - Khoa CNTT -Thiết kế & Lập trình web 16