Hướng dẫn HTML cho người mới bắt đầuBạn có muốn tìm hiểu một số HTML?


Nghe có vẻ như một ý tưởng tuyệt vời. Do đó, lý do tại sao chúng tôi đã tập hợp hướng dẫn HTML này cho người mới bắt đầu.

Có ít nhất 1,7 tỷ trang web trên thế giới hiện nay. Thực tế tất cả các trang web này sử dụng HTML theo cách này hay cách khác.

P.S: Nếu bạn không muốn học HTML và bắt đầu xây dựng trang web của mình ngay lập tức mà không cần mã hóa, hãy xem hướng dẫn sau: Cách tạo một trang web MIỄN PHÍ (không cần học HTML).

Giới thiệu về HTML


HTML là gì?

HTML là gìHTML, từ viết tắt của HyperText Markup Language, là ngôn ngữ máy tính để tạo các trang web và ứng dụng web. Bao gồm chủ yếu các chuỗi mã thường được viết trong tệp văn bản và được lưu dưới dạng HTML, mã được viết bằng ngôn ngữ HTML chuyển thành văn bản đẹp, được định dạng tốt hoặc kết hợp văn bản và phương tiện khi được xem qua trình duyệt.

HTML được phát triển lần đầu tiên bởi nhà vật lý người Anh Tim Berners-Lee vào năm 1990 và nó đã trải qua rất nhiều phát triển kể từ đó phiên bản gần đây nhất có thể đạt được nhiều hơn những gì có thể tưởng tượng khi ngôn ngữ được phát minh lần đầu tiên.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu những điều cơ bản về ngôn ngữ HTML và tất cả những gì bạn cần biết để bắt đầu với HTML khi mới bắt đầu.

Phiên bản HTML

Đầu tiên, tóm tắt nhanh tất cả các phiên bản HTML kể từ khi HTML được phát minh.

  • HTML 1.0: Đây là phiên bản barebones của HTML và là phiên bản đầu tiên của ngôn ngữ.
  • HTML 2.0: Phiên bản này được giới thiệu vào năm 1995. Nó dần phát triển, cho phép các khả năng bổ sung bao gồm tải lên tệp dựa trên biểu mẫu, bảng, bản đồ hình ảnh phía máy khách và quốc tế hóa.
  • HTML 3.2: Trong nỗ lực đảm bảo sự phát triển của các tiêu chuẩn cho World Wide Web, World Wide Web Consortium (W3C) được thành lập bởi Tim Berners-Lee vào năm 1994. Đến năm 1997, họ đã xuất bản HTML 3.2.
  • HTML 4.0: Cuối năm 1997, W3C đã phát hành HTML 4.0 – phiên bản áp dụng nhiều loại yếu tố và thuộc tính dành riêng cho trình duyệt.
  • HTML 4.0 sau đó đã được phát hành lại với các chỉnh sửa nhỏ vào năm 1998.
  • HTML 4.01: Tháng 12 năm 1999, HTML 4.01 đã được phát hành.
  • XHTML: Các thông số kỹ thuật đã được giới thiệu vào năm 2000 và nó được khuyến nghị sử dụng làm tiêu chuẩn chung với HTML 4.01. Nó kết hợp XML để đảm bảo mã được viết đúng và đảm bảo khả năng tương tác giữa các ngôn ngữ lập trình.
  • HTML5: W3C đã xuất bản HTML5 dưới dạng đề xuất vào tháng 10 năm 2014 và sau đó phát hành HTML 5.1 vào tháng 11 năm 2016.

Chọn Trình soạn thảo HTML của bạn

Chọn trình soạn thảo HTMLNếu bạn đang nghĩ đến việc tạo các trang web bằng HTML, bạn cần một trình soạn thảo HTML. Có một số lợi ích khi sử dụng trình soạn thảo HTML.

Một trình soạn thảo HTML tốt sẽ giữ cho mã của bạn sạch sẽ và có tổ chức. Nó cũng sẽ phát hiện khi bạn mở một thẻ mới và tự động đóng nó để tránh bạn có mã lỗi và kết quả là làm giảm số lượng bạn phải gõ. Hầu hết các trình soạn thảo HTML ngày nay cho phép bạn xem trước trang web của mình để xem nó trông như thế nào trong trình duyệt web bằng tính năng WYSIWYG của họ.

Có nhiều trình soạn thảo HTML miễn phí và trả phí, dưới đây là một số tùy chọn hàng đầu bạn có thể chọn:

Các khối xây dựng cơ bản của HTML


Khi bạn đã quyết định trình soạn thảo HTML mà bạn muốn sử dụng, bước tiếp theo là tìm hiểu các khối xây dựng của HTML. Khi mã hóa bằng HTML, điều cần thiết là phải hiểu các khối xây dựng này. Chúng bao gồm các thẻ, thuộc tính và các yếu tố. Chúng tôi sẽ xem xét cơ bản về chúng dưới đây:

Giới thiệu về Thẻ

Khi bạn đã chuyển sang HTML, điều đầu tiên bạn cần hiểu là các thẻ. Về bản chất, các thẻ tách văn bản bình thường khỏi mã HTML.

Do đó, khi nói đến HTML, các thẻ tạo ra sự khác biệt giữa việc tài liệu của bạn được hiển thị dưới dạng văn bản thông thường hay văn bản chuyển đổi văn bản, về cơ bản là một mã văn bản xuất hiện để hiển thị một loạt các thứ (siêu liên kết, hình ảnh, phương tiện hoặc khác phương pháp định dạng) dựa trên những gì nó được hướng dẫn để hiển thị dựa trên thẻ.

Hãy cùng xem Hãy xem từ “Anh ấy là một cậu bé làm ví dụ:

  • Trong định dạng văn bản thông thường, bạn nhận được: Anh ấy là một cậu bé.
  • Trong định dạng văn bản in đậm, bạn nhận được: Cậu ấy là con trai

Để đạt được những gì chúng tôi có ở định dạng in đậm, bạn phải sử dụng nhãn.

làm đậm văn bản trong html

Trong HTML thô chúng ta có Cậu ấy là con trai mà trình duyệt sau đó dịch sang đây: Cậu ấy là con trai.

Anh ấy là một cậu bé cũng có thể in nghiêng.

Điều này đạt được bằng cách sử dụng nhãn.

làm cho văn bản in nghiêng trong html

Chúng ta có: Cậu ấy là con trai mà sau đó đi ra như Cậu ấy là con trai.

Hyperlinked đạt được bằng cách sử dụng nhãn.

làm cho văn bản siêu liên kết trong html

Trong HTML thô chúng ta có: Anh ấy là một cậu bé thể hiện như anh ấy là một cậu bé.

Có một vài điều bạn nên hiểu về thẻ:

  • Các thẻ thực tế là khối xây dựng của HTML – bạn có thể làm được HTML mà không cần thẻ! Nếu bạn sử dụng thẻ nào để sử dụng thẻ nào, hãy nhớ xem bảng tuần hoàn HTML của chúng tôi.
  • Hầu như mọi thẻ mở phải được đóng lại. Hãy nhớ rằng có những ngoại lệ. Một ví dụ về thẻ không phải đóng là thẻ trống, chẳng hạn như ngắt dòng:
    .
  • Các thẻ được chứa ít hơn (<”) and greater than (“>Góc) khung góc. Các thẻ đóng chứa một dấu gạch chéo xuất hiện trước tên của thẻ được đóng. Ví dụ về thẻ mở: . Ví dụ về thẻ đóng .
  • Mỗi tệp HTML bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng. Dòng đầu tiên của tệp HTML phải khai báo loại tài liệu để trình duyệt biết bạn sử dụng hương vị HTML nào. Đây là lý do tại sao bạn thấy các trang HTML bắt đầu bằng Tiếng ĐứcTrước khi mã HTML bắt đầu.

Trước khi nội dung được thêm vào, hầu hết các tệp HTML về cơ bản trông như thế này:

HTML--

Phần sau thẻ thường chứa thông tin về tài liệu như tiêu đề, thẻ meta và vị trí đặt tệp CSS của nó – nội dung không hiển thị trực tiếp trên trang trình duyệt. Đoạn đường giữa vàPhần mềm (mà chúng tôi đại diện với NỘI DUNG MAIN NỘI DUNG) là nơi chứa nội dung chính của tệp HTML, mà người xem sẽ thấy trong trình duyệt, được đặt. Điều này bao gồm mọi thứ từ đoạn đầu tiên đến siêu liên kết đến định dạng đến đa phương tiện và mọi thứ khác.

Giới thiệu về các yếu tố

giới thiệu về các yếu tố

Trong HTML, một phần tử Tiếng Việt, bao gồm thẻ mở và đóng cũng như nội dung giữa các thẻ.

Bên trong “Cậu ấy là con traiVí dụ (in đậm), chúng tôi có cái này trong HTML: Cậu ấy là con trai. Văn bản Chàng là một cậu bé được bao quanh bởi một thẻ mở và đóng. Tất cả mọi thứ, bao gồm thẻ mở, nội dung và thẻ đóng là một yếu tố.

Khi một thẻ được mở, nội dung được giới thiệu và thẻ được đóng lại, chúng tôi có một yếu tố.

Một phần tử có thể ở dạng cơ bản hoặc ở dạng phức tạp. Tại sao? Bởi vì bất cứ điều gì ở giữa một thẻ mở và một thẻ đóng cũng như các thẻ đó là một yếu tố. Nó có nghĩa là chúng ta có thể có các yếu tố trong một yếu tố. Trong ví dụ hiện tại của chúng tôi, anh ấy là một cậu bé (Cậu ấy là con trai) là một yếu tố.

Bạn sẽ nhận thấy rằng chúng tôi đã nói trước đó rằng các tài liệu HTML có chứa thẻ trước khi nội dung bắt đầu. Nội dung có thể bao gồm hàng trăm yếu tố khác nhau, nhưng tất cả các yếu tố này là một phần của yếu tố cơ thể trên cơ sở (vì phần tử cơ thể được mở, chứa nội dung và sau đó được đóng lại).

Giới thiệu về các thuộc tính

Mặc dù các tài liệu HTML về cơ bản sử dụng các thẻ cho mọi thứ, đôi khi chúng tôi muốn truyền đạt thông tin bổ sung bên trong một yếu tố. Trong trường hợp này, chúng tôi sử dụng một thuộc tính. Thuộc tính được sử dụng để xác định các đặc điểm của một phần tử, nó được sử dụng bên trong thẻ mở của phần tử. Các thuộc tính được tạo thành từ một tên và một giá trị.

Lưu ý rằng giá trị của một thuộc tính được đặt bên trong dấu ngoặc kép bằng cách sử dụng định dạng Văn bản của bạn.

ví dụ về một thuộc tính

Thí dụ:

Cậu ấy là con trai

Trong ví dụ này, chúng tôi đang hướng dẫn rằng He He là một cậu bé được xếp thẳng hàng ở giữa tài liệu.

Bắt đầu với HTML


Bắt đầu với HTMLGiả sử bạn muốn tạo tài liệu HTML cơ bản của riêng mình ngay hôm nay, làm thế nào để bạn bắt đầu? Từ việc tạo tiêu đề trang đến tạo biểu mẫu, chúng tôi sẽ hướng dẫn bạn cách bắt đầu với HTML bên dưới.

Tạo HTML Thành phần

Khi tạo một tài liệu HTML, một trong những điều đầu tiên bạn sẽ tạo là thành phần. Điều này chứa siêu dữ liệu (hoặc dữ liệu về tài liệu HTML). Điều này bao gồm các thông tin như bộ ký tự, tiêu đề tài liệu, kiểu tài liệu, tập lệnh, v.v..

Một số yếu tố trong bao gồm tiêu đề, được tạo ra với nhãn.</p><p><strong>Thí dụ</strong>:</p><pre><title>Đây là tiêu đề trang của chúng tôi

Tiêu đề này sẽ được hiển thị trong tab trình duyệt. Nó cũng là thứ sẽ được lập chỉ mục làm tiêu đề cho trang khi các bot công cụ tìm kiếm thu thập dữ liệu trang web của bạn.

Điều này cũng bao gồm phần tử, thường được sử dụng để chỉ định công cụ tìm kiếm thông tin có thể sử dụng để mô tả nội dung trong danh sách của họ. Điều này bao gồm mô tả, từ khóa, thông tin tác giả, vv phần tử cũng chỉ định bộ ký tự mà tài liệu HTML sử dụng.

Tạo tiêu đề trong HTML

tạo tiêu đề trong html

Tiêu đề đóng một vai trò quan trọng trong sự thành công của một trang web. Thứ nhất, chúng giúp người đọc dễ dàng quét nội dung các trang của bạn. Thứ hai, và có lẽ quan trọng hơn, chúng truyền đạt cấu trúc của các trang web của bạn đến các công cụ tìm kiếm và do đó thường ảnh hưởng đến cách nội dung của bạn được xếp hạng trong kết quả của công cụ tìm kiếm.

Điều đó nói rằng, điều quan trọng là tránh sử dụng các thẻ tiêu đề để làm cho văn bản của bạn lớn hoặc đậm. Có những thẻ khác có thể được sử dụng cho điều đó (mà chúng tôi sẽ nhận được sau này trong phần này). Thay vào đó, thẻ tiêu đề chỉ nên được sử dụng cho cấu trúc.

Có sáu thẻ tiêu đề trong HTML:

đến

, với

thẻ chỉ tiêu đề quan trọng nhất và

thẻ chỉ tiêu đề ít quan trọng nhất.

Để tạo tiêu đề, chỉ cần quyết định tiêu đề nào bạn tạo ra, hãy mở tiêu đề bằng thẻ tiêu đề thông thường và luôn nhớ đóng các thẻ sau khi bạn thực hiện xong.

Ví dụ tiêu đề HTML:

  • Đây là tiêu đề HTML đầu tiên của bạn

    (Lớn nhất)

  • Đây là tiêu đề HTML thứ hai của bạn

  • Đây là tiêu đề HTML thứ ba của bạn

  • Đây là tiêu đề HTML thứ tư của bạn

  • Đây là tiêu đề HTML thứ năm của bạn
  • Đây là tiêu đề HTML thứ sáu của bạn

Tạo đoạn văn

tạo đoạn văn trong HTML

Bước tiếp theo là bắt đầu tạo các đoạn văn. Đoạn văn có thể được tạo bằng

nhãn.

Thí dụ:

Đây là đoạn đầu tiên của bạn.

Đây là đoạn thứ hai của bạn và bạn sẽ tạo thêm nhiều đoạn nữa.

Hãy nhớ rằng viết bằng HTML rất khác với viết bằng văn bản thuần túy. Do đó, nếu bạn chia nhỏ văn bản bên trong HTML mà không bắt đầu một đoạn mới, nó sẽ thắng được vấn đề thực sự khi văn bản được trình duyệt hiển thị. Thay vào đó, bạn muốn sử dụng ngắt dòng, được biểu thị bằng
nhãn.

Thí dụ:

Đây là một đoạn mới. Và tôi muốn sử dụng một số dòng mới. Vì vậy, tôi đã phá vỡ nó.

Điều này sẽ không đi ra như sau:

Đây là một đoạn mới.
Và tôi muốn sử dụng một số dòng mới.
Vì vậy, tôi đã phá vỡ nó.

Thay vào đó, nó sẽ ra như thế này:

Đây là một đoạn mới. Và tôi muốn sử dụng một số dòng mới. Vì vậy, tôi đã phá vỡ nó.

Vì vậy, làm thế nào để bạn chia văn bản thành các dòng mới để nó sẽ hiển thị như thế này:

Đây là một đoạn mới.
Và tôi muốn sử dụng một số dòng mới.
Vì vậy, tôi đã phá vỡ nó.

Bằng cách sử dụng ngắt dòng.

Thí dụ:

Đây là một đoạn mới.
Và tôi muốn sử dụng một số dòng mới.
Vì vậy, tôi đã phá vỡ nó.

Điều đó nói rằng, điều quan trọng cần lưu ý là ngắt dòng (
) thẻ là một thẻ trống, vì vậy bạn không cần phải đóng nó.

Định dạng văn bản trong HTML

định dạng văn bản trong HTML

Bước tiếp theo là định dạng văn bản của bạn trong HTML. Đây là nơi bạn có thể cho biết liệu bạn có muốn văn bản của mình được in đậm, in nghiêng, gạch chân, ký hiệu, siêu ký tự, v.v. Thay vào đó, chúng tôi sẽ chỉ bao gồm một số thẻ định dạng cơ bản. Quá trình sử dụng các hình thức định dạng khác rất đơn giản – chỉ cần tìm thẻ bạn muốn và tiếp tục:

Sử dụng in đậm: Cậu ấy là con trai đi ra như Cậu ấy là con trai

Sử dụng chữ nghiêng: Cậu ấy là con trai đi ra như Cậu ấy là con trai

Gạch chân văn bản: Cậu ấy là con trai đi ra như Cậu ấy là con trai. Nó đáng chú ý rằng thẻ không được dùng trong HTML 4.01 và được xác định lại để thể hiện văn bản khác biệt theo phong cách trong HTML5. Do đó, nên sử dụng CSS để chỉ ra văn bản cần gạch chân. Vì bài viết này là một hướng dẫn cơ bản, nên chúng tôi giữ cho nó đơn giản.

Sử dụng chỉ mục: Cậu ấy là con trai đi ra như Cậu ấy là con trai

Sử dụng siêu ký tự: Cậu ấy là con trai đi ra như Cậu ấy là con trai

Đối với các thẻ khác có thể được sử dụng để định dạng, bạn có thể muốn xem bảng chú giải ở cuối tài nguyên này, nơi chúng tôi đã bao gồm rất nhiều thẻ HTML có liên quan.

Danh sách được sắp xếp và không theo thứ tự

Sớm hay muộn bạn sẽ phải tạo danh sách. Danh sách có thể được sắp xếp (tức là được đánh số) hoặc không có thứ tự (nghĩa là không bị đánh số).

Dưới đây là một ví dụ về danh sách được sắp xếp:

  1. Mục 1
  2. Mục 2
  3. Mục 3

Đây là cách tạo ra nó:

  1. Mục 1
  2. Mục 2
  3. Mục 3

Dưới đây là một ví dụ về danh sách không có thứ tự:

  • Mục 1
  • Mục 2
  • Mục 3

Đây là cách tạo ra nó:

  • Mục 1
  • Mục 2
  • Mục 3

Nếu nó chưa rõ ràng. Đây là một sự cố:

Các

  • thẻ được sử dụng để chỉ ra từng mục trong danh sách. Khi lập danh sách, bạn có thể sử dụng
      thẻ để chỉ ra một danh sách được sắp xếp (trong danh sách

        thẻ để chỉ ra một danh sách không có thứ tự (thời gian của bạn là không có thứ tự và không có thứ tự). Có ý chính?

        Danh sách lồng nhau

        Chúng tôi cũng có thể có danh sách lồng nhau hoặc một danh sách trong danh sách.

        Thí dụ:

        • Mục 1
          • Mục 1 lồng nhau
          • Mục 2 lồng nhau
        • Mục 2
        • Mục 3

        Điều này có thể được tạo ra với:

        • Mục 1
          • Mục 1 lồng nhau
          • Mục 2 lồng nhau
          • Mục 3 lồng nhau
        • Mục 2
        • Mục 3

        Như bạn có thể thấy, bạn chỉ cần mở một thẻ danh sách khác – đã ra lệnh (

          ) hoặc không có thứ tự (

            ) – tùy thuộc vào những gì bạn muốn trước khi đóng mục bạn muốn được lồng.

            tạo siêu liên kết trong HTML

            Web là một mạng lưới các trang được kết nối với nhau. Nếu bạn tạo một trang web – dù là nội bộ hay bên ngoài, hoặc cả hai – bạn sẽ phải liên kết đến các trang khác. Liên kết đến một trang nội bộ trên trang web của bạn hoặc đến một trang bên ngoài trên web được gọi là siêu liên kết. Mặc dù mọi người thường liên kết một văn bản, bất kỳ yếu tố HTML nào – ví dụ như hình ảnh – có thể được liên kết.

            Các thẻ được sử dụng để xác định các liên kết trong HTML, trong khi thuộc tính của href href hè được sử dụng để chỉ định đích của liên kết. Liên kết sau đó được đưa vào một trích dẫn sau khi dấu bằng với dấu hiệu trước khi đóng thẻ.

            Thí dụ:

            Để tạo một siêu liên kết, điều này: LIÊN KẾT LIÊN KẾT CỦA BẠN TẠI ĐÂY sẽ xuất hiện dưới dạng LIÊN KẾT LIÊN KẾT CỦA BẠN TẠI ĐÂY

            Bây giờ, giả sử bạn đang liên kết đến một tệp cục bộ trong đó bạn có tất cả các trang HTML của mình trong cùng một thư mục. Trong trường hợp này, bạn don lồng phải bao gồm một URL trang web. Chỉ cần thêm đường dẫn tập tin. Ví dụ: nếu liên kết đến một tệp có tiêu đề about-page.html, siêu liên kết của bạn sẽ trở thành LIÊN KẾT LIÊN KẾT CỦA BẠN TẠI ĐÂY, liên kết đến tệp about-page.html.

            Nếu tệp HTML bạn muốn liên kết đến là cục bộ nhưng trong một thư mục khác với thư mục chính, bạn chỉ cần chỉ định đường dẫn tệp. Ví dụ: nếu tệp nằm trong thư mục của các tập tin trong thư mục chính trong tài liệu chính của bạn, thì siêu liên kết của bạn sẽ hoạt động như thế này LIÊN KẾT LIÊN KẾT CỦA BẠN TẠI ĐÂY

            Bạn có thể muốn chỉ định cách bạn muốn mở liên kết, ví dụ: trong một cửa sổ / tab mới. Bạn sẽ sử dụng thuộc tính đích cho điều đó.

            Ví dụ:

            LIÊN KẾT LIÊN KẾT CỦA BẠN TẠI ĐÂY xác định rằng liên kết nên được mở trong một tab mới.

            LIÊN KẾT LIÊN KẾT CỦA BẠN TẠI ĐÂY xác định rằng liên kết nên được mở trong cùng một tab.

            Có các thuộc tính khác có thể được sử dụng để truyền đạt các cách khác nhau để mở một liên kết:

            • _blank – Mở trong một tab mới.
            • _elf – Mở trong cùng một tab.
            • _parent – Mở trong khung cha
            • _top – Mở toàn bộ cửa sổ
            • Tên khung – Mở trong khung có tên

            Bạn cũng có thể có một điểm hình ảnh đến một liên kết.

            Thí dụ:

            Cậu ấy là con trai
            

            Điều này cho trình duyệt hiển thị một hình ảnh được lấy từ tệp hình ảnh Hình ảnh / html-guide-for-Beginners-3.jpg tựa và có liên kết với https://websitesetup.org. Thuộc tính của alt alt thể hiện những gì sẽ được hiển thị nếu hình ảnh không thể được hiển thị (do cài đặt trình duyệt hoặc một số nội dung khác ngăn hình ảnh hiển thị).

            Sử dụng hình ảnh

            sử dụng hình ảnh trong HTML

            Hình ảnh được thêm vào tài liệu HTML với nhãn. Các Thẻ là một thẻ trống, vì vậy nó không cần phải đóng.

            Thí dụ:

            Cậu ấy là con trai

            Đây là một ví dụ cơ bản về việc yêu cầu trình duyệt hiển thị một hình ảnh có tiêu đề Hình ảnh / html-guide-for-Beginners-3.jpg ném từ cùng thư mục với tài liệu HTML. Thuộc tính của alt alt Cảnh báo cho trình duyệt hiển thị một văn bản (được gọi là văn bản thay thế của Cameron) có tên là Ông He là một cậu bé nếu vì lý do nào đó trình duyệt hoặc cài đặt internet ngăn trình duyệt hiển thị hình ảnh. Nếu bạn muốn kéo một hình ảnh trong một thư mục khác hoặc trên một trang web bên ngoài, địa chỉ / đường dẫn đầy đủ phải được chỉ định.

            Vượt ra ngoài những điều cơ bản, chúng ta cũng có thể sử dụng các thuộc tính khác để tùy chỉnh hình ảnh tốt hơn. Ví dụ: có thể sử dụng thuộc tính kiểu phong cách của người dùng để xác định chiều rộng, chiều cao hoặc cả hai.

            Thí dụ:

            VĂN BẢN THAY ĐỔI CỦA BẠN

            (nên thay thế bằng chữ in hoa chiều rộng chiều cao và chiều cao bằng chữ in hình chữ nhật và các chiều cao thực tế trong phần chữ viết tắt (ví dụ: 20 giây) bạn muốn cho hình ảnh của mình.)

            Tạo bảng

            tạo bảng trong HTML

            Khi bạn tìm hiểu sâu hơn về HTML, bạn sẽ muốn tìm hiểu nhiều cách khác nhau để trình bày thông tin theo cách có tổ chức hơn. Một cách như vậy là thông qua việc sử dụng các bảng.

            Các bảng được tạo với

            nhãn. Mỗi tiêu đề trong một bảng được chỉ định với

            (Bảng bảng hàng liên tiếp) thẻ. Dữ liệu bảng sau đó được chỉ định bằng

            Thẻ (tiêu đề bảng bảng xếp hạng) trong khi mỗi hàng được chỉ định bằng

            nhãn.

            Thí dụ:

            Bảng tiêu đề 1 Bảng tiêu đề 2 Bảng tiêu đề 3
            Nhập 1 dưới tiêu đề 1 Nhập 1 dưới tiêu đề 2 Nhập 1 dưới tiêu đề 3
            Đầu vào 2 dưới tiêu đề 1 Đầu vào 2 dưới tiêu đề 2 Đầu vào 2 dưới tiêu đề 3
            Nhập 3 dưới tiêu đề 1 Đầu vào 3 dưới tiêu đề 2 Đầu vào 3 dưới tiêu đề 3

            Điều này cho chúng ta một cái gì đó như thế này:

            bảng ví dụ 1

            Như bạn có thể thấy, trong khi chúng tôi có một bảng, nó có một chút không có tổ chức. Để tổ chức, chúng ta có thể thêm một số kiểu dáng vào mã. Trong trường hợp này, chúng tôi đang tăng chiều rộng:

            Bảng tiêu đề 1 Bảng tiêu đề 2 Bảng tiêu đề 3
            Nhập 1 dưới tiêu đề 1 Nhập 1 dưới tiêu đề 2 Nhập 1 dưới tiêu đề 3
            Đầu vào 2 dưới tiêu đề 1 Đầu vào 2 dưới tiêu đề 2 Đầu vào 2 dưới tiêu đề 3
            Nhập 3 dưới tiêu đề 1 Đầu vào 3 dưới tiêu đề 2 Đầu vào 3 dưới tiêu đề 3

            Điều này dẫn đến một cái gì đó có tổ chức hơn:

            bảng ví dụ 2

            Bạn có thể muốn nâng cao hơn và sử dụng các đường viền, đặt căn chỉnh ngang hoặc dọc cho nội dung của bảng, giới thiệu các bộ chia, phần đệm, v.v. Tuy nhiên, bạn sẽ cần học một số CSS để làm những thứ như thế này. Chúng tôi giữ cho hướng dẫn này cơ bản và giành chiến thắng trong bài viết này.

            Báo giá trong HTML

            trích dẫn trong HTML

            Có nhiều loại trích dẫn khác nhau và những trích dẫn này được thể hiện bằng các yếu tố khác nhau.

            Đối với một trích dẫn cơ bản, ở đây, một ví dụ:

            Đây là một mẫu. Và Đây là trích dẫn của chúng tôi

            Điều này đi ra như: Đây là một mẫu. Và ở đây là trích dẫn của chúng tôi

            Khi bạn sử dụng thẻ, dấu ngoặc kép được tự động thêm vào những gì được đính kèm trong thẻ.

            Bạn cũng có thể sử dụng blockquote, được thực hiện với

            nhãn.

            Thí dụ:

            Đây là một mẫu. Và

            Đây là blockquote của chúng tôi. Trong ví dụ này, chúng tôi cố gắng trình bày cách định dạng văn bản để chỉ ra một blockquote trong HTML. Điều này khác với các trích dẫn thông thường, trong đó biểu tượng "trích dẫn" thực tế có thể được thêm vào hoặc không được thêm vào tùy theo kiểu CSS, nhưng văn bản được tô sáng.

            Nó sẽ trông giống thế này:

            ví dụ blockquote 1

            Sử dụng Nhận xét trong HTML

            Khi thực hiện bất kỳ hình thức mã hóa nào, điều quan trọng là tìm hiểu cách bao gồm các nhận xét trong mã của bạn. Nhận xét được sử dụng để làm cho mã của bạn có tổ chức hơn. Bạn có thể bao gồm một lời nhắc nhở cho chính mình hoặc một ghi chú cho người khác để làm cho mọi thứ dễ dàng hơn.

            Ban đầu, nó có vẻ không quan trọng, nhưng khi bạn bắt đầu viết hàng trăm hoặc hàng ngàn dòng mã, và khi mọi thứ dường như bắt đầu trở nên phức tạp, các bình luận sẽ có ích.

            Các bình luận đã thắng được hiển thị cho người xem bởi trình duyệt. Hãy nhớ rằng chúng có thể được nhìn thấy trong mã nguồn.

            Nhận xét cũng có thể được sử dụng bất cứ nơi nào trong mã. Họ đã thắng Thay đổi chức năng mã của bạn theo bất kỳ cách nào.

            Bạn có thể bao gồm một nhận xét bằng cách mở một dấu ngoặc, bao gồm một dấu gạch nối kép, thêm nhận xét của bạn, bao gồm một dấu gạch nối kép khác, sau đó đóng dấu ngoặc của bạn.

            Thí dụ:

            Cũng đáng lưu ý rằng, đặc biệt là khi gỡ lỗi, bạn có thể nhận xét ra các dòng mã. Bằng cách này, mã vẫn còn trong tài liệu nhưng không hoạt động vì bạn đã nhận xét về nó.

            Thí dụ:

            Trong trường hợp này, trong khi đó, He He là một cậu bé được cho là táo bạo, chúng tôi đã nhận xét và nó sẽ bị trình duyệt bỏ qua. Trong kịch bản này, liên quan đến trình duyệt, chúng tôi không có gì.

            Điều này cũng có thể được sử dụng theo cách này:

            Anh ta con trai cho thấy Anh chàng trai. Điều này là do chúng tôi nhận xét ra là một. Chúng tôi chỉ cố gắng cho bạn thấy rằng thực tế mọi thứ, trong hoặc ngoài một yếu tố, đều có thể được nhận xét. Bạn có thể bao gồm một ghi chú trong bình luận của bạn để tham khảo – nó không thay đổi bản chất của những gì được hiển thị.

            Sử dụng màu sắc trong HTML

            sử dụng màu sắc trong HTML

            Sớm hay muộn, bạn sẽ muốn sử dụng màu sắc để chỉ ra các yếu tố nhất định của tài liệu HTML của bạn. Điều này có thể được thực hiện theo ba cách chính: với giá trị HEX, với giá trị RGB hoặc với tên của màu.

            Sử dụng màu trong HTML thường được thực hiện với thuộc tính style.

            ví dụ 1:

            Đây là màu xanh

            Sử dụng giá trị HEX cho màu xanh da trời # 0000FF, chúng tôi đang bảo trình duyệt hiển thị văn bản của bạn (trong trường hợp này là Đây là màu xanh da trời) sử dụng màu xanh lam.

            Ví dụ 2:

            Đây là màu xanh

            Chúng tôi đang hướng dẫn văn bản được tô sáng bằng màu xanh lục bằng giá trị RGB.

            Ví dụ 3:

            Đây là màu vàng

            Sử dụng giá trị HSL, chúng tôi đã yêu cầu văn bản được tô sáng màu vàng.

            Ví dụ 4:

            Đây là màu cam

            Chúng tôi sử dụng tên màu HTML (trong trường hợp này là Cam cam – mà chúng tôi đã đánh dấu trong mã bằng cách in nghiêng nó) để yêu cầu văn bản được tô sáng bằng màu cam. Rõ ràng, điều này chỉ khả thi đối với các văn bản mà bạn biết tên màu và có thể khó thực hiện đối với các sắc thái màu nhất định có thể dễ dàng thực hiện với mã HEX hoặc giá trị RGB. Bất kể, bạn có thể tìm thấy một danh sách 140 tên màu HTML được biên dịch bởi mã màu HTML.

            Có thể hiểu, bạn không có tất cả các thông tin cần thiết – chẳng hạn như mã HEX, giá trị RGB, v.v. – cho tất cả các màu. Don lồng hoảng loạn – công cụ chọn màu bởi Trường W3 là một công cụ tuyệt vời cho phép bạn chọn bất kỳ màu nào và hiển thị cho bạn tất cả thông tin về màu đó bao gồm mã HEX, giá trị RGB và giá trị HSL.

            Sử dụng iFrames trong HTML

            Trong tài liệu HTML, iFrame (khung nội tuyến) có thể được sử dụng để nhúng tệp vào tài liệu hiện tại. Về bản chất, bạn có thể sử dụng nó để hiển thị một trang web hoặc nội dung khác từ một trang web khác bên trong trang web hiện tại.

            Thí dụ:

            Với đoạn mã trên, chúng tôi đã nói với trình duyệt hiển thị nội dung của https://websitesetup.org trong một khung trực tiếp bên trong trang này.

            Iframes có thể được sử dụng để hiển thị trang web, video, hình ảnh hoặc bất kỳ hình thức nội dung nào khác.

            Mã cho điều này là đơn giản:

            (chỉ cần thay thế URL URL bằng liên kết đến trang web / nội dung bạn muốn được hiển thị.)

            Bạn có thể tùy chỉnh thêm để chỉ định các giá trị nhất định, ví dụ: chiều cao và chiều rộng của iframe của bạn.

            Thí dụ:

            Chúng tôi đã nói với trình duyệt hiển thị iframe bằng chiều cao 350px và chiều rộng 400px.

            Phông chữ trong HTML

            sử dụng phông chữ trong HTML

            Hiểu cách hoạt động của phông chữ là điều cần thiết để tạo tài liệu HTML hiệu quả. Đối với một, phông chữ giúp dễ dàng đặt kích thước văn bản của bạn. Nó cũng giúp bạn dễ dàng thiết lập màu sắc cũng như khuôn mặt (hoặc phông chữ Kiểu loại) của nội dung của bạn.

            Để chỉ ra phông chữ mà tài liệu HTML của bạn sẽ sử dụng, bạn sẽ cần sử dụng nhãn. Bạn có thể đặt kích thước phông chữ, màu phông chữ hoặc mặt phông chữ bằng cách sử dụng các thuộc tính kích thước của chế độ xóa, xóa màu.

            Kích thước cài đặt – ví dụ:

            Hiển thị văn bản này bằng cỡ chữ 6

            Trong ví dụ này, chúng tôi đang bảo trình duyệt hiển thị văn bản của chúng tôi bằng cỡ chữ 6. Điều quan trọng cần lưu ý là phạm vi kích thước phông chữ được chấp nhận là 1 đến 7. Mọi thứ trên 7 sẽ tự động điều chỉnh theo cỡ chữ 7. Mặc định cỡ chữ là 3.

            Màu chữ – ví dụ:

            Hiển thị văn bản của chúng tôi trong màu xanh

            Chúng tôi sử dụng để yêu cầu trình duyệt hiển thị văn bản của chúng tôi bằng màu xanh lam. Trong trường hợp này, chúng tôi đã sử dụng tên màu HTML (màu xanh da trời). Điều này có thể được thay thế bằng mã HEX hoặc giá trị RGB nếu bạn muốn.

            Mặt chữ – ví dụ:

            Bạn có thích Verdana thay vì Times New Romans không? Đây là cách bạn đặt nó:

            Vui lòng hiển thị văn bản này trong phông chữ Verdana

            Chúng tôi nói với trình duyệt để hiển thị văn bản của chúng tôi trong phông chữ Verdana. Bạn chỉ có thể thay đổi giá trị mặt phông chữ để chỉ ra bất kỳ phông chữ nào bạn muốn sử dụng.

            Các mặt phông chữ thay thế:

            Điều quan trọng cần lưu ý là mọi người sẽ chỉ có thể thấy văn bản của bạn được hiển thị trong phông chữ bạn chỉ định nếu họ có cài đặt phông chữ đó trên máy tính của họ. Nếu không, mặt phông chữ mặc định – thường là Times New Roman – sẽ được hiển thị. Vì lý do đó, chúng tôi khuyên bạn nên sử dụng phông chữ An toàn trên web.

            Nó có thể giúp bao gồm càng nhiều phông chữ thay thế càng tốt. Bằng cách này, ngay cả khi họ không có mặt phông chữ chính của bạn, bạn có thể chỉ định các phông chữ khác theo thứ tự quan trọng. Điều này được thực hiện với việc sử dụng dấu phẩy.

            Quay lại ví dụ của chúng tôi:

            Vui lòng hiển thị văn bản này trước bằng phông chữ Verdana hoặc Helvetica hoặc Arial hoặc Comic Sansiêu theo thứ tự đó, nếu phông chữ chính không có sẵn

            Chúng tôi đã hướng dẫn trình duyệt hiển thị văn bản trong Verdana. Nếu Verdana không có sẵn, thay vì hoàn nguyên về Romans mới mặc định, nó có thể hiển thị Helvetica hoặc Arial nếu Helvetica không có sẵn hoặc Comic Sans nếu Arial không có sẵn.

            Phần kết luận

            Tóm lại, HTML phức tạp hơn những gì bạn có trong hướng dẫn này. Đừng từ bỏ hy vọng – nếu bạn có thể nắm bắt các khái niệm cơ bản trong hướng dẫn này, bạn sẽ có một khởi đầu tốt. Nó giống như biết ABC của một ngôn ngữ và mọi thứ khác trở nên dễ dàng hơn nhiều.

            Nếu bạn đã thực hiện hướng dẫn này với mục đích tạo ra một trang web tuyệt đẹp, chúng tôi rất tiếc vì đã thất vọng – nó không hoạt động theo cách đó. Đây là một hướng dẫn HTML cơ bản. Nó ở đây để giúp bạn phát triển một nền tảng mà bạn có thể xây dựng. Bạn có thể chắc chắn rằng sẽ mất nhiều nỗ lực hơn đáng kể – và rất nhiều thời gian phát triển thường sử dụng kết hợp các ngôn ngữ – để tạo ra một trang web nổi bật.

            Với WordPress, chúng tôi đã trình bày rất chi tiết trong hướng dẫn của chúng tôi về việc tạo một trang web, bạn có thể có một trang web đáng chú ý sẵn sàng trong vài phút.

            Tài nguyên HTML

            • Bảng tuần hoàn HTML – Danh sách này liệt kê tất cả các thẻ HTML dưới dạng bảng tuần hoàn, giúp bạn dễ dàng tìm hiểu / sử dụng chúng.
            • W3Schools / Thẻ – Danh sách tất cả các thẻ HTML được sắp xếp theo thứ tự abc.
            • Thuộc tính Mozilla / HTML – Danh sách tất cả các thuộc tính HTML được sắp xếp theo thứ tự abc.
            • Bảng cheat HTML
            • Mã màu HTML / Tên màu – Danh sách 140 tên màu HTML bao gồm mã HEX, giá trị RGB và giá trị HSL.

            Jeffrey Wilson Administrator
            Sorry! The Author has not filled his profile.
            follow me
              Adblock
              detector