Tìm hiểu cách viết mã HTML & CSS miễn phí tại HTML.com. Chúng tôi có hướng dẫn HTML & hướng dẫn tham khảo về thẻ, thuộc tính và mọi thứ khác mà bạn cần để thành thạo HTML.

Bạn đang xem : học html và css

Tiết lộ: Sự hỗ trợ của bạn giúp duy trì hoạt động của trang web! Chúng tôi kiếm được một khoản phí giới thiệu cho một số dịch vụ mà chúng tôi đề xuất trên trang này.

Sự hỗ trợ của bạn giúp duy trì hoạt động của trang web! Chúng tôi kiếm được một khoản phí giới thiệu cho một số dịch vụ mà chúng tôi đề xuất trên trang này. Tìm hiểu thêm

Nghiên cứu HTML và học viết mã với Hướng dẫn từng bước của chúng tôi < img alt = "Nghiên cứu HTML và học viết mã với hướng dẫn từng bước của chúng tôi" class = "wp-image-8299 sp-no-webp" src = "https://html.com/wp-content/uploads/ html-hướng dẫn-người mới bắt đầu-header.jpg "/>

Chào mừng! Bạn đã tìm thấy cách dễ dàng nhất để học HTML và CSS.

Cho dù bạn là người mới bắt đầu, hy vọng tìm hiểu sâu hơn về thế giới thiết kế web hay một quản trị viên web có kinh nghiệm muốn cải thiện kỹ năng của bạn, chúng tôi có hướng dẫn trực tuyến phù hợp với nhu cầu thiết kế web của bạn .

hướng dẫn tuyệt đối cho người mới bắt đầu của chúng tôi sẽ biến bạn từ muốn trở thành quản trị viên web chỉ trong một vài giờ. Không giống như nhiều hướng dẫn HTML khác, đó là hướng dẫn từng bước – không phải là một tài liệu tham khảo dài dòng nhàm chán.

Hướng dẫn từng bước của chúng tôi > dạy bạn những kiến ​​thức cơ bản về HTML và cách xây dựng trang web đầu tiên của bạn. Điều đó có nghĩa là cách bố cục một trang HTML, cách thêm văn bản và hình ảnh, cách thêm tiêu đề và định dạng văn bản cũng như cách sử dụng bảng.

Chúng tôi sẽ giúp bạn xây dựng trang web mới của mình trong phút , không phải giờ.

HTML cho người mới bắt đầu

Trong khi nhiều hướng dẫn trên internet cố gắng dạy HTML bằng nhiều lý thuyết khó hiểu, thay vào đó, hướng dẫn này sẽ tập trung vào việc cung cấp cho bạn kỹ năng thực tế để xây dựng trang web đầu tiên của bạn .

Mục đích là cho bạn thấy ‘cách’ tạo trang web đầu tiên của bạn mà không dành toàn bộ hướng dẫn tập trung quá nhiều vào “lý do tại sao.”

Đến cuối hướng dẫn này, bạn sẽ có bí quyết tạo trang web cơ bản và chúng tôi hy vọng rằng điều này sẽ truyền cảm hứng cho bạn tìm hiểu sâu hơn về thế giới HTML bằng cách sử dụng các hướng dẫn tiếp theo của chúng tôi.

HTML là gì?

Được rồi, đây là lý thuyết bắt buộc duy nhất. Để bắt đầu viết HTML, sẽ rất hữu ích nếu bạn biết mình đang viết gì.

HTML là ngôn ngữ mà hầu hết các trang web được viết . HTML được sử dụng để tạo các trang và làm cho chúng hoạt động.

Mã được sử dụng để làm cho chúng hấp dẫn về mặt hình ảnh được gọi là CSS và chúng ta sẽ tập trung vào vấn đề này trong hướng dẫn sau. Hiện tại, chúng tôi sẽ tập trung vào việc dạy bạn cách xây dựng thay vì thiết kế .

Lịch sử của HTML

HTML lần đầu tiên được tạo ra bởi Tim Berners-Lee, Robert Cailliau và những người khác, bắt đầu từ 1989 . Nó là viết tắt của Hyper Text Markup Language.

Siêu văn bản có nghĩa là tài liệu chứa liên kết cho phép người đọc chuyển đến các vị trí khác trong tài liệu hoặc tới một tài liệu khác. Phiên bản mới nhất được gọi là HTML5 .

Ngôn ngữ đánh dấu là cách các máy tính giao tiếp với nhau để kiểm soát cách xử lý và trình bày văn bản. Để làm điều này, HTML sử dụng hai thứ: thẻ và thuộc tính .

Thẻ và thuộc tính là cơ sở của HTML.

Chúng làm việc cùng nhau nhưng thực hiện các chức năng khác nhau – bạn nên đầu tư 2 phút để phân biệt cả hai .

Thẻ HTML là gì?

Thẻ được sử dụng để đánh dấu phần bắt đầu của phần tử HTML và chúng thường được đặt trong dấu ngoặc nhọn. Ví dụ về thẻ là: & lt; h1 & gt; .

Hầu hết các thẻ phải được mở & lt; h1 & gt; và đóng & lt; / h1 & gt; để hoạt động.

Thuộc tính HTML là gì?

Thuộc tính chứa phần thông tin bổ sung . Thuộc tính có dạng thẻ mở và thông tin bổ sung được đặt bên trong .

Ví dụ về thuộc tính là:

& lt; img src = "mydog.jpg" alt = "Một bức ảnh về con chó của tôi." & gt;

Trong trường hợp này, nguồn hình ảnh (src) và văn bản thay thế (alt) là thuộc tính của Thẻ & lt; img & gt; .

Các quy tắc vàng cần nhớ

  1. Phần lớn các thẻ phải được mở ( & lt; tag & gt; ) và đóng ( & lt; / tag & gt;) với thông tin phần tử như tiêu đề hoặc văn bản nằm giữa các thẻ.
  2. Khi sử dụng nhiều thẻ, các thẻ phải được đóng theo thứ tự được mở . Ví dụ:

    & lt; strong & gt; & lt; em & gt; Điều này thực sự quan trọng! & Lt; / em & gt; & lt; / strong & gt;

Trình chỉnh sửa HTML

Bây giờ chúng ta đã nắm được lý thuyết cơ bản. Đã đến lúc tìm hiểu cách xây dựng trang web đầu tiên của chúng tôi .

Trước hết, chúng tôi phải đảm bảo rằng chúng tôi có các công cụ phù hợp. Quan trọng nhất, chúng tôi cần một trình soạn thảo HTML.

Có nhiều sự lựa chọn trên thị trường. Dưới đây là một số cách phổ biến nhất:

Sublime Text 3

Tuy nhiên, đối với hướng dẫn này, chúng tôi sẽ sử dụng Sublime Text 3 vì nó miễn phí và cũng cung cấp hỗ trợ đa nền tảng cho người dùng Windows, Mac và Linux.

Sublime Text 3 Sublime Text 3 Sublime Text 3 có cửa sổ xem trước nhỏ ở bên phải.

Ưu điểm

  • Dễ dàng tùy chỉnh
  • Thân thiện với người mới bắt đầu
  • Các cách phối màu dễ chịu để lựa chọn.
  • < / ul>

    Nhược điểm

    • Không thể in tài liệu hoặc mã
    • Không có sẵn thanh công cụ hoặc trang tổng quan.
    • Notepad ++

      Một lựa chọn phổ biến khác cho người viết mã HTML và ngôn ngữ khác là Notepad ++ . Đây là một chương trình nhỏ để tải xuống và thực hiện các chức năng bạn cần để viết mã sạch.

      HTML Notepad ++ HTML Notepad ++ Cái này là Notepad ++. Khác xa với vẻ đẹp quyến rũ nhưng thực hiện công việc.

      Ưu điểm

      • Giao diện không gây xao nhãng
      • Tính năng tự động hoàn thành
      • Tùy chọn plugin cho các chức năng mở rộng.

      Nhược điểm

      • Có thể khó làm quen với người mới bắt đầu
      • < li> Không hỗ trợ Mac.

      Komodo Edit

      Komodo Edit là một trong hai trình chỉnh sửa do cùng một hãng phát hành. Họ cung cấp một trình chỉnh sửa mã nguồn mở, đơn giản với nhiều tiện ích mở rộng và hỗ trợ ngôn ngữ .

      Tải xuống miễn phí.

      Komodo Editor Komodo Editor Komodo cũng không phải là một giao diện flash nhưng rất dễ sử dụng.

      Ưu điểm

      • Giao diện mã hóa dễ hiểu < / li>
      • Có sẵn cho Mac, Windows và Linux
      • Hỗ trợ ngôn ngữ ấn tượng.

      Nhược điểm

      • Không có tính năng tự động hoàn thành theo mặc định
      • Rất khó tìm và thay đổi cài đặt trực quan.

      Điều gì nên tránh

      Không nên sử dụng Microsoft Word hoặc bất kỳ trình xử lý văn bản nào khác khi viết mã HTML, chỉ có trình chỉnh sửa HTML hoặc ít nhất, notepad tích hợp trên máy của bạn, mới phù hợp với tác vụ.

      Thứ hai, hãy đảm bảo rằng bạn đã cài đặt một số trình duyệt khác nhau chẳng hạn như Chrome Firef ox để xem trước tác phẩm sắp tới của bạn.

      Tạo trang web HTML đầu tiên của bạn

      Đầu tiên tắt, bạn cần mở trình chỉnh sửa HTML của mình, nơi bạn sẽ tìm thấy trang trắng sạch để viết mã của mình.

      Từ đó, bạn cần bố trí trang của mình như sau các thẻ.

      Cấu trúc cơ bản của một trang HTML

      Các thẻ này phải được đặt bên dưới nhau ở đầu mỗi trang HTML mà bạn tạo.

      & lt;! DOCTYPE html & gt; – Thẻ này chỉ định ngôn ngữ bạn sẽ viết trên trang. Trong trường hợp này, ngôn ngữ là HTML 5.

      & lt; html & gt; – Thẻ này báo hiệu rằng từ đây chúng ta sẽ viết bằng HTML mã.

      & lt; head & gt; – Đây là nơi chứa tất cả siêu dữ liệu cho trang – mọi thứ chủ yếu dành cho công cụ tìm kiếm và các chương trình máy tính khác.

      & lt; body & gt; – Đây là nơi chứa nội dung của trang .

      Cấu trúc HTML Cấu trúc HTML Đây là cách trang HTML trung bình của bạn được cấu trúc trực quan.

      Các thẻ khác

      < p> Bên trong thẻ & lt; head & gt; , có một thẻ luôn được bao gồm: & lt; title & gt; , nhưng có những thẻ khác cũng quan trọng không kém:

      & lt; title & gt;
      Đây là nơi chúng tôi chèn tên trang vì nó sẽ xuất hiện ở đầu cửa sổ hoặc tab trình duyệt.
      & lt; meta & gt;
      Đây là nơi lưu trữ thông tin về tài liệu: mã hóa ký tự, tên (ngữ cảnh trang), mô tả.

      Hãy thử một & lt; head & gt; Phần :

        & lt; head & gt;
      & lt; title & gt; Trang web đầu tiên của tôi & lt; / title & gt;
      & lt;  meta  charset = "UTF-8" & gt;
      & lt;  meta name  = "description" content = "Trường này chứa thông tin về trang của bạn. Trường này thường dài khoảng hai câu." & gt ;.
      & lt; meta name = "author" content = "Conor Sheils" & gt;
      & lt; / header & gt;  

      Thêm nội dung

      Tiếp theo, chúng ta sẽ thực hiện & lt; thẻ body & gt; .

      HTML & lt; body & gt; là nơi chúng tôi thêm nội dung được thiết kế để con người xem.

      Điều này bao gồm văn bản, hình ảnh, bảng, biểu mẫu và mọi thứ khác mà chúng ta thấy trên internet hàng ngày.

      Cách thêm tiêu đề HTML vào trang web của bạn

      Trong HTML, tiêu đề được viết bằng các phần tử sau:

      • & lt; h1 & gt;
        • & lt; h2 & gt;
          • & lt; h3 & gt;
            • & lt; h4 & gt;
              • & lt; h5 & gt;
                • & lt; h6 & gt;
            • < / ul>

        Như bạn có thể đã đoán & lt; h1 & gt; & lt; h2 & gt; nên được sử dụng cho các tiêu đề quan trọng nhất, trong khi các thẻ còn lại nên được sử dụng cho các tiêu đề phụ và văn bản ít quan trọng hơn.

        Bot công cụ tìm kiếm của chúng tôi e thứ tự này khi giải mã thông tin nào quan trọng nhất trên một trang.

        Tạo tiêu đề của bạn

        Hãy thử xem. Trên một dòng mới trong trình chỉnh sửa HTML, nhập:

        & lt; h1 & gt; Chào mừng bạn đến với Trang của tôi & lt; / h1 & gt;

        Và nhấn lưu. Chúng tôi sẽ lưu tệp này dưới dạng “index.html” trong một thư mục mới có tên là “trang web của tôi”.

        Đừng quá lo lắng; chúng tôi vẫn có vô số tính năng tuyệt vời mà chúng tôi có thể thêm vào trang của bạn.

        Cách thêm văn bản vào HTML

        Việc thêm văn bản vào trang HTML của chúng tôi rất đơn giản bằng cách sử dụng một phần tử được mở bằng thẻ & lt; p & gt; tạo một đoạn mới . Chúng tôi đặt tất cả văn bản thông thường của mình bên trong phần tử & lt; p & gt; .

        Khi viết văn bản bằng HTML, chúng tôi cũng có một số phần tử khác mà chúng tôi có thể sử dụng để kiểm soát hoặc làm cho văn bản xuất hiện theo một cách nhất định .

        Các yếu tố chính khác

        Chúng như sau:

        Yếu tố > Ý nghĩa Mục đích & lt; b & gt; In đậm Đánh dấu thông tin quan trọng & lt; strong & gt; Strong Tương tự như in đậm, để đánh dấu văn bản chính & lt; i & gt; In nghiêng Để biểu thị văn bản & lt; em & gt; Văn bản được nhấn mạnh Thường được sử dụng làm chú thích hình ảnh & lt; mark & ​​gt; Văn bản được đánh dấu Đánh dấu nền của văn bản < strong> & lt; small & gt; Small TextĐể thu nhỏ văn bản & lt; gạch ngang & gt; Văn bản được gạch ngang Để đặt một đường ngang trên văn bản & lt; u & gt; Văn bản được gạch chân Được sử dụng cho liên kết hoặc đánh dấu văn bản & lt; ins & gt; Văn bản được chèn vào Hiển thị với gạch dưới để hiển thị nội dung rted text & lt; sub & gt; Subcript TextTypographical lựa chọn phong cách & lt; sup & gt; Superscript Text Một kiểu trình bày kiểu chữ khác

        Các thẻ này phải được mở và đóng xung quanh văn bản được đề cập.

        Hãy thử xem. Trên một dòng mới trong trình chỉnh sửa HTML, hãy nhập mã HTML sau:

        & lt; p & gt; Chào mừng bạn đến với & lt; em & gt; my & lt; / em & gt; trang web hoàn toàn mới. Trang web này sẽ là & lt; mạnh & gt; mới & lt; mạnh & gt; trang chủ trên web. & lt; / p & gt;

        Đừng quên nhấn lưu rồi làm mới trang trong trình duyệt của bạn để xem kết quả.

        Cách Thêm Liên kết Trong HTML

        Như bạn có thể đã nhận thấy, Internet được tạo thành từ rất nhiều liên kết .

        Hầu hết mọi thứ bạn nhấp vào trong khi lướt web là một liên kết đưa bạn đến một trang khác trong trang web bạn đang truy cập hoặc đến một trang bên ngoài.

        Các liên kết được bao gồm trong một thuộc tính được mở bởi Thẻ & lt; a & gt; . Phần tử này là phần tử đầu tiên chúng tôi gặp, phần tử này sử dụng một thuộc tính và do đó, phần tử này trông khác với các thẻ đã đề cập trước đây .

        Thẻ neo

        & lt ; a & gt; (hoặc ký tự liên kết) thẻ mở được viết ở định dạng:

        & lt; a href = " https://blogging.com/how-to- start-a-blog / "& gt; Văn bản liên kết của bạn ở đây & lt; / a & gt;

        Phần đầu tiên của thuộc tính điểm đến trang sẽ mở sau khi nhấp vào liên kết.

        Trong khi đó, phần thứ hai của thuộc tính chứa văn bản sẽ được hiển thị với khách truy cập để lôi kéo họ nhấp vào liên kết đó.

        Nếu bạn đang xây dựng trang web của riêng mình thì rất có thể bạn sẽ lưu trữ tất cả các trang của mình trên dịch vụ lưu trữ web chuyên nghiệp . Trong trường hợp này, các liên kết nội bộ trên trang web của bạn sẽ & lt; a href = ”mylinkedpage.html” & gt; Tiêu đề Liên kết Tại đây & lt; / a & gt ;.

        Hãy tạo một thẻ neo

        Hãy hãy thử nó ra. Tạo bản sao mã từ trang index.html hiện tại của bạn. Sao chép / dán nó vào một cửa sổ mới trong trình soạn thảo HTML của bạn.

        Lưu trang mới này dưới dạng “page2.html” và đảm bảo rằng nó được lưu trong cùng một thư mục với trang index.html của bạn.

        Trên page2.html, hãy thêm mã sau:

        Điều này sẽ tạo liên kết đến Google trên trang 2. Nhấn lưu và quay lại trang index.html của bạn.

        Bật một dòng mới trên index.html thêm mã sau:

        & lt; a href = "* folder (s) * / page2.html" & gt; Page2 & lt; / a & gt;

        Đảm bảo đường dẫn thư mục đến tệp (page2.html) là chính xác. Nhấn lưu và xem trước index.html trong trình duyệt của bạn.

        Nếu mọi thứ đều chính xác thì bạn sẽ thấy một liên kết sẽ đưa bạn đến trang thứ hai của bạn . Trên trang thứ hai, sẽ có một liên kết đưa bạn đến google.com.

        Cách thêm hình ảnh trong HTML vào trang web của bạn

        Trong thế giới kỹ thuật số hiện đại ngày nay, hình ảnh là tất cả. Thẻ & lt; img & gt; có mọi thứ bạn cần để hiển thị hình ảnh trên trang web của mình. Giống như & lt; a & gt; phần tử neo, & lt; img & gt; cũng chứa một thuộc tính.

        Thuộc tính này cung cấp thông tin cho máy tính của bạn về nguồn , chiều cao , chiều rộng > văn bản thay thế của hình ảnh.

        Tạo kiểu và định dạng

        Thuộc tính hình ảnh < img alt = "Thuộc tính hình ảnh" class = "wp-image-18784 sp-no-webp" src = "https://html.com/wp-content/uploads/html-homepage-property.png" /> Bạn có thể kiểm tra loại tệp của hình ảnh bằng cách nhấp chuột phải vào mục đó và chọn ‘Thuộc tính’.

        Bạn cũng có thể xác định đường viền và các kiểu khác xung quanh hình ảnh bằng cách sử dụng thuộc tính lớp. Tuy nhiên, chúng tôi sẽ trình bày vấn đề này trong hướng dẫn sau.

        Các loại tệp thường được sử dụng cho tệp hình ảnh trực tuyến là : .jpg, .png và (càng ngày càng ít) .gif .

        Văn bản thay thế rất quan trọng để đảm bảo rằng trang web của bạn được xếp hạng chính xác trên các trang web tìm kiếm và cả những khách khiếm thị vào trang web của bạn.

        Thẻ & lt; img & gt; thường được viết như sau:

        & lt; img src = "yourimage.jpg" alt = "Mô tả hình ảnh" height = "X" width = "X" & gt;

        Hãy dùng thử.

        Tạo hình ảnh của riêng bạn bằng văn bản thay thế

        Lưu hình ảnh (.jpg, .png, định dạng .gif) mà bạn chọn trong cùng một thư mục mà bạn đã lưu index.html và page2.html. Gọi hình ảnh này là “testpic.jpg.”

        Trên một dòng mới trong trình chỉnh sửa HTML của bạn, hãy nhập mã sau :

        & lt; img src = "testpic.jpg" alt = "Đây là hình ảnh thử nghiệm" height = "42" width = "42" & gt;

        Nhấn lưu và xem trước trang index.html trong trình duyệt của bạn.

        Cách tạo danh sách HTML

        Trong thiết kế web, có 3 loại danh sách khác nhau mà bạn có thể muốn để thêm vào trang web của bạn.

        Danh sách có thứ tự

        Đầu tiên là & lt; ol & gt; : Đây là danh sách nội dung có thứ tự. Ví dụ:

        1. Một món hàng
        2. Một món khác
        3. Một món khác ở đây.

        Inside the & lt; ol & gt; chúng tôi liệt kê từng mục trong danh sách bên trong & lt; li & gt; Thẻ & lt; / li & gt; .

        Ví dụ:

          & lt; ol & gt;
        & lt; li & gt; Một mục & lt; / li & gt;
        & lt; li & gt; Một mặt hàng khác & lt; / li & gt;
        & lt; li & gt; Một cái khác ở đây & lt; / li & gt;
        & lt; / ol & gt;  
        Danh sách không theo thứ tự

        Loại danh sách thứ hai mà bạn có thể muốn đưa vào là & lt; ul & gt; danh sách không có thứ tự. Đây được gọi là danh sách dấu đầu dòng và không chứa số.

        Một ví dụ về điều này là:

          & lt; ul & gt;
        & lt; li & gt; Đây là & lt; / li & gt;
        & lt; li & gt; An Unordered & lt; / li & gt;
        & lt; li & gt; Danh sách & lt; / li & gt;
        & lt; / ul & gt;  
        Danh sách Định nghĩa

        Cuối cùng, bạn có thể muốn đưa vào danh sách định nghĩa & lt; dl & gt; < / span> trên trang của bạn. Ví dụ về danh sách & lt; dl & gt; như sau:

        HTML
        Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ lập trình được sử dụng để tạo các trang web và được hiển thị bởi trình duyệt web.

        Mã được sử dụng cho phần trên như sau:

          & lt; dl & gt;
        & lt; dt & gt; Mục & lt; / dt & gt;
        & lt; dd & gt; Định nghĩa ở đây & lt; / dd & gt;
        & lt; / dl & gt;  

        Hãy dùng thử. Mở index.html và trên một dòng mới, nhập HTML sau:

          & lt; p & gt; Trang web này sẽ có những lợi ích sau cho doanh nghiệp của tôi: & lt ; / p & gt;
        & lt; ul & gt;
        & lt; li & gt; Lưu lượng truy cập tăng & lt; / li & gt;
        & lt; li & gt; Phạm vi tiếp cận toàn cầu & lt; / li & gt;
        & lt; li & gt; Cơ hội Khuyến mại & lt; / li & gt;
        & lt; / ul & gt;  

        Bây giờ nhấn lưu và xem kết quả trong trình duyệt của bạn. Nếu mọi thứ diễn ra suôn sẻ thì nó sẽ hiển thị một bảng có dấu đầu dòng hiển thị thông tin ở trên.

        Cách thêm bảng trong HTML

        HTML Tables  Bảng HTML Bảng có thể được tạo kiểu theo nhiều cách khác nhau – Codepen.io cung cấp các bản xem trước trực tiếp để theo dõi các thay đổi.

        Một cách khác để giữ cho trang web của bạn trông gọn gàng và có trật tự là sử dụng bảng.

        Đây chắc chắn là phần phức tạp nhất của hướng dẫn này, tuy nhiên, việc học nó chắc chắn sẽ có lợi về lâu dài.

        Với điều này, bảng vẫn có thể là một cách hữu ích để trình bày nội dung trên trang của bạn.

        Bảng bao gồm những gì?

        Khi vẽ một bảng, chúng ta phải mở một phần tử bằng & lt thẻ mở; table & gt; . Bên trong thẻ này, chúng tôi cấu trúc bảng bằng cách sử dụng các hàng của bảng, & lt; tr & gt; và các ô, & lt; td & gt; .

        Ví dụ về một bảng HTML như sau:

          & lt; table & gt;
        & lt; tr & gt;
        & lt; td & gt; Hàng 1 - Cột 1 & lt; / td & gt;
        & lt; td & gt; Hàng 1 - Hàng 2 & lt; / td & gt;
        & lt; td & gt; Hàng 1 - Cột 3 & lt; / td & gt;
        & lt; / tr & gt;
        & lt; tr & gt;
        & lt; td & gt; Hàng 2 - Cột 1 & lt; / td & gt;
        & lt; td & gt; Hàng 2 - Cột 2 & lt; / td & gt;
        & lt; td & gt; Hàng 2 - Cột 3 & lt; / td & gt;
        & lt; / tr & gt;
        & lt; / table & gt;  

        Điều này sẽ tạo ra một bảng 2 hàng với 3 ô trong mỗi hàng.

        Các bảng có thể khá phức tạp, vì vậy hãy nhớ kiểm tra hướng dẫn bảng HTML đặc biệt của chúng tôi.

        Thẻ bảng

        Tuy nhiên, hãy chú ý các thẻ này để bạn có thể nhận ra và sử dụng chúng khi kỹ năng của bạn phát triển.

        Đây là các thẻ bảng được trình bày trong một bảng – chơi chữ hoàn toàn nhằm mục đích chơi chữ.

        Thẻ bảng Ý nghĩa < strong> Vị trí & lt; thead & gt; Đầu bảng Phần đầu của bảng & lt; tbody & gt; Phần nội dung của bảng Nội dung của bảng & lt; tfoot & gt; Phần cuối của bảng & lt; colgroup & gt; Nhóm cộtTrong bảng & lt; th & gt; Ô dữ liệu tiêu đề bảng dành cho tiêu đề bảng

        Bảng, đường viền, khoảng cách thường được tạo kiểu bằng CSS nhưng chúng tôi sẽ đề cập đến vấn đề này trong hướng dẫn sau.

        Hãy Lập Bảng

        Chuyển đến một dòng mới trên trang index.html trong trình soạn thảo văn bản của bạn. Nhập mã HTML sau:

          & lt; table & gt;
        & lt; tr & gt;
        & lt; td & gt; Hàng 1 - Cột 1 & lt; / td & gt;
        & lt; td & gt; Hàng 1 - Cột 2 & lt; / td & gt;
        & lt; / tr & gt;
        & lt; tr & gt;
        & lt; td & gt; Hàng 2 - Cột 1 & lt; / td & gt;
        & lt; td & gt; Hàng 2 - Cột 2 & lt; / td & gt;
        & lt; / tr & gt;
        & lt; / table & gt;  

        Nhấn lưu và xem trước trong trình duyệt của bạn .

        Xin chúc mừng: Bạn đã làm được nó!

        Cách Đóng một Tài liệu HTML

        Bạn đã xem đến phần cuối của hướng dẫn HTML dành cho người mới bắt đầu tuyệt đối của chúng tôi < / .

        Bước cuối cùng chúng ta cần hoàn thành là đóng & lt; body & gt; và & lt; html & gt; ở cuối mỗi trang bằng cách sử dụng mã HTML sau:

          & lt; / body & gt;
        & lt; / html & gt;  

        Bạn cũng đã học cách thêm tiêu đề, văn bản, hình ảnh, liên kết, danh sách và bảng cơ bản vào các trang này.

        Tiếp theo là gì? < / h4>

        Giờ đây, bạn có thể sử dụng kiến ​​thức này để tạo các trang web của riêng mình chứa các tính năng này và liên kết chúng với nhau.

        Chúng tôi khuyên bạn nên nâng cao hơn nữa kỹ năng của mình bằng cách thử nghiệm với mã bạn đã học bằng cách sử dụng các biến khác nhau. Bạn cũng có thể muốn tìm hiểu về cách làm cho các trang của mình đẹp bằng cách sử dụng CSS .

        Quyền tạo trang web của riêng bạn hiện nằm trong tay bạn.

        Gỡ rối

        Trong trường hợp mọi thứ không diễn ra như dự kiến, chỉ cần kiểm tra mã HTML của bạn với các ví dụ bên dưới .

        Mã gỡ rối Index.html:

         & lt;! DOCTYPE html & gt;
        & lt; html & gt;
        & lt; đầu & gt;
        & lt; title & gt; Trang web đầu tiên của tôi & lt; / title & gt;
        & lt; meta charset = "UTF-8" & gt;
        & lt; meta name = "description" content = "Đây là trang web đầu tiên của tôi. Nó bao gồm nhiều thông tin về cuộc đời tôi." & gt;
        & lt; / head & gt;
        & lt; body & gt;
        & lt; h1 & gt; Chào mừng bạn đến với trang web của tôi & lt; / h1 & gt;
        & lt; p & gt; Chào mừng đến với & lt; em & gt; my & lt; / em & gt; trang web hoàn toàn mới. & lt; / p & gt;
        & lt; p & gt; Trang web này sẽ là & lt; strong & gt; new & lt; / strong & gt; trang chủ trên web. & lt; / p & gt;
        & lt; a href = "/ page2.html" & gt; Trang2 & lt; / a & gt;
        & lt; img src = "testpic.jpg" alt = "Đây là hình ảnh thử nghiệm" height = "42" width = "42" & gt;
        & lt; p & gt; Trang web này sẽ có những lợi ích sau cho doanh nghiệp của tôi: & lt; / p & gt;
        & lt; ul & gt;
        & lt; li & gt; Lưu lượng truy cập tăng & lt; / li & gt;
        & lt; li & gt; Phạm vi tiếp cận toàn cầu & lt; / li & gt;
        & lt; li & gt; Cơ hội Khuyến mại & lt; / li & gt;
        & lt; / ul & gt;
        & lt; bảng & gt;
        & lt; tr & gt;
        & lt; td & gt; Hàng 1 - Cột 1 & lt; / td & gt;
        & lt; td & gt; Hàng 1 - Cột 2 & lt; / td & gt;
        & lt; / tr & gt;
        & lt; tr & gt;
        & lt; td & gt; Hàng 2 - Cột 1 & lt; / td & gt;
        & lt; td & gt; Hàng 2 - Cột 2 & lt; / td & gt;
        & lt; / tr & gt;
        & lt; / table & gt;
        & lt; / body & gt;
        & lt; / html & gt;  

        page2.html mã gỡ rối:

          & lt; ! DOCTYPE html & gt;
        & lt; html & gt;
        & lt; đầu & gt;
        & lt; title & gt; Trang web đầu tiên của tôi & lt; / title & gt;
        & lt; meta charset = "UTF-8" & gt;
        & lt; meta name = "description" content = "Đây là trang web đầu tiên của tôi. Nó bao gồm nhiều thông tin về cuộc đời tôi." & gt;
        & lt; / head & gt;
        & lt; body & gt;
        & lt; h1 & gt; Chào mừng bạn đến với trang web của tôi & lt; / h1 & gt;
        & lt; p & gt; Chào mừng đến với & lt; em & gt; my & lt; / em & gt; trang web hoàn toàn mới. & lt; / p & gt;
        & lt; p & gt; Trang web này sẽ là & lt; mạnh & gt; mới & lt; mạnh & gt; trang chủ trên web. & lt; / p & gt;
        & lt; a href = "http://www.google.com" & gt; Google & lt; / a & gt;
        & lt; / body & gt;
        & lt; / html & gt;  

        Các Hướng dẫn HTML Khác của Chúng tôi

        Các hướng dẫn HTML của chúng tôi dạy bạn cách tạo trang web cá nhân hoặc trang web cho doanh nghiệp của mình mà không bắt buộc bạn phải học lý thuyết không cần thiết.

        Các hướng dẫn dành cho người mới bắt đầu phổ biến nhất của chúng tôi bao gồm:

        Bảng HTML

        Các hướng dẫn này hướng dẫn bạn qua quy trình tạo bảng theo nhu cầu chính xác của bạn. Bảng đã từng là phương tiện chính để trình bày các trang.

        Với việc áp dụng CSS, điều này không còn cần thiết nữa. Và vì lý do chính đáng, bởi vì điều này đã tạo ra các trang gần như không thể duy trì được. Nhưng với mục đích hiển thị bảng, HTML cung cấp tất cả các công cụ bạn cần.

        Liên kết

        Còn rất nhiều công cụ khác đến các liên kết thay vì chỉ di chuyển từ trang này sang trang khác. Trong hướng dẫn này, bạn sẽ tìm hiểu cách điều hướng các trang và tải tệp xuống .

        Bạn cũng sẽ học cách làm cho các liên kết của mình thân thiện với người dùng nhất có thể. Liên kết là cốt lõi của HTML nên đây là nội dung quan trọng.

        Biểu mẫu

        Biểu mẫu rất quan trọng đối với việc tiếp thị cũng như tạo ứng dụng web và hơn thế nữa.

        Hướng dẫn chi tiết này sẽ hướng dẫn bạn từ những điều cơ bản đến cách sử dụng nâng cao nhất của biểu mẫu với CSS và JavaScript.

        Phông chữ

        Có một thời, phông chữ là một thẻ HTML và nó khiến việc tạo các trang web có thể bảo trì trở thành một cơn ác mộng. Bây giờ chúng tôi sử dụng CSS để đặt phông chữ và các thuộc tính của chúng như trọng lượng, kiểu và kích thước.

        Và bằng cách sử dụng CSS, bạn có thể đặt giao diện cho các trang của mình một cách nhất quán với khả năng thay đổi hoàn toàn chúng bằng cách chỉ thay đổi một vài dòng mã. Hướng dẫn này giải thích tất cả.

        Hình ảnh

        Với việc sử dụng thẻ img và CSS, bạn có thể làm bất cứ điều gì bạn muốn.

        Nhưng với HTML5, bạn có thêm phần tử picture figure . Tìm hiểu cách thực hiện đúng hình ảnh với hướng dẫn kỹ lưỡng này.

        Trung gian & amp; Hướng dẫn nâng cao

        Chúng tôi cũng có nhiều chủ đề dành cho người học HTML trung cấp và nâng cao :

        Hướng dẫn CSS

        CCS, Trang tính kiểu xếp tầng, cho phép bạn thiết kế và trang trí các trang web của mình.

        Hướng dẫn này sẽ đưa bạn từ đầu để trở thành thông thạo CSS để bạn có thể tạo các trang phức tạp dễ bảo trì.

        JavaScript

         HTML Javascript  HTML Javascript Javascript thường được sử dụng để thêm các phần tử động (như đồng hồ đếm ngược này) vào các trang web.

        JavaScript được cho là ngôn ngữ mã hóa web quan trọng nhất sau HTML. Hầu hết các trang web bạn truy cập đều sử dụng ít nhất một chút mã JavaScript.

        Cùng với HTML và CSS, JavaScript tạo nên bộ ba của trang web là thiết kế và xây dựng .

        Hướng dẫn này giả định rằng bạn không biết gì và giúp bạn tiếp cận với ngôn ngữ lập trình thiết yếu này. Nó thậm chí còn giới thiệu cho bạn các chủ đề nâng cao như AJAX và jQuery.

        HTML5

        Video: Khóa học sơ lược 3 phút này là một cách tuyệt vời để bắt đầu hiểu HTML5.

        HTML5 đã cách mạng hóa việc đánh dấu trang web với những thứ như phần tử ngữ nghĩa và đa phương tiện . Tìm hiểu tất cả về những tính năng mới đang chờ được khám phá.

        Đánh dấu ngữ nghĩa

        Hướng dẫn này giới thiệu cho bạn về ngữ nghĩa đánh dấu cho phép bạn xây dựng các trang để cấu trúc của chúng tiết lộ nội dung của chúng.

        Điều này đặc biệt hữu ích khi các công cụ tìm kiếm ngày càng trở nên tiên tiến hơn – cho phép chúng tìm cho người dùng thông tin phù hợp họ đang tìm kiếm.

        Các thẻ logic

        Bạn có thể nhận thấy rằng ít người sử dụng i cho thẻ in nghiêng và thay vào đó sử dụng thẻ em .

        Điều này là do thẻ i chỉ là một thẻ định dạng và do đó sẽ thực sự được hoàn thiện với CSS. em có ý nghĩa: văn bản được nhấn mạnh.

        Các thẻ logic như em cite cũng quan trọng theo cách tương tự như đánh dấu ngữ nghĩa. Tìm thêm thông tin trong cuộc thảo luận ngắn này.

        Hướng dẫn Tham khảo HTML

        Trong khi đó, tham khảo chi tiết về thẻ HTML của chúng tôi cho phép bạn tìm hiểu thêm về từng thẻ HTML đơn lẻ từ & lt; a & gt; đến & lt; xmp & gt; . < / p>

        Mỗi tham chiếu thẻ bao gồm nền và ví dụ hiển thị cách sử dụng thẻ được đề cập. Nó hoàn hảo khi bạn muốn khắc phục sự cố khi viết mã HTML.

        Dưới đây là một số thẻ phổ biến nhất - được hầu hết mọi trang web bạn gặp phải sử dụng:

        Nút Thẻ

        Nút HTML Nút HTML Các nút có thể được tùy chỉnh theo những cách đáng kinh ngạc bằng cách sử dụng CSS và JS. Đây là Codepen.io - một nền tảng chỉnh sửa và chia sẻ mã trực tuyến.

        Một thẻ đặt nút trên trang web. Nó phải được kết hợp với JavaScript để thực hiện bất kỳ điều gì. Trang này cung cấp tất cả thông tin chi tiết bạn cần.

        Neo Tag

        Các liên kết còn nhiều hơn thế mạnh mẽ hơn những người lập trình HTML mới nhận ra. Tìm hiểu tất cả những gì bạn cần biết để tận dụng tối đa thẻ a .

        Liên kết Thẻ

        Thẻ link có thể gây nhầm lẫn vì nó dễ bị trộn lẫn với "liên kết" (được định nghĩa bằng thẻ a ).

        Nhưng link là một thẻ rất mạnh cho phép bạn liên kết tài liệu HTML với tài nguyên bên ngoài như tệp CSS. Tìm hiểu tất cả những gì bạn cần biết tại đây.

        Thao tác hình ảnh

        Ví dụ về mã IMG  Ví dụ về mã IMG Đây là mã hình ảnh có nhiều thuộc tính khác nhau.

        Mặc dù HTML giúp hiển thị hình ảnh dễ dàng với thẻ img , bằng cách sử dụng một số JavaScript, bạn có thể thay đổi hình ảnh nhanh chóng .

        Hướng dẫn này chỉ cho bạn cách thực hiện.

        Mã ký tự

        Một khía cạnh tuyệt vời khác của HTML là khả năng sử dụng các phím không phải bàn phím như ® ( & amp; amp; reg; ) và © ( & amp; amp; copy; ).

        Tham chiếu này cung cấp cho bạn thông tin cần thiết để sử dụng đầy đủ các ký hiệu này .

        Tiêu đề

        Tiêu đề là cách để làm cho văn bản nổi bật bằng cách chia nhỏ trang.

        Đoạn văn

        Các đoạn văn xác định khoảng cách dòng.

        Chữ in nghiêng

        Tạo văn bản in nghiêng giống như trong trình xử lý văn bản. < / p>

        In đậm

        Văn bản in đậm nhấn mạnh từ khóa.

        Anchor

        Thẻ liên kết được sử dụng phổ biến nhất để tạo các liên kết kết hợp với thuộc tính href .

        Danh sách không có thứ tự

        Danh sách các dấu đầu dòng không được đánh số sử dụng thẻ Danh sách không có thứ tự.

        Mục danh sách

        Mỗi dòng trong danh sách được bao bọc bởi thẻ Mục danh sách.

        Trích dẫn khối

        Thẻ blockquote được sử dụng để bao gồm các trích dẫn từ mọi người. Thẻ này giúp phân biệt câu trích dẫn với văn bản xung quanh nó.

        Quy tắc ngang

        Quy tắc ngang là một đường thẳng thường được sử dụng để phân chia các khu vực của trang web.

        Hình ảnh

        Tìm hiểu thẻ hình ảnh để tìm hiểu cách mã hóa hình ảnh vào trang của bạn.

        Ban

        Thẻ Division xác định các kiểu bố cục cụ thể trong CSS.

        Hướng dẫn Tham khảo Thuộc tính HTML

        Phần thuộc tính HTML được thiết kế để cho phép bạn tìm hiểu kỹ hơn và cá nhân hóa các thuộc tính HTML mà bạn biết và yêu thích đồng thời giới thiệu cho bạn một số thuộc tính nâng cao cùng với theo cách.

        Các thuộc tính phổ biến nhất của chúng tôi bao gồm :

        & lt; img src = "" & gt; - Tìm hiểu cách chọn hình ảnh để hiển thị.

        & lt; img alt = "" & gt; - Điều này đặt tên của hình ảnh cho những người không thể nhìn thấy hình ảnh vì lý do này hay lý do khác.

        & lt; a target = "" & gt ; - Các liên kết không phải điền vào trang hiện tại. Có các tùy chọn khác, thường là tốt hơn.

        & lt; a href = "" & gt; - Thuộc tính liên kết cơ bản đặt ở đâu sẽ chuyển người dùng đến .

        & lt; body background - * = "" & gt; - Tìm hiểu cách đặt trang web màu nền, hình ảnh hoặc hơn thế nữa .

        & lt; table bordercolor = "" & gt; - Tìm hiểu cách đặt màu đường viền của bảng của bạn.

        HTML Cheat Sheet

        Nếu bạn khá tự tin vào khả năng HTML của mình nhưng đôi khi cảm thấy ... kiểm tra công việc của bạn thì không cần tìm đâu xa hơn HTML cheat sheet của chúng tôi.

        Hướng dẫn hữu ích này sẽ hiển thị cho bạn mọi thứ bạn cần biết về HTML trong một siêu nhỏ gọn và định dạng dễ hiểu . Nó cung cấp thông tin về các thẻ cụ thể và các thuộc tính cụ thể ở định dạng được sắp xếp theo thứ tự bảng chữ cái.

        Bạn có thể đánh dấu trang để dễ dàng truy xuất. Hoặc bạn có thể in ra bản PDF của chúng tôi để có thể cất giữ tại bàn làm việc.

        Blog HTML.com

        Blog của chúng tôi bao gồm các bài đăng trên tất cả các góc của internet.

        Tại sao Chính phủ Anh lại cấm 10 trang web này? < / strong>

        Vương quốc Anh sử dụng "bộ lọc nội dung người lớn" và kiểm duyệt nhiều trang web được tôn trọng. Nhưng ý nghĩa của “nội dung người lớn” có thể khiến bạn ngạc nhiên.

        hơn 100 nơi để đăng và chia sẻ ảnh của bạn trực tuyến

        Nhiều nơi để tải lên và hiển thị hình ảnh của bạn. Thường thì tốt hơn nên lưu trữ hình ảnh của bạn khỏi trang web của bạn . Dưới đây là một số lựa chọn.

        Lịch Google: 50 Chủ đề, Tin tức & amp; Tiện ích bổ sung

        Tìm hiểu cách tích hợp Lịch Google vào trang web của bạn.

        Homebrew Nintendo Wii Hacks & amp; Bản sửa đổi

        Tìm hiểu 100 mẹo và thủ thuật Wii thú vị.

        20 Câu chuyện lừa đảo trên Internet hay nhất >

        Đọc tất cả về những trò gian lận trên Internet đáng kinh ngạc đã làm rung chuyển thế giới.

        Doxxing là gì?

        < p> Tìm hiểu về quyền riêng tư trực tuyến và quy trình công bố thông tin cá nhân của bạn ra toàn thế giới.

        Hướng dẫn về Lưu trữ trên web của HTML.com

        Nếu bạn đã xây dựng trang web của mình thì không cần tìm đâu khác ngoài HTML.com hướng dẫn về lưu trữ web .

        Chúng tôi sẽ giúp bạn tìm nhà cung cấp dịch vụ lưu trữ tốt nhất cho trang web của mình.

        Cho dù bạn đang tìm kiếm một máy chủ lưu trữ WordPress , một không gian rẻ và vui vẻ cho trang web đầu tiên của bạn hay một giải pháp lưu trữ chuyên dụng, phần lưu trữ của chúng tôi có các bài đánh giá về tất cả các nhà cung cấp dịch vụ lưu trữ tên tuổi lớn và một số công ty nhỏ hơn, bao gồm:

        SiteGround

        Đây là một trong những t các công ty lưu trữ xung quanh với đầy đủ các gói cho bất kỳ loại lưu trữ nào bạn cần.

        Bluehost

        Máy chủ đầu tiên được WordPress chính thức đề xuất . Nhưng họ là một máy chủ lưu trữ tốt cho bất kỳ trang web nào.

        iPage

        Một trong những công ty cung cấp dịch vụ lưu trữ giá cả phải chăng nhất hiện nay. Nếu bạn muốn giảm chi phí mà không làm giảm chất lượng và tính năng, iPage là một lựa chọn tốt.

        HostGator

        Một trong những công ty lưu trữ tốt nhất hiện nay - rất đáng để thử.

        WP Engine

        Máy chủ số một cho máy chủ lưu trữ WordPress cao cấp .

        Cải thiện kỹ năng HTML của bạn

        Bây giờ là bạn đã bắt đầu với HTML, bạn có thể cải thiện kỹ năng của mình . Thật thú vị khi thấy mọi thứ bạn có thể làm với các trang web. Xem thêm các hướng dẫn của chúng tôi và bắt đầu học ngay bây giờ!


Xem thêm những thông tin liên quan đến chủ đề học html và css

Học lập trình Web A-Z - HTML - Bài 1 làm quen với HTML và một số thẻ HTML cơ bản

alt

  • Tác giả: Thư Viện Lập Trình - TIP & STORY
  • Ngày đăng: 2016-12-19
  • Đánh giá: 4 ⭐ ( 4273 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ADMIN đã chuyển qua kênh mới: THƯ VIỆN LẬP TRÌNH - EDU
    https://www.youtube.com/channel/UCdFgDwwUC_D_Bd1vUDEMBtA
    Các videos đào tạo sẽ chỉ đăng mới ở kênh mới ! Kênh cũ này sẽ sử dụng đăng thủ thuật và các câu chuyện nghành nghề công nghệ.

Cách học html css hiệu quả

  • Tác giả: laptrinh.unitop.vn
  • Đánh giá: 3 ⭐ ( 7460 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng Dẫn Học HTML Và CSS Cơ Bản Toàn Tập Cập Nhật 2019

  • Tác giả: nordiccoder.com
  • Đánh giá: 3 ⭐ ( 2459 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

F8 - Học Lập Trình Để Đi Làm

  • Tác giả: fullstack.edu.vn
  • Đánh giá: 5 ⭐ ( 5535 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Học HTML/CSS cơ bản

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 5548 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Series học HTML căn bản và HTML nâng cao dành cho người mới bắt đầu, khóa học tự học HTML online sẽ giúp bạn vững kiến thức HTML căn bản và nâng cao, xem ngay!

Học HTML và CSS cơ bản

  • Tác giả: tuhoclaptrinh.edu.vn
  • Đánh giá: 5 ⭐ ( 9592 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Học HTML và CSS là một trong những bước khởi đầu trong việc nghiên cứu, tìm hiểu về lập trình. Nó được xem như nền tảng cơ bản, cần thiết khi xây dựng website.

HTML/CSS là gì? Vì sao nên học HTML và CSS? - Blog

  • Tác giả: vn.got-it.ai
  • Đánh giá: 4 ⭐ ( 2628 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HTML và CSS là những thành phần quan trọng mà bất kỳ website nào cũng không thể thiếu. Vậy, HTML/CSS là gì? Làm sao để chúng ta phân biệt hai khái niệm này? Chúng ta cùng tìm hiểu qua bài viết sau đây.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  JavaScript Lấy độ dài mảng - độ dài của mảng trong javascript

By ads_php