Bài giảng Thiết kế và lập trình Web - Bài 2: HTML Căn bản
Nội dung
Giới thiệu về HTML
Cấu trúc của 1 tài liệu HTML
Các Tag cơ bản
Các Tag danh sách
Tag liên kết trang
Tag kẻ bảng
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế và lập trình Web - Bài 2: HTML Căn bản", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
Tóm tắt nội dung tài liệu: Bài giảng Thiết kế và lập trình Web - Bài 2: HTML Căn bản
Thiết kế và lập trình Web
Viện CNTT & TT
Bài 2
HTML Căn bản
Thiết kế & Lập trình Web
Nội dung
Giới thiệu về HTML
Cấu trúc của 1 tài liệu HTML
Các Tag cơ bản
Các Tag danh sách
Tag liên kết trang
Tag kẻ bảng
2
Thiết kế & Lập trình Web
Nội dung
Giới thiệu về HTML
Cấu trúc của 1 tài liệu HTML
Các Tag cơ bản
Các Tag danh sách
Tag liên kết trang
Tag kẻ bảng
3
Thiết kế & Lập trình Web
Giới thiệu về HTML
HTML (Hyper Text Markup Language) - Ngôn ngữ
đánh dấu siêu văn bản
Là một ngôn ngữ dùng để xây dựng một trang Web.
Chứa các thành phần định dạng để báo cho trình
duyệt Web biết cách để hiển thị một trang Web.
Một trang web thông thường gồm có 2 thành phần
chính:
– Dữ liệu của trang web (văn bản, âm thanh, hình ảnh...)
– Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ
liệu trên hiển thị trên trình duyệt.
4
Thiết kế & Lập trình Web
Giới thiệu về HTML – Trình duyệt, trình soạn thảo
Trình duyệt web (Browser) Trình soạn thảo (Editor)
5
Thiết kế & Lập trình Web
Giới thiệu về HTML – Thẻ (Tag) HTML
Welcome to HTML
My first HTML document
Hiển thị ví dụ trong IE
6
Thiết kế & Lập trình Web
Giới thiệu về HTML – Thẻ (Tag) HTML
Dòng chữ này được in đậm
Dữ liệu
Tên Tag luôn mang tính gợi nhớ
– Ví dụ: B ~ Bold, I ~ Italic, P ~ Paragraph
Đôi khi không cần Tag đóng ,
Cú pháp chung
Dữ liệu
– Ví dụ :
– Thuong mai Dien tu 1
– Thuong mai Dien tu 2
7
Thiết kế & Lập trình Web
Giới thiệu về HTML – Thẻ (Tag) HTML.Cú pháp
Mã HTML Hiển thị
Đây là một dòng được in Đậm
Mức chữ ở tiêu đề 3
Đây là một dòng được in Đậm
Mức chữ ở tiêu đề 3
Mã HTML Hiển thị
Hello
Hello
Lưu ý :
• Giá trị Thuộc tính của Thẻ nên đặt trong dấu nháy đơn hoặc nháy kép
• Không phân biệt chữ HOA và thường
• Bỏ qua các khoảng trắng thừa và các dấu ngắt dòng, xuống dòng
8
Thiết kế & Lập trình Web
Giới thiệu về HTML – Thẻ (Tag) HTML.Cú pháp
Lưu ý: Các Tag nên lồng nhau tuyệt đối
9
Thiết kế & Lập trình Web
Giới thiệu về HTML – Thẻ (Tag) HTML.Ví dụ
Welcome to HTML
My first HTML document
10
Thiết kế & Lập trình Web
Nội dung
Giới thiệu về HTML
Cấu trúc của 1 tài liệu HTML
Các Tag cơ bản
Các Tag danh sách
Tag liên kết trang
Tag kẻ bảng
11
Thiết kế & Lập trình Web
Cấu trúc 1 tài liệu HTML
Bắt đầu và
Kết thúc của
trang HTML
Phần đầu
trang HTML
Nội dung
trang HTML
Tiêu đề
Nội dung 1
Nội dung 2
Nội dung 3
12
Thiết kế & Lập trình Web
Cấu trúc 1 tài liệu HTML
: Định nghĩa phạm vi của văn bản HTML
: Định nghĩa các mô tả về trang HTML.
Thông tin trong tag này không được hiển thị trên trang web
: Mô tả tiêu đề trang web
: Xác định vùng thân của trang web, nơi
chứa các thông tin
13
Thiết kế & Lập trình Web
Cấu trúc 1 tài liệu HTML – Ví dụ
Welcome to HTML
My first HTML document
14
Thiết kế & Lập trình Web
Nội dung
Giới thiệu về HTML
Cấu trúc của 1 tài liệu HTML
Các Tag cơ bản
Các Tag danh sách
Tag liên kết trang
Tag kẻ bảng
15
Thiết kế & Lập trình Web
Các Tag Cơ bản
Các Tag xử lý văn bản
Tag hình ảnh
Tag âm thanh
16
Thiết kế & Lập trình Web
Các tag xử lý văn bản – Khối, chuổi văn bản
Các thẻ định dạng khối văn bản
– Tiêu đề (Heading) : , , , , ,
– Đoạn văn bản (Paragraph):
– Danh sách (List Items):
– Đường kẻ ngang (Horizontal Rules):
Các thẻ định dạng chuổi văn bản
– Định dạng chữ : , , và
– Tạo siêu liên kết :
– Xuống dòng :
17
Thiết kế & Lập trình Web
Các tag xử lý văn bản – Ví dụ về Heading
HEADING
Introduction to HTML
Introduction to HTML - H1
Introduction to HTML - H2
Introduction to HTML - H3
Introduction to HTML - H4
Introduction to HTML - H5
Introduction to HTML - H6
18
Thiết kế & Lập trình Web
Các tag xử lý văn bản – Ví dụ về Paragraph
PARAGRAPH -
Welcome to HTML
My first HTML document
This is going to be real fun
Using another heading
Another paragraph element
19
Thiết kế & Lập trình Web
Các tag xử lý văn bản – Ví dụ về Paragraph
HORIZONTAL RULES
– Thuộc tính :
• align : Canh hàng đường kẻ ngang so với trang web
• width : Chiều dài đường kẻ ngang
• size : Bề rộng của đường kẻ ngang
• noshade : Không có bóng
20
Thiết kế & Lập trình Web
Các tag xử lý văn bản – Ví dụ tag Định dạng chữ
Định dạng
This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This text contains a2
This text contains x2 = a x a
21
Thiết kế & Lập trình Web
Các tag xử lý văn bản – WYSIWYG với tag
Hiển thị đúng dạng văn bản đã soạn thảo (khoảng
trắng, xuống dòng, tag,)
Ví dụ:
Ban co the xuong dong
va cach khoang trang thoai mai
23
Thiết kế & Lập trình Web
Các tag xử lý văn bản – Ký tự đặc biệt
Làm sao hiển thị các ký hiệu đặc biệt ?
Dấu , &
Dấu nháy kép “
Các ký tự đặc biệt : @ © ®
24
Thiết kế & Lập trình Web
Các tag xử lý văn bản – Danh sách Ký tự đặc biệt
Result Description Entity Name Entity Number
" quotation mark " "
& ampersand & &
< less-than < <
> greater-than > >
Để hiện thị được
thì mã HTML tương ứng là :
"Khoa hoc tu nhien"
<Khoa hoa tu nhien> "Khoa hoc tu nhien"
25
Thiết kế & Lập trình Web
Tag hình ảnh
: Không có thẻ đóng
Các thuộc tính của tag :
– SRC : Đường dẫn đến file hình ảnh
– ALT : Chú thích cho hình ảnh
– Position: Top, Bottom, Middle
– Border : Độ dày nét viền quanh ảnh (default=0)
Đặt ảnh nền cho trang web
– Sử dụng thẻ
26
Thiết kế & Lập trình Web
Tag âm thanh
: Không có tag đóng
Thuộc tính của tag
– SRC : Đường dẫn đến file âm thanh
– Loop : Số lần lặp (bằng -1 : Lặp vô hạn)
– Thường đặt trong tag của trang web.
Ví dụ:
27
Thiết kế & Lập trình Web
Nội dung
Giới thiệu về HTML
Cấu trúc của 1 tài liệu HTML
Các Tag cơ bản
Các Tag danh sách
Tag liên kết trang
Tag kẻ bảng
28
Thiết kế & Lập trình Web
Các tag Danh sách
Kiểu danh sách Thẻ Phần tử trong DS
Danh sách có thứ tự
Danh sách không có thứ tự
Danh sách tự định nghĩa ,
29
Thiết kế & Lập trình Web
Các tag Danh sách – Danh sách có thứ tự
30
Thiết kế & Lập trình Web
Các tag Danh sách – Danh sách có thứ tự
31
Thiết kế & Lập trình Web
Các tag Danh sách – Danh sách không có thứ tự
32
Thiết kế & Lập trình Web
Các tag Danh sách – Danh sách tự định nghĩa
33
Thiết kế & Lập trình Web
Nội dung
Giới thiệu về HTML
Cấu trúc của 1 tài liệu HTML
Các Tag cơ bản
Các Tag danh sách
Tag liên kết trang
Tag kẻ bảng
34
Thiết kế & Lập trình Web
Tag liên kết trang - URL
protocol://site address/directory/filename
Các dạng địa chỉ HTTP:
TH1:
Ví dụ:
TH2:
Ví dụ:
TH3:
Ví dụ:
TH4:
Ví dụ: Dominoes.exe
35
Thiết kế & Lập trình Web
Tag liên kết trang - URL
TH5:
Ví dụ : Puzzle
TH6:
Ví dụ :
TH7:
Ví dụ :
36
Thiết kế & Lập trình Web
Tag liên kết trang – Tag (anchor)
Cú pháp :
Linked content
Thuộc tính target của tag
– name: tải trang web vào frame có tên NAME
– _blank: tải trang web vào cửa sổ mới
– _parent: tải trang web vào cửa sổ cha của nó
– _self: tải trang web vào chính cửa sổ hiện hành
– _top: tải trang web vào cửa số cao nhất
Ví dụ :
37
Thiết kế & Lập trình Web
Tag liên kết trang – Phân loại liên kết
Phân loại :
– Liên kết ngoại (external link)
– Liên kết nội (internal link)
– Liên kết email (email link)
38
Thiết kế & Lập trình Web
Tag liên kết trang – Liên kết ngoại (External Link)
Bài học 2
Trang hiện tại
baihoc1.htm
Trang có địa chỉ
xác định từ URL
baihoc2.htm
Click
chuột
Text đại diện
39
Thiết kế & Lập trình Web
Tag liên kết trang – Liên kết nội (Internal Link)
Vi tri bat dau
Text đại diện
Text đại diện
Vi tri bat dau
.abcdefgh
...01234567
.
Nội
dung
trang
khi
chưa
liên
kết
.
.
Text đại diện
Vi tri bat dau
.abcdefgh
...01234567
.
.
.
.
.
Nội
dung
trang
khi
bấm
liên
kết
Click
chuột
40
Thiết kế & Lập trình Web
Tag liên kết trang – Liên kết Email
Liên hệ Admin
Click
chuột
Liên hệ Admin
41
Thiết kế & Lập trình Web
Tag liên kết trang – Phân loại địa chỉ URL
Địa chỉ URL phân làm 2 loại :
– Địa chỉ tuyệt đối : Là vị trí tuyệt đối so với Mạng Internet
– Địa chỉ tương đối : Là vị trí tương đối so với trang web
hiện hành đang chứ liên kết.
Linked content
Ký hiệu Ý nghĩa
/ Trở về thư mục gốc của website
./ Thư mục hiện tại của trang web sử dụng link (mặc định)
../ Quay ra thư mục cha / đi ngược lại 1 cấp thư mục
Một số ký hiệu đường dẫn đặc biệt:
42
Thiết kế & Lập trình Web
Ví dụ
file A có link đến file B, vậy trong file A
có HTML element:
liên kết đến B
muc 1/file B.htm
URL =
/demo/Thu muc 1/file B.htm
# 127.0.0.1/demo
Thu muc 1/file B.htm
./Thu muc 1/file B.htm
43
Thiết kế & Lập trình Web
Ví dụ
file B có link đến file C, vậy trong file
B có HTML element:
liên kết đến C
muc 1/
Thu muc 1_1/file C.htm
URL =
/demo/Thu muc 1/Thu muc 1_1/file C.htm
# 127.0.0.1/demo
Thu muc 1_1/file C.htm
./Thu muc 1_1/file C.htm
44
Thiết kế & Lập trình Web
Ví dụ
file C có link đến file D, vậy trong file
D có HTML element:
liên kết đến D
muc 1/
Thu muc 1_2/file D.htm
URL =
/demo/Thu muc 1/Thu muc 1_2/file D.htm
# 127.0.0.1/demo
../Thu muc 1_2/file D.htm
./../Thu muc 1_2/file D.htm
45
Thiết kế & Lập trình Web
Ví dụ
file D có link đến file F, vậy trong file F
có HTML element:
liên kết đến F
muc 2/file F.htm
URL =
/demo/Thu muc 2/file F.htm
# 127.0.0.1/demo
../../Thu muc 2/file F.htm
./../../Thu muc 2/file F.htm
46
Thiết kế & Lập trình Web
Ví dụ
file F có link đến file E, vậy trong file F
có HTML element:
liên kết đến E
muc 1/ Thu muc
1_2/Thu muc 1_2_1/file E.htm
URL =
/demo/Thu muc 1/Thu muc 1_2/
Thu muc 1_2_1/file E.htm
# 127.0.0.1/demo
../Thu muc 1 /Thu muc 1_2/Thu muc1_2_1/
file E.htm
47
Thiết kế & Lập trình Web
Ví dụ
file E có link đến file A ở vị trí xác
định, vậy trong file A có HTML
element:
liên kết đến A tai vi
tri B
URL =
# 127.0.0.1/demo
../../../file A.htm#positionB
48
Thiết kế & Lập trình Web
Bài tập
49
Thiết kế & Lập trình Web
Nội dung
Giới thiệu về HTML
Cấu trúc của 1 tài liệu HTML
Các Tag cơ bản
Các Tag danh sách
Tag liên kết trang
Tag kẻ bảng
50
Thiết kế & Lập trình Web
Tag kẻ bảng - Table
51
Thiết kế & Lập trình Web
Tag kẻ bảng – Table (tt)
52
Thiết kế & Lập trình Web
Tag kẻ bảng – Table (tt)
53
Thiết kế & Lập trình Web
54
Bài tập: Tạo bảng sau
Thiết kế & Lập trình Web
55
Thiết kế & Lập trình Web
56
Thiết kế & Lập trình Web
57
Thiết kế & Lập trình Web
Topleft.png Topright.png
bottomleft.png bottomright.png
Top.png
Bottom.png
left.png right.png
58
Thiết kế & Lập trình Web
59
Thiết kế & Lập trình Web
Giới thiệu Form
Được dùng để nhận dữ liệu từ phía người dùng
Giúp gởi yêu cầu của người dùng đến trang xử lý
trong ứng dụng web
Tag dùng để chứa các thành phần khác của
form
Những thành phần nhập liệu được gọi là Form Field
– text field
– password field
– multiple-line text field
–
Thiết kế & Lập trình Web
Ví dụ
Thiết kế & Lập trình Web
Tag
Là container chứa các thành phần nhập liệu khác.
Các thuộc tính của
– NAME : tên FORM
– ACTION : chỉ định trang web nhận xử lý dữ liệu từ FORM này
khi có sự kiện click của button SUBMIT.
– METHOD : Xác định phương thức chuyển dữ liệu (POST,GET)
Thiết kế & Lập trình Web
Tag - Ví dụ
<form Name=“Dangnhap”
Action=“/admin/xlDangnhap.php”
Method=“Post”>
Dangnhap.htm
Thiết kế & Lập trình Web
Các thành phần của Form
Gồm các loại Form Field sau:
– Text field
– Password field
– Hidden Text field
– Check box
– Radio button
– File Form Control
– Submit Button, Reset Button, Generalized Button
– Multiple-line text field
– Label
– Pull-down menu
– Scrolled list
– Field Set
Thiết kế & Lập trình Web
Các thành phần của Form – Text Field
Dùng để nhập một dòng văn bản
Cú pháp
<INPUT
TYPE = “TEXT”
NAME = string
READONLY
SIZE = variant
MAXLENGTH = long
TABINDEX = integer
VALUE = string
>
Ví dụ
<input type=“text” name=“txtName” value=“This is one line text with
301” size=“20” maxlength=“30”>
t with 301
20
30
Thiết kế & Lập trình Web
Các thành phần của Form – Password Field
Dùng để nhập mật khẩu
Cú pháp
<INPUT
TYPE = “PASSWORD”
NAME = string
READONLY
SIZE = variant
MAXLENGTH = long
TABINDEX = integer
VALUE = string
>
Ví dụ
<input type=“Password” name=“txtPassword”
value=“123456abc1234” size=“20” maxlength=“30”>
Thiết kế & Lập trình Web
Các thành phần của Form – Check box
Cú pháp
<input
TYPE = “checkbox”
NAME = “text”
VALUE = “text”
[checked]
>
Ví dụ
Check box group :
Anh van:
Hoa:
Nhut:
Thiết kế & Lập trình Web
Các thành phần của Form – Radio button
Cú pháp
<input
TYPE = “radio”
NAME = “text”
VALUE = “text”
[checked]
>
Ví dụ
Radio Button Group :
Nam:
Nu:
Radio Button Group :
Nam:
Nu:
Thiết kế & Lập trình Web
Các thành phần của Form – File Form Control
Dùng để upload 1 file lên server
Cú pháp
<form action=“” method=“post” enctype=“multipart/form-data”
name=“...”>
Ví dụ
Thiết kế & Lập trình Web
Các thành phần của Form – Submit button
Nút phát lệnh và gởi dữ liệu của form đến trang xử lý.
Mỗi form chỉ có một nút submit và nút này được viền đậm
Cú pháp:
Ví dụ:
Thiết kế & Lập trình Web
Các thành phần của Form – Reset Button
Dùng để trả lại giá trị mặc định cho các control khác trong
form
Cú pháp
Ví dụ
Thiết kế & Lập trình Web
Các thành phần của Form - Generalized Button
Cú pháp
Ví dụ
<input type="button" name=“btnNormal” value=“Press Me!”
onclick="alert('Hello from JavaScript');" >
Thiết kế & Lập trình Web
Các thành phần của Form – Multiline Text Field
Dùng để nhập văn bản nhiều dòng
Cú pháp
<TEXTAREA
COLS = long
ROWS = long
DISABLED
NAME = string
READONLY
TABINDEX = integer
WRAP = OFF | PHYSICAL | VIRTUAL>
Ví dụ
This is a text on multiline.
20
5
Thiết kế & Lập trình Web
Các thành phần của Form - Label
Dùng để gán nhãn cho một Form Field
Cú pháp
<LABEL
FOR = IDString
CLASS=string
STYLE=string
>
Ví dụ
Anh văn:
Thiết kế & Lập trình Web
Các thành phần của Form – Pull-down Menu
Dùng để tạo ra một combo box
Cú pháp
Thiết kế & Lập trình Web
Các thành phần của Form – Pull-down Menu
combo box:
Window Media 10
Jet Audio 9
Windows XP
Windows XP SP2
Windows Vista
Office 2007
Thiết kế & Lập trình Web
Các thành phần của Form – Field Set
Dùng để tạo ra Group box, nhóm các thành phần nhập liệu
trong form
Cú pháp
GroupBox’s Name
Ví dụ
Subject
English
Mathematics
Graph Theory
Thiết kế & Lập trình Web
Một số thuộc tính tiện ích của Form và Input
Accesskey=char
– Tạo phím nóng cho form fields.
– Áp dụng cho tất cả form fields.
– Cách nhấn Alt + char
– Tránh các phím tắt của browser.
Title = string
– Tạo tooltip cho form fields.
– Áp dụng cho tất cả form fields.
Autocomplete = ON/OFF
– Gợi ý tự động khi nhập liệu.
– Áp dụng cho tất cả tag form, input.
Thiết kế & Lập trình Web
Bật chế độ Auto-complete cho IE
Thiết kế & Lập trình Web
80
5. Một số thẻ HTML đặc biệt
Thẻ Meta
Thẻ Script
Thẻ Marquee
Thiết kế & Lập trình Web
81
5.1. Thẻ meta
Thẻ :
– Đặt ở giữa
– Thường dùng quy định thuộc tính cho trang web
– Tác dụng: font, tìm kiếm, chuyển trang
– 2 cách viết thẻ :
<META NAME="name"
CONTENT="content“>
<META HTTP-EQUIV="name“
CONTENT="content“>
Thiết kế & Lập trình Web
82
5.1. Thẻ meta
Thẻ meta với font
<meta http-equiv="Content-Type“
content="text/html;charset=utf-8">
Thiết kế & Lập trình Web
83
5.1. Thẻ meta
Thẻ meta cho phép tìm kiếm
Khai báo các từ khóa để các Search Engineer tìm
kiếm: author, keywords,
Ví dụ
<meta name="keywords" content="Do Ba
Lam, Information system">
Thiết kế & Lập trình Web
84
5.1. Thẻ meta
Thẻ meta tự động chuyển URL
<META http-equiv="refresh" content="2;
url=Film.html">
This page will automatically go to Film.html
Thiết kế & Lập trình Web
85
5.1. Thẻ meta
<META NAME="author" CONTENT="author's
name">
<META HTTP-EQUIV="refresh"
CONTENT="delay;url=new url">
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=utf-8">
Thiết kế & Lập trình Web
5.2. Thẻ script
Muốn kiểm soát các hành động của người dùng
Khai báo các phương thức xử lý phía Client
=> Client Script: JavaScript và VBScript
Cú pháp
lệnh;
86
Thiết kế & Lập trình Web
Thẻ MARQUEE
Dùng để tạo hiệu ứng chữ chạy trên màn hình trình
duyệt
Cú pháp
<MARQUEE
BEHAVIOR = ALTERNATE | SCROLL | SLIDE
DIRECTION = DOWN | LEFT | RIGHT | UP
LOOP = int
SCROLLAMOUNT=long
SCROLLDELAY=long
WIDTH = long> Text Text Text
Thiết kế & Lập trình Web
Tự động chuyển hướng trang web
Tự động chuyển hướng trang web sang trang web
khác (URL) sau một khoảng thời gian t (tính theo giây)
Cú pháp
Thiết kế & Lập trình Web
Giới thiệu HTML5
Các thành phần và thuộc tính HTML mới
Hỗ trợ đầy đủ CSS3
Các thành phần Video và audio
2D/3D graphics
Local storage
Local SQL database
File đính kèm:
bai_giang_thiet_ke_va_lap_trinh_web_bai_2_html_can_ban.pdf

