dùng để tạo đoạn văn Thẻ dùng để tạo liên kết Trang Tài liệu học tập Ngôn ngữ HTML Thẻ dùng để chèn hình vào trang web - Thơng thường thẻ chia làm hai loại chính, là: thẻ kép & thẻ đơn 1.1.1 Thẻ kép - Thẻ kép loại thẻ mà muốn sử dụng để tạo nội dung cho trang web cần phải dùng đến thẻ mở lẫn thẻ đóng (thẻ đóng có cách viết tương tự thẻ mở, khác chỗ phía trước tên thẻ đóng có thêm dấu gạch chéo) - Dưới cú pháp sử dụng thẻ kép: nội dung hiển thị - Ví dụ: Thẻ
thuộc loại thẻ kép, để tạo đoạn văn giống trang web nằm bên tay trái viết sau:
Tài liệu học Lập Trình Web
1.1.2 Thẻ đơn - Thẻ đơn loại thẻ mà muốn sử dụng để tạo nội dung cho trang web cần dùng thẻ mở, hay nói cách khác khơng có thẻ đóng - Ví dụ: Thẻ thuộc loại thẻ đơn, để chèn hình vào trang web giống minh họa bên phải viết sau: 1.1.3 Thẻ lồng - Thẻ lồng thực chất kỹ thuật viết mã HTML, thẻ lồng vào để xây dựng nên nội dung đa dạng - Ví dụ: Tơi đặt thẻ lồng bên thẻđể xác định cụm từ gạch chân, giúp cho nội dung đoạn văn trở nên đa dạng
Trung tâm luyện thi đại học
- Tuy nhiên có điều mà bạn cần phải lưu ý thẻ phép lồng vào nhau, tuyệt đối khơng chéo - Ví dụ: Viết bên sai quy tắcTrung tâm luyện thi
đại học Trang Tài liệu học tập Ngôn ngữ HTML - Lưu ý: Trong ngôn ngữ HTML, viết mã sai quy tắc hình khơng lên thông báo lỗi nào, nội dung khơng hiển thị xác mong đợi Tìm hiểu khái niệm tập tin HTML - Tập tin HTML loại tập tin văn mà bên có chứa thẻ HTML, tập tin HTML phải có phần html htm - Lưu ý: Một tập tin HTML gọi là: + Một tài liệu HTML + Một trang HTML + Một trang web Hướng dẫn cách tạo chạy tập tin HTML 3.1 Giới thiệu công cụ soạn thảo mã HTML - Ngày có nhiều cơng cụ đại hỗ trợ việc soạn thảo mã HTML, ví dụ như: Adobe Dreamweaver, CoffeeCup, TextWrangler, Sublime Text, Tuy nhiên, công cụ thường tương đối phức tạp, chúng thích hợp với người thơng thạo lập trình web, cịn người học HTML giống tốt nên dùng công cụ soạn thảo văn bản, mặt giúp ta rèn luyện kỹ gõ mã lệnh, mặt khác ghi nhớ tên loại thẻ - Mà nói đến trình soạn thảo văn tơi xin giới thiệu đến bạn cơng cụ có sẵn máy tính cài hệ điều hành Windows, Notepad (tùy vào phiên mà cách mở khác nhau, bạn dùng Windows bạn mở cách vào Start gõ từ khóa Notepad) 3.2 Cách tạo tập tin HTML - Để tạo tập tin HTML thực bước sau: - Bước 1: Mở trình soạn thảo văn Notepad lên Trang Tài liệu học tập Ngôn ngữ HTML - Bước 2: Nhập nội dung mà bạn muốn chúng hiển thị trang web - Bước 3: Lưu tập tin + Bấm vào nút File chọn Save As Chọn thư mục muốn lưu tập tin + Đặt tên cho tập tin + Chỗ Encoding chọn UTF-8 + Cuối cùng, bấm nút Save để lưu lại Trang Tài liệu học tập Ngôn ngữ HTML Lưu ý: Tên tập tin tuyệt đối không chứa dấu khoảng trắng & ký tự đặc biệt Tên tập tin phải có phần html htm Tuy nhiên, phần htm có số hạn chế, nên chúng tơi khuyến khích bạn sử dụng phần đuôi html Chỗ Encoding chọn UTF-8 bước vơ quan trọng, kiểu mã hóa UTF8 giúp cho trang web hiển thị ngôn ngữ tiếng Việt xác 3.3 Cách chạy (thực thi) tập tin HTML - Thực cách chạy tập tin HTML đơn giản, di chuyển thẳng đến thư mục chứa tập tin, sau nhấp chuột phải vào chọn trình duyệt để mở Trang Tài liệu học tập Ngôn ngữ HTML - Hoặc nhấp vào địa trình duyệt bấm tổ hợp hợp phím Ctrl + O - Sau đó, chọn tập tin HTML mà muốn mở bấm "Open" Trang Tài liệu học tập Ngơn ngữ HTML - Nếu trình duyệt hiển thị giống hình bên tức bạn làm thành công Cấu trúc tập tin HTML - Thơng thường thứ có cấu trúc mà phải tuân theo để đảm bảo việc hoạt động ổn định (ví dụ văn thường có cấu trúc gồm ba phần mở - thân - kết luận, loại bỏ thành phần xáo trộn thứ tự ba thành phần nội dung văn không trơn tru mạch lạc) Việc viết mã lệnh tập tin HTML tương tự vậy, cần phải tuân thủ theo cấu trúc để đảm bảo trang web hiển thị ý, tránh mắc phải lỗi khơng đáng có 4.1 Cấu trúc tập tin HTML - Nội dung tập tin HTML phải bắt đầu thẻ kết thúc thẻ Trang Tài liệu học tập Ngôn ngữ HTML - Bên cặp thẻ chia làm hai thành phần chính: Phần head bắt đầu thẻ kết thúc thẻ , dùng để chứa tiêu đề thẻ khai báo thông tin cho trang web Phần body bắt đầu thẻ kết thúc thẻ , dùng để chứa nội dung mà muốn hiển thị trang web - Dưới hình ảnh minh họa cấu trúc tập tin HTML Ví dụ: Hello LOP 19MT1) HTML
.
2) CSS
.
3) JavaScript
.
- Khi thực thi tập tin trình duyệt hiển thị Trang 10 Tài liệu học tập Ngơn ngữ HTML - Lưu ý: Thẻ có chức tương tự việc chọn kiểu mã hóa UTF-8 tạo tập tin HTML, giúp cho trang web hiển thị ngôn ngữ tiếng Việt xác 4.2 Cấu trúc tập tin HTML5 - Cái cấu trúc tập tin HTML mà tơi hướng dẫn cho bạn phía cấu trúc phiên HTML Hiện nay, HTML cho phiên HTML5, phiên hỗ trợ thêm số thẻ với tính vượt trội - Để sử dụng phiên HTML5 ta thêm thẻ vào vị trí bên tập tin Ví dụ: Hello LOP 19MT1) HTML
.
2) CSS
Trang 11 Tài liệu học tập Ngôn ngữ HTML.
3) JavaScript
.
Các vấn đề liên quan đến đoạn văn HTML 5.1 Cách tạo đoạn văn - Trong HTML, văn thường thể dạng đoạn Mỗi đoạn văn có khoảng cách lề phía & lề phía (mặc định 16 pixel) để tách biệt đoạn văn với nội dung nằm phía phía - Ví dụ: Trang web bên có ba đoạn văn bản, nhìn kỹ bạn thấy ba đoạn văn tách biệt rõ ràng, nhờ vào khoảng cách lề 16 pixel nằm chúng - Để tạo đoạn văn cần phải sử dụng thẻ(dưới đoạn mã dùng để tạo trang web giống hình minh họa phía trên) 5.2 Vấn đề khoảng trắng - Khi soạn thảo đoạn văn bản, nằm hai ký tự phép tồn tối đa dấu khoảng trắng, sử dụng phím Space để nhập Trang 12 Tài liệu học tập Ngôn ngữ HTML nhiều dấu khoảng trắng liên tiếp hiển thị lên hình, trình duyệt loại bỏ dấu khoảng trắng dư thừa Ví dụ: Xem ví dụ
Tài liệu hướng dẫn học lập trình web
- Để khắc phục việc muốn hiển thị nhiều dấu khoảng trắng nằm hai ký tự phải thay phím Space chuỗi ký tự (một chuỗi ký tự tương ứng với khoảng trắng) Ví dụ: - Nằm chữ Lập & chữ Trình có dấu khoảng trắng - Nằm chữ Trình & chữ Web có dấu khoảng trắng Xem ví dụLập Trình Web
5.3 Vấn đề ngắt xuống dịng Trang 13 Tài liệu học tập Ngơn ngữ HTML - Trong ngôn ngữ HTML, sử dụng phím Enter với mục đích hiển thị dấu ngắt xuống dịng, bạn dùng phím Enter để nhập dấu ngắt xuống dịng hiển thị lên hình, trình duyệt xem dấu khoảng trắng Ví dụ: Xem ví dụTài liệu hướng dẫn học lập trình web
- Để hiển thị dấu ngắt xuống dịng phải sử dụng thẻ - Lưu ý: Mỗi thẻ tương ứng với dấu ngắt xuống dịng Ví dụ: Xem ví dụ Trang 14 Tài liệu học tập Ngôn ngữ HTMLTàiliệuhướngdẫnhọc lập trình web
5.4 Canh lề cho đoạn văn - Tương tự Microsoft Word Trong HTML, canh lề cho đoạn văn Canh văn nằm bên trái Canh văn nằm Canh văn nằm bên phải Canh hai bên trái phải - Để canh lề cho đoạn văn thêm thuộc tính align vào bên thẻ- Cú pháp:
- Trong đó, value xác định dựa theo bốn loại giá trị: left - Văn canh nằm bên trái center - Văn canh nằm right - Văn canh nằm bên phải justify - Văn canh hai bên trái phải - Lưu ý: Mặc định văn canh nằm phía bên trái Cho nên việc canh lề cho văn nằm phía bên trái điều khơng cần thiết Thẻ tiêu đề (heading) HTML - Thông thường, xem viết trang tin tức trang blog thấy bên viết có dịng chữ (nổi bật văn bình thường) dùng để đại diện cho nội dung chính, dịng chữ gọi tiêu đề (đề mục) viết - Ví dụ: Trang web bên có hai tiêu đề Trang 15 Tài liệu học tập Ngôn ngữ HTML Thẻ tiêu đề !? Có loại thẻ tiêu đề !? - Trong HTML, để tạo câu tiêu đề cần phải sử dụng thẻ tiêu đề (thẻ heading) - Thẻ tiêu đề chia làm sáu loại chính: , , , , , Ví dụ: Xem ví dụ Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Các thẻ định dạng văn HTML - Định dạng chữ in đậm cho văn - Định dạng chữ in nghiêng cho văn - Tạo đường kẻ ngang nằm chân văn - Tạo đường kẻ ngang nằm văn - Định dạng chữ to so với văn bình thường - Định dạng chữ nhỏ so với văn bình thường Trang 16 Tài liệu học tập Ngôn ngữ HTML - Định dạng chữ nhỏ & nằm khoảng nửa so với văn bình thường - Định dạng chữ nhỏ & nằm khoảng nửa so với văn bình thường - Đánh dấu màu bật cho văn - Giữ nguyên định dạng cho văn (giống lúc soạn thảo) - Tạo đường kẻ ngang ngăn cách nội dung phía nội dung phía - Tạo dấu ngắt xuống dòng - Đảo ngược thứ tự xuất ký tự Tìm hiểu khái niệm "phần tử" HTML 8.1 Phần tử !? - Trong trang web, thơng thường nội dung xem phần tử - Ví dụ trang web nằm bên dưới: đoạn văn phần tử, trình phát audio phần tử, hình phần tử, - Một phần tử HTML thường xác định dựa ba thành phần: - Thẻ mở Nội dung nằm bên cặp thẻ (hay gọi nội dung phần tử) - Thẻ đóng - Tuy nhiên, có số trường hợp đặc biệt mà phần tử có thành phần thẻ mở, phần tử gọi phần tử rỗng Ví dụ: - Tơi có đoạn mã bên
Tài liệu hướng dẫn học Lập Trình Web
Từ đến nâng cao - Trong đó:Tài liệu hướng dẫn học Lập Trình Web
phần tử, có: Trang 17 Tài liệu học tập Ngơn ngữ HTML Thẻ mở là:Nội dung là: Tài liệu hướng dẫn học Lập Trình Web Thẻ đóng là:
Từ đến nâng cao phần tử, có: Thẻ mở là: Nội dung là: Từ đến nâng cao Thẻ đóng là: phần tử rỗng phần tử rỗng - Lưu ý: Một phần tử thường gọi dựa theo tên thẻ nó, ví dụ bốn phần tử phía gọi là: phần tử, phần tử , phần tử , phần tử 8.2 Phần tử lồng - Thông thường, phần tử lồng vào bên "phần nội dung" phần tử khác - Trong đó: Phần tử mà nội dung có chứa phần tử khác gọi phần tử cha Phần tử lồng vào bên nội dung phần tử khác gọi phần tử Ví dụ: Tài liệu HTML
Tài liệu CSS
- Với đoạn mã giống phía có tất bốn phần tử: Phần tử HTML Thẻ Nội dung Thẻ mở phần tử đóng Tài Tài liệu HTMLTài liệu CSS
liệu HTMLTài liệu CSS
Tài liệu HTMLTài liệu CSS
Tài liệu HTML Trang 18 Tài liệu học tập Ngôn ngữ HTMLTài liệu CSS
Tài liệu HTML Tài liệu HTMLTài liệu CSS
Tài liệu CSS
- Dưới bảng mô tả phần tử cha & phần tử bốn phần tử trên: Phần tử HTML Tài liệu HTMLTài liệu CSS
Tài liệu HTMLTài liệu CSS
Phần tử cha Phần tử khơng cóTài liệu HTML khơng có
Tài liệu CSS
khơng có 8.3 Đừng quên thẻ đóng - Ngoại trừ phần tử rỗng, phần tử lại tuyệt đối khơng thiếu thẻ đóng, việc thiếu thẻ đóng gây ảnh hưởng nghiêm trọng đến phần tử khác, khiến phần tử khác bị xem nội dung phần tử thiếu thẻ đóng Ví dụ: - Phần tử thiếu thẻ đóng, khiến phần tử bên bị xem nội dung Xem ví dụ Tài liệu học HTMLTài liệu học CSS
Trang 19 Tài liệu học tập Ngôn ngữ HTML
Tài liệu học JavaScript
8.4 Không xáo trộn thứ tự thẻ đóng - Các bạn tuyệt đối không xáo trộn thứ tự thẻ đóng, việc xáo trộn thứ tự thẻ đóng gây ảnh hưởng gần giống việc thiếu thẻ đóng Đúng
Tài liệu học lập trình web
SaiTài liệu học lập trình web
8.5 Trình bày mã lệnh - Trong ngôn ngữ HTML, vấn đề khoảng trắng & ngắt xuống dịng thẻ khơng quan trọng - Ví dụ: Ba đoạn mã bên có cách viết khác nhau, thực thi lại hiển thị giống nhau: Khái niệm phần tử HTML Tài liệu hướng dẫn học HTML Tài liệu hướng dẫn học CSSTài liệu hướng dẫn học JavaScript
Khái niệm phần tử HTMLTài liệu hướng dẫn học HTMLTài liệu hướng dẫn học CSSTài liệu hướng dẫn học JavaScript
Khái niệm phần tử HTML Tài liệu hướng dẫn học HTMLTài liệu hướng dẫn học CSSTài liệu hướng dẫn học JavaScript
- Tuy nhiên, khơng nên trình bày mã lệnh cách ngẫu hứng mà tốt phải tuân theo tiêu chuẩn chung để đảm bảo tối ưu hóa việc viết mã lệnh, phần tử cần phải ngắt xuống dòng thụt vào bốn dấu khoảng trắng so với phần tử cha Khái niệm phần tử HTML Tài liệu hướng dẫn học HTML Tài liệu hướng dẫn học CSSTài liệu hướng dẫn học JavaScript
8.6 Tên thẻ không phân biệt chữ hoa - chữ thường Trang 20 Tài liệu học tập Ngôn ngữ HTML - Trong ngôn ngữ HTML, tên thẻ không phân biệt trường hợp chữ in hoa hay chữ thường, ví dụ ba thẻ , , có chung ý nghĩa - Tuy nhiên, hầu hết lập trình viên sử dụng chữ thường để viết tên thẻ, ví dụ: ,, Trang 21
