Làm cách nào để bắt đầu mã cơ bản html?

Note: A DOCTYPE declaration appears at the top of a web page before all other elements; however the doctype declaration itself is not an HTML tag. Every HTML document requires a document type declaration to insure that your pages are displayed correctly.

Tip: The , , and tags make up the basic skeleton of every web page. Content inside the and are invisible to users with one exception: the text between and xuất hiện dưới dạng tiêu đề trên tab trình duyệt

Các thẻ và phần tử HTML

HTML được viết dưới dạng các phần tử HTML bao gồm các thẻ đánh dấu. Các thẻ đánh dấu này là đặc điểm cơ bản của HTML. Mỗi thẻ đánh dấu bao gồm một từ khóa, được bao quanh bởi các dấu ngoặc nhọn, chẳng hạn như , , , ,

, and so on.

HTML tags normally come in pairs like and . The first tag in a pair is often called the opening tag [or start tag], and the second tag is called the closing tag [or end tag].

An opening tag and a closing tag are identical, except a slash [/] after the opening angle bracket of the closing tag, to tell the browser that the command has been completed.

In between the start and end tags you can place appropriate contents. For example, a paragraph, which is represented by the p element, would be written as:

This is a paragraph.
  
 This is another paragraph. 

  

You will learn about the various HTML elements in upcoming chapter.

Bây giờ chúng ta sẽ đi sâu vào và chơi với một số mã. Phần này sẽ giới thiệu mẫu HTML cơ bản. Mẫu này có cấu trúc cơ bản mà mọi tài liệu phải tuân theo, cũng như một số bit bổ sung khác để giúp quản lý tài liệu

Mẫu cơ bản

Đây là mẫu cơ bản. Mẫu này phải là điểm bắt đầu cho mọi trang HTML bạn viết. Phần còn lại của phần này sẽ giải cấu trúc và giải thích nó

mẫu. html

1. Trang HTML thú vị của chúng tôi
4. Nội dung ở đây

Hãy phá vỡ nó

• Dòng 1 - Đây là một thẻ đặc biệt nằm ở đầu tài liệu và xác định loại mã nào đang được sử dụng
• Dòng 2 và 12 - Các thẻ html mở và đóng tài liệu HTML. Mọi thứ chứa bên trong là một phần của tài liệu
• Dòng 3 và 7 - Các thẻ đầu xác định phần đầu của tài liệu. Các mục ở đây là dữ liệu bổ sung đi kèm với tài liệu
• Dòng 4 - Thẻ tiêu đề xác định tiêu đề của tài liệu. Bạn sẽ nhận thấy nó xuất hiện ở đầu cửa sổ trình duyệt
• Dòng 5 và 6 - Các thẻ meta được sử dụng để mô tả tài liệu
• Dòng 9 và 11 - Các thẻ nội dung chứa nội dung thực tế là tài liệu

Loại tài liệu

Thẻ đầu tiên trên mỗi trang phải luôn là thẻ này. Nó sẽ ở trên cùng, trước thẻ html. Bạn sẽ nhận thấy rằng, không giống như các thẻ khác, thẻ này bắt đầu bằng dấu chấm than [. ]

Về mặt kỹ thuật, nó không phải là một thẻ mà là một hướng dẫn cho trình duyệt về cách diễn giải phần còn lại của tài liệu. Đối với HTML 5, chúng tôi chỉ đơn giản gọi loại là html. Đối với các phiên bản trước của HTML, có nhiều loại khác nhau nên điều quan trọng là phải chỉ định loại nào

Cái đầu

Phần đầu của tài liệu html là nơi chứa thông tin phụ trợ. Đây là thông tin liên quan đến tài liệu nhưng không phải là một phần trực tiếp của tài liệu. Có nhiều mục có thể vào đây nhưng mẫu ở trên bao gồm các mục cơ bản mà mọi trang nên có

Tiêu đề

Thẻ tiêu đề cho phép chúng tôi cung cấp cho tài liệu một tiêu đề. Điều này được sử dụng ở một số nơi

• Trình duyệt sẽ bao gồm nó ở đầu cửa sổ
• Nếu bạn lưu trang làm mục yêu thích, tiêu đề sẽ được sử dụng ở đây
• Công cụ tìm kiếm sử dụng tiêu đề khi họ liệt kê trang của bạn trong kết quả tìm kiếm của họ
• Các trang web khác có thể sử dụng tiêu đề khi ai đó liên kết đến trang của bạn
• Và những người khác

Thẻ tiêu đề có thể khá quan trọng với tất cả những nơi nó được sử dụng. Bạn nên dành thời gian để đảm bảo rằng nó được mô tả và súc tích

Các công cụ tìm kiếm thường chỉ hiển thị 65 ký tự đầu tiên của tiêu đề [cho hoặc lấy một vài ký tự]. Bạn nên đặt mục tiêu giữ danh hiệu của mình ở mức thấp hơn số tiền này

Một tiêu đề được viết tốt có thể khuyến khích nhiều người nhấp vào trang của bạn hơn khi nó xuất hiện trên Trang kết quả của Công cụ tìm kiếm

thẻ meta

Tiếp theo, trong đầu chúng ta có hai thẻ meta cho mô tả và từ khóa. Chúng được sử dụng bởi các công cụ tìm kiếm [ở các mức độ khác nhau] và cũng có thể được sử dụng bởi các hệ thống khác [chẳng hạn như khi trang của bạn được liên kết trên mạng xã hội và các trang chia sẻ khác]

Mô tả được sử dụng để cung cấp một bản tóm tắt về nội dung của trang. Các công cụ tìm kiếm thường sẽ đặt điều này dưới tiêu đề của bạn trong các trang kết quả của họ

Các công cụ tìm kiếm thường chỉ hiển thị 155 ký tự đầu tiên của mô tả [cho hoặc lấy một vài ký tự]. Bạn nên đặt mục tiêu giữ cho mô tả của mình ít hơn số tiền này

Một lần nữa, một mô tả được viết tốt có thể khuyến khích nhiều người hơn nhấp vào trang của bạn khi nó xuất hiện trên Trang kết quả của Công cụ tìm kiếm

Thẻ meta từ khóa được sử dụng để cung cấp một loạt các từ phù hợp với nội dung của trang. Các công cụ tìm kiếm đã từng đặt trọng lượng vào khía cạnh này trên trang của bạn nhưng nó đã bị lạm dụng đến mức ngày nay nó có rất ít trọng lượng. Tuy nhiên, bạn vẫn nên đưa nó vào để đảm bảo tính đầy đủ và cũng như ước tính rằng một số công cụ tìm kiếm sẽ đánh dấu bạn vì không có nó. Lý do của họ là nếu bạn lười biếng và không phiền khi đặt thẻ này vào thì có lẽ bạn cũng lười biếng trong các lĩnh vực khác nên chất lượng trang của bạn, theo ý kiến ​​​​của họ, kém hơn

Cơ thể

Đây là nơi nội dung thực sự của trang của bạn đi. Thông thường, tất cả nội dung này sẽ được chứa trong các thẻ để giải thích loại nội dung đó là gì. Trong ví dụ trên, chúng tôi đã bỏ qua điều này chỉ để giữ cho mọi thứ đơn giản. Trong phần tiếp theo, chúng tôi sẽ bắt đầu cho bạn thấy loại thẻ nào có thể được sử dụng

Điều quan trọng là tất cả nội dung của bạn nằm giữa thẻ mở và thẻ đóng

Phá vỡ các quy tắc

Nếu bạn copy file trên [mẫu. html] vào tệp của riêng bạn và mở nó trong trình duyệt, bạn sẽ thấy một trang cơ bản. Thử nghiệm với nó, bạn sẽ thấy rằng bạn thực sự có thể phá vỡ các quy tắc theo một số cách khác nhau và trình duyệt sẽ vui vẻ chơi theo

Các nhà cung cấp trình duyệt nhận ra rằng có khá nhiều HTML được viết kém. Trong nỗ lực cung cấp trải nghiệm tốt nhất cho người dùng, họ sẽ cố gắng hết sức để khắc phục mọi lỗi mà họ gặp phải

Tuy nhiên, đừng coi đây là cái cớ để lười biếng và viết mã kém

• Nó có thể hoạt động ngay bây giờ nhưng các phiên bản trình duyệt trong tương lai có thể không dễ dàng như vậy
• Nó cũng có thể khiến bạn gặp rắc rối sau này khi thêm CSS và javascript
• Các công cụ tìm kiếm thường xem chất lượng mã của bạn như một chỉ báo về chất lượng nội dung của bạn. Nếu họ thấy lỗi HTML, nó có thể gây hại cho thứ hạng của bạn

Bản tóm tắt

Chỉ định rằng đây là một tài liệu HTML. Xác định tài liệu HTML thực tế. Một thùng chứa để đặt thông tin phụ trợ đi kèm với tài liệu. Một vùng chứa để xác định tiêu đề của tài liệu. Xác định thông tin mô tả tài liệu. Một thùng chứa để chứa nội dung của tài liệu

Điểm bắt đầu Mọi tài liệu bạn viết nên bắt đầu với mẫu cơ bản này. Phá vỡ các quy tắc Trình duyệt sẽ cho phép bạn phá vỡ các quy tắc. Điều này không có nghĩa là bạn nên

Các hoạt động

Bây giờ hãy chơi và tạo trang đầu tiên của chúng tôi

• Sao chép mẫu ở trên vào tệp của riêng bạn và mở nó trong trình duyệt. Quan sát nơi hiển thị tiêu đề
• Tìm hiểu cách mở công cụ kiểm tra trình duyệt của bạn và khám phá một chút. Hiện tại bạn sẽ không thấy nhiều nhưng nó sẽ trở nên hữu ích hơn khi chúng tôi bổ sung thêm vào tài liệu của mình
• Tạo một bản sao của tài liệu và mở nó trong trình duyệt của bạn. Bây giờ hãy phá vỡ nó theo nhiều cách khác nhau và xem những gì bạn có thể và không thể bỏ qua. Dưới đây là một vài điều để thử
  • đặt nội dung ở những nơi khác nhau bên ngoài thẻ cơ thể
  • bỏ qua hoặc đánh vần sai các thẻ khác nhau
  • thử thêm các bản sao của thẻ, ví dụ:. điều gì xảy ra nếu bạn có hai hoặc nhiều thẻ nội dung hoặc thẻ tiêu đề?

Khi chúng tôi thực hiện hướng dẫn này, mỗi phần sẽ thêm các thẻ mới cho phép bạn làm những điều thú vị hơn. Đề xuất của tôi là bạn nên chọn một chủ đề hoặc chủ đề mà bạn quan tâm và tạo một trang về chủ đề đó. Khi bạn làm việc qua từng phần, hãy thêm và cải thiện trang bằng các thẻ mới mà bạn đã học