Mô tả:
Đây là một đoạn văn bản, có chứa các chữ in đậm.
Cấu trúc một đoạn HTML Như mình đã nói ở trên, HTML sẽ được khai báo bằng các phần tử bởi các từ khóa. Nội dung nằm bên trong cặp từ khóa sẽ là nội dung bạn cần định dạng với HTML. Ví dụ dưới đây là một đoạn HTML khai báo một đoạn văn bản. 01Đây là một đoạn văn bản trong HTML.
Ngoài ra, trong các thẻ còn có các thuộc tính, thuộc tính sẽ đặt bên trong thẻ mở đầu, mỗi thuộc tính sẽ có giá trị được đặt trong dấu ngoặc kép và cách nhau bởi dấu bằng (=) với tên thuộc tính. Ví dụ dưới đây là một thẻ có sử dụng thuộc tính- 01 Một thẻ có thể sử dụng nhiều thuộc tính chứ không phải chỉ một thuộc tính nhé. Dùng chương trình gì để tạo tập tin HTML? HTML là một tập tin siêu văn bản nên bạn có thể dùng các chương trình soạn thảo văn bản không có chức năng định dạng văn bản để tạo ra một tập tin HTML. Trong Windows, bạn có thể dùng Notepad để tạo ra một tập tin HTML, còn trên Mac thì có thể dùng TextEdit và Vim trên các hệ điều hành Linux khác. Miễn là sau đó bạn phải lưu tập tin thành đuôi .html và sử dụng trình duyệt website để đọc nó. HTML có thể được soạn thảo bởi bất kỳ một trình soạn thảo văn bản đơn giản. Tuy nhiên Notepad lại quá đơn giản để sử dụng cho mục đích soạn thảo, nên từ các bài sau chúng ta sẽ dùng một chương trình khác tương tự để soạn thảo HTML. Và mình cũng không bao giờ khuyến khích bạn sửa một tập tin HTML bất kỳ bằng chương trinh Notepad để tránh gặp các lỗi hiển thị ký tự tiếng Việt. HTML đóng vai trò gì trong website? Như mình đã nói, HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc. Vai trò của từng ngôn ngữ trong website: Điều đó không có nghĩa là chỉ sử dụng HTML để tạo ra một website mà HTML chỉ đóng một vai trò hình thành trên website. Ví dụ một website như Thachpham.com sẽ được hình thành bởi: HTML – Xây dựng cấu trúc và định dạng các siêu văn bản. CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền,…. Javascript – Tạo ra các sự kiện tương tác với hành vi của người dùng (ví dụ nhấp vào ảnh trên nó sẽ có hiệu ứng phóng to). PHP – Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt (ví dụ như các bài viết sẽ được lưu trong máy chủ). MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc (SQL – ví dụ như các bài viết sẽ được lưu lại với dạng dữ liệu SQL). Nhưng ở đây, tạm thời bạn chỉ cần quan tâm đến HTML mà thôi. Dễ hiểu hơn, bạn hãy nghĩ rằng nếu website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của cơ thể đó, nó như là một cái khung sườn vậy. Như vậy, dù website thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người truy cập xem. Nhân tiện đây mình cũng nói luôn, website có hai loại chính: Website tĩnh (static web) – Là một website không giao tiếp với máy chủ web để gửi nhận dữ liệu mà chỉ có các dữ liệu được khai báo sẵn bằng HTML và trình duyệt đọc. Website động (dynamic web) – Là một website sẽ giao tiếp với một máy chủ để gửi nhận dữ liệu, các dữ liệu đó sẽ gửi ra ngoài cho người dùng bằng văn bản HTML và trình duyệt sẽ hiển thị nó. Để một website có thể giao tiếp với máy chủ web thì sẽ dùng một số ngôn ngữ lập trình dạng server-side như PHP, ASP.NET, Ruby,..để thực hiện. Ví dụ như một website làm bằng WordPress là website động. Tài nguyên tham khảo HTML Trong serie này mình không có nói hết về các thẻ trong HTML mà chỉ nói qua các thẻ quan trọng nhất vì bạn sẽ sử dụng nó thường xuyên. Vì vậy, bạn hãy vào trang HTML Reference để tham khảo ý nghĩa và cách sử dụng của tất cả các thẻ HTML. Lời kết Ở trên mình đã giải thích khá chi tiết và cặn kẽ về HTML và vai trò của nó trên website là như thế nào. Thoạt nhìn có thể bạn sẽ tưởng các thông tin này chỉ mang tính tham khảo nhưng đó lại là các thông tin cực kỳ quan trọng, vì bạn đã làm web thì phải hiểu rõ về nó. Ở các bài sau, chúng ta sẽ đi vào việc chuẩn bị để soạn thảo một tập tin HTML đầu tiên và chạy thử nó nhé. Soạn một đoạn HTML đầu tiên Giới thiệu HTML như bài trước như thế chắc là đủ thông tin rồi nhỉ? Vậy thì bây giờ chúng ta hãy bắt tay vào việc tập soạn thảo văn bản bằng HTML thôi. Soạn thảo văn bản HTML ở đây nghĩa là chúng ta sẽ tập viết một văn bản được định dạng bằng các thẻ HTML chứ không phải là tạo ra một tập tin HTML hoàn chỉnh (việc đó để phần sau), bằng cách này thì các bạn sẽ dễ dàng tiếp cận với HTML hơn. https://www.youtube.com/watch?v=wR_MDC305oQ Hãy sử dụng Sublime Text để soạn thảo Sublime Text là một chương trình soạn thảo văn bản (Text Editor) miễn phí mà thường là phục vụ cho việc soạn thảo các loại văn bản đơn giản cho đến các đoạn code phức tạp. Hiện tại bạn học viết các ngôn ngữ website thì cứ dùng chương trình này, vừa nhẹ, lại đẹp mà chuyên nghiệp nữa. Sau này bạn thành chuyên nghiệp rồi sẽ tự khắc hiểu tại sao bạn quá may mắn vì biết đến Sublime Text ngay từ buổi lúc viết đoạn mã đầu tiên. Bản miễn phí của Sublime Text sẽ tự động hiển thị bảng hỏi bạn mua bản quyền sau vài lần ấn Save, bạn có thể ấn No để từ chối. Soạn thảo văn bản HTML đầu tiên Bây giờ bạn hãy mở chương trình soạn thảo lên và gõ một đoạn nội dung đơn giản chỉ toàn chữ như thế này. Sau đó hãy lưu lại tập tin này với tập tin text.html và mở lên bằng trình duyệt, kết quả sẽ như thế này: Bạn có để ý thấy rằng văn bản chúng ta soạn ra có xuống hàng đầy đủ mà khi in ra trình duyệt nó không xuống hàng, tại sao? Bởi vì trình duyệt chỉ đọc hiểu các văn bản được định dạng bằng HTML mà thôi, nên cho dù bạn soạn văn bản thông thường mà không có HTML thì trình duyệt vẫn sẽ hiểu rằng đó là một đoạn văn bản thô như vậy. Bây giờ bạn thử đặt cặp thẻgiống thế này. Lưu lại và tải lại bằng trình duyệt website sẽ thấy một kết quả khác. Đấy, lúc này trình duyệt đã tự chuyển đổi các thẻ HTML thành loại định dạng siêu văn bản phù hợp để hiển thị rồi đó. Giải thích thêm: Thẻ
(viết tắt của chữ Paragraph) là cặp thẻ xác định một đoạn văn bản. Mỗi đoạn văn bản đặt trong thẻ
sẽ được xem như là một dòng, mỗi dòng sẽ có những khoảng cách ngăn với nhau. Lời kết Kết thúc phần này chắc bạn đã biết làm sao để có được một tập tin HTML rồi phải không nào? Nhưng đó chỉ là một tập tin văn bản mà thôi, vậy làm sao để có thể tạo ra một tập tin website bằng HTML đây? Phần kế tiếp chúng ta sẽ tìm hiểu về vấn đề này nhé. Cấu trúc một tài liệu web bằng HTML https://www.youtube.com/watch?v=i4wfRU40Avs Một tài liệu hay tập tin HTML để được gọi là một tài liệu web thì sẽ được bao gồm bốn yếu tố chính đó là: Có thẻ khai báo loại tập tin/tài liệu. Có thẻ đóng và mở tài liệu HTML. Có thẻ đóng và mở phần thông tin website. Có thẻ đóng và mở phần nội dung website. Và trong bài này, chúng ta sẽ đi tìm hiểu qua 4 phần đó để tạo ra một tài liệu website bằng HTML đúng chuẩn. Trước khi mình giải thích rõ các thành phần đó thì bạn hãy tạo ra một tập tin HTML với nội dung sau và lưu lại.
Đây là nội dung website
Mục lục nội dung Thẻ khai báo loại tập tin Thẻ đóng mở tài liệu HTML Thẻ đóng và mở phần thông tin website Có thẻ đóng và mở phần nội dung website Lời kết Xem tiếp bài trong serie Thẻ khai báo loại tập tin Ngay tại đoạn đầu tiên của tài liệu, chúng ta phải có một thẻ khai báo loại tập tin cho nó như thế này, cụ thể là ta sẽ khai báo rằng đây là tập tin HTML. 01 Với thẻ ở trên, ta có thêm một tham số đó là html. Tham số html này nghĩa là chúng ta khai báo với trình duyệt rằng đây là tài liệu HTML5 (HTML phiên bản 5), dù rằng chúng ta có thể không sử dụng HTML5 nhưng hiện tại khi khai báo tập tin HTML thì bạn cứ sử dụng tham số này vừa ngắn gọn lại vừa dễ dàng sử dụng thêm HTML5 nếu thích. Ngoài ra, nó còn có một vài tham số khác mà bạn có thể tham khảo thêm tại đây. Có một điều thú vị là thẻ không phải là một thẻ của HTML, mà nó chỉ là một thẻ khai báo thông tin trên tài liệu để trình duyệt hiểu phiên bản HTML mà bạn sử dụng trên website mà thôi. Thẻ đóng mở tài liệu HTML Kế tiếp, ở tầng tiếp theo sẽ là thẻ có nhiệm vụ khai báo cho trình duyệt biết rằng những nội dung bên trong cặp thẻ này là HTML. Tuy nhiên, bên trong thẻ này mình có thêm một thuộc tính tên là lang với giá trị là vi (). Thuộc tính này nghĩa là chúng ta khai báo cho trình duyệt biết mã ngôn ngữ mà ta sử dụng trên website, mã vi nghĩa là Vietnamese – tiếng Việt, bạn có thể tham khảo các mã ngôn ngữ khác tại đây. Bạn nên nhớ một điều là thẻ phải bao bọc toàn bộ nội dung website, không bao gồm thẻ. Thẻ đóng và mở phần thông tin website Phần khai báo thông tin của website sẽ được đặt vào bên trong cặp thẻ gọi là . Nội dung bên trong thẻ này là các thẻ chuyên cho khai báo thông tin website (meta), tên website (title), khai báo CSS (style), khai báo các đoạn Javascript (script) và một số thông tin khác. Thường là các thông tin được khai báo trong đây sẽ không hiển thị trực tiếp thành siêu văn bản trên web nhưng nó sẽ có nhiệm vụ chứa các thông tin quan trọng về website. Có thẻ đóng và mở phần nội dung website Đây là cặp thẻ mà bạn sẽ tiến hành viết nội dung vào, đó là cặp thẻ . Cặp thẻ này là để trình duyệt xác định đây là phần thân của website, nó sẽ chứa toàn bộ các nội dung siêu văn bản hoặc media mà bạn muốn nó hiển thị lên trang web của bạn. Phần này chúng ta sẽ làm việc nhiều hơn ở các bài sau. Bây giờ nếu bạn mở tài liệu HTML ở trên lên bằng trình duyệt thì chỉ sẽ thấy nó có mỗi đoạn nội dung nằm bên trong thẻ mà thôi. Lời kết Vậy là bây giờ bạn đã có thể tự tạo ra một tài liệu website đơn giản bằng HTML rồi đó, chỉ cần áp dụng cấu trúc tài liệu theo thứ tự mà mình đã giải thích và có ví dụ ở trên. Ở bài tiếp theo, chúng ta sẽ tìm hiểu qua một số thẻ quan trọng cần biết mà bạn nên khai báo trong cặp thẻ để khai báo thông tin một website. Các thẻ khai báo thông tin web cơ bản Như ở phần trước thì bạn đã hiểu một tài liệu web bằng HTML hoàn chỉnh sẽ bao gồm 4 phần chính là thẻ khai báo loại tập tin , thẻ , thẻ khai báo thông tin website và thẻ . https://www.youtube.com/watch?v=5QjQWv35iP0 Và bên trong cặp thẻ trong tài liệu thì đầu tiên sẽ là cặp thẻ , cặp thẻ này sẽ có nhiệm vụ để bạn khai báo thông tin tài liệu website mà bạn đang tạo ra như tên tài liệu, tên tác giả, mô tả, khai báo CSS, khai báo Javascript,…rất nhiều. Nhưng tạm thời ở đây, các bạn chỉ cần biết qua một số thẻ khai báo thông tin web cơ bản được đặt bên trong thẻ cặp mà hầu như dự án nào bạn cũng sẽ dùng tới. Trước khi bắt đầu, bạn hãy viết một tài liệu HTML như dưới đây.Đây là nội dung website
Khai báo tên tài liệu với cặp thẻ. Các văn bản nằm trong cặp thẻ này sẽ được hiểu là một đoạn văn bản, mỗi đoạn văn bản sẽ được xuống dòng và cách nhau với tỷ lệ nhất định. Ví dụ bên dưới:
Đây là một đoạn văn bản, mỗi đoạn văn bản sẽ được hiển thị một dòng riêng và được khai
báo bằng thẻ <p>
.
Đây cũng là một đoạn văn bản.
Các thẻ định dạng chữ viết Đôi khi trong văn bản của bạn sẽ cần định dạng lại chữ viết như in đậm, tô nghiêng, gạch chân,…và đây là các thẻ HTML cho từng chức năng đó. Trước hết là hãy soạn một đoạn văn bản HTML như thế này: MìnTrong tài liệu HTML, bạn có thể định dạng lại chữ viết như tô đậm
chữ viết, hoặc có thể in nghiêng, hoặc cũng có thể gạch chân nó tùy thích.
Một số trường hợp bạn cũng có thể sẽ cần gạch ngang chữ viết.
Ở trên là một đoạn kẻ ngang được khai báo bằng thẻ <hr>
.
Nếu bạn cần nhấn mạnh gì đó, bạn có thể viết như thế này.
Mình xin giải thích một số thẻ mới như sau: : In đậm chữ viết. : In nghiêng chứ viết. : Gạch chân chữ viết.: Định dạng cho một đoạn mã nào đó.
: Thước kẻ ngang trên tài liệu.
: Tô sáng chữ viết.
Thẻ trích dẫn
Trích dẫn (Quote) là một thẻ có thể bạn sẽ thường sử dụng nếu thường xuyên viết báo hay phóng sự, mục đích của nó là
định dạng một câu nói như một câu trích dẫn và có thể định dạng thêm tên người trích dẫn một cách chuyên nghiệp hơn,
thẻ trích dẫn được quy định là và tên tác giả trích dẫn được quy định là .
Thoạt nhìn đoạn văn này tưởng nó không có nghĩa, nhưng khi nhìn kỹ lại thì đúng là
chẳng có nghĩa gì.
- Thạch Phạm
Lưu ý rằng thẻ thường chỉ nên dùng đặt trong thẻ thôi chứ dùng tùy tiện nó lại mất hay. Và mặc định thì
các trình duyệt sẽ tự quy định nội dung nằm trong thẻ sẽ được in nghiêng, còn thẻ thì không có gì cả nhưng
sau này bạn làm tới phần CSS rồi thì có thể tự thêm tí “phong cách” cho thẻ quote đẹp hơn.
Thẻ định dạng sẵn
Trong HTML hiện tại nó có một thẻ được gọi là thẻ định dạng sẵn (preformatted), thẻ này sẽ được viết là
. Sở
dĩ nó được gọi là thẻ định dạng sẵn vì mặc định trình duyệt đã tự động định dạng cho các nội dung nằm bên trong thẻ đó
như kích thước chữ, khoảng cách, kiểu chữ.
Thẻ
này thường được dùng để đăng một câu đối thoại hoặc in một đoạn mã để cho dễ phân biệt với các văn
bản thông thường. Xem ví dụ:
To learn AJAX, you must be familiar with the XMLHttpRequest
Object.
Ngoài ra cũng lưu ý rằng khi viết văn bản trong cặp thẻ thì việc xuống hàng thông thường vẫn sẽ được định dạng ra
mà không cần thêm thẻ .
Thuộc tính style để định dạng chữ viết
Mặc dù việc lên màu sắc trên website là do CSS đảm nhận, nhưng nếu là một văn bản HTML thông thường thì bạn vẫn có
thể thêm màu sắc cho chữ viết bằng thuộc tính style. Thuộc tính style có thể đặt trong bất cứ thẻ nào và giá trị của
thuộc tính đó là các thuộc tính của CSS (mình sẽ liệt kê một số thuộc tính hay dùng bên dưới).
Đây là một văn bản có thuộc tính
style. Nếu bạn muốn dùng nhiều style trong một đoạn văn thì có thể sử dụng thẻ
<span>
để thêm nhiều style khác nhau.
Cấu trúc viết thuộc tính sẽ là .
Màu chữ
Để thiết lập màu chữ, bạn có thể sử dụng thuộc tính color. Giá trị của nó là tên màu trong tiếng Anh hoặc mã màu HEX.
01 chữ màu đỏ
Màu nền
Màu nền có cách thiết lập giống hệt màu chữ, tức là bạn có thể dùng giá trị là tên màu trong tiếng Anh hoặc mã màu HEX.
Tên thuộc tính của màu nền là background-color.
01
Chữ có nền màu đỏ và màu chữ là
trắng
Kích thước chữ
Kích thước chữ bạn có thể sử dụng thuộc tính font-size và giá trị là số kèm đơn vị. Bạn có thể sử dụng đơn
vị px, %, pt hoặc em tùy thích, đơn giản nhất là dùng px.
01 Chữ có kích thước 32px
Font chữ
Nếu bạn có nhu cầu sử dụng font chữ khác so với font chữ mặc định thì hãy dùng thuộc tính font-family với giá trị là tên
font chữ có trên máy tính. Một số tên font chữ phổ biến nhất là Arial, Helvetica, Time New Roman, Verdana.
01 Font chữ Arial
Ngoài ra bạn có thể thêm font chữ dự phòng bằng cách khai báo nhiều tên font chữ khác nhau được ngăn cách bởi dấu
phẩy, ví dụ:
01
Font chữ Arial
Có nghĩa là nếu máy người đọc không có font chữ Helvetica thì nó sẽ sử dụng font chữ Arial.
Căn lề văn bản
Để canh lề, chúng ta sử dụng thuộc tính text-align với giá trị là left,center, right hoặc justify.
01 Canh giữa văn bản
Lời kết
Có vẻ bài này chúng ta đã tìm hiểu hơi nhiều về HTML rồi phải không nè? Nhưng những gì mình đề cập ở trên đều rất
quan trọng và bạn cần nên tập viết nhiều để làm quen với nó vì về sau nó sẽ giúp ích bạn nhiều trong công việc nói chung
và việc làm web nói riêng.
Tạo danh sách (List)
Phần tử danh sách (list) được sử dụng rất thường xuyên trong một tài liệu web bằng HTML. Trong một trang web thường
người ta sử dụng các phần tử danh sách rất nhiều, chẳng hạn như menu, danh sách những thông tin nào đó,…v…v…đều
được tạo ra bởi các thẻ tạo danh sách trong HTML.
https://www.youtube.com/watch?v=PvE72A1TD7Y
Trong HTML có ba kiểu danh sách (list type) đó là kiểu sắp xếp (ordered list), kiểu không sắp xếp (unordered list) và kiểu
danh sách mô tả (description list). Cụ thể:
Kiểu sắp xếp (Ordered List): Là kiểu hiển thị một danh sách mà các mục con của nó được sắp xếp theo thứ tự
bằng số hoặc chữ cái.
Kiểu không sắp xếp (Unordered List): Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được sắp xếp
theo thứ tự mà chỉ được đánh dấu bằng một ký tự đặc trưng.
Kiểu mô tả (Description List): Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được đánh dấu thứ
tự, nhưng sẽ có kèm theo một đoạn miêu tả.
Dưới đây là hình ảnh sự khác nhau giữa ba kiểu danh sách do W3School mô tả:
Ordered List
Để khai báo một danh sách với kiểu được sắp xếp, bạn phải bắt đầu bằng cặp thẻ
. Bên trong cặp thẻ này sẽ là
danh sách các mục con, mỗi mục sẽ đặt trong cặp thẻ , xem ví dụ bên dưới.
- Mục con 1
- Mục con 2
- Mục con 3
- Mục con 4
- Mục con 5
Một kiểu hiển thị khác của Ordered List
- Mục con
- Mục con
- Mục con
- Mục con
- Mục con
1
2
3
4
5
Thẻ cũng hỗ trợ thêm một thuộc tính nữa tên làtype, thuộc tính này là để bạn thiết lập kiểu sắp xếp các mục con bên
trong danh sách. Giá trị của thuộc tính type là 1, i, I, a, A.
Unordered List
Giống như Ordered List, kiểu danh sách Unordered List sẽ bắt đầu bằng cặp thẻ
và bên trong nó các mục con
sẽ được khai báo bằng cặp thẻ -
.
- Mục con 1
- Mục con 2
- Mục con 3
- Mục con 4
- Mục con 5
Một kiểu hiển thị khác của Unordered List
- Mục con 1
- Mục con 2
- Mục con 3
- Mục con 4
- Mục con 5
Bạn cũng có thể thay đổi kiểu hiển thị của thẻ bằng cách thêm thuộc tính style với thuộc tính CSS làlist-styletype và giá trị làdisc,square, circle vànone.
Description List
Với kiểu danh sách này thì cách viết thẻ hơi khác một tí, đó là nó sẽ bắt đầu danh sách bằng cặp thẻ
, trong đó
tên mỗi mục con sẽ được khai báo bằng cặp thẻ -
và mô tả cho mục con sẽ được khai báo bằng cặp thẻ -
.
Một website gồm có
- HTML
- - khung xương của website.
- CSS
- - bộ da của website
- Javascript
- - bộ cánh của website
- Ngôn ngữ server-side (ASP.NET, PHP, RUBY,..)
- - linh hồn của website
Xếp chồng danh sách
Trong HTML, bạn có thể tiến hành xếp chồng một danh sách vào nhiều tầng bằng cách lồng thêm một danh sách nữa vào
cặp thẻ -
của mục con mà bạn muốn thêm tầng cho nó, như ví dụ dưới đây.
- WordPress
- WordPress Themes
- WordPress Plugin
- Front-end
- HTML
- CSS
- Javascript (jQuery, AngularJS,..)
Lời kết
Quá dễ dàng để khai báo phần tử danh sách trong HTML phải không nào? Vốn dĩ HTML luôn dễ dàng như vậy mà. Cố
gắng lên nào, chỉ còn vài phần tử quan trọng nữa thôi là bạn đã thành chuyên gia HTML rồi.
Thẻ tạo liên kết và liên kết neo
https://www.youtube.com/watch?v=mPVRMxJhV2s
Một trong những nét đặc trưng của siêu văn bản là có những đường liên kết (link) tới một tài liệu khác thông qua địa
đường dẫn đến tài liệu hoặc địa chỉ website. Để tạo ra các đường liên kết trong HTML ta sẽ sử dụng cặp thẻ
chứa các tham số như sau:
01
nhấp vào
đây
Mặc dù thẻ có rất nhiều thuộc tính nhưng ở trên là các thuộc tính thường dùng nhất hiện tại, bạn có thể tham khảo
thêm các thuộc tính về thẻ tại đây.
Một siêu văn bản sẽ có các siêu liên kết để người đọc có thể truy cập một tài liệu khác.
Ý nghĩa các thuộc tính:
href: Địa chỉ của tài liệu muốn liên kết đến, đây có thể là một đường dẫn thư mục hoặc địa chỉ website. Nếu bạn
muốn truy cập một tài liệu trên cùng một cấp thư mục thì chỉ cần ghi tên-tập-tin.định dạng (ví dụ: gioi-thieu.html).
title: Tiêu đề của liên kết, tiêu đề sẽ hiển thị như một thông tin thêm khi rê chuột vào liên kết.
target: Xác định nơi mở tài liệu, nó có các giá trị như _blank (mở tài liệu trên cửa sổ mới), _self (mở tài liệu trên
cửa sổ hiện tại, nếu bạn không khai báo thuộc tính target thì nó sẽ sử dụng giá trị này làm mặc định), _top (mở tài liệu
trong nội dung trang hiện tại), _parent (mở tài liệu trên khung trình duyệt mẹ của nó).
Và một điều bạn cần biết đó là nội dung trong cặp thẻ có thể là một nội dung siêu văn bản nào, bao gồm các thẻ tiêu
đề, hình ảnh,…
Liên kết neo (Anchor Link)
Liên kết neo nghĩa là một liên kết trong siêu văn bản sẽ dẫn đến một vị trí đặc biệt trong cùng tài liệu mà không phải tải lại
hoặc mở một tài liệu mới. Một liên kết neo sẽ có hai phần:
Khu vực được neo, được khai báo bằng thẻ bất kỳ với thuộc tính id (ví dụ:
).
Liên kết neo, được khai báo bằng thẻ nhưng có thuộc tính là href nhưng giá trị là có dấu # và tên id của khu
vực cần truy cập đến (ví dụ: xem nội dung).
Hãy thử xem một ví dụ sau:
Xem thân bài
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam mattis
maximus. Phasellus facilisis felis massa, at bibendum lorem fringilla ut. Sed ipsum
sapien, elementum id felis ut, iaculis pulvinar elit.
Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut
posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula
mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut
purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus
convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed,
facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis
quis eros iaculis convallis in non neque.
Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut
posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula
mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut
purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus
convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed,
facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis
quis eros iaculis convallis in non neque.
Đây là thân bài
Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut
posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula
mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut
purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus
convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed,
facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis
quis eros iaculis convallis in non neque.
Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut
posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula
mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut
purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus
convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed,
facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis
quis eros iaculis convallis in non neque.
Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut
posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula
mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut
purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus
convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed,
facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis
quis eros iaculis convallis in non neque.
Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut
posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula
mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut
purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus
convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed,
facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis
quis eros iaculis convallis in non neque.
Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus
justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae
pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula.
Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque
mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id
rutrum tortor.
Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae
aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor
tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer
dapibus faucibus libero ut porta. Nam vel eleifend odio.
Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus
justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae
pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula.
Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque
mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id
rutrum tortor.
Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae
aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor
tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer
dapibus faucibus libero ut porta. Nam vel eleifend odio.
Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus
justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae
pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula.
Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque
mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id
rutrum tortor.
Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae
aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor
tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer
dapibus faucibus libero ut porta. Nam vel eleifend odio.
Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus
justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae
pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula.
Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque
mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id
rutrum tortor.
Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae
aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor
tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer
dapibus faucibus libero ut porta. Nam vel eleifend odio.
Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus
justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae
pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula.
Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque
mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id
rutrum tortor.
Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae
aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor
tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer
dapibus faucibus libero ut porta. Nam vel eleifend odio.
Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus
justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae
pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula.
Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque
mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id
rutrum tortor.
Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae
aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor
tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer
dapibus faucibus libero ut porta. Nam vel eleifend odio.
Khi nhấp vào liên kết Xem thân bài thì nó sẽ tự động nhảy đến khu vực được gán thuộc tính id="than-bai".
Lời kết
Kết thúc bài tới đây, bạn đã nắm được làm sao để tạo ra các liên kết và liên kết neo trong trang chưa nào? Rất dễ dàng
phải không, chỉ cần nhớ như vậy thôi là được rồi.
Chèn tập tin kỹ thuật số vào web
Các tập tin kỹ thuật số (media files) mà mình đang nói đến đó là hình ảnh (image), âm thanh (audio) và phim ảnh (video).
Với HTML chúng ta có thể dễ dàng chèn những loại tập tin này vào tài liệu và nó sẽ hiển thị rất là sống động luôn.
Lưu ý rằng các tập tin kỹ thuật số được chèn vào phải có đường dẫn tuyệt đối dẫn trực tiếp đến tập tin đó (ví
dụ: http://domain.com/file/image.jpg hoặc audio.mp3, video.mp4,…).
https://www.youtube.com/watch?v=vAbDajCuswg
Mục lục nội dung
Chèn ảnh vào HTML
Chèn video
Chèn âm thanh – nhạc
Chèn đối tượng kỹ thuật số với thẻ