NgheNhac

Nhạc không lời

------

2. Autumn in Melbourne (hình + nhạc nền)

1. Autumn in Melbourne (nhạc nền) [bạn nào làm sự kiện, lấy bản nhạc này phát khi kết thúc sự kiện sẽ giúp mọi người lưu luyến không muốn về, .... để nghe cho hết bản nhạc :D]

-------------

Tiếng Hát Thùy Dung

3. Le Temps Des Fleurs | Tình Ca Du Mục

2. Magic Boulevard | François Feldman | Ngày Vui Năm Ấy
1. Les Amoureux Qui Passent | Một Thời Để Yêu

---

Nhạc xưa

4. Ngôi nhà hạnh phúc - Sơn Mỹ - Hát trong đám cưới

3. ĐỂ NHỚ MỘT THỜI TA ĐÃ YÊU - COVER - HOÀNG YẾN

2. GẶP NHAU GIỮA RỪNG MƠ - ƯNG LINH

1. Qua cơn mê - Lam Nguyệt Ánh - guitar Tùng Hoàng

----

Hồi cấp 2, cấp 3, khoảng 7, 8 giờ tối, hay để radio sát tai (vì cả nhà đang ngủ), chờ cả tháng để nghe mấy bài này (phát trên đài tiếng nói Việt Nam).

1. The winner takes it all - ABBA

2. When the smoke is going down - Scorpion

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>

</head>

<body>

<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

<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

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

1 Làm quen với HTML

1.1 HTML là gì?

HTML là viết tắt của HyperText Markup Language, dịch ra tiếng Việt là ngôn ngữ đánh dấu để tạo ra siêu văn bản.

Ngôn ngữ thì dùng để giao tiếp? Đúng vậy, chúng ta sẽ sử dụng ngôn ngữ HTML hay “tiếng HTML” để nói cho máy tính biết, chúng ta muốn máy tính làm gì.

HTML là ngôn ngữ “đánh dấu” chứ không phải ngôn ngữ lập trình. Bạn sẽ hiểu “đánh dấu” là gì khi thực hành với HTML ngay sau đây.

Siêu văn bản chính là trang web.

Như vậy, HTML là ngôn ngữ để tạo ra trang web.

Chúng ta sẽ bắt tay vào làm việc với HTML.

- Bạn mở chương trình Notepad, nhập vào đoạn mã HTML sau (đừng copy và paste, nên gõ từng chữ để nhớ mã nguồn):

<!DOCTYPE html>

<html>

<head>

<title>Trang web cua Teo</title>

</head>

<body>

</body>

</html>

- Lưu đoạn mã trên vào ổ đĩa của máy tính với tên bất kỳ, lưu ý, phần mở rộng của tập tin phải là .html hoặc .htm (ví dụ: test.html).

- Mở tập tin test.html bằng trình duyệt (ví dụ Chrome), bạn sẽ thấy trang web đầu tiên như sau:

Vậy là bạn đã tạo ra được trang web đầu tiên bằng ngôn ngữ HTML.

Để tạo ra trang web, những thứ bạn cần có là:

- Ngôn ngữ HTML để tạo ra nội dung cho trang web

- Chương trình Notepad để viết mã HTML

- Trình duyệt web (ví dụ Chrome) để thực thi mã HTML và hiển thị kết quả.

Chúng ta cùng tìm hiểu ý nghĩa từng dòng lệnh của đoạn mã trên.

Dòng mã đầu tiên [1] <!DOCTYPE html> là dòng khai báo, báo cho trình duyệt web biết là đoạn mã sẽ được viết ở các dòng tiếp theo là mã HTML phiên bản 5. Nhờ dòng này, trình duyệt sẽ lấy đặc tả của HTML5 để diễn dịch và thực thi các dòng mã.

DOCTYPE là viết tắt của DOCument TYPE, nghĩa là loại dữ liệu.

Từ dòng [2] là phần mã nguồn HTML.

Mã nguồn HTML là tập hợp các phần tử HTML (HTML element). Chúng ta sử dụng các phần tử HTML để tạo ra nội dung cho trang web. Đoạn mã ví dụ trên gồm các phần tử sau:

- Phần tử <html> là phần tử gốc của trang web (root element)

- Phần tử <head> chứa các thông tin mô tả cho trang web

- Phần tử <title> hiển thị tiêu đề của trang web

- Phần tử <body> chứa nội dung của trang web, những thứ sẽ được hiển thị trên vùng nội dung của trình duyệt (là vùng có khung màu đỏ dưới đây):

- Phần tử <h1> hiển thị một đề mục

- Phần tử <p> hiển thị một đoạn văn bản.

1.2 Phần tử HTML là gì?

Phần tử HTML là thành phần để tạo ra nội dung cho trang web.

Dựa vào tên của phần tử HTML, trình duyệt sẽ biết cách để hiển thị nội dung một cách phù hợp.

Phần tử HTML định nghĩa các vùng nội dung trên trang web, ví dụ: đầu trang, cuối trang, văn bản, tiêu đề, bảng dữ liệu. Đây chính là ý nghĩa của từ “đánh dấu” (markup) trong chữ HTML. Chúng ta sẽ sử dụng phần tử HTML phù hợp để “đánh dấu”. Ví dụ dùng phần tử <body> để đánh dấu “đây là vùng nội dung”, dùng phần tử <h1> để đánh dấu “đây là tiêu đề”, dùng phần tử <p> để đánh dấu “đây là đoạn văn bản”.

Phần tử HTML có cú pháp như sau:

<thẻ mở>Nội dung</thẻ đóng>

Trong đó:

- Thẻ mở (start tag) chứa tên của phần tử và được bao bằng dấu <>. Ví dụ: <html>, <body>, <h1>

- Thẻ đóng (end tag) gồm dấu /, tên của phần tử và được bao bằng dấu <>. Ví dụ: </html>, </h1>

- Để tạo ra một phần tử, chúng ta sẽ sử dụng thẻ mở và thẻ đóng cùng tên (điều này là bắt buộc), chỉ khác là thẻ đóng có thêm dấu /. Ví dụ: <html></html>, <h1></h1>

- Nội dung là những thứ sẽ được hiển thị ra trình duyệt. Tên của phần tử sẽ quyết định đến phần nội dung sẽ được hiển thị ra trình duyệt. Ví dụ: phần tử <h1> sẽ hiển thị ra một dòng tiêu đề lớn, phần tử <p> sẽ hiển thị một đoạn văn bản. Nội dung của phần tử cũng có thể là phần tử HTML khác (phần tử lồng nhau)

- Một số phần tử không có phần nội dung được gọi là phần tử rỗng (empty element), phần tử rỗng chỉ có thẻ mở, không có thẻ đóng. Ví dụ: <br>

1.3 Phần mềm viết mã HTML

Ở phần thực hành trên, để đơn giản, chúng ta sử dụng Notepad để viết mã. Thực tế bạn có thể viết mã HTML trên các môi trường sau:

- Trình soạn thảo văn bản thô (text editor). Ví dụ: Notepad

- Trình viết mã (code editor). Ví dụ: Visual Studio Code

- Trình phát triển ứng dụng tích hợp (IDE: Integrated Development Environment). Ví dụ: Visual Studio, PHPStorm, Pycharm.

- Các trang web lập trình trực tuyến. Ví dụ: https://www.programiz.com/html/online-compiler/

- Các ứng dụng AI (Gemini, ChatGPT, Copilot)

Mỗi môi trường viết mã có những cái hay, cái dở riêng, bạn có thể lựa chọn một môi trường phù hợp để sử dụng.

1.4 Trình duyệt web

Trình duyệt web có chức năng thực thi mã HTML và hiển thị kết quả.

Bạn có thể sử dụng các trình duyệt web phổ biến như: Chrome, Edge, Firefox, Safari.

1.5 Cấu trúc một tài liệu HTML

Tài liệu HTML là một tập tin, trong đó chứa mã HTML của một trang web.

Một tài liệu HTML có cấu trúc như sau:

Trong đó:

Bắt đầu là dòng khai báo <!DOCTYPE html>

Sau phần khai báo, đến phần tử html, toàn bộ tài liệu HTML sẽ được chứa trong phần tử này. Phần tử html được gọi là phần tử gốc (root element), vì nó chứa tất cả các phần tử khác của tài liệu, và nó không nằm trong bất kì phần tử nào.

Bên trong phần tử html có hai phần tử con là phần tử head và phần tử body. Phần tử head và body giúp chia một tài liệu HTML thành hai phần riêng biệt. Trong đó, phần tử head chứa các thông tin mô tả về chính tài liệu này, ví dụ tiêu đề (title), tập tin định dạng (CSS), đoạn mã JavaScript, các thông tin này không được hiển thị ra cửa sổ trình duyệt, phần body chứa toàn bộ nội dung mà chúng ta muốn hiển thị ra cửa sổ trình duyệt.

Trong phần head có phần tử title, phần tử này sẽ chứa tiêu đề của trang web, nó sẽ xuất hiện trên thanh tiêu đề của trình duyệt. Phần tử title bắt buộc phải nằm trong phần tử head.

1.6 Các phiên bản của HTML

HTML có nhiều phiên bản. Sau đây là một số phiên bản phổ biến:

Năm Phiên bản

1991 Tim Berners-Lee tạo ra HTML

1995 HTML 2.0

1997 HTML 3.2

1999 HTML 4.01

2000 XHTML 1.0

2014 HTML5

2016 HTML 5.1

2017 HTML5.2

1.7 Bài tập

1. HTML là viết tắt của?

A. HyperText Markup Language

B. HyperText Machine Language

C. Hyper Text Meta Language

D. HyperText Makeup Language

2. Mục đích chính của phần tử <head> trong một tài liệu HTML là gì?

A. Chứa nội dung chính của trang web.

B. Định nghĩa tiêu đề của trang web.

C. Cung cấp thông tin mô tả (meta) về trang web (như tiêu đề, mã hóa ký tự, từ khóa).

D. Định dạng giao diện cho trang web.

3. Ai là người phát minh ra HTML?

A. Larry Page

B. Tim Berners-Lee

C. Brendan Eich

D. Guido van Rossum

4. Phát biểu nào đúng khi nói về “<!DOCTYPE html>”?

A. Là một thẻ HTML

B. Là một khai báo trong tài liệu HTML

C. Là một phần tử HTML

D. Là một chú thích trong HTML

5. Tạo trang web với nội dung sau:

- Tiêu đề: Họ tên của bạn

- Nội dung: tùy ý, trong đó có sử dụng các phần tử <h1>, <h2>, <p> và các phần tử khác.

Ví dụ:

------ Hướng dẫn làm bài tập -----

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

5.Tạo trang web với nội dung sau: