HTML ( Ngôn ngữ đánh dấu siêu văn bản hoặc ngôn ngữ đánh dấu văn bản được liên kết) là mã được sử dụng để cấu trúc và hiển thị một trang web cũng như nội dung của nó . Ví dụ: nội dung phải được cấu trúc thành một chuỗi các đoạn văn, trong một danh sách có dấu đầu dòng hoặc có kèm theo hình ảnh minh họa và bảng biểu. Như tiêu đề gợi ý, bài viết này sẽ giải thích những điều cơ bản về HTML và chức năng của nó là gì.
Vậy HTML là gì?
HTML không phải là ngôn ngữ lập trình; nó là ngôn ngữ đánh dấu và được sử dụng để cho trình duyệt của bạn biết cách hiển thị các trang web bạn truy cập. Nó có thể đơn giản hoặc phức tạp như mong muốn của nhà thiết kế web. HTML bao gồm một loạt các phần tử mà bạn có thể sử dụng để bao bọc hoặc bao bọc các phần khác nhau của nội dung nhằm làm cho nội dung đó trông hoặc hoạt động theo một cách nhất định. Các thẻ (một từ khác cho nhãn hoặc điểm đánh dấu) bao quanh văn bản có thể biến một từ hoặc hình ảnh thành siêu liên kết ở một nơi khác, chúng có thể in nghiêng các từ, tăng hoặc giảm kích thước phông chữ, v.v. Ví dụ: lấy dòng văn bản sau:
Mijn auto is echt bijzonder.
Giả sử chúng ta muốn biến dòng này thành một đoạn văn, chúng ta sẽ thực hiện điều đó bằng cách <p>gói dòng này bằng (nhãn đoạn văn) như dưới đây:
<p>Mijn auto is echt bijzonder.</p>
Giải phẫu của một phần tử HTML
Hãy cùng khám phá yếu tố đoạn văn này thêm một chút. Các phần chính của phần tử của chúng tôi là:
Nhãn mở - <p>- Nhãn này bao gồm tên của phần tử (trong trường hợp này là p), được bao bọc bởi các dấu nhỏ hơn và lớn hơn. <tên phần tử> cho chúng ta biết phần tử bắt đầu từ đâu. Đây cũng là nơi bắt đầu ảnh hưởng của nó lên dòng và trong trường hợp này, nó chỉ ra phần đầu của đoạn văn.
Thẻ kết thúc - </p>Thẻ này giống hệt thẻ mở, ngoại trừ việc có dấu gạch chéo phía trước tên thành phần. Dấu gạch chéo nghiêng về phía trước và ở ngay phía sau <. Nhãn kết thúc cho biết phần cuối của phần tử, trong trường hợp này là phần cuối của đoạn văn. Những người mới bắt đầu thường quên điểm đánh dấu kết thúc và điều đó có thể dẫn đến những kết quả kỳ lạ.
Nội dung - Đây là nội dung của phần tử, trong trường hợp này chỉ là một dòng văn bản.
Phần tử - <p> xx </p>Dấu mở cộng với dấu kết thúc cộng với nội dung bằng phần tử.
Các phần tử cũng có thể được cung cấp các thuộc tính trông như thế này:
<p class="devnl-voorbeeld">Mijn auto is echt bijzonder.</p>
Thuộc tính chứa thông tin bổ sung về thành phần mà bạn không muốn thấy trong nội dung. Đây là classtên của thuộc tính và devnl-voorbeeldlà giá trị của thuộc tính. Thuộc tính này classcho phép thêm một mã định danh vào phần tử mà sau này có thể được sử dụng để biến phần tử đó thành mục tiêu cho thông tin kiểu dáng và những thứ khác.
Một thuộc tính luôn có những đặc điểm sau:
Khoảng trắng giữa thuộc tính và tên của phần tử (hoặc thuộc tính trước đó nếu phần tử có nhiều hơn một).
Tên thuộc tính được theo sau bởi dấu bằng (=).
Giá trị của thuộc tính được đặt trong dấu ngoặc kép.
Các phần tử lồng nhau
Bạn có thể chèn các phần tử vào các phần tử khác - chúng tôi gọi đây là lồng nhau . Nếu chúng ta muốn nói rằng chiếc xe của tôi THỰC SỰ đặc biệt, chúng ta có thể <strong>nhúng từ “thật” vào một phần tử. Điều này làm cho từ này được nhấn mạnh:
<p>Mijn auto is <strong>echt</strong> bijzonder.</p>
Tuy nhiên, bạn cần đảm bảo rằng các phần tử của bạn được lồng chính xác: trong ví dụ trên, chúng ta đã mở phần <p>tử trước rồi đến <strong>phần tử. Vì vậy, chúng ta phải đóng nó trước <strong>và sau đó <p>. Sau đây là sai :
<p>Mijn auto is <strong>echt bijzonder.</p></strong>
Các phần tử phải được mở và đóng đúng cách để chúng tồn tại rõ ràng bên trong hoặc bên ngoài nhau. Nếu chúng trùng nhau như trên, trình duyệt web sẽ cố gắng đoán xem bạn muốn nói gì và điều đó có thể cho ra kết quả rất bất ngờ. Vì vậy, đừng làm điều đó!
Phần tử trống
Một số phần tử không có nội dung và được gọi là phần tử trống. Ví dụ: phần <img>tử đã có trong HTML của chúng tôi là một phần tử trống:
<img src="./images/mijn-auto.png" alt="Mijn auto">
Phần tử này chứa hai thuộc tính, nhưng không có thuộc tính nào </img>kết thúc phần tử cũng như bất kỳ nội dung nào trong phần tử. Phần tử img không nhúng nội dung rồi tác động lên nội dung đó. Mục đích của phần tử này là nhúng hình ảnh vào trang HTML thay cho phần < /img>tử.
Giải phẫu của một tài liệu HTML
Điều đó kết thúc phần giới thiệu của chúng tôi về các phần tử HTML riêng lẻ, nhưng bản thân chúng không hữu ích lắm. Bây giờ chúng ta sẽ xem xét cách kết hợp các phần tử riêng lẻ để tạo thành một trang HTML hoàn chỉnh. Chúng ta hãy xem mã chúng tôi sử dụng trong ví dụ index.html như dưới đây.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DevNL-voorbeeld</title>
</head>
<body>
<img src="./images/mijn-auto.png" alt="Mijn auto">
</body>
</html>
Có gì trong trang của chúng tôi?
<!DOCTYPE html>- Loại tài liệu. Cách đây rất lâu HTML còn non trẻ (khoảng năm 1991/2). Doctypes sau đó phải đóng vai trò là liên kết đến một loạt quy tắc. Trang HTML phải tuân theo các quy tắc đó để được coi là HTML tốt. Đó có thể là tính năng kiểm tra lỗi tự động và những thứ hữu ích khác. Nhưng ngày nay không còn ai quan tâm đến những quy định đó nữa. Chúng chỉ là một hiện vật lịch sử cần có trong đó để mọi thứ hoạt động chính xác. Hiện tại, đó là tất cả những gì bạn cần biết.
<html></html>— <html>Phần tử nhúng tất cả nội dung trên toàn bộ trang và còn được gọi là phần tử gốc. (root là từ tiếng Anh có nghĩa là root).
<head></head>— <head>Phần tử này hoạt động giống như một nơi chứa tất cả những thứ bạn muốn đưa vào trang HTML, nhưng đó không phải là một phần nội dung bạn muốn hiển thị cho người dùng khi họ đọc trang của bạn. Điều này bao gồm những thứ như từ khóa, mô tả trang mà bạn muốn nó xuất hiện trong kết quả tìm kiếm, CSS để tạo kiểu cho nội dung, khai báo bộ ký tự, v.v.
<body></body>— <body>Phần tử chứa tất cả nội dung bạn muốn hiển thị cho người dùng web khi họ truy cập trang của bạn, cho dù đó là văn bản, hình ảnh, video, trò chơi, bản âm thanh có thể phát hay bất kỳ nội dung nào.
<meta charset="utf-8">— Phần tử này xác định rằng bộ ký tự cho tài liệu của bạn sẽ là UTF-8. UTF-8 chứa hầu hết các ký tự được sử dụng cho tất cả các ngôn ngữ đã biết của con người. Về cơ bản, điều này có nghĩa là giờ đây nó có thể xử lý bất kỳ nội dung văn bản nào bạn muốn đưa vào đó. Không có lý do gì để không gán utf-8 cho bộ ký tự và nó có thể giúp bạn tránh được những vấn đề sau này.
<title></title>— Phần tử này đặt tiêu đề cho trang của bạn. Đó là tiêu đề xuất hiện trong tab trình duyệt nơi trang của bạn tải và được sử dụng để mô tả trang khi bạn đánh dấu trang/yêu thích nó.
Những bức ảnh
Bây giờ chúng ta muốn chuyển sự chú ý sang phần tử hình ảnh:
<img src="./images/mijn-auto.png" alt="Mijn auto">
Như chúng tôi đã nói, phần tử này cho phép chúng tôi nhúng hình ảnh vào trang của mình. Chúng tôi làm điều đó với src-attribuut(src = source và source có nghĩa là nguồn). Thuộc tính này chứa đường dẫn đến tệp hình ảnh của chúng tôi.
Chúng tôi cũng alt-attribuutđã thêm một. (alt = thay thế, thay thế trong tiếng Hà Lan). Thuộc tính này cho phép bạn cung cấp mô tả về hình ảnh cho người dùng văn bản không thể nhìn thấy hình ảnh. Đó có thể là vì:
Họ bị khiếm thị. Người dùng bị khiếm thị nặng thường sử dụng phần mềm Screen Reader để đọc văn bản thay thế cho họ.
Đã xảy ra lỗi và không thể hiển thị hình ảnh. Ví dụ: hãy thử cố tình thay đổi đường dẫn trong thuộc tính src của bạn để nó không còn chính xác nữa. Khi bạn lưu tệp HTML và tải lại trang, thay vì hình ảnh, bạn sẽ alt-attribuutthấy văn bản được tô sáng.
Các từ khóa liên quan đến văn bản thay thế là “văn bản mô tả”. Văn bản thay thế bạn viết phải cung cấp cho người đọc ý tưởng hay về những gì hình ảnh thực sự mô tả. Văn bản trong ví dụ của chúng tôi ở trên “Ô tô của tôi” thực sự không đủ tốt. Một lựa chọn thay thế tốt hơn nhiều cho hình ảnh chiếc ô tô của tôi sẽ là: “Ô tô của tôi: một phiên bản thu nhỏ của Tesla.”
Định dạng văn bản
Trong phần này chúng ta thảo luận về một số thành phần HTML tiêu chuẩn mà chúng ta sử dụng để định dạng văn bản.
Tiêu đề
Với tiêu đề hoặc thành phần tiêu đề, bạn có thể định dạng một số phần nhất định của nội dung dưới dạng tiêu đề hoặc tiêu đề. Giống như một cuốn sách có tiêu đề và các chương có tiêu đề và phụ đề, trang HTML cũng vậy. HTML có <h1>tối đa sáu cấp độ tiêu đề <h6>mặc dù bạn thường chỉ sử dụng ba hoặc bốn cấp độ.
<h1>Mijn auto is echt bijzonder.</h1>
<h2>Mijn auto is echt bijzonder.</h2>
<h3>Mijn auto is echt bijzonder.</h3>
<h4>Mijn auto is echt bijzonder.</h4>
<h5>Mijn auto is echt bijzonder.</h5>
<h6>Mijn auto is echt bijzonder.</h6>
Đoạn văn
Như đã giải thích ở trên, <p>các phần tử - đóng vai trò là nơi chứa các đoạn văn. Bạn sẽ sử dụng chúng thường xuyên khi định dạng nội dung văn bản thông thường:
<p>Mijn auto is echt bijzonder.</p>
Danh sách
Rất nhiều nội dung web bao gồm các danh sách và HTML có các phần tử đặc biệt dành cho chúng. Bố cục của một danh sách luôn bao gồm hai phần tử. Các loại danh sách phổ biến nhất là danh sách có thứ tự và không có thứ tự:
Danh sách không có thứ tự là danh sách mà thứ tự của các mục trong danh sách không quan trọng, chẳng hạn như danh sách mua sắm. Chúng được bao bọc trong một <ul>phần tử.
Danh sách có thứ tự là danh sách mà thứ tự của các mục hoặc chủ đề trong danh sách thực sự quan trọng, chẳng hạn như công thức nấu ăn. Chúng được bao quanh bởi một <ol>phần tử.
Mỗi bài viết hoặc chủ đề trong danh sách đều được nhúng trong một <li>phần tử. Ví dụ: nếu chúng ta muốn biến một phần của đoạn văn sau thành một danh sách,
<p>Mijn auto is echt bijzonder doordat hij is voorzien van: navigatie, stalen velgen en een trekhaak. Hier ben ik erg blij mee...</p>
chúng ta có thể thay đổi định dạng như thế này:
<p>Mijn auto is echt bijzonder doordat hij is voorzien van:</p>
<ul>
<li>navigatie</li>
<li>stalen velgen</li>
<li>trekhaak</li>
</ul>
<p>Hier ben ik erg blij mee... </p>
Siêu liên kết
Các siêu liên kết rất quan trọng - chúng là thứ tạo nên Web MỘT WEB. Để thêm siêu liên kết, chúng ta cần sử dụng một phần tử đơn giản - <a>- chữ a là viết tắt của “neo”. Để biến một đoạn văn bản trong đoạn văn của bạn thành một liên kết. Đầu tiên chúng ta chọn đoạn văn bản muốn liên kết bằng siêu liên kết như bên dưới:
<a>Mijn auto is echt bijzonder</a>
Sau đó, chúng ta gán cho <a>phần tử một thuộc tính và thực hiện như thế này:
<a href="#">Mijn auto is echt bijzonder</a>
Giá trị của thuộc tính trở thành địa chỉ web bạn muốn kết nối siêu liên kết tới:
<a href="https://www.khatvongsong.vn/mijnauto">Mijn auto is echt bijzonder</a>
Bạn có thể nhận được kết quả bất ngờ nếu bạn https://bỏ nó đi. Chúng tôi gọi phần này là giao thức và nó nằm ở phần đầu của địa chỉ web. Thoạt nhìn, hrefnó có vẻ giống như một cái tên khá khó hiểu cho một thuộc tính. Nếu bạn khó nhớ tên, hãy nhớ rằng href là tên viết tắt của tham chiếu siêu văn bản .Bắt đầu với Web là một loạt bài ngắn giới thiệu cho bạn những khía cạnh thực tế của việc phát triển web. Bạn sẽ thiết lập các công cụ cần thiết để tạo một trang web đơn giản và xuất bản mã đơn giản của riêng bạn.
Câu chuyện về trang web đầu tiên của bạn
Một trang web chuyên nghiệp cần có công sức, vì vậy nếu bạn chưa biết nhiều về phát triển web, chúng tôi khuyên bạn nên bắt đầu từ việc nhỏ. Bạn sẽ không tạo ngay một Facebook mới, nhưng không khó để đưa trang web đơn giản của riêng bạn lên mạng, vì vậy chúng ta sẽ bắt đầu với điều đó.
Nếu bạn hoàn thành các cuộc thảo luận bên dưới, bạn sẽ đi từ con số không đến việc đưa trang web đầu tiên của mình lên mạng. Hãy bắt đầu!
Cài đặt phần mềm cơ bản
Có rất nhiều sự lựa chọn về các công cụ để xây dựng một trang web. Nếu bạn mới bắt đầu, bạn có thể bị nhầm lẫn bởi nhiều trình soạn thảo mã, khung công tác và phần mềm kiểm tra ngoài kia. Trong [#84] chúng tôi chỉ cho bạn từng bước cách chỉ cài đặt phần mềm bạn cần để bắt đầu phát triển web.
Xử lý tập tin
-- Hướng dẫn này sẽ được viết trong thời gian tới –
Một trang web bao gồm nhiều tệp: nội dung văn bản, mã, tệp kiểu, nội dung phương tiện, v.v. Khi xây dựng một trang web, bạn cần đặt các tệp này lại với nhau theo một cấu trúc được cân nhắc kỹ lưỡng và đảm bảo chúng có thể giao tiếp với nhau. Xử lý tệp giải thích cách tạo cấu trúc tệp được cân nhắc kỹ lưỡng cho trang web của bạn và những vấn đề bạn cần lưu ý.
Các khái niệm cơ bản về HTML
Ngôn ngữ đánh dấu siêu văn bản (HTML) là mã bạn sử dụng để cấu trúc nội dung web của mình và mang lại ý nghĩa cũng như mục đích cho nó. Ví dụ: nội dung bao gồm một số đoạn văn hay một danh sách một số điểm? Có hình ảnh trên trang của bạn? Tôi có bảng dữ liệu không? Không làm bạn choáng ngợp, [HTML Basics] cung cấp cho bạn đủ thông tin để làm quen với HTML.
Khái niệm cơ bản về CSS
Bảng định kiểu xếp tầng (CSS) là mã giúp bạn quyết định trang web của mình sẽ trông như thế nào. Ví dụ: bạn muốn văn bản màu đỏ hay đen? Nội dung nên ở đâu trên màn hình? Những hình nền và màu sắc nào nên được sử dụng để nâng cao trang web của bạn? [Khái niệm cơ bản về CSS] sẽ cung cấp cho bạn thông tin để bắt đầu.
Khái niệm cơ bản về JavaScript
-- Hướng dẫn này sẽ được viết trong thời gian tới –
JavaScript là ngôn ngữ lập trình bạn sử dụng để thêm chức năng tương tác vào trang web của mình, chẳng hạn như trò chơi, những điều xảy ra khi nhấn nút, dữ liệu được điền vào biểu mẫu, hiệu ứng kiểu động, hoạt ảnh và hơn thế nữa. Những điều cơ bản về JavaScript sẽ cho bạn ý tưởng về những gì có thể làm được với ngôn ngữ thú vị này và cách bắt đầu.
Web hoạt động như thế nào?
-- Hướng dẫn này sẽ được viết trong thời gian tới –
Khi bạn truy cập trang web yêu thích của mình, có rất nhiều điều phức tạp đang diễn ra trong nền mà có thể bạn chưa biết. Web hoạt động như thế nào? bao quát rộng rãi những gì xảy ra khi bạn xem một trang web trên máy tính của mình.
Theo Mitchel
