TeoExploresHTML(1): HTML Introduction

[Từ điển]

1. HTML Introduction

1.1 What Is HTML

- HTML stands for HyperText Markup Language

- HTML is the standard markup language for creating Web pages

- HTML describes the structure of a Web page

- HTML consists of a series of elements

- HTML elements tell the browser how to display the content

- HTML elements label (or markup) pieces of content such as "this is a heading", "this is a paragraph", "this is a link".

1.2. A Simple HTML Document

The HTML document is a text-based file that contains instructions on how to display content on a web page.

The file’s extension of the HTML document is .html.

The HTML document is the source code of the web page.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Teo’s page</title>

</head>

<body>

 

<h1>What is HTML</h1>

<p>HTML stands for HyperText Markup Language.</p>

 

</body>

</html>

Example Explained:

- The <!DOCTYPE html> declaration defines that this document is an HTML5 document

- The <html> element is the root element of an HTML page

- The <head> element contains meta information about the HTML page

- The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

- The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

- The <h1> element defines a large heading

- The <p> element defines a paragraph

1.3 What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname> some content </tagname>

The HTML element is everything from the start tag to the end tag.

Example:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Start tag              Element content                             End tag

<h1>                     What is HTML                   </h1>

<p>                        HTML stands for…          </p>

<br>                      none                                                     none

Note: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!

1.4 Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how to display the document.


1.5 HTML Page Structure

Below is a visualization of an HTML page structure:


Note: The content inside the <body> section will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

1.6 Versions of HTML

Year       Version

1991     Tim Berners-Lee invented HTML

1995     HTML 2.0

1997     HTML 3.2

1999     HTML 4.01

2000     XHTML 1.0

2014     HTML5

2016     HTML 5.1

This tutorial follows the latest HTML5 standard.

1.7 Exercise

1. What does HTML stand for?

A. HyperText Markup Language

B. HyperText Machine Language

C. Hyper Text Meta Language

D. HyperText Makeup Language

2. What is the main purpose of the <head> element in an HTML document? 

A. To contain the main content of the web page 

B. To define the title of the web page

C. To provide metadata about the web page (such as title, character encoding, keywords). 

D. To format the layout of the web page.

3. Who invented HTML?

A. Larry Page

B. Tim Berners-Lee

C. Brendan Eich

D. Guido van Rossum

4. Which of the following statements is correct about "<!DOCTYPE html>"?

A. It's an HTML tag

B. It's a declaration in an HTML document

C. It's an HTML element

D. It's a comment in HTML

5. Create a web page with the following content:

Title: Your full name

Content: Anything you like, using elements such as <h1>, <h2>, <p> and others.

Expected Output:



- - - - - hints - - - - -

1 (A), 2(C), 3(B), 4(B)

[test.html]

<!DOCTYPE html>

<html>

<head>

<title>Trang web cua Teo</title>

</head>

<body>

<h1>NGỪNG</h1>

<p>1. Ngừng nuối tiếc quá khứ và lo lắng cho tương lai. Sống trọn vẹn từng khoảnh khắc cho hiện tại mới khiến bạn hạnh phúc.</p>

<p>2. Ngừng sống để vừa lòng người khác. Hãy sống sao cho tử tế !</p>

<p>3. Ngừng so sánh bản thân mình với người khác. Tập trung vào mục tiêu. Trở thành phiên bản tốt nhất của chính mình mỗi ngày.</p>

<p>4. Ngừng phàn nàn và suy nghĩ tiêu cực. Khi gặp điều gì không vừa ý, hãy biết ơn vì đó là cơ hội để mình được trải nghiệm.</p>

<p>5. Ngừng lãng phí thời gian. Thời gian là vô cùng quý giá, hãy dùng nó vào những việc ý nghĩa.</p>

<p>6. Ngừng mong cầu hạnh phúc của mình vào người khác. Yêu thương và hạnh phúc với chính mình mới là thứ hạnh phúc bền vững nhất.</p>

<p>7. Ngừng kiểm soát người khác. Thứ bạn có thể kiểm soát duy nhất là chính mình.</p>

<p>8. Ngừng đổ lỗi cho người khác về vấn đề của mình. Bởi tất cả mọi chuyện đến với bạn là do bạn.</p>

<p>9. Ngừng mong cầu người khác phải đối xử tốt với bạn. Hãy tự mình sống có trách nhiệm với chính mình trước đi.</p>

<p>Nguồn: Internet</p>

</body>

</html>

- - - - - - - The content above is referenced from W3Schools - - - - - 

Cập nhật: 10/10/2024

Bài sau:


- - - - - - đọc thêm -----

CuTeoHocHTML(1): Làm quen với HTML