HTML CƠ BẢN | PHẦN 1 |Tìm hiểu về ngôn ngữ html

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

Trang 1

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)

Trang 3

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

Trang 4

- 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

Trang 5

- MỘT SỐ ĐIỀU CẦN LƯU Ý:

Trang 6

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 đuôi là html hoặc htm Tuy nhiên, phần đuô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

đuô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ở

Trang 7

- 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

Trang 8

- Sau đó, chọn tập tin HTML mà mình muốn mở rồi bấm "Open"

Trang 9

- 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

Trang 11

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:

Trang 12

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>

</head>

<body>

< >1) Tài liệu học HTML</p>

< > .</p>

Trang 14

- 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>

Trang 15

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

Trang 16

- Để tạo được một đoạn văn bản thì chúng ta cần phải sử dụng thẻ <p>

(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)

Trang 17

2) Vấn đề khoảng trắng

Trang 18

- 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

- 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

Trang 20

- Để hiển thị dấu ngắt xuống dòng thì chúng ta phải sử dụng thẻ <br>

- Lưu ý: Mỗi một thẻ <br> sẽ tương ứng với một dấu ngắt xuống dòng

Ví dụ:

Trang 21

<!DOCTYPE html>

<html>

<head>

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ẻ <p>

Trang 22

- Cú pháp:

- Trong đó, value có thể được xác định dựa theo một trong bốn loại giá trị:

left - Văn bản được canh nằm bên trái

Xem

ví 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

Trang 23

- 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 đề !?

Trang 24

- 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: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

- 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ẻ <h1> xuống thẻ <h6>

Trang 25

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

Trang 27

- Tạo một dấu ngắt xuống dòng

<bdo>

- Đảo ngược thứ tự xuất hiện của các ký tự

Tìm hiểu khái niệm "phần tử" trong HTML

1) Phần tử là gì !?

- Trong trang web, thông thường thì bất kỳ một nội dung gì cũng có thể được xem là phần tử

- Ví dụ như trong trang web nằm bên dưới: đoạn văn bản là một phần tử, trình phát audio là một phần tử, tấm hình là một phần tử,

- Một phần tử HTML thường được xác định dựa trên ba thành phần:

Trang 28

- Tôi có một đoạn mã như bên dưới

<p>Tài liệu hướng dẫn học Lập Trình Web</p>

Trang 29

o Phần tử mà nội dung của nó có chứa phần tử khác thì được gọi là phần tử cha

o Phần tử được lồng vào bên trong nội dung của phần tử khác thì được gọi là phần tử con

Trang 30

- Với một đoạn mã giống như phía trên thì chúng ta có tất cả là bốn phần tử:

<html> <body> <h1>Tài liệu HTML</h1> <p>Tài liệu CSS</p> </body> </html> <html> <body> <h1>Tài liệu HTML</h1> <p>Tài

liệu CSS</p> </body> </html>

<body> <h1>Tài liệu HTML</h1> <p>Tài liệu CSS</p> </body> <body> <h1>Tài liệu HTML</h1> <p>Tài liệu

CSS</p> </body>

- Dưới đây là bảng mô tả phần tử cha & phần tử con của bốn phần tử trên:

Trang 31

<html> <body> <h1>Tài liệu HTML</h1> <p>Tài liệu CSS</p> </body> </html> không có <body>

<h1>

<p>

<h1>Tài liệu HTML</h1> <body> không có

<p>Tài liệu CSS</p> <body> không có

3) Một số vấn đề cần lưu ý

- Trong một tập tin HTML, nếu chúng ta soạn thảo mã sai quy tắc thì khi chạy tập tin - các phần tử sẽ hiển thị không được chính xác như mong đợi Cho nên, các bạn cần phải hết sức lưu ý đến vấn đề cú pháp để tránh mắc phải những lỗi không đáng có

Trang 32

3.1) Đừng bao giờ quên thẻ đóng

- Ngoại trừ các phần tử rỗng, những phần tử còn lại tuyệt đối không được thiếu thẻ đóng, việc thiếu thẻ đóng sẽ gây ảnh hưởng nghiêm trọng đến các phần tử khác, nó sẽ khiến những phần tử khác bị xem là nội dung của phần tử thiếu thẻ đóng

Trang 33

3.2) Không được xáo trộn thứ tự giữa các thẻ đóng

- Các bạn tuyệt đối không được xáo trộn thứ tự giữa các thẻ đóng, việc xáo trộn thứ tự giữa các thẻ đóng cũng gây ảnh hưởng gần giống như việc thiếu thẻ đóng

Đúng <div><p>Tài liệu học lập trình web</p></div>

Sai

<div><p>Tài liệu học lập trình web</div></p>

3.3) Trình bày mã lệnh

- Trong ngôn ngữ HTML, vấn đề khoảng trắng & ngắt xuống dòng giữa các thẻ là không quan trọng

- Ví dụ: Ba đoạn mã bên dưới có cách viết khác nhau, nhưng khi thực thi lại hiển thị giống nhau:

<h1>Tài liệu hướng dẫn học HTML</h1>

<h2>Tài liệu hướng dẫn học CSS</h2>

<p>Tài liệu <u>hướng dẫn học</u> JavaScript</p>

</body>

</html>

Trang 34

<html><head><title>Khái niệm phần tử trong HTML</title></head><body><h1>Tài liệu hướng dẫn học HTML</h1><h2>Tài liệu hướng dẫn học CSS</h2><p>Tài liệu <u>hướng dẫn học</u> JavaScript</p></body></html>

<html> <head> <title>Khái niệm phần tử trong HTML</title>

</head>

<body>

<h1>Tài liệu hướng dẫn học HTML</h1><h2>Tài liệu hướng dẫn học CSS</h2>

<h1>Tài liệu hướng dẫn học HTML</h1>

<h2>Tài liệu hướng dẫn học CSS</h2>

</body>

</html>

Trang 35

3.4) Tên thẻ không phân biệt chữ hoa - chữ thường

- Trong ngôn ngữ HTML, tên của các thẻ không phân biệt trường hợp chữ in hoa hay chữ thường, ví dụ như ba thẻ <title>, <TITLE>, <TiTLe> đều có chung một ý nghĩa

- Tuy nhiên, hầu hết các lập trình viên đều sử dụng chữ thường để viết tên thẻ, ví dụ: <title>, <div> <p>,

Cách ghi chú thích (comment) trong HTML

1) Chú thích là gì !?

- Trong ngôn ngữ HTML, chú thích là những đoạn mã mà khi trình duyệt gặp phải chúng thì trình duyệt sẽ bỏ qua (điều đó đồng nghĩa với việc những đoạn mã này tàng hình đối với trình duyệt, mặc cho nó đúng hay sai cú pháp thì cũng không ảnh hưởng gì đến việc hiển thị của các phần

tử khác)

2) Tại sao lại phải dùng chú thích !?

- Trong quá trình soạn thảo mã, đôi khi có những chỗ phức tạp mà chúng ta cần phải ghi lại một vài câu giải thích để sau này có xem lại mã lệnh thì cũng dễ dàng hơn, đó chính là thời điểm mà chúng ta cần phải dùng đến chú thích

3) Cách viết chú thích

- Để viết chú thích, ta đặt những nội dung chú thích vào bên trong cặp thẻ <! >

Ví dụ:

Trang 36

<! BÊN DƯỚI LÀ THÔNG TIN CÁ NHÂN CỦA TÔI >

<p>- Họ tên: Nguyễn Thành Nhân</p>

Trang 37

</head>

<body>

<! BÊN DƯỚI LÀ THÔNG TIN CÁ NHÂN CỦA TÔI >

<p>- Họ tên: Nguyễn Thành Nhân</p>

Trang 39

- Trong trang web, liên kết là những nội dung (thường được đại diện bởi văn bản hoặc hình ảnh) mà khi chúng ta nhấp vào nó thì chúng ta sẽ được chuyển đến một tài liệu khác

Trang 41

2) Cách tạo một cái liên kết

- Để tạo một cái liên kết thì chúng ta dùng cú pháp như sau:

- Trong đó:

Trang 42

Xem ví dụ

- Lưu ý: Khi tạo một cái liên kết, nếu chúng ta bỏ trống URL thì mặc định URL sẽ là đường dẫn của trang web chứa liên kết (ví dụ, bạn đang ở trang http://webcoban.vn/css/default.html, bên trong trang đó có một cái liên kết được tạo ra từ cú pháp <a href="">Click here</a> thì khi đó URL của cái liên kết chính là http://webcoban.vn/css/default.html)

3) Phân loại đường dẫn đến tài liệu

- Thông thường thì "đường dẫn đến tài liệu" được chia ra làm hai loại chính:

- Lưu ý: Giao thức & máy chủ là hai thành phần bắt buộc phải có

Đường

dẫn

tương

đối

- Đường dẫn tương đối là loại đường dẫn mà bên trong nó chỉ có chứa duy nhất một thành phần:

Trang 43

- Bên dưới là một số ví dụ về đường dẫn tuyệt đối & đường dẫn tương đối

Đường dẫn tuyệt đối

Trang 44

<a href="http://webcoban.vn/html/default.html">Đường dẫn tuyệt đối</a>

<a href="default.html">Đường dẫn tương đối</a>

</body>

</html>

Xem ví dụ

4) Cách xác định đường dẫn tương đối

- Giữa đường dẫn tương đối & đường dẫn tuyệt đối thì việc xác định đường dẫn tuyệt đối khá là đơn giản, chúng ta chỉ cần sao chép địa chỉ nằm trên thanh địa chỉ của trình duyệt Còn về việc xác định đường dẫn tương đối thì phức tạp hơn rất nhiều, các bạn vui lòng tham khảo một số ví dụ bên dưới để tìm hiểu cách xác định đường dẫn tương đối

- Trước tiên, vào ổ đĩa D:/ tạo một cây thư mục với các tập tin như sau:

Developer

index.html

Trang 46

- Câu hỏi: Nếu đang nằm ở trang index.html , tôi muốn tạo một cái liên kết để chuyển đến trang filters.html thì đường dẫn

tương đối trong trường hợp này sẽ được xác định như thế nào !?

- Trả lời: Đường dẫn tương đối sẽ được xác định bởi hướng đi như sau:

- Kết luận: Bên dưới là đường dẫn tương đối mà tôi cần

- Ưu điểm: Cách xác định đường dẫn rất đơn giản

- Nhược điểm: Mã nguồn chỉ có thể sử dụng trên một máy chủ, nếu chúng ta sử dụng mã nguồn trên các máy chủ khác nhau thì sẽ tốn nhiều công sức cho việc cập nhật lại các đường dẫn

VÍ DỤ:

Định dạng
Số trang	54
Dung lượng	1,19 MB