Bài giảng HTML

Trang 1

GIỚI THIỆU NGÔN NGỮ HTML



Thiết kế Web

Trường Cao đẳng Kinh tế - Công nghệ TP.HCM

Khoa Công nghệ thông tin

Trang 3

CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU

Trang 4

 Nội dung đặt trong cặp thẻ này sẽ sử dụng các thẻ HTML để trình bày.

Trang 9

Thẻ <TITLE>

 Thẻ mở <TITLE>

 Thẻ đóng </TITLE>

 Cặp thẻ này chỉ có thể được sử dụng

trong phần mở đầu của tài liệu

 Nó phải nằm trong phạm vi giới hạn của thẻ <HEAD>

Trang 10

Thiết kế Web 10

Thẻ <TITLE>

 Cú pháp:

 Nội dung đặt giữa cặp thẻ này sẽ được hiển thị trên thanh tiêu đề (title bar)

của trình duyệt web

Trang 11

Thẻ <TITLE>

Trang 13

 Màu văn bản, siêu liên kết

 Lề cho trang tài liệu

Trang 14

 Các thuộc tính của thẻ <BODY>

 BACKGROUND: đặt ảnh nền cho trang

 BGCOLOR: đặt màu nền cho trang

 TEXT: Xác định màu chữ văn bản

 ALINK, VLINK, LINK: Màu sắc các siêu liên kết

Trang 15

Cấu trúc tài liệu HTML

Trang 16

Thiết kế Web 16

Ví dụ

Trang 17

Bài tập

Viết tập tin html để có kết quả như trên ?

- Chữ màu xanh da trời

- Nền trang màu vàng

Trang 18

Thiết kế Web 18

Đáp án

Trang 22

Thiết kế Web 22

Thẻ

 Ví dụ

Trang 25

Các thẻ đề mục

Trang 27

Thẻ

 Thẻ này không có thẻ đóng tương ứng

 Có tác dụng chuyển sang dòng mới

 Nội dung văn bản trong tài liệu HTML

sẽ được trình duyệt hiển thị liên tục

 Để xuống dòng, sử dụng thẻ

Trang 28

Thiết kế Web 28

Thẻ

Do dùng các khoảng trắng, tab và enter

?

Trang 29

Thẻ

Dùng thẻ để xuống dòng

Trang 32

Thiết kế Web 32

Thẻ <PRE>

 Cú pháp:

 Dấu xuống dòng trong đoạn văn bản sẽ

có ý nghĩa chuyển sang dòng mới

Trang 33

Thẻ <PRE>

 Ví dụ:

Trang 36

Thiết kế Web 36

Ví dụ UL:

Thuộc tính TYPE=“circle/disc/square” của UL qui định ký hiệu đầu mục

Trang 38

Thiết kế Web 38

Ví dụ OL:

Trang 39

Ví dụ OL:

Trang 41

… Định dạng chỉ số trên (SuperScript)

… Định dạng chỉ số dưới (SubScript))

<BASEFONT> Định nghĩa kích thước font chữ được sử

dụng cho đến hết văn bản Thẻ này chỉ có

Trang 42

Thiết kế Web 42

Các thẻ định dạng in ký tự

 Ví dụ:

Trang 43

Các thẻ định dạng in ký tự

 Bài tập:

Trang 44

Thiết kế Web 44

Căn lề văn bản trong trang Web

LEFT Căn lề trái

CENTER Căn giữa trang

RIGHT CĂn lề phải

Trong trình bày, luôn phải chú ý đến việc căn lề cho các văn bản để trang

Web có bố cục đẹp Một số thẻ như , <HR>, <IMG>… đều có tham

số ALIGN cho phép căn lề trong phạm vi giới hạn thẻ đó

Ngoài ra còn có thể sử dụng thẻ <CENTER> để căn giữa một khối văn bản

Cú pháp : <CENTER> văn bản sẽ được căn giữa </CENTER>

Trang 46

Thiết kế Web 46

Các ký tự đặc biệt

 Ví dụ:

Trang 47

Màu sắc trong thiết kế Web

 Một màu được tổng hợp từ 3 thành phần màu chính:

 Đỏ (Red)

 Xanh lá cây (Green)

 Xanh nước biển (Blue)

 Trong HTML, một giá trị màu là một số nguyên dạng hexa (hệ cơ số 16) có dạng:

#RRGGBB

 RR: là giá trị màu đỏ

 GG: là giá trị màu xanh lá cây

 BB: là giá trị màu xanh nước biển

 VD: #A52A2A

Trang 48

Thiết kế Web 48

 Với mỗi giá trị RGB là một màu, ta có

rất nhiều màu

 Có 16 màu có tên tiếng Anh xác định

 Màu sắc được xác định thông qua giá trị RGB hay thông qua tên tiếng Anh

Trang 49

Đỏ sẫm #8B0000 DARKRED

Xanh lá cây #00FF00 GREEN

Xanh nhạt #90EE90 LIGHTGREEN

Xanh nước biển #0000FF BLUE

Trang 51

 Ví dụ:

abc

Trang 52

Thiết kế Web 52

Văn bản siêu liên kết

 Văn bản siêu liên kết hay siêu văn bản

là một từ, một cụm từ hay một câu trên trang Web được dùng để liên kết đến

một trang web khác

 Siêu văn bản là môi trường trong đó

chứa các liên kết (link) của các thông

tin

Trang 53

 Cú pháp:

<A

HREF = url

NAME = name TITLE = title

>

… siêu văn bản

</A>

Trang 54

Thiết kế Web 54

 Ví dụ:

 Liên kết đến báo tuổi trẻ

 Liên kết gửi thư

Trang 57

Chèn âm thanh

 Cú pháp:

<BGSOUND

SRC = url LOOP = n

Trang 59

Chèn Windows Media Player

<object

classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95“

id="MediaPlayer1“

width=“rộng” height=“cao”>

</object>

Trang 60

swflash.cab#version=6,0,29,0" width= rộng "

height=“ cao ">

pluginspage="http://www.macromedia.com/go/getfl ashplayer" type="application/x-shockwave-flash" width=" rộng " height=" cao "></embed>

</object>

Trang 61

Chèn Applet

<applet code="ten_fle.class"

width="rộng" height="cao">

</applet>

Trang 70

Thiết kế Web 70

Đáp án

Tiêu đề	Giới thiệu ngôn ngữ HTML
Tác giả	Hà Đồng Hưng
Trường học	Trường Cao đẳng Kinh tế - Công nghệ TP.HCM
Chuyên ngành	Công nghệ thông tin
Thể loại	Bài giảng
Thành phố	TP.HCM

Định dạng
Số trang	70
Dung lượng	1,34 MB