Bài giảng Thiết kế web - Ngôn ngữ HTML - pdf 16

Download miễn phí Bài giảng Thiết kế web - Ngôn ngữ HTML

<ht l></ht l> Địh hĩ h i ủ ă bả <html></html> : Định nghĩa phạm vi của vănbản
HTML
<head></head> : Đị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
<title></title> : Mô tảtiêu đềtrang web
<body></body> : Xác định vùng thân của trang web, nơi chứa các thông tin

Để tải bản Đầy Đủ của tài liệu, xin Trả lời bài viết này, Mods sẽ gửi Link download cho bạn sớm nhất qua hòm tin nhắn.
Ai cần download tài liệu gì mà không tìm thấy ở đây, thì đăng yêu cầu down tại đây nhé:
Nhận download tài liệu miễn phí

Tóm tắt nội dung tài liệu:

2/16/2011
1
ĐẠI HỌC SÀI GÒN – KHOA CNTT
THIẾT KẾ WEB
R
Ì
N
H
W
E
B
Ngôn ngữ HTML
K
Ế
V
À
L
Ậ
P
T
R
GV: Trần Đình Nghĩa
[email protected]
T
H
I
Ế
T
K
1
2/16/2011
2
Nội dung buổi học trước
1. Các bước thiết lập website
2 Thiết kế lập trình website.
• Thiết kế giao diện
R
Ì
N
H
W
E
B
3. Xây dựng website dưới góc
K
Ế
V
À
L
Ậ
P
T
R
nhìn ngộ nghĩnh
T
H
I
Ế
T
K
2
2/16/2011
3
Nội dung
1. Giới thiệu về HTML
2 Cấu trúc 1 tài liệu HTML.
3. Các tag (thẻ) HTML
R
Ì
N
H
W
E
B
4. Hướng dẫn thực hành HTML
K
Ế
V
À
L
Ậ
P
T
R
5. Gợi ý chọn đề tài cho đồ án
T
H
I
Ế
T
K
3
2/16/2011
4
Giới thiệu về HTML
HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu siêu
văn bản, dùng để xây dựng một webpage.
HTML: chứa các thành phần định dạng để báo cho browser biết
cách hiển thị một webpage.
Một trang web thông thường gồm:
Dữ liệu (văn bản âm thanh hình ảnh )
R
Ì
N
H
W
E
B
, , , …
Các tag (thẻ) HTML để định dạng mô tả cách thức các dữ liệu hiển
thị trên trình duyệt
â í ể á ể ộ
K
Ế
V
À
L
Ậ
P
T
R Web broser: ph n t ch & “hi u” c c tags HTML, hi n thị n i dung
web cho người dùng
Webpage HTML: 1 file *.htm || *.html
T
H
I
Ế
T
K
4
2/16/2011
5
Trình duyệt – Trình soạn thảo
Web browser – trình duyệt web
Notepad
R
Ì
N
H
W
E
B
K
Ế
V
À
L
Ậ
P
T
R
Dreamweaver
T
H
I
Ế
T
K
5
2/16/2011
6
HTML căn bản - Tag (thẻ) HTML
HelloWorld.html
Hello world
R
Ì
N
H
W
E
B
Hello world!
K
Ế
V
À
L
Ậ
P
T
R
It's my first html.
T
H
I
Ế
T
K
6
2/16/2011
7
Cú pháp, đặc tính của HTML
_ _
Dữ liệu
HTML tag:
 Tên gợi nhớ
 Tag được quy định trong cặp dấu ngoặc
 Phần lớn tag gồm 2 phần mở và đóng
R
Ì
N
H
W
E
B
Một số tag chỉ có 1 phần & không có dữ liệu: ,
Cấu trúc lồng
 Thuộc tính của tag cung cấp thông tin bắt buộc/tùy chọn cho tag
K
Ế
V
À
L
Ậ
P
T
R
Một số web browser không hiểu một số tag hay thuộc tính
Không phân biệt chữ hoa, thường
ỏ á ả ắ
T
H
I
Ế
T
K
7
 B qua c c kho ng tr ng
2/16/2011
8
Cấu trúc một webpage HTML
Hello world
ầ
u
t
r
a
n
g
r
a
n
g
P
h
ầ
n
đ
ầ
k
ế
t
t
h
ú
c
1
t
R
Ì
N
H
W
E
B
Hello world!
ộ
i
d
u
n
g
B
ắ
t
đ
ầ
u
v
à
K
Ế
V
À
L
Ậ
P
T
R
It's my first html.
P
h
ầ
n
n
T
H
I
Ế
T
K
8
2/16/2011
9
Cấu trúc 1 tài liệu HTML
 Đị h hĩ h i ủ ă bả m m : n ng a p ạm v c a v n 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
R
Ì
N
H
W
E
B
trang web
 : Mô tả tiêu đề trang web
K
Ế
V
À
L
Ậ
P
T
R
 : Xác định vùng thân của trang web,
nơi chứa các thông tin
T
H
I
Ế
T
K
9
2/16/2011
10
Các tag HTML cơ bản
 T ử lý đị h d ă bảag x n ạng v n n
Tag danh sách
Tag tạo bảng
R
Ì
N
H
W
E
B
Tag liên kết trang
Tag hình ảnh
K
Ế
V
À
L
Ậ
P
T
R
Tag âm thanh
T
H
I
Ế
T
K
10
2/16/2011
11
Tag xử lý định dạng văn bản
 Tiê đề h di t u - ea ng ags: , , …,
Đoạn văn bản:
Định dạng chuỗi: , , , và
Đường kẻ ngang:
R
Ì
N
H
W
E
B Xuống dòng
ể á ý ặ ệ
K
Ế
V
À
L
Ậ
P
T
R Hi n thị c c k tự đ c bi t
T
H
I
Ế
T
K
11
2/16/2011
12
Ví dụ: Tag Heading
Nội dung hiện thị
Trong trình duyệt
R
Ì
N
H
W
E
B
K
Ế
V
À
L
Ậ
P
T
R
Ngôn ngữ HTML
Trong trình soạn thảo Introduction_HeadingTag.html
T
H
I
Ế
T
K
12
2/16/2011
13
Ví dụ: Tag Paragraph
Thuộc tính của tag
P hF t ht l
R
Ì
N
H
W
E
B
aragrap orma . m
K
Ế
V
À
L
Ậ
P
T
R
T
H
I
Ế
T
K
13
2/16/2011
14
Horizontal rules
…
Thuộc tính :
align : Canh hàng đường kẻ ngang so với
HorizontalRules.html
trang web
width : Chiều dài đường kẻ ngang
size : Bề rộng của đường kẻ ngang
R
Ì
N
H
W
E
B
noshade : Không có bóng
K
Ế
V
À
L
Ậ
P
T
R
T
H
I
Ế
T
K
14
2/16/2011
15
Định dạng chữ
H ll ldon e o wor on
<font style="font-family:Verdana, Geneva, sans-serif"
color="#000099" size="3"> Hello world
This text is bold
This text is strong
R
Ì
N
H
W
E
B
This text is big
This text is emphasized
This text is italic
K
Ế
V
À
L
Ậ
P
T
R
This text is small
This text contains a2
T
H
I
Ế
T
K
15
This text contains x2= a x a
2/16/2011
16
Định dạng chữ
Computer Sciences
Computer Sciences
Computer Sciences
Computer Sciences
Computer Sciences TextFormat.html
R
Ì
N
H
W
E
B Computer Sciences
Computer Sciences
K
Ế
V
À
L
Ậ
P
T
R
Computer Sciences
Computer Sciences
T
H
I
Ế
T
K
16
Computer Sciences
2/16/2011
17
Định dạng theo tag
Hiển thị đúng dạng văn bản đã soạn thảo (khoảng
trắng, xuống dòng, tag,…)
PreTag.html
R
Ì
N
H
W
E
B
K
Ế
V
À
L
Ậ
P
T
R
T
H
I
Ế
T
K
17
2/16/2011
18
Các ký tự đặc biệt
Hiển thị các ký tự đặc biệt
Result Description Entity name Entity number
Khoảng trắng
Dấ à& u v & &
“ Ngoặc kép " "
< Nhỏ hơn < <
Lớ hơ
R
Ì
N
H
W
E
B
> n n > >
Ví dụ:Để hiển thị được: & “SGU”
<Dai hoc sai Gon> ; &
K
Ế
V
À
L
Ậ
P
T
R
; ; "SGU"
HTML special character -- Google
T
H
I
Ế
T
K
18
SpecialCharacter.html
2/16/2011
19
Tag hình ảnh
 : Không có thẻ đóng
<img scr=“URL” alt=“Description” width =“Number”
height =“Number”>
Các thuộc tính của tag :
scr : Đường dẫn đến file hình ảnh
ImageTag.html
R
Ì
N
H
W
E
B alt : Chú thích cho hình ảnh
width: chiều rộng của hình khi hiển thị
K
Ế
V
À
L
Ậ
P
T
R
height: chiều dài của hình khi hiển thị
position: Top, Bottom, Middle
T
H
I
Ế
T
K
19
border : Độ dày nét viền quanh ảnh (default=0)
2/16/2011
20
Tag hình ảnh
Giá t ị ặ đị h ủ 2 th ộ tí h idth h i ht là kí hr m c n c a u c n w , e g c
thước thật của file ảnh.
Đặt ảnh nền cho trang web
Sử dụng thẻ
 ví dụ:
R
Ì
N
H
W
E
B
<img scr=“123 jpg” alt=“Something is here” width
K
Ế
V
À
L
Ậ
P
T
R
.
=“45” height = “45”>
T
H
I
Ế
T
K
20
2/16/2011
21
Tag âm thanh
 : Không có tag đóng
Thuộc tính của tag Sound.html
SRC : Đường dẫn đến file âm thanh
Loop : Số lần lặp (bằng -1 : Lặp vô hạn)
R
Ì
N
H
W
E
B  Thường đặt trong tag của web.
Ví d BGSOUND ‘b id’ LOOP ‘1’
K
Ế
V
À
L
Ậ
P
T
R ụ:
Tag comment – Ghi chú trong HTML
T
H
I
Ế
T
K
21
2/16/2011
22
Tag danh sách
T T It i Li types ags ems n s
Ordered List
Unordered List
Li t It s em
User-defined List ,
R
Ì
N
H
W
E
B
 Thuộc tính type của các tag danh sách
Xem các ví dụ
K
Ế
V
À
L
Ậ
P
T
R
T
H
I
Ế
T
K
22
2/16/2011
23
Tag danh sách
Vd: Danh sách có thứ tự: OrderedList.html
R
Ì
N
H
W
E
B
K
Ế
V
À
L
Ậ
P
T
R
T
H
I
Ế
T
K
23
2/16/2011
24
Danh sách có thứ tự
OrderedListType.html
R
Ì
N
H
W
E
B
K
Ế
V
À
L
Ậ
P
T
R
T
H
I
Ế
T
K
24
2/16/2011
25
Danh sách không có thứ tự
Vd: Danh sách không có thứ tự: UnOrderedList.html
R
Ì
N
H
W
E
B
K
Ế
V
À
L
Ậ
P
T
R
T
H
I
Ế
T
K
25
2/16/2011
26
Danh sách tự định nghĩa
DefinitionList.html
R
Ì
N
H
W
E
B
K
Ế
V
À
L
Ậ
P
T
R
T
H
I
Ế
T
K
26
2/16/2011
27
Tag liên kết trang - URL
 t l // it dd /di t /filpro oco : s e a ress rec ory ename
Các dạng địa chỉ HTTP:



R
Ì
N
H
W
E
B 

K
Ế
V
À
L
Ậ
P
T
R


T
H
I
Ế
T
K
27

2/16/2011
28
Tag liên kết trang - URL




a
R ...

Yêu cầu Download

Tài liệu, ebook tham khảo khác

Bài giảng Thiết kế web - Ngôn ngữ HTML - pdf 16

Tóm tắt nội dung tài liệu:

Tài liệu, ebook tham khảo khác

Học thêm