Bài giảng 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 (744.84 KB, 70 trang )
Trường Cao đẳng Kinh tế - Công nghệ TP.HCM
Khoa Công nghệ thơng tin
GIỚI THIỆU NGƠN NGỮ HTML
Thiết kế Web
Trình bày: Hà Đồng Hưng
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML
HEAD
TITLE
BODY
Thiết kế Web
2
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML
HEAD
TITLE
BODY
Xác nhận tài liệu
HTML
Thiết kế Web
3
Thẻ HTML
Thẻ mở là <HTML>
Thẻ đóng là </HTML>
Cặp thẻ này được xử dụng để xác nhận
một tài liệu là tài liệu HTML (HyperText
Markup Language).
Nội dung đặt trong cặp thẻ này sẽ sử
dụng các thẻ HTML để trình bày.
Thiết kế Web
4
Thẻ <HTML>
Cú pháp
<HTML>
… Tồn bộ tài liệu đặt ở đây
</HTML>
Trình duyệt sẽ xem các tài liệu không
sử dụng thẻ <HTML> như những tập
tin văn bản bình thường.
Thiết kế Web
5
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML
HEAD
TITLE
BODY
Xác định phần
đầu
Thiết kế Web
6
Thẻ <HEAD>
Thẻ mở <HEAD>
Thẻ đóng </HEAD>
Thẻ HEAD xác định phần mở đầu cho tài liệu
Thẻ HEAD nằm trong cặp thẻ <HTML>
Cú pháp:
<HEAD>
… Phần mở đầu (HEADER) của tài liệu đặt ở đây
</HEAD>
Thiết kế Web
7
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML
HEAD
TITLE
BODY
Xác định tiêu đề
Thiết kế Web
8
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>
Thiết kế Web
9
Thẻ <TITLE>
Cú pháp:
<TITLE> Tiêu đề của tài liệu
</TITLE>
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
Thiết kế Web
10
Thẻ <TITLE>
Thiết kế Web
11
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU
HTML
HEAD
TITLE
BODY
Xác định phần
thân của tài liệu
Thiết kế Web
12
Thẻ <BODY>
Thẻ mở: <BODY>
Thẻ đóng: </BODY>
Thẻ này được sử dụng để xác định phần nội
dung chính của tài liệu.
Trong phần thân có thể chứa các thơng tin
định dạng nhất định được đặt trong tham số:
Đặt ảnh nền cho tài liệu
Màu nền
Màu văn bản, siêu liên kết
Lề cho trang tài liệu
Thiết kế Web
13
Thẻ <BODY>
Cú pháp
<BODY>
… phần nội dung chính của tài liệu
</BODY>
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
Thiết kế Web
14
Cấu trúc tài liệu HTML
<HTML>
<HEAD>
<TITLE>tiêu đề</TITLE>
</HEAD>
<BODY Các tham số>
… nội dung chính
</BODY>
</HTML>
Thiết kế Web
15
Ví dụ
Thiết kế Web
16
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
Thiết kế Web
17
Đáp án
Thiết kế Web
18
Các thẻ định dạng khối
<P>
<H1>,<H2>,…, <H6>
<BR>
<PRE>
Thiết kế Web
19
Các thẻ định dạng khối
Đoạn
<P>
<H1>,<H2>,…, <H6>
<BR>
<PRE>
Thiết kế Web
20
Thẻ <P>
Thẻ mở <P>
Thẻ đóng </P>
Cú pháp
<P> Nội dung đoạn văn bản</P>
Được dùng để định dạng đánh dấu một
đoạn văn bản
Thiết kế Web
21
Thẻ <P>
Ví dụ
Thiết kế Web
22
Các thẻ định dạng khối
<P>
<H1>,<H2>,…, <H6>
<BR>
<PRE>
Thiết kế Web
Đề mục
23
Các thẻ đề mục
HTML hỗ trợ 6 đề mục:
<H1>…</H1>
<H2>…</H2>
Định dạnh đề mục cấp 3
<H4>…</H4>
Định dạnh đề mục cấp 4
<H5>…</H5>
Định dạnh đề mục cấp 5
<H6>…</H6>
Định dạnh đề mục cấp 2
<H3>…</H3>
Định dạnh đề mục cấp 1
Định dạnh đề mục cấp 6
Đề mục là chỉ dẫn định dạng về mặt logic, mỗi trình
duyêt sẽ thể hiện đề mục dưới một khn dạng
thích hợp.
H1 > H2 > H3 > H4 > H5 > H6
Thiết kế Web
24
Các thẻ đề mục
Thiết kế Web
25
