Những gì cần thiết để viết HTML?

Trong hướng dẫn này, bạn sẽ học cách tạo một tài liệu HTML hoặc một trang web dễ dàng như thế nào. Để bắt đầu mã hóa HTML, bạn chỉ cần hai thứ. trình soạn thảo văn bản đơn giản và trình duyệt web

Chà, hãy bắt đầu với việc tạo trang HTML đầu tiên của bạn

Tạo tài liệu HTML đầu tiên của bạn

Hãy đi qua các bước sau. Ở phần cuối của hướng dẫn này, bạn sẽ tạo một tệp HTML hiển thị thông báo "Xin chào thế giới" trong trình duyệt web của bạn

Bước 1. Tạo tệp HTML

Mở trình soạn thảo văn bản thuần túy trên máy tính của bạn và tạo một tệp mới

Mẹo. Chúng tôi khuyên bạn nên sử dụng Notepad [trên Windows], TextEdit [trên Mac] hoặc một số trình soạn thảo văn bản đơn giản khác để thực hiện việc này; . Khi bạn hiểu các nguyên tắc cơ bản, bạn có thể chuyển sang các công cụ nâng cao hơn như Adobe Dreamweaver

Bước 2. Nhập một số mã HTML

Bắt đầu với một cửa sổ trống và nhập mã sau




    A simple HTML document


    

Hello World!

Bước 3. Lưu tệp

Bây giờ hãy lưu tệp trên màn hình của bạn với tên "myfirstpage. html"

Ghi chú. Điều quan trọng là phần mở rộng .html được chỉ định — một số trình soạn thảo văn bản, chẳng hạn như Notepad, sẽ tự động lưu nó dưới dạng .txt nếu không

Để mở tệp trong trình duyệt. Điều hướng đến tệp của bạn rồi nhấp đúp vào tệp đó. Nó sẽ mở trong trình duyệt Web mặc định của bạn. Nếu không, hãy mở trình duyệt của bạn và kéo tệp vào đó

Giải thích về mã

Bạn có thể nghĩ mã đó là gì. Vâng, chúng ta hãy tìm hiểu

  • Dòng đầu tiên là khai báo loại tài liệu. Nó hướng dẫn trình duyệt web rằng tài liệu này là tài liệu HTML5. Nó không phân biệt chữ hoa chữ thường
  • Phần tử là nơi chứa các thẻ cung cấp thông tin về tài liệu, ví dụ: thẻ tag defines the title of the document.
  • The element contains the document's actual content [paragraphs, links, images, tables, and so on] that is rendered in the web browser and displayed to the user.

You will learn about the different HTML elements in detail in the upcoming chapters. For now, just focus on the basic structure of the HTML document.

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ước đầu tiên để xây dựng một trang web là học HTML. HTML rất cần thiết vì nó là bộ xương của tất cả các trang web. HTML cung cấp cấu trúc cho nội dung trên trang web, bao gồm văn bản, hình ảnh, nút, video và liên kết. HTML là một nơi tuyệt vời để bắt đầu hành trình học tập của bạn khi lần đầu học cách viết mã. Có thể xây dựng các trang web cơ bản sau khi học một số HTML cơ bản, với văn bản, hình ảnh và video. HTML là viết tắt của ngôn ngữ đánh dấu siêu văn bản. Hướng dẫn này sẽ xem xét kỹ hơn cách bắt đầu viết HTML

Đánh dấu HTML cơ bản

Chúng ta có thể bắt đầu với một ví dụ đơn giản về đánh dấu HTML





My First Heading

My first paragraph.

Mục đích của HTML

HTML cung cấp khung cho các trang web và là nơi tuyệt vời để bắt đầu khi học viết mã



Write HTML Code!

When we set the href property on an anchor tag [abbreviated to ] we can specify both the text that should be rendered for the user [the text within the anchor tag] and the URL that the browser should navigate to.

Với mã này, chúng tôi đang gán giá trị https. // ăn chay. com/how-to-write-html-code vào thuộc tính href. Khi người dùng nhấp vào văn bản của liên kết này [Viết mã HTML. ], họ sẽ được chuyển đến phần Viết mã HTML

Element

Chỉ nội dung bên trong thẻ mở và thẻ đóng mới được hiển thị trên màn hình. Đây là cách mở và đóng thẻ body trông như thế nào

________số 8_______

Phần tử

The

HTML element stands for paragraph. Paragraphs represent blocks of text separated from nearby blocks by blank lines or first-line indentation. In HTML, paragraphs can be any structural grouping of related content, such as images or form fields and they are block level in nature.

Đây là một đoạn

Đây là một đoạn khác



0

Element

là phần tử tiêu đề cấp phần cao nhất. Chỉ sử dụng một

trên mỗi trang hoặc chế độ xem. Nó nên mô tả ngắn gọn mục đích tổng thể của nội dung

Thẻ Hello H1____4_______

Đây là một đoạn

Đây là một đoạn khác



0

Element

The

HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS.

Thẻ Hello H1____4_______

Đây là một đoạn

Đây là một đoạn khác

Đoạn này là con của phần tử div và là cháu của phần tử body



0

Lưu ý về cấu trúc HTML

HTML markup is organized as a collection of relationships similar to a family tree. As you saw earlier, we placed

tags within tags. and this is what is known as a child element. The

tag is a child of the tag. It also means the child element is nested inside of the parent element.

Đoạn này là con của body



0

In the example above, the

element is nested inside the element. The

element is considered a child of the element, and the element is considered the parent. There can be multiple levels of nesting so this analogy can be extended to grandchildren, great-grandchildren, and so on. The relationship between elements and their ancestor and descendent elements is known as a hierarchy. It is important to understand HTML hierarchy because child elements can inherit behavior and styling from their parent element.

đến Phần tử

Chúng ta đã xem qua phần tử h1 và nói chung, chỉ nên có một phần tử như vậy trên mỗi trang HTML. Ngoài ra còn có 5 yếu tố tiêu đề khác bao gồm từ h2 đến h6

  • Thông tin tiêu đề có thể được sử dụng bởi các tác nhân người dùng để tự động xây dựng mục lục cho tài liệu
  • Tránh sử dụng các thành phần tiêu đề để thay đổi kích thước văn bản. Thay vào đó, hãy sử dụng thuộc tính cỡ chữ CSS
  • Avoid skipping heading levels: always start from

    , followed by

    and so on.

  • Use only one

    per page or view. It should concisely describe the overall purpose of the content.

Thẻ Hello H1____4_______

tiêu đề 2

tiêu đề 3

tiêu đề 4

tiêu đề 5
Heading 6


0

Thuộc tính HTML

Thuộc tính là một khía cạnh siêu quan trọng của HTML. Hãy nghĩ về các thuộc tính như nội dung được thêm vào thẻ mở của một phần tử 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 dáng. Các thuộc tính được tạo thành từ hai phần

  • Tên của thuộc tính
  • Giá trị của thuộc tính

Id là một nơi tuyệt vời để bắt đầu tìm hiểu về các thuộc tính. Nó được sử dụng khá thường xuyên và được sử dụng để xác định duy nhất các phần trên trang HTML. Thuộc tính id có thể được sử dụng theo nhiều cách nhưng hiện tại, chúng ta sẽ xem cách thuộc tính này có thể giúp chúng ta xác định nội dung trên trang

Ớt_______4_______

về ớt

các loại

Đặc trưng

trồng ớt

Dinh dưỡng đất trồng ớt

Nhiệt độ cần thiết cho Peppers

Bí quyết cho Peppers

3

Phần đánh dấu ở trên có ba phần riêng biệt với mỗi phần được bao bọc bởi phần tử div của chính nó. Đây là một cách tiếp cận phổ biến để tổ chức dữ liệu trên một trang. Ngoài ra, lưu ý rằng chúng tôi đã thêm một id cho mỗi phần tử div để xác định duy nhất nó. Khi bạn sử dụng id trên một trang, tên của id đó chỉ được sử dụng một lần

Displaying Text with

or

Ớt_______4_______

về ớt

các loại

Ớt vừa là trái cây vừa là rau, vì vậy hãy đảm bảo ăn nhiều chúng

Đặc trưng

Ớt là một nguồn cung cấp vitamin C tuyệt vời và chúng cũng là một nguồn kali tốt, rất quan trọng đối với khả năng hấp thụ và dự trữ năng lượng của cơ thể

trồng ớt

Dinh dưỡng đất trồng ớt

Ớt cần đất giàu hữu cơ để phát triển tốt

Nhiệt độ cần thiết cho Peppers

Ớt cần được giữ ở nhiệt độ từ 70 đến 90 độ F để có kết quả tốt nhất

Bí quyết cho Peppers

Súp tiêu nhồi là một công thức tuyệt vời

3

and Elements

It is possible to style text directly in the HTML markup without any CSS. For example, you can use the tag for emphasis of text, or the tag to highlight important text.

Các thẻ này có thể được tùy chỉnh theo cách chúng hiển thị nội dung trong HTML bằng CSS nhưng các trình duyệt có biểu định kiểu tích hợp thường sẽ tạo kiểu cho các thẻ này theo các cách sau

  • The tag will generally render as italic emphasis.
  • thường sẽ hiển thị dưới dạng nhấn mạnh đậm
Ớt_______4_______

về ớt

các loại

Ớt vừa là trái cây vừa là rau, vì vậy hãy đảm bảo ăn nhiều chúng

Đặc trưng

Ớt là một nguồn cung cấp vitamin C tuyệt vời và chúng cũng là một nguồn kali tốt, rất quan trọng đối với khả năng hấp thụ và dự trữ năng lượng của cơ thể

3


Tag

Whitespace contained in an HTML file doesn’t actually affect the location of elements in a web browser. When entering a new line inside of HTML, the Browser simply will continue parsing the text from left to right. In order to introduce a new line in the rendered output, you can use HTML’s line break element:
.

Phần tử ngắt dòng là duy nhất vì nó không có thẻ đóng. 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

Đây là trên dòng 1
và đây là trên dòng 2
dòng 3 ở đây

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

Unordered lists are a staple in web development. The unordered list tag [

    ] is used to create a list of items in no particular order. An unordered list displays each list item with a bullet point.

    The

      element is not where the actual text is inserted into the HTML. Each list item must be added to the unordered list using the
    • tag. The
    • or list item tag is used to describe an item in a list.


      • Bít tết

      • Đậu đen

      • Rau củ

      • Salsa

      • Lettuce

      • Cheese

      • Guacamole

      Ordered Lists

        An ordered list in HTML works much like an unordered list with the difference being that each element is numbered. Ordered lists are great for when you need to list different steps in a procedure or rank items from first to last. You can create an ordered list with the

          tag and nested
        1. tags. Here we simply change the unordered list above into an ordered list here.

          1. Bít tết
          2. Đậu đen
          3. Rau
          4. điệu Salsa
          5. Rau xà lách
          6. Phô mai
          7. Guacamole

          Thuộc tính alt, viết tắt của văn bản thay thế, được sử dụng để gán ý nghĩa cho hình ảnh trên trang web. Thuộc tính này có thể được thêm vào thẻ hình ảnh giống như thuộc tính src. Nó được sử dụng để xác định một mô tả chính xác của hình ảnh. Điều này rất quan trọng đối với các cân nhắc toàn diện, chẳng hạn như khi trình đọc màn hình đang được sử dụng làm công nghệ hỗ trợ khi truy cập web trên toàn thế giới.

          7

          The modern web is becoming more and more dynamic every day. Users are now looking for moving images, aka video, to enhance the web experience even more. HTML supports displaying videos with the element and requires an src attribute with a link to the video source. Unlike the element, the element does require both an opening and a closing tag.

          8

          Cách viết tóm tắt mã HTML

          Hướng dẫn này trình bày nhiều điều cơ bản mà bạn sẽ cần để bắt đầu viết mã HTML cho web. Hãy xem lại những gì chúng ta biết bây giờ

          Các công cụ HTML cơ bản là gì?

          Các công cụ phổ biến nhất được sử dụng để viết mã HTML là Visual Studio Code, Atom, Notepad++, Sublime Text, Netbeans, Adobe Dreamweaver CC , v.v.

          4 thẻ HTML bắt buộc là gì?

          Có nhiều loại thẻ HTML, chúng giúp bạn thiết kế trang web của mình. Có bốn thẻ bắt buộc trong HTML. Đây là html, tiêu đề, phần đầu và nội dung . Bảng bên dưới hiển thị cho bạn thẻ mở và thẻ đóng, mô tả và ví dụ.

    Chủ Đề