Download miễn phí gì cũng có tại ilook.asia
CHƯƠNG 4: HTML CĂN BẢN VÀ BÀI TẬP
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
CAO ĐẲNG KỸ THUẬT CAO THẮNG
49
Download miễn phí gì cũng có tại ilook.asia
HTML LÀ GÌ
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.
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
50
Download miễn phí gì cũng có tại ilook.asia
Công cụ thực hiện website
!
Notepad++
!
Dreamweaver
!
CotEditor (Macbook)
!
Pingendo (support bootstrap)
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
51
Download miễn phí gì cũng có tại ilook.asia
Cấu trúcCấu
của trúc
một 1
tàitài
liệu
HTML
liệu HTML
! <html></html> : Định nghĩa phạm vi của văn bả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
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
52
Cấu trúc 1 tài liệu HTML
Download miễn phí gì cũng có tại ilook.asia
Cấu trúc của một tài liệu HTML
" />
<html>
<head>
<title>Tiêu đề </title>
</head>
Phần đầu
trang HTML
<body>
Nội dung 1
Nội dung 2
Nội dung 3
Bắt đầu và
Kết thúc của
trang HTML
Nội dung
trang HTML
</body>
</html>
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
53
Download miễn phí gì cũng có tại ilook.asia
Thẻ
(Tag)
HTML
Các tag (thẻ) cơ bản - phần 1
Thẻ mở
Giá trị thuộc tính
Thẻ đóng
<b style=“color:blue”> Dòng chữ này được in đậm màu xanh </b>
Tên thuộc tính
! Tên thẻ & thuộc tính
! Thường mang tính gợi nhớ
" B ~ Bold, I ~ Italic, P ~ Paragraph
! Không phân biệt HOA thường
! Một số thẻ đơn không có thẻ đóng
<hr>
!
và <hr/>
•
Giá trị Thuộc tính của Thẻ nên đặt trong dấu nháy đơn
‘’ hoặc nháy kép “”
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
54
Download miễn phí gì cũng có tại ilook.asia
Giới
thiệu
về
HTML
–
Thẻ
(Tag)
Các tag (thẻ) cơ bản - phần 1
HTML.Cú pháp
Mã#HTML#
Hiển#thị#
<b>$Đây$là$một$dòng$được$in$Đậm</B>$
Đây#là#một#dòng#được#in#Đậm#
<H3>$Mức$chữ$ở$@êu$đề$3$$
Mã#HTML#
Mức$chữ$ở$@êu$đề$3$$
Hiển#thị#
<font$FACE=‘Arial’$Size=‘3’>$
Hello#World$
$Hello$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$World$
</font>$
Lưu ý :
• Bỏ qua các khoảng trắng thừa và các dấu ngắt dòng, xuống dòng
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
55
Download miễn phí gì cũng có tại ilook.asia
Thực hành cấu trúc HTML đơn giản
CÁC BẠN THỰC HIỆN THEO VIDEO
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
56
Download miễn phí gì cũng có tại ilook.asia
Thực hành cấu trúc HTML đơn giản
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
57
Download miễn phí gì cũng có tại ilook.asia
Các tag xử lý văn bản – Khối,
Các tag (thẻ) cơ bản - phần 1
chuỗi văn bản
! Các thẻ định dạng khối văn bản – Block
Element
! Tiêu đề (Heading) :
, , , , ,
! Đoạn văn bản (Paragraph):
! Danh sách (List Items): <li>
! Đường kẻ ngang (Horizontal Rules): <hr>
! Các thẻ định dạng chuỗi văn bản – Inline
Element
! Định dạng chữ : <span>, <em>, <i>, <b> và <font>
! Tạo siêu liên kết : <a>
! Xuống dòng :
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
58
Download miễn phí gì cũng có tại ilook.asia
Các
tag
xử
lý
văn
bản
–
Ví
dụ
về
Các tag (thẻ) cơ bản - phần 1
Horizontal rules
! HORIZONTAL RULES
! <HR …>
! 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
! <HR noshade size=‘5’ align=‘center’ width=‘40%’></HR>
! <HR size=’15’ align=‘right’ width=‘80%’></HR>
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
59
Download miễn phí gì cũng có tại ilook.asia
Các tag (thẻ) cơ bản - phần 1
Bài tập sử dụng thẻ heading, p, pre, span, Hr, br -‐ Thuộc Gnh STYLE
CÁC BẠN THỰC HIỆN THEO VIDEO
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
60
Download miễn phí gì cũng có tại ilook.asia
Các tag (thẻ) cơ bản - phần 1
Bài tập sử dụng thẻ heading, p, pre, span, Hr, br -‐ Thuộc Gnh STYLE
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
61
Download miễn phí gì cũng có tại ilook.asia
Tag hình ảnh <img>
<img>: không có thẻ đóng
Các thuộc tính của thẻ <img>
• src: Đường dẫn tới file ảnh
• alt : Chú thích cho hình ảnh
• border: Độ dày nét viền quanh ảnh
Đặt ảnh nền cho trang web
Sử dụng thẻ
dẫn hình ảnh’>
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học lập
trình
trựcKỸ
tuyến
tại myclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
CAO
ĐẲNG
THUẬT
CAO THẮNG
62
Download miễn phí gì cũng có tại ilook.asia
Các
tag
Danh
sách
Các tag về danh sách
Kiểu#danh#sách#
Thẻ#
Phần#tử#trong#DS#
Danh$sách$có$thứ$tự$
<OL>
<Li>
Danh$sách$không$có$thứ$tự$
<UL>
<Li>
Danh$sách$tự$định$nghĩa$
<DL>
<Dt>, <Di>
Danh$sách$lồng$nhau$
Dạng$khác$
<menu>
<dir>
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
63
Download miễn phí gì cũng có tại ilook.asia
Danh sách có thứ tự - <OL>
Danh sách có thứ tự <OL>
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
64
Download miễn phí gì cũng có tại ilook.asia
Danh sách có thứ tự - <OL>
Danh sách có thứ tự <OL> (tt)
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
65
Download miễn phí gì cũng có tại ilook.asia
Danh
sách
không
có
thứ
tự
<UL>
Danh sách có KHÔNG có thứ tự <UL>
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
66
Download miễn phí gì cũng có tại ilook.asia
Thẻ (tag) liên kết - thẻ <a>- anchor
Cú pháp :
<a href=“URL” target=“…”> Linked content </a>
Thuộc tính target của thẻ <a>
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ụ :
06/03/2014
Phát triển ứng dụng web
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
41
67
Download miễn phí gì cũng có tại ilook.asia
Phân loại liên kết
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)
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
68
Download miễn phí gì cũng có tại ilook.asia
Liên kết ngoại (External - link)
<a href=“URL”>
Text đại diện </a>
…………………
…………………
…………………
Bài học 2
…………………
…………………
Trang hiện tại
Click
chuột
…………………
…………………
…………………
…………………
…………………
…………………
Trang có địa chỉ
xác định từ URL
baihoc2.htm
baihoc1.htm
06/03/2014
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lậpPhát
trình
trực
tuyến
tạiweb
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
triển
ứng
dụng
TRƯỜNG
ĐẲNG
KỸ
THUẬT
CAO
THẮNG
43
69
Download miễn phí gì cũng có tại ilook.asia
Liên kết nội (Internal - link)
<a name="TenViTri"> Vi tri bat dau
</a>
<a href="#TenViTri"> Text đại diện
</a>
Nội
dung
trang
khi
chưa
liên
kết
06/03/2014
…………………
…………………
Text đại diện
…………………
…………………
…………………
…………………
Vi tri bat dau
.…abcdefgh…
...01234567…
.…………………
Click
chuột
.…………………
.…………………
Text đại diện
…………………
…………………
…………………
…………………
Vi tri bat dau
.…abcdefgh…
...01234567…
.…………………
.…………………
.…………………
.…………………
.…………………
Phát triển ứng dụng web
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
Nội
dung
trang
khi
bấm
liên
kết
44
70
Download miễn phí gì cũng có tại ilook.asia
Liên kết Email
…………………
…………………
…………………
Click
chuột
Liên hệ Admin
…………………
…………………
<a href="mailto:emailAddress">Liên hệ Admin</a>
06/03/2014
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập
trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Phát
triển
ứng
dụng web
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
45
71
Download miễn phí gì cũng có tại ilook.asia
Thẻ
liên
kết
trang
Thẻ liên kết trang
• Thẻ liên kết trang – phân loại địa chỉ URL
<a href=“URL” target=„……‟>Linked content </a>
– Đị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ứa liên kết.
– Một số ký hiệu đường dẫn đặc biệt:
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
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
72
Download miễn phí gì cũng có tại ilook.asia
Thẻ
liênliên
kết trang
Thẻ
kết trang
• Thẻ liên kết trang – phân loại địa chỉ URL
# 127.0.0.1/demo
• File A có link đến B, vậy trong file A có HTML element
<a href=“URL”>liên kết đến B</a>
http://127.0.0.1/demo/Thu muc 1/file B.htm
/demo/Thu muc 1/file B.htm
./Thu muc 1/file B.htm
Thu muc 1/file B.htm
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Học CAO
lập trình
trực
tạiCAO
itclass.vn
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
TRƯỜNG
ĐẲNG
KỸtuyến
THUẬT
THẮNG
73
