Tự học html: Tìm hiểu về HTML

Tự học html: Tìm hiểu về HTML

HTML là nền tảng của tất cả các trang web. Nếu không có HTML, bạn sẽ không thể sắp xếp văn bản hoặc thêm hình ảnh hoặc video vào các trang web của mình. HTML là sự khởi đầu của mọi thứ bạn cần biết để tạo ra các trang web hấp dẫn!

Các bài viết liên quan:

Kỹ năng cần thiết cần hiểu

Bạn sẽ tìm hiểu tất cả các thẻ HTML phổ biến được sử dụng để cấu trúc các trang HTML, bộ xương của tất cả các trang web. Bạn cũng sẽ có thể tạo các bảng HTML để trình bày dữ liệu dạng bảng một cách hiệu quả.

Các yếu tố và cấu trúc

Tìm hiểu về các phần tử và cấu trúc HTML, các khối xây dựng của trang web.

GIỚI THIỆU VỀ HTML

HTML (Ngôn ngữ đánh dấu siêu văn bản) được sử dụng để cung cấp nội dung cho một trang web và hướng dẫn trình duyệt web cách cấu trúc nội dung đó.

Chào mừng bạn đến với thế giới code! Năm ngoái, hàng triệu người học từ cộng đồng của chúng tôi đã bắt đầu với HTML. Tại sao? HTML là bộ xương của tất cả các trang web. Nó thường là ngôn ngữ đầu tiên được học bởi các nhà phát triển, nhà tiếp thị và nhà thiết kế và là cốt lõi cho công việc phát triển front-end. Nếu đây là lần đầu tiên bạn chạm vào mã, chúng tôi rất vui vì những gì bạn sắp tạo.

Vậy chính xác thì HTML là gì? HTML cung cấp cấu trúc cho nội dung xuất hiện trên trang web, chẳng hạn như hình ảnh, văn bản hoặc video. Nhấp chuột phải vào bất kỳ trang nào trên internet, chọn “Kiểm tra” và bạn sẽ thấy HTML trong bảng điều khiển của màn hình.

HTML là viết tắt của HyperText Markup Language:

Một đánh dấu ngôn ngữ là một ngôn ngữ máy tính xác định cấu trúc và trình bày văn bản thô.

Trong HTML, máy tính có thể biểu diễn ngôn ngữ cấu trúc thông qua HTML.

Siêu văn bản là văn bản được hiển thị trên máy tính hoặc thiết bị cung cấp quyền truy cập vào văn bản khác thông qua các liên kết, còn được gọi là siêu liên kết . Bạn có thể đã nhấp vào một vài siêu liên kết trên đường đến khóa học websitehcm này.

Học HTML là bước đầu tiên trong việc tạo trang web, nhưng ngay cả một chút kiến ​​thức cũng có thể giúp bạn đưa các đoạn mã vào các mẫu bản tin, blog hoặc trang web. Khi tiếp tục học, bạn có thể xếp lớp HTML với CSS và JavaScript để tạo các trang web động và hấp dẫn về mặt hình ảnh. Nhưng hiện tại, chúng ta sẽ tập trung vào cách thêm và sửa đổi nội dung cơ bản trên một trang, như văn bản, hình ảnh và video. Đừng lo lắng nếu các trang web trông xấu xí – chúng tôi chỉ mới bắt đầu.

HTML Tag

HTML bao gồm các thẻ phần tử. Các yếu tố này biểu diễn cấu trúc trang web và xác định nội dung của trang web. Hãy xem chúng được viết như thế nào.

Sơ đồ bên phải hiển thị một phần tử đoạn HTML. Như chúng ta có thể thấy, phần tử đoạn văn được tạo thành từ:

  • Một thẻ mở ( <p>)
  • Nội dung (văn bản “Hello World!”)
  • Một thẻ đóng ( </p>)
  • Một thẻ và nội dung giữa nó được gọi là một phần tử HTML. Có nhiều thẻ mà chúng ta có thể sử dụng để sắp xếp và hiển thị văn bản cũng như các loại nội dung khác, chẳng hạn như hình ảnh.

Chúng ta hãy nhanh chóng xem xét từng phần của phần tử trong hình:

  • Phần tử HTML (hay đơn giản là phần tử) – một đơn vị nội dung trong tài liệu HTML được tạo thành bởi các thẻ HTML và văn bản hoặc phương tiện mà nó chứa.
  • Thẻ HTML – tên phần tử, được bao quanh bởi dấu ngoặc nhọn mở ( <) và đóng ( >).
  • Thẻ mở – thẻ HTML đầu tiên được sử dụng để bắt đầu một phần tử HTML. Loại thẻ được bao quanh bởi dấu ngoặc nhọn mở và đóng.
  • Nội dung – Thông tin (văn bản hoặc các phần tử khác) chứa giữa các thẻ mở và thẻ đóng của một phần tử HTML.

Thẻ đóng – thẻ HTML thứ hai được sử dụng để kết thúc một phần tử HTML. Các thẻ đóng có một dấu gạch chéo phía trước ( /) bên trong chúng, ngay sau dấu ngoặc nhọn bên trái.

BODY

Một trong những phần tử HTML chính mà chúng tôi sử dụng để xây dựng trang web là phần tử body. Chỉ nội dung bên trong các thẻ mở và đóng nội dung mới có thể được hiển thị trên màn hình.

CẤU TRÚC HTML

HTML được tổ chức như một tập hợp các mối quan hệ cây gia đình. Như bạn đã thấy trong bài tập trước, chúng tôi đã đặt <p>các thẻ bên trong <body>các thẻ. Khi một phần tử được chứa bên trong một phần tử khác, nó được coi là phần tử con của phần tử đó. Phần tử con được bao trong phần tử mẹ.

Heading

Tiêu đề trong HTML tương tự như tiêu đề trong các loại phương tiện khác. Ví dụ, trong báo chí, các tiêu đề lớn thường được sử dụng để thu hút sự chú ý của người đọc. Những lần khác, tiêu đề được sử dụng để mô tả nội dung, chẳng hạn như tiêu đề của một bộ phim hoặc một bài báo giáo dục.

HTML tuân theo một mẫu tương tự. Trong HTML, có sáu tiêu đề hoặc phần tử tiêu đề khác nhau . Các tiêu đề có thể được sử dụng cho nhiều mục đích khác nhau, như tiêu đề các phần, bài báo hoặc các dạng nội dung khác.

Sau đây là danh sách các phần tử tiêu đề có sẵn trong HTML. Chúng được xếp theo thứ tự từ kích thước lớn nhất đến nhỏ nhất.

  • <h1>- được sử dụng cho các tiêu đề chính. Tất cả các tiêu đề nhỏ hơn khác được sử dụng cho tiêu đề phụ.
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>

DIV

Một trong những phần tử phổ biến nhất trong HTML là <div>phần tử. <div>là viết tắt của “phân chia” hoặc một vùng chứa chia trang thành các phần. Các phần này rất hữu ích để nhóm các phần tử trong HTML của bạn lại với nhau.

<div>Vốn dĩ không có biểu diễn trực quan, nhưng chúng rất hữu ích khi chúng ta muốn áp dụng các kiểu tùy chỉnh cho các phần tử HTML của mình. <div>s cho phép chúng tôi nhóm các phần tử HTML để áp dụng các kiểu giống nhau cho tất cả các phần tử HTML bên trong. Chúng ta cũng có thể tạo kiểu cho <div>toàn bộ phần tử. Bạn có thể xem cách này có thể được thực hiện trong khóa học Học CSS .

<div>s có thể chứa bất kỳ văn bản hoặc các phần tử HTML khác, chẳng hạn như liên kết, hình ảnh hoặc video. Hãy nhớ luôn thêm hai khoảng cách thụt lề khi bạn lồng các phần tử vào bên trong của <div>s để dễ đọc hơn.

THUỘC TÍNH

Nếu chúng ta muốn mở rộng thẻ của một phần tử, chúng ta có thể làm như vậy bằng cách sử dụng một thuộc tính . Thuộc tính là nội dung được thêm vào thẻ mở của một phần tử và có thể được sử dụng theo nhiều cách khác nhau, từ cung cấp thông tin đến thay đổi kiểu. Các thuộc tính được tạo thành từ hai phần sau:

  • Các tên của thuộc tính
  • Các giá trị của thuộc tính

Một thuộc tính thường được sử dụng là id. Chúng tôi có thể sử dụng id thuộc tính để chỉ định các nội dung khác nhau (chẳng hạn như <div>các) và thực sự hữu ích khi bạn sử dụng một phần tử nhiều lần. id có một số mục đích khác nhau trong HTML, nhưng hiện tại, chúng tôi sẽ tập trung vào cách chúng có thể giúp chúng tôi xác định nội dung trên trang của mình.

HIỂN THỊ VĂN BẢN

Nếu bạn muốn hiển thị văn bản trong HTML, bạn có thể sử dụng một đoạn hoặc khoảng :

Đoạn văn ( <p>) chứa một khối văn bản thuần túy.

<span>chứa các đoạn văn bản ngắn hoặc HTML khác. Chúng được sử dụng để tách các phần nội dung nhỏ nằm trên cùng một dòng với nội dung khác.

TẠO VĂN BẢN KIỂU

Bạn cũng có thể tạo kiểu văn bản bằng các thẻ HTML. Các <em> thẻ nhấn mạnh văn bản, trong khi <strong>thẻ nêu bật văn bản quan trọng.

Sau đó, khi bạn bắt đầu tạo kiểu cho các trang web, bạn sẽ quyết định cách bạn muốn trình duyệt hiển thị nội dung bên trong <em>và <strong>các thẻ. Tuy nhiên, trình duyệt có các biểu định kiểu tích hợp thường sẽ tạo kiểu cho các thẻ này theo những cách sau:

  • Các thẻ <em> thường sẽ làm như nghiêng nhấn mạnh.
  • Thông <strong>thường sẽ hiển thị như một sự nhấn mạnh đậm nét .

NGẮT DÒNG

Khoảng cách giữa các mã trong tệp HTML không ảnh hưởng đến vị trí của các phần tử trong trình duyệt. Nếu bạn đang quan tâm trong việc sửa đổi khoảng cách trong trình duyệt, bạn có thể sử dụng HTML của ngắt dòng phần tử: <br>.

Phần tử ngắt dòng là duy nhất vì nó chỉ bao gồm một thẻ bắt đầu. Bạn có thể sử dụng nó ở bất kỳ đâu trong mã HTML của mình và ngắt dòng sẽ được hiển thị trong trình duyệt.

DANH SÁCH KHÔNG CÓ THỨ TỰ

Ngoài việc tổ chức văn bản dưới dạng đoạn văn, bạn cũng có thể hiển thị nội dung trong một danh sách dễ đọc.

Trong HTML, bạn có thể sử dụng thẻ danh sách không có thứ tự ( <ul>) để tạo danh sách các mục không theo thứ tự cụ thể. Một danh sách không có thứ tự phác thảo các mục danh sách riêng lẻ bằng một dấu đầu dòng.

Phần <ul>tử không được giữ văn bản thô và sẽ không tự động định dạng văn bản thô thành danh sách các mục không có thứ tự. Các mục danh sách riêng lẻ phải được thêm vào danh sách không có thứ tự bằng cách sử dụng <li>thẻ. Thẻ <li>mục hoặc danh sách được sử dụng để mô tả một mục trong danh sách.

DANH SÁCH CÓ THỨ TỰ

Danh sách<ol> có thứ tự ( ) giống như danh sách không có thứ tự, ngoại trừ mỗi mục danh sách được đánh số. Chúng hữu ích khi bạn cần liệt kê các bước khác nhau trong một quy trình hoặc xếp hạng các mục từ đầu tiên đến cuối cùng.

Bạn có thể tạo danh sách có thứ tự với <ol>thẻ và sau đó thêm các mục danh sách riêng lẻ vào danh sách bằng cách sử dụng <li>thẻ.

Đầu ra sẽ như thế này:

  • Làm nóng lò ở 350 độ.
  • Trộn đều bột mì, muối nở và muối.
  • Cho bơ, đường vào âu riêng.
  • Thêm trứng và chiết xuất vani vào bát.

HÌNH ẢNH

Tất cả các yếu tố bạn đã học cho đến nay (tiêu đề, đoạn văn, danh sách và nhịp) đều có một điểm chung: chúng được cấu tạo hoàn toàn bằng văn bản! Điều gì sẽ xảy ra nếu bạn muốn thêm nội dung vào trang web của mình mà không phải là văn bản, chẳng hạn như hình ảnh?

Các <img>thẻ cho phép bạn thêm một hình ảnh đến một trang web. Hầu hết các phần tử yêu cầu cả thẻ mở và thẻ đóng, nhưng <img>thẻ này là thẻ tự đóng . Lưu ý rằng phần cuối của <img>thẻ có dấu gạch chéo /. Các thẻ tự đóng có thể bao gồm hoặc bỏ qua dấu gạch chéo cuối cùng – cả hai đều sẽ hiển thị đúng.

<img src=”image-location.jpg” />

Các <img>thẻ có yêu cầu thuộc tính gọi src. Các srcthuộc tính phải được cài đặt của hình ảnh nguồn , hoặc vị trí của hình ảnh. Trong trường hợp này, giá trị của srcphải là bộ định vị tài nguyên thống nhất (URL) của hình ảnh. URL là địa chỉ web hoặc địa chỉ cục bộ nơi tệp được lưu trữ.

HÌNH ẢNH ALTS

Một phần của việc trở thành một nhà phát triển web xuất sắc là làm cho trang web của bạn có thể truy cập được đối với người dùng thuộc mọi nền tảng. Để làm cho Web trở nên toàn diện hơn, chúng ta cần xem xét điều gì sẽ xảy ra khi các công nghệ hỗ trợ như trình đọc màn hình bắt gặp các thẻ hình ảnh.

Các thuộc tính, có nghĩa là văn bản thay thế, mang lại ý nghĩa cho những hình ảnh trên các trang web của chúng tôi. Các thuộc tính có thể được thêm vào thẻ hình ảnh giống như các src thuộc tính. Giá trị của alt phải là mô tả của hình ảnh.

<img src=”#” alt=”A field of yellow sunflowers” />

Các thuộc tính cũng phục vụ các mục đích sau:

Nếu hình ảnh không tải được trên một trang web, người dùng có thể di chuột qua khu vực dành cho hình ảnh ban đầu và đọc mô tả ngắn gọn về hình ảnh. Điều này có thể thực hiện được nhờ mô tả bạn cung cấp trong alt thuộc tính.

Người dùng khiếm thị thường duyệt web với sự hỗ trợ của phần mềm đọc màn hình. Khi bạn đưa alt thuộc tính vào, phần mềm đọc màn hình có thể đọc to mô tả của hình ảnh cho người dùng khiếm thị.

Các thuộc tính cũng đóng một vai trò trong Search Engine Optimization (SEO), vì công cụ tìm kiếm không thể “nhìn thấy” những hình ảnh trên các trang web như họ thu thập dữ liệu internet. Có alt các thuộc tính mô tả có thể cải thiện xếp hạng trang web của bạn.

Nếu hình ảnh trên trang web không phải là hình ảnh truyền tải bất kỳ thông tin có ý nghĩa nào cho người dùng (người khiếm thị hoặc người khác), thì alt thuộc tính này nên để trống.

VIDEO

Ngoài hình ảnh, HTML còn hỗ trợ hiển thị video. Giống như <img>thẻ, <video>thẻ yêu cầu src thuộc tính có liên kết đến nguồn video. <img>Tuy nhiên, không giống như thẻ, <video>phần tử yêu cầu thẻ mở và thẻ đóng.

<video src=”myVideo.mp4″ width=”320″ height=”240″ controls>

  Video not supported

</video>

Trong ví dụ này, nguồn video ( src) là myVideo.mp4 Nguồn có thể là một tệp video được lưu trữ dọc theo trang web của bạn hoặc một URL trỏ đến một tệp video được lưu trữ trên một trang web khác.

Sau src thuộc tính, các thuộc tính width và height được sử dụng để đặt kích thước của video hiển thị trong trình duyệt. Các control thuộc tính chỉ dẫn trình duyệt bao gồm điều khiển video cơ bản: tạm dừng, chơi và bỏ qua.

Văn bản, “Video không được hỗ trợ”, giữa thẻ video mở và đóng sẽ chỉ được hiển thị nếu trình duyệt không thể tải video.

Hướng dẫn

1 .

Dưới hình ảnh, hãy tạo một <video>thẻ và thêm url video sau làm nguồn:

Hãy chắc chắn tạo một thẻ đóng cùng với </video>.

2 .

Xác định width video dưới dạng “320”và height dưới dạng “240”. Đảm bảo bao gồm cả controls thuộc tính.

3 .

Ở giữa thẻ mở và <video>thẻ đóng , hãy thêm cụm từ Video not supported, cụm từ này sẽ được hiển thị nếu trình duyệt không thể tải video của bạn.

ÔN TẬP

Chúc mừng bạn đã hoàn thành bài học đầu tiên về HTML! Bạn đang trên con đường trở thành một nhà phát triển web lành nghề.

Hãy xem lại những gì bạn đã học được cho đến nay:

  • HTML là viết tắt của HyperText Markup Language và được sử dụng để tạo cấu trúc và nội dung của một trang web.
  • Hầu hết các phần tử HTML đều chứa các thẻ mở và đóng với văn bản thô hoặc các thẻ HTML khác giữa chúng.
  • Các phần tử HTML có thể được lồng vào bên trong các phần tử khác. Phần tử kèm theo là phần tử con của phần tử mẹ bao quanh.
  • Bất kỳ nội dung hiển thị nào nên được đặt trong thẻ mở và <body>thẻ đóng .
  • Các tiêu đề và tiêu đề phụ, <h1>đến <h6>các thẻ, được sử dụng để phóng to văn bản.
  • <p>, <span>Và <div>thẻ ghi rõ văn bản hoặc khối.
  • Các thẻ <em>và <strong>được sử dụng để nhấn mạnh văn bản.
  • Dấu ngắt dòng được tạo bằng <br>thẻ.
  • Danh sách <ol>có thứ tự ( ) được đánh số và danh sách không có thứ tự ( <ul>) được đánh dấu đầu dòng.
  • Hình ảnh ( <img>) và video ( <video>) có thể được thêm vào bằng cách liên kết với một nguồn hiện có.

Trong bài học tiếp theo, chúng ta sẽ lấy nội dung mà bạn đã thêm vào trang web này và chuyển nó thành một tài liệu HTML sẵn sàng xuất hiện trên web.

Leave a Reply