Ngôn ngữ lập trình HTML

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.44 MB, 68 trang )

Ngôn ngữ HTML
Giảng viên: Hoàng Văn Hiệp
Bộ môn: Kỹ Thuật máy tính
Viện CNTT-TT – ĐH Bách Khoa Hà Nội
Email:
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

1
/>

NGÔN NGỮ HTML

 HTML

là gì?
 Các thẻ trong HTML.

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
2

HTML LÀ GÌ?
Text Markup Language – Ngôn ngữ
đánh dấu siêu văn bản
 Đƣợc sử dụng để tạo nên các trang web
 Trình duyệt đọc file HTML để hiển thị nội
dung

 Là một file văn bản có chứa các thẻ (tag) và
nội dung trang web
 Hyper

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
3

HTML LÀ GÌ?
 Các

thẻ đƣợc sử dụng để định dạng dữ liệu,
quy định cách thức hiển thị nội dung trang
web
 HTML không phân biệt chữ hoa hay chữ
thƣờng
 HTML không báo lỗi cú pháp, nếu sai cú pháp
kết quả hiển thị không đúng.
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
4

HTML LÀ GÌ?
 Một

file HTML phải có phần mở rộng là htm
hoặc html
 File HTML có thể đƣợc tạo bởi bất kỳ chƣơng
trình soạn thảo nào (word, notepad, …)

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
5

CÁC THẺ TRONG HTML
 Đƣợc

sử dụng để đánh dấu các thành phần của
HTML
 Có nhiều kiểu thẻ, mỗi kiểu thẻ có tác dụng
khác nhau
 Có 2 loại: thẻ đóng và thẻ mở

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
6

CÚ PHÁP THẺ

 Thẻ

mở

 <tên_thẻ>
 Bắt

đầu một lệnh HTML
 Ví dụ <html>, <head>, <body>
 Thẻ

đóng

 </tên_thẻ>
 Kết

thúc một lệnh HTML
 Ví dụ </html>, </head>, </body>
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
7

CÚ PHÁP THẺ
 Thẻ

đóng và thẻ mở thƣờng đi liền với nhau

 <tên_thẻ>…</tên_thẻ>
 Tác

 Một

động đến dữ liệu bên trong cặp thẻ

số thẻ chỉ có thẻ mở

 <img>,

, <hr>

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
8

THUỘC TÍNH CỦA THẺ
 Mỗi

thẻ có thể có 1 hoặc nhiều thuộc tính
 Mỗi thuộc tính có tên thuộc tính và giá trị, giá
trị đƣợc đặt trong dấu “”
 Cú pháp

tên_TT1=“giá_trị1” tên_TT2=“giá_trị2”

…>

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
9

THUỘC TÍNH CỦA THẺ
 Thuộc

 Các

tính đƣợc viết trong thẻ mở

align=“center”>Hello world

thuộc tính có thể đổi vị trí cho nhau


align=“center” src=“hello.png”>
 <image src=“hello.png” align=“center”>

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
10

TRANG WEB ĐẦU TIÊN
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
This text is bold
</body>
</html>
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
11

HIỂN THỊ TRÊN TRÌNH DUYỆT

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
12

HIỂN THỊ TRÊN TRÌNH DUYỆT

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
13

GIẢI THÍCH
 Thành

phần This text is bold

là thẻ mở
 là thẻ đóng tƣơng ứng
 Nội dung của thành phần nằm giữa 2 thẻ
 Tác dụng: làm đậm nội dung khi hiển thị trên trình
duyệt
 

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
14

CÁC THẺ HTML CƠ BẢN


<html> … </html>
 Đánh



<head> … </head>
 Đánh



dấu một file HTML
dấu phần đầu của file HTML

<body> … </body>
 Đánh

dấu phần nội dung đƣợc hiển thị
 Thuộc tính bgcolor xác định màu nền của trang web
 Thuộc tính background xác định ảnh nền trang web
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
15

ẢNH NỀN TRANG WEB
<html>
<head>

<title>Background Image</title>
</head>
<body background=“globe.png”>
This is my first homepage.
This text is bold
</body>
</html>

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
16

MÀU NỀN TRANG WEB
<html>
<head>
<title>Background Image</title>
</head>
<body bgcolor=“green”>
This is my first homepage.
This text is bold
</body>
</html>

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>

17

ĐỀ MỤC
Đƣợc sử dụng với các thẻ từ

đến



có kích thƣớc lớn nhất


có kích thƣớc nhỏ nhất
 Tự động thêm một dòng trống trƣớc và sau đề
mục
 Thuộc tính


 align=“left”,

“right”, “center”, “justify” căn chỉnh

lề
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
18

ĐỀ MỤC

Đề mục mức 1

Đề mục mức 2

Đề mục mức 3

Đề mục mức 4

Đề mục mức 5

Đề mục mức 6

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
19

ĐOẠN VĂN, NGẮT DÒNG


…

 Đánh

dấu một đoạn văn bản
 Tự động thêm một dòng trống trƣớc và sau đoạn
 Thuộc tính align căn lề cho đoạn văn bản, giá trị mặc
định là “left”


 Chèn



ký tự xuống dòng

<hr>

 Chèn

đƣờng kẻ ngang
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
20

ĐOẠN VĂN, NGẮT DÒNG
<html>
<head>
<title>Paragraph</title>
content="text/html; charset=utf-8">
</head>
<body>

Đây là paragraph 1. Căn trái.

Đây là paragraph 2. Căn
giữa.

Đây là paragraph 3. Căn phải.

<hr>
Dòng 1

Dòng 2

</body>
Đại học Bách khoa Hà nội
</html>
CuuDuongThanCong.com

/>
21

ĐOẠN VĂN, NGẮT DÒNG

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
22

ĐỊNH DẠNG VĂN BẢN










… chữ đậm
… chữ nghiêng
… chữ gạch chân
<big>…</big> chữ to
… chữ nhỏ
… chỉ số trên

… chỉ số dưới
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
23

ĐỊNH DẠNG VĂN BẢN


…
 Chọn

font chữ cho văn bản
 Thuộc tính face xác định kiểu font
 Thuộc tính size xác định kích thƣớc
 Thuộc tính color xác định màu sắc

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

/>
24

ĐỊNH DẠNG VĂN BẢN
<html>
<head>
<title>Formating</title>