Chủ đề nóng: Phương pháp kỷ luật tích cực - Cổ học tinh hoa - Những thói hư tật xấu của người Việt - Công lý: Việc đúng nên làm - Giáo án Điện tử - Sách giáo khoa - Học tiếng Anh - Bài giảng trực tuyến - Món ăn bài thuốc - Chăm sóc bà bầu - Môi trường - Tiết kiệm điện - Nhi khoa - Ung thư - Tác hại của thuốc lá - Các kỹ thuật dạy học tích cực
- Dạy học phát triển năng lực - Chương trình giáo dục phổ thông
Học ngôn ngữ HTML
Từ VLOS
HTML là chữ viết tắt của Hyper Text Markup Language (Ngôn ngữ đánh dấu siêu văn bản), và là loại mã hay ngôn ngữ được sử dụng để tạo nên các trang web. Có thể hơi nản lòng một chút nếu bạn chưa từng viết mã bao giờ trước đây, nhưng tất cả những gì bạn cần để thử làm là một chương trình biên tập văn bản đơn giản và một trình duyệt internet. Bạn thậm chí có thể nhận ra vài HTML được sử dụng để thay đổi kiểu chữ trên các diễn đàn trực tuyến, trong các hồ sơ trực tuyến được tùy biến, hoặc trong các bài viết của wikiHow. HTML là một công cụ hữu ích cho bất cứ ai sử dụng internet, việc học những thứ căn bản về HTML có thể mất ít thời gian hơn là bạn nghĩ.
Mục lục
Các bước[sửa]
Tìm hiểu HTML Cơ bản[sửa]
-
Mở
một
tài
liệu
HTML.
Hầu
hết
các
chương
trình
biên
tập
văn
bản,
bao
gồm
Notepad
hay
Microsoft
Word
(dành
cho
hệ
điều
hành
Windows)
và
TextEdit
(dành
cho
hệ
điều
hành
Mac),
đều
có
thể
được
sử
dụng
để
viết
tài
liệu
HTML.
Mở
một
tài
liệu
mới
và
dùng
File
→
Save
As
trong
trình
đơn
trên
cùng
để
lưu
nó
dưới
dạng
"Web
Page",
(Trang
Web)
hoặc
để
thay
đổi
phần
mở
rộng
của
tập
tin
thành
".html"
hoặc
".htm"
thay
vì
".doc",
".rtf",
hoặc
bất
cứ
phần
mở
rộng
nào
khác.
- Bạn có thể sẽ thấy một cảnh báo rằng tài liệu của bạn sẽ bị thay đổi thành “plain text” (văn bản thuần túy) thay vì “rich text” (văn bản giàu tính chất), hoặc là thông báo kiểu định dạng và hình ảnh đặc biệt sẽ không được lưu một cách thích hợp. Điều này là bình thường, các tài liệu HTML không cần sử dụng các tùy chọn đó.
- Không có gì khác biệt giữa các tập tin .html và .htm. Cả hai đều hoạt động được.[1]
-
Xem
tài
liệu
của
bạn
bằng
một
trình
duyệt
internet.
Lưu
tài
liệu
trống
của
bạn
lại,
rồi
tìm
biểu
tượng
tài
liệu
này
trên
máy
tính
của
bạn
và
nhấp
đúp
để
mở
nó.
Nó
sẽ
mở
ra
như
một
trang
trống
trong
trình
duyệt.
Nếu
không
bạn
hãy
kéo
biểu
tượng
của
tập
tin
đó
vào
thanh
địa
chỉ
URL
trên
trình
duyệt.
Khi
bạn
biên
tập
tài
liệu
HTML
của
bạn
trong
bài
hướng
dẫn
này,
bạn
có
thể
liên
tục
kiểm
tra
lại
và
xem
trang
web
của
bạn
thay
đổi
thế
nào.
- Lưu ý rằng việc này không thực sự tạo ra một trang web trực tuyến. Người khác sẽ không thể truy cập tới nó, và bạn cũng không cần một kết nối internet nào để kiểm tra cả. Chỉ cần dùng một trình duyệt để “đọc” tài liệu HTML của bạn như thể nó là một trang web.
-
Tìm
hiểu
các
thẻ
đánh
dấu.
Các
thẻ
đánh
dấu
không
thể
hiện
ra
trên
một
trang
web
như
văn
bản
bình
thường.
Thay
vào
đó,
chúng
sẽ
cho
trình
duyệt
web
biết
cách
hiển
thị
trang
và
các
nội
dung
của
nó.
“Start
tag”
(Thẻ
bắt
đầu)
chứa
các
chỉ
dẫn.
Ví
dụ,
nó
có
thể
chỉ
cho
trình
duyệt
biết
hiển
thị
văn
bản
theo
kiểu
bold
(in
đậm).
Bạn
cũng
cần
môt
“end
tag”
(Thẻ
kết
thúc)
để
cho
trình
duyệt
biết
các
chỉ
dẫn
được
áp
dụng
vào
đâu:
trong
ví
dụ
này,
tất
cả
văn
bản
nằm
giữa
thẻ
bắt
đầu
và
thẻ
kết
thúc
sẽ
được
in
đậm.
Thẻ
kết
thúc
cũng
được
viết
bên
trong
dấu
ngoặc
nhọn,
nhưng
được
bắt
đầu
bằng
một
dấu
gạch
chéo
sau
dấu
ngoặc
đầu
tiên.
-
Viết
các
thẻ
bắt
đầu
ở
giữa
các
dấu
ngoặc
nhọn:
<thẻ bắt đầu đặt ở đây> -
Viết
các
thẻ
kết
thúc
ở
giữa
các
dấu
ngoặc
nhọn,
nhưng
đặt
một
dấu
gạch
chéo
ngay
sau
dấu
ngoặc
đầu
tiên:
</thẻ kết thúc đặt ở đây>) - Tiếp tục đọc để biết cách viết các thẻ đánh dấu chức năng. Ở bước này, những gì bạn cần nhớ là định dạng cơ bản mà chúng được viết bên trong: < > và </ >
- Nếu bạn sử dụng các hướng dẫn HTML khác, bạn có thể thấy các thẻ còn được gọi là "elements" (các thành phần) và văn bản giữa các thẻ bắt đầu và kết thúc là "element content." (nội dung thành phần)
-
Viết
các
thẻ
bắt
đầu
ở
giữa
các
dấu
ngoặc
nhọn:
-
Hãy
viết
thẻ
<html>
đầu
tiên
của
bạn.
Mỗi
tài
liệu
html
đều
bắt
đầu
với
một
thẻ
<html>và kết thúc với một thẻ</html>. Nó cho trình duyệt biết rằng mọi thứ giữa các thẻ này là văn bản HTML. Thêm các thẻ này vào tài liệu của bạn:- Viết <html> ở đầu tài liệu của bạn.
- Nhấn enter hoặc return vài lần để tạo vài khoảng trống, rồi viết </html>
- Hãy nhớ viết mọi thứ khác trong hướng dẫn này ở giữa hai thẻ này.
-
Thêm
phần
<head>
cho
tài
liệu
của
bạn.
Ở
giữa
các
thẻ
<html>
và
</html>,
viết
một
thẻ
bắt
đầu
<head>
và
một
thẻ
kết
thúc
</head>.
Lưu
ý
tạo
khoảng
trống
để
viết
giữa
chúng.
Bản
thân
mọi
thứ
nằm
giữa
các
thẻ
head
này
sẽ
không
thực
sự
hiển
thị
trên
trang
web.
Hãy
thử
làm
bước
sau
đây
và
xem
xem
nó
hiển
thị
ở
đâu:
- Giữa các thẻ <head> và </head>, viết <title> và </title>
- Giữa các thẻ <title> và </title>, viết Cách để Học HTML - wikiHow.
- Lưu tài liệu lại rồi mở nó trong một trình duyệt (hoặc lưu tài liệu, rồi làm mới trang trình duyệt đã được mở sẵn). Bạn có thấy những gì bạn viết nằm ở trên cùng của trình duyệt, bên trên thanh địa chỉ hay không?
-
Tạo
một
phần
<body>.
Mọi
thứ
còn
lại
trong
tài
liệu
khởi
đầu
này
đều
nằm
trong
phần
body
(phần
thân),
chính
là
những
thứ
hiển
thị
trên
trang
web.
Sau
thẻ
kết
thúc
</head>,
nhưng
trước
thẻ
</html>,
hãy
viết
<body>
và
</body>.
Trong
phần
còn
lại
của
bài
hướng
dẫn
này,
mọi
thứ
bạn
viết
sẽ
nằm
giữa
các
thẻ
body
(phần
thân)
này.
Đến
lúc
này
bạn
sẽ
có
một
tài
liệu
trông
giống
như
sau
(bỏ
qua
các
dấu
gạch
đầu
dòng):
- <html>
- <head>
- <title>Cách học HTML - wikiHow</title>
- </head>
- <body>
- </body>
- </html>
-
Thêm
văn
bản
theo
các
kiểu
khác
nhau.
Giờ
đã
đến
lúc
để
viết
vài
thứ
mà
bạn
có
thể
nhìn
thấy
thực
sự
trong
trình
duyệt
của
bạn!
Mọi
thứ
bạn
viết
bên
trong
các
thẻ
body
(thân)
sẽ
hiển
thị
trên
trình
duyệt
của
bạn
sau
khi
bạn
lưu
tài
liệu
HTML
lại
và
làm
mới
trang
trình
duyệt.
Tuy
nhiên
Đừng
viết
bất
cứ
thứ
gì
có
các
biểu
tượng
<
hoặc
>,
vì
trình
duyệt
của
bạn
sẽ
cố
dịch
nó
thành
một
chỉ
dẫn
HTML
thay
vì
là
văn
bản
bình
thường.
Hãy
thử
viết
Xin
chào
thế
giới!
(hoặc
bất
cứ
điều
gì
bạn
thích),
rồi
thêm
các
thẻ
mới
này
xung
quanh
nó
để
xem
chuyện
gì
xảy
ra
mỗi
lần
thực
hiện:
-
<em>Xin chào thế giới!</em>sẽ hiển thị là "văn bản in nghiêng:" Xin chào thế giới! -
<strong>Xin chào thế giới!</strong>sẽ hiển thị là "văn bản in đậm:" Xin chào thế giới! -
<s>Xin chào thế giới!</s>sẽ hiển thị với một gạch ngang:Xin chào thế giới! -
<sup>Xin chào thế giới!</sup>sẽ hiển thị như là chữ viết bên trên: Xin chào thế giới! -
<sub>Xin chào thế giới!</sub>sẽ hiển thị như là chữ viết bên dưới: Xin chào thế giới! -
Thử
kết
hợp
như
sau:
Chữ
<em><strong>Xin chào thế giới!</strong></em>trông thế nào?
-
-
Chia
văn
bản
của
bạn
ra
thành
các
đoạn.
Nếu
bạn
thử
viết
vài
dòng
văn
bản
trong
tài
liệu
HTML
của
bạn,
bạn
có
thể
để
ý
là
các
đoạn
ngắt
dòng
không
hiển
thị
trên
trình
duyệt.
Bạn
phải
viết
thêm
mã
cho
thao
tác
này:
-
<p>Đây là đoạn văn bản tách biệt.</p> -
Câu này được theo sau bởi một ngắt dòng.<br>trước khi câu này bắt đầu.
Đây là thẻ đầu tiên bạn thấy mà không cần một thẻ kết thúc! Chúng được gọi là "empty tags" (các thẻ trống). -
Tạo
đề
mục
để
hiển
thị
tên
của
các
mục:
<h1>văn bản đề mục</h1>: đề mục lớn nhất
<h2>văn bản đề mục</h2>(đề mục mức số 2)
<h3>văn bản đề mục</h3>(đề mục mức số 3)
<h4>văn bản đề mục</h4>(đề mục mức số 4)
<h5>văn bản đề mục</h5>(đề mục nhỏ nhất)
-
-
Học
cách
tạo
các
danh
sách.
Có
nhiều
cách
khác
nhau
để
viết
các
danh
sách
lên
trang
web.
Hãy
thử
các
kiểu
mã
sau
và
xem
kiểu
nào
bạn
thích.
Lưu
ý
rằng
một
cặp
thẻ
sẽ
bao
trọn
một
danh
sách
(chẳng
hạn
các
thẻ
<ul>
và
</ul>
cho
"các
danh
sách
không
có
thứ
tự"),
trong
khi
các
mục
đơn
lẻ
trong
danh
sách
được
bao
bởi
một
cặp
thẻ
khác,
chẳng
hạn
<li>và</li>.
-
Sử
dụng
mã
này
để
tạo
các
danh
sách
có
gạch
đầu
dòng:
<ul><li>Một mục</li><li>Một mục khác</li><li>Một mục khác</li></ul> -
Hoặc
dùng
mã
này
để
tạo
các
danh
sách
đánh
số
thứ
tự:
<ol><li>Mục 1</li><li>Mục 2</li><li>Mục 3</li></ol> -
Hoặc
dùng
mã
này
để
tạo
một
danh
sách
định
nghĩa
các
thuật
ngữ:
<dl><dt>Cà phê</dt><dd>- Thức uống nóng</dd><dt>Leite</dt><dd>- Thức uống lạnh</dd></dl>
-
Sử
dụng
mã
này
để
tạo
các
danh
sách
có
gạch
đầu
dòng:
-
Làm
đẹp
cho
trang
của
bạn
với
các
dấu
ngắt
dòng,
các
đường
kẻ
ngang,
và
các
bức
ảnh.
Giờ
là
lúc
thử
thêm
những
thứ
khác
ngoài
văn
bản
vào
trang
của
bạn.
Hãy
thử
các
thẻ
sau,
hoặc
nhấn
vào
các
liên
kết
để
có
thêm
thông
tin.
Bạn
sẽ
cần
đến
một
dịch
vụ
đặt
ảnh
trực
tuyến
để
có
một
URL
để
liên
kết
tới
thẻ
ảnh:
-
Thêm
một
dòng
trong
HTML:
<br>hoặc<hr> -
Thêm
ảnh:
<img src="URL_ảnh_của_bạn">
-
Thêm
một
dòng
trong
HTML:
-
Liên
kết
tới
các
vị
trí
khác
trên
trang.
Bạn
còn
có
thể
sử
dụng
mã
này
để
liên
kết
tới
các
trang
khác
và
các
trang
web.
Nhưng
lúc
này,
vì
bạn
còn
chưa
có
một
trang
web,
nên
chúng
ta
sẽ
tập
trung
vào
các
“anchor”
(các
văn
bản
có
chứa
liên
kết)
hay
là
các
nơi
cụ
thể
trên
trang
mà
bạn
có
thể
liên
kết
tới:
-
Tạo
một
anchor
với
thẻ
<a>
tại
vị
trí
trên
trang
mà
bạn
muốn
liên
kết
tới.
Đặt
cho
nó
một
cái
tên
phân
biệt
và
dễ
nhớ:
<a name="Lời khuyên">Đây là văn bản bao quanh bằng anchor.</a> -
Sử
dụng
<href>
để
liên
kết
tới
các
anchor
đó
hoặc
tới
trang
web
khác:
<a href="URL của trang web, hoặc tên của anchor bên trong trang này">Viết đoạn văn bản hoặc hình ảnh được hiển thị như liên kết ở đây.</a> - Để liên kết tới một anchor trên một trang web khác, thêm dấu # vào sau URL, theo sau là tên của anchor. Ví dụ, http://www.wikihow.com/Learn-HTML#Lờikhuyên sẽ liên kết tới mục Lời khuyên của trang này.
-
Tạo
một
anchor
với
thẻ
<a>
tại
vị
trí
trên
trang
mà
bạn
muốn
liên
kết
tới.
Đặt
cho
nó
một
cái
tên
phân
biệt
và
dễ
nhớ:
Tìm hiểu thêm về HTML nâng cao[sửa]
-
Tìm
hiểu
về
các
thuộc
tính.
Các
thuộc
tính
được
đặt
bên
trong
bản
thân
các
thẻ
sẽ
tạo
thêm
sự
biến
đổi
đối
với
"nội
dung
thành
phần"
nằm
giữa
thẻ
bắt
đầu
và
kết
thúc.
Chúng
không
bao
giờ
đứng
một
mình.
Chúng
được
viết
dưới
dạng
name="value",
trong
đó
name
là
tên
của
thuộc
tính
(ví
dụ
"color"
–
màu
sắc),
và
value
(giá
trị)
mô
tả
cụ
thể
giá
trị
của
“color”
(ví
dụ
"red"
–
màu
đỏ).
- Thực sự thì bạn đã nhìn thấy các thông số trước đó, nếu bạn đã thực hiện hướng dẫn trong mục HTML cơ bản ở trên. Các thẻ <img> sử dụng thuộc tính src, các anchor sử dụng thuộc tính name, và các liên kết sử dụng thuộc tính href. Bạn đã thấy chúng tuân theo định dạng ___="___" chưa?
-
Thử
nghiệm
với
các
bảng
trong
HTML.
Việc
tạo
bảng
biểu,
đòi
hỏi
sử
dụng
nhiều
thẻ
khác
nhau.
Hãy
thử
nghịch
qua
các
thẻ
này,
hoặc
học
chi
tiết
hơn
về
các
bảng
của
HTML.
-
Bắt
đầu
với
các
thẻ
bảng
xung
quanh
toàn
bộ
bảng:
<table></table> -
Các
thẻ
hàng
bao
quanh
nội
dung
mỗi
hàng:
<tr> -
Các
đề
mục
cột
trong
hàng
đầu
tiên:
<th> -
Các
ô
trong
các
hàng
tiếp
theo:
<td> -
Đây
là
một
ví
dụ
về
cách
chúng
kết
hợp
với
nhau:
<table><tr><th>Cột 1: Tháng</th><th>Cột 2: Tiền tiết kiệm được</th></tr><tr><td>Tháng Một</td><td>$100</td></tr></table>
-
Bắt
đầu
với
các
thẻ
bảng
xung
quanh
toàn
bộ
bảng:
-
Học
các
thẻ
head
(phần
đầu)
hỗn
hợp.
Bạn
đã
học
về
thẻ
<head>,
thẻ
này
xuất
hiện
ở
phần
đầu
của
mỗi
tài
liệu.
Bên
cạnh
thẻ
<title>,
nó
còn
có
thể
bao
gồm
các
kiểu
thẻ
sau:
- Các thẻ Meta, được sử dụng để cung cấp metadata (siêu dữ liệu) về một trang web. Dữ liệu này có thể được sử dụng bởi các công cụ tìm kiếm khi robot (các chương trình tự động) xới tung internet để định vị và liệt kê các trang web. Để làm cho trang web của bạn dễ được công cụ tìm kiếm nhìn thấy hơn, hãy sử dụng một hoặc nhiều hơn các thẻ bắt đầu <meta> (không cần thiết có thẻ kết thúc), mỗi thẻ với chính xác là một thuộc tính tên và một thuộc tính nội dung, ví dụ: <meta name="description" content="viết một mô tả ở đây">; hoặc <meta name="keywords" content="viết một danh sách các từ khóa, cách nhau bằng một dấu phẩy">
- Các thẻ <link> được sử dụng để kết hợp các tập tin khác với trang web. Nó thường được dùng để liên kết tới các tầng định dạng CSS được tạo ra bằng một kiểu viết mã khác nhằm biến đổi trang HTML của bạn bằng cách thêm màu sắc, căn chỉnh văn bản, và nhiều thứ khác.
- Các thẻ <script> được dùng để liên kết trang web tới các tập tin JavaScript là loại tập tin tạo ra sự tương tác với người dùng và có thể khiến trang web thay đổi khi người dùng tương tác với nó.
-
Hãy
thử
nghịch
với
HTML
tìm
thấy
trên
các
trang
web.
Một
cách
hay
để
mở
rộng
kiến
thức
của
bạn
là
nhìn
vào
mã
nguồn
HTML
của
các
trang
web.
Bạn
có
thể
làm
việc
này
bằng
cách
nhấn
chuột
phải
vào
trang
web
bất
kỳ
rồi
chọn
"View
Source"
(Xem
Mã
nguồn),
"View
Page
Source"
(Xem
Mã
nguồn
Trang),
hoặc
một
tùy
chọn
tương
tự,
hoặc
vào
mục
View
(Hiển
thị)
trong
trình
đơn
ở
trên
cùng
của
trình
duyệt.
Hãy
thử
tìm
hiểu
thêm
xem
mỗi
thẻ
HTML
mà
bạn
chưa
quen
có
chức
năng
gì,
hoặc
tìm
kiếm
nó
trên
mạng
để
có
câu
trả
lời.
- Trong khi không thể biên tập các trang web của người khác, bạn có thể sao chép HTML mà bạn tìm thấy về làm tài liệu của riêng mình, rồi nghịch thử chúng để xem các tùy chọn khác nhau có chức năng gì. Lưu ý là nếu không có tập tin định dạng CSS mà trang web liên kết tới, bạn có thể không thấy được mọi màu sắc hoặc định dạng trên trang.
- Tìm hiểu thêm về thiết kế web nâng cao từ các hướng dẫn toàn diện. Có nhiều nguồn phong phú trên mạng internet mà bạn có thể dùng để học thêm về nhiều thẻ HTML khác, chẳng hạn W3Schools hoặc Codecademy. Bạn cũng có thể tìm các cuốn sách hướng dẫn HTML, nhưng hãy chắc chắn là bạn dùng sách phát hành trong một hai năm gần đây, bởi thường hay có sự cập nhật và thay đổi. Tốt hơn nữa là học CSS để kiểm soát được nhiều hơn giao diện và hình thức trang web của bạn. Khi đã rành về CSS, bước tiếp theo đối với các chuyên gia thiết kế web thường là Javascript.
Lời khuyên[sửa]
- Bạn có thể thích tìm một trang web đơn giản trên mạng internet, và nghịch với mã của nó. Hãy thử dịch chuyển một số văn bản, thay đổi kiểu chữ, thay thế ảnh, hoặc bất cứ thứ gì bạn thích!
- Bạn có thể kiếm một quyển sổ tay và viết lại tất cả các mã, để nếu bạn cần nhớ đến chúng, bạn chỉ việc mở sổ tay ra và xem. Bạn cũng có thể in trang này ra như một tài liệu tham khảo hữu ích.
- XML và RSS ngày càng trở nên phổ biến trên các trang web ngày nay. Mã của chúng có thể khó đọc và hiểu đối với người quan sát, đặc biệt là khi xem trên một tập tin mã nguồn HTML, nhưng chúng lại tạo ra những hiệu quả riêng đối với các trang web đó.
- Khi viết mã, hãy đảm bảo là bạn viết chúng một cách gọn gàng, để bạn và người khác có thể hiểu nó. Hãy dùng <!-- Thêm nhận xét vào đây --> để ghi nhận các nhận xét dạng HTML, là những nhận xét không hiển thị lên trang web mà chỉ hiển thị trong phần mã.
- Notepad++ là một chương trình tuyệt vời, miễn phí hoạt động giống như một chương trình notepad bình thường, nhưng bạn có thể lưu và kiểm tra mã của bạn trực tiếp trên một trình duyệt. (Nó còn cho phép hầu hết mọi ngôn ngữ viết mã HTML, CSS, python, Javascript,…)
- Bản thân các thẻ đánh dấu trong HTML không phân biệt chữ hoa chữ thường, nhưng việc sử dụng toàn bộ chữ thường (như ở trong trang này) được khuyên dùng nhằm mục đích tiêu chuẩn hóa và để tương thích với (ngôn ngữ viết) XHTML.[2]
Cảnh báo[sửa]
- Một số thẻ đã không được tán thành trong những năm gần đây và được thay thế bằng những lựa chọn khác để tạo các hiệu ứng như nhau, và thậm chí bổ sung thêm các hiệu ứng khác nhau, nếu bạn muốn.
- Nếu bạn hứng thú với việc làm cho các trang của bạn hợp lệ, hãy tới trang web W3 và học HTML hợp lệ! Các tiêu chuẩn HTML thay đổi theo thời gian, và một vài thẻ được thay thế bằng các thẻ khác có thể làm việc tốt hơn trên các trình duyệt hiện đại.
Những thứ Bạn cần[sửa]
- Một chương trình biên tập văn bản, ví dụ như Notepad (dành cho hệ điều hành Windows), hoặc TextEdit (dành cho hệ điều hành Mac)
- Một cuốn sổ chép tay (không bắt buộc)
- Một chương trình biên tập HTML như Notepad++ (dành cho hệ điều hành Windows) hoặc TextWrangler (dành cho hệ điều hành Mac) (không bắt buộc)
