HTML CƠ BẢN | PHẦN 1 |Tìm hiểu về ngôn 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 (1.19 MB, 54 trang )
Hướng dẫn cách tạo & chạy một tập tin HTML
1) Giới thiệu công cụ soạn thảo mã HTML
- Ngày nay có rất nhiều cơng cụ hiện đại hỗ trợ việc soạn thảo mã HTML, ví dụ như: Adobe Dreamweaver, CoffeeCup, TextWrangler, Sublime Text, . . . . Tuy nhiên, các
công cụ này thường tương đối phức tạp, chúng chỉ thích hợp với những người đã thơng thạo về lập trình web, còn đối với những người mới học HTML giống như chúng ta
thì tốt nhất là nên dùng các cơng cụ soạn thảo thuần văn bản, một mặt nó sẽ giúp ta rèn luyện kỹ năng gõ mã lệnh, mặt khác chúng ta có thể ghi nhớ được tên của từng loại
thẻ.
- Mà nói đến trình soạn thảo thuần văn bản thì tơi xin giới thiệu đến các bạn một cơng cụ có sẵn trên máy tính cài hệ điều hành Windows, đó chính là Notepad (tùy vào phiên
bản mà cách mở sẽ khác nhau, nhưng nếu các bạn đang dùng Windows 7 thì các bạn có thể mở bằng cách vào Start rồi gõ từ khóa Notepad)
2) Cách tạo một tập tin HTML
- Để tạo một tập tin HTML thì chúng ta thực hiện lần lượt các bước như sau:
- Bước 1: Mở trình soạn thảo thuần văn bản Notepad lên.
- Bước 2: Nhập những nội dung mà các bạn muốn chúng được hiển thị trên trang web.
- Bước 3: Lưu tập tin.
1.
Bấm vào nút File rồi chọn Save As.
2.
Chọn thư mục muốn lưu tập tin.
3.
Đặt tên cho tập tin.
4.
Chỗ Encoding chọn UTF-8.
5.
Cuối cùng, bấm nút Save để lưu lại.
- MỘT SỐ ĐIỀU CẦN LƯU Ý:
o
Tên của tập tin tuyệt đối không được chứa dấu khoảng trắng & các ký tự đặc biệt.
o
Tên của tập tin phải có phần đi là .html hoặc .htm. Tuy nhiên, phần đi .htm có một số hạn chế, nên chúng tơi khuyến khích các bạn sử dụng phần
đi .html
o
Chỗ Encoding chọn UTF-8 là một bước vô cùng quan trọng, kiểu mã hóa UTF-8 sẽ giúp cho trang web hiển thị ngơn ngữ tiếng Việt được chính xác.
3) Cách chạy (thực thi) một tập tin HTML
- Thực ra thì cách chạy một tập tin HTML khá là đơn giản, chúng ta có thể di chuyển thẳng đến thư mục chứa tập tin, sau đó nhấp chuột phải vào nó rồi chọn một trình duyệt
để mở.
- Hoặc nhấp vào thanh địa chỉ của trình duyệt rồi bấm tổ hợp hợp phím Ctrl + O
- Sau đó, chọn tập tin HTML mà mình muốn mở rồi bấm "Open"
- Nếu trình duyệt hiển thị giống như hình bên dưới thì tức là các bạn đã làm thành cơng.
Cấu trúc cơ bản của một tập tin HTML
- Thông thường thì bất kỳ một thứ gì cũng có một cái cấu trúc cơ bản mà nó phải tuân theo để đảm bảo việc nó có thể hoạt động được ổn định (ví dụ như một bài văn thường
có cấu trúc gồm ba phần mở bài - thân bài - kết luận, nếu chúng ta loại bỏ đi một thành phần nào đó hoặc xáo trộn thứ tự giữa ba thành phần thì nội dung của bài văn sẽ
khơng được trơn tru mạch lạc). Việc viết mã lệnh trong một tập tin HTML cũng tương tự như vậy, nó cần phải tuân thủ theo một cấu trúc cơ bản để đảm bảo trang web được
hiển thị như ý, tránh mắc phải những lỗi khơng đáng có.
1) Cấu trúc của một tập tin HTML
- Nội dung của một tập tin HTML phải được bắt đầu bằng thẻ <html> và kết thúc bởi thẻ </html>.
- Bên trong cặp thẻ <html></html> được chia làm hai thành phần chính:
o
Phần head được bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head>, nó dùng để chứa tiêu đề và các thẻ khai báo thông tin cho trang web.
o
Phần body được bắt đầu bằng thẻ <body> và kết thúc bởi thẻ </body>, nó dùng để chứa những nội dung mà chúng ta muốn hiển thị trên trang web.
- Dưới đây là hình ảnh minh họa về cấu trúc cơ bản của một tập tin HTML.
- Tơi có một tập tin HTML với nội dung như bên dưới.
<html>
<head>
<title>Hello WEB CƠ BẢN</title>
<meta charset="utf-8">
</head>
<body>
1) Tài liệu học HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2) Tài liệu học CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3) Tài liệu học JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</body>
</html>
- Khi thực thi tập tin này thì trình duyệt sẽ hiển thị là.
- Lưu ý: Thẻ <meta charset="utf-8"> có chức năng tương tự như việc chúng ta chọn kiểu mã hóa UTF-8 khi tạo một tập tin HTML, nó sẽ giúp cho trang web hiển thị ngơn
ngữ tiếng Việt được chính xác.
2) Cấu trúc của một tập tin HTML5
- Cái cấu trúc của tập tin HTML mà tôi hướng dẫn cho các bạn ở phía trên là cấu trúc của phiên bản HTML đầu tiên. Hiện nay, HTML đã cho ra phiên bản mới nhất là
HTML5, phiên bản này hỗ trợ thêm một số thẻ mới cùng với những tính năng vượt trội hơn.
- Để sử dụng phiên bản HTML5 thì ta thêm thẻ <!DOCTYPE html> vào vị trí đầu tiên bên trong tập tin.
<!DOCTYPE html>
<html>
<head>
<title>Hello WEB CƠ BẢN</title>
<meta charset="utf-8">
</head>
<body>
1) Tài liệu học HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2) Tài liệu học CSS
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3) Tài liệu học JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</body>
</html>
Các vấn đề liên quan đến đoạn văn bản trong HTML
1) Cách tạo một đoạn văn bản
- Trong HTML, văn bản thường được thể hiện dưới dạng từng đoạn. Mỗi đoạn văn bản sẽ có một khoảng cách lề phía trên & lề phía dưới (mặc định là 16 pixel) để tách biệt
đoạn văn bản với các nội dung nằm ở phía trên và phía dưới nó.
- Ví dụ: Trang web bên dưới có ba đoạn văn bản, nhìn kỹ thì các bạn sẽ thấy ba đoạn văn bản này được tách biệt rất rõ ràng, đó chính là nhờ vào khoảng cách lề 16 pixel nằm
giữa chúng.
- Để tạo được một đoạn văn bản thì chúng ta cần phải sử dụng thẻ
(dưới đây là đoạn mã dùng để tạo trang web giống như hình minh họa phía trên)
2) Vấn đề khoảng trắng
- Khi chúng ta soạn thảo một đoạn văn bản, nằm giữa mỗi hai ký tự chỉ được phép tồn tại tối đa một dấu khoảng trắng, nếu chúng ta sử dụng phím Space để nhập nhiều dấu
khoảng trắng liên tiếp thì khi hiển thị lên màn hình, trình duyệt sẽ loại bỏ những dấu khoảng trắng dư thừa.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
Tài liệu
hướng
dẫn
học
lập trình
web
</body>
</html>
Xem ví dụ
- Để khắc phục việc muốn hiển thị nhiều dấu khoảng trắng nằm giữa hai ký tự thì chúng ta thay thế phím Space bằng chuỗi ký tự (một chuỗi ký tự sẽ tương
ứng với một khoảng trắng)
Ví dụ:
- Nằm giữa chữ Lập & chữ Trình có 3 dấu khoảng trắng.
- Nằm giữa chữ Trình & chữ Web có 5 dấu khoảng trắng.
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
Lập Trình Web
</body>
</html>
Xem ví dụ
3) Vấn đề ngắt xuống dịng
- Trong ngơn ngữ HTML, chúng ta khơng thể sử dụng phím Enter với mục đích hiển thị dấu ngắt xuống dịng, nếu các bạn dùng phím Enter để nhập dấu ngắt xuống dịng thì
khi hiển thị lên màn hình, trình duyệt cũng chỉ xem nó như một dấu khoảng trắng.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
Tài
liệu
hướng
dẫn
học lập trình web
</body>
</html>
Xem ví dụ
- Để hiển thị dấu ngắt xuống dịng thì chúng ta phải sử dụng thẻ
- Lưu ý: Mỗi một thẻ
sẽ tương ứng với một dấu ngắt xuống dịng.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
Tài
liệu
hướng
dẫn
học lập trình web
</body>
</html>
Xem ví dụ
4) Canh lề cho đoạn văn bản
- Tương tự như trong Microsoft Word. Trong HTML, chúng ta cũng có thể canh lề cho một đoạn văn bản.
Canh văn bản nằm bên trái
Canh văn bản nằm giữa
Canh văn bản nằm bên phải
Canh đều hai bên trái phải
- Để canh lề cho một đoạn văn bản thì chúng ta thêm thuộc tính align vào bên trong thẻ
.
- Cú pháp:
- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:
left
center
- Văn bản được canh nằm bên trái
Xem
- Văn bản được canh nằm giữa
ví
right
justify
- Văn bản được canh nằm bên phải
dụ
- Văn bản được canh đều hai bên trái phải
- Lưu ý: Mặc định thì văn bản được canh nằm phía bên trái. Cho nên việc canh lề cho văn bản nằm phía bên trái là điều khơng cần thiết.
Thẻ tiêu đề (heading) trong HTML
- Thông thường, khi chúng ta xem một bài viết trên các trang tin tức hoặc trang blog thì chúng ta sẽ thấy bên trong bài viết có những dịng chữ (nổi bật hơn văn bản bình
thường) được dùng để đại diện cho các nội dung chính, những dịng chữ đó được gọi là tiêu đề (đề mục) của bài viết.
- Ví dụ: Trang web bên dưới có hai cái tiêu đề.
o
Thẻ tiêu đề là gì !?
o
Có mấy loại thẻ tiêu đề !?
- Trong HTML, để tạo được một câu tiêu đề thì chúng ta cần phải sử dụng thẻ tiêu đề (thẻ heading).
- Thẻ tiêu đề được chia ra làm sáu loại chính:
, , , , , .
- Lưu ý: Khi hiển thị lên màn hình, mặc định thì văn bản nằm ở bên trong cặp thẻ tiêu đề sẽ được in đậm và có kích thước lớn hơn văn bản bình thường,
kích thước của văn bản sẽ giảm dần từ thẻ xuống thẻ .
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
</body>
</html>
Xem ví dụ
Các thẻ định dạng văn bản trong HTML
- Dưới đây là danh sách những thẻ thường được sử dụng để định dạng cho văn bản.
(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thẻ)
<b>
- Định dạng chữ in đậm cho văn bản.
, , , .
- Lưu ý: Khi hiển thị lên màn hình, mặc định thì văn bản nằm ở bên trong cặp thẻ tiêu đề sẽ được in đậm và có kích thước lớn hơn văn bản bình thường,
kích thước của văn bản sẽ giảm dần từ thẻ xuống thẻ .
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
</body>
</html>
Xem ví dụ
Các thẻ định dạng văn bản trong HTML
- Dưới đây là danh sách những thẻ thường được sử dụng để định dạng cho văn bản.
(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thẻ)
<b>
- Định dạng chữ in đậm cho văn bản.
, .
- Lưu ý: Khi hiển thị lên màn hình, mặc định thì văn bản nằm ở bên trong cặp thẻ tiêu đề sẽ được in đậm và có kích thước lớn hơn văn bản bình thường,
kích thước của văn bản sẽ giảm dần từ thẻ xuống thẻ .
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
</body>
</html>
Xem ví dụ
Các thẻ định dạng văn bản trong HTML
- Dưới đây là danh sách những thẻ thường được sử dụng để định dạng cho văn bản.
(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thẻ)
<b>
- Định dạng chữ in đậm cho văn bản.
- Lưu ý: Khi hiển thị lên màn hình, mặc định thì văn bản nằm ở bên trong cặp thẻ tiêu đề sẽ được in đậm và có kích thước lớn hơn văn bản bình thường,
kích thước của văn bản sẽ giảm dần từ thẻ
xuống thẻ .
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
</body>
</html>
Xem ví dụ
Các thẻ định dạng văn bản trong HTML
- Dưới đây là danh sách những thẻ thường được sử dụng để định dạng cho văn bản.
(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thẻ)
<b>
- Định dạng chữ in đậm cho văn bản.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<meta charset="utf-8">
</head>
<body>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
</body>
</html>
Xem ví dụ
Các thẻ định dạng văn bản trong HTML
- Dưới đây là danh sách những thẻ thường được sử dụng để định dạng cho văn bản.
(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thẻ)
<b>
- Định dạng chữ in đậm cho văn bản.
