Đăng ký Đăng nhập
Trang chủ Giáo án - Bài giảng Bài giảng điện tử Học html toàn tập và css căn bản...

Tài liệu Học html toàn tập và css căn bản

.PDF
91
320
96

Mô tả:

Giới thiệu serie Học HTML toàn tập Sau nhiều lần hẹn trước hẹn sau, thì mình cũng đã đặt ra được quyết tâm phải xây dựng xong một serie Học HTML Toàn Tập và một serie Học CSS cơ bản trên blog này kèm theo video vì có rất nhiều người cần. Tại sao mà HTML và CSS lại quan trọng và có nhiều ngươi cần đến như vậy? Phải nói rằng, HTML và CSS là hai nền tảng quan trọng nhất cho việc làm website, dù bạn là dân chuyên nghiệp hay nghiệp dư thì HTML/CSS vẫn đóng góp một phần cực kỳ quan trọng để bạn hiểu được khái quát về một website, và quan trọng nhất là bạn có thể tự tùy biến giao diện website của mình. HTML và CSS là hai ngôn ngữ rất dễ học và rất cơ bản trong việc làm website, nên bạn cũng không cần phải băn khoăn lắm vì khả năng của mình trước khi bắt đầu. Cả hai đều không phải là ngôn ngữ lập trình nên sẽ không có những toán tử, kiểu biến dữ liệu,…mà nó là một ngôn ngữ đánh dấu văn bản (HTML) và ngôn ngữ định dạng (CSS) nên bạn có thể sẽ thấy thú vị khi bắt đầu, nếu hiện tại bạn chưa biết gì hết. Serie học HTML toàn tập này có những gì? Tại serie này, mình sẽ nói qua chi tiết về HTML và định hướng cho bạn đến với HTML một cách nhanh chóng và dễ hiểu thông qua các ví dụ trực quan, cách diễn giải thú vị để bạn có thể vừa xem và vừa làm ngay trên máy tính của mình. Trong xuyên suốt phần học này, bạn sẽ hiểu được làm thế nào mà một tập tin website được hình thành, cách triển khai nó và quan trọng nhất là ý nghĩa của những thẻ HTML (nhất là các thẻ thông dụng) vì sau này nó sẽ theo bạn suốt thời gian làm website. Như mình đã nói, việc học HTML rất đơn giản nên chỉ cần bạn xem serie này trong vòng 2 – 3 giờ mỗi ngày thì bạn sẽ nắm được HTML trong vòng 3 ngày mà thôi. Bạn đã sẵn sàng chưa? Nếu bạn đã sẵn sàng để chinh phục HTML rồi, hãy xem phần kế tiếp để bước vào thế giới HTML và chinh phục nó nào. HTML là gì và vì sao nó quan trọng https://www.youtube.com/watch?v=_7uda2DyR3E&index=1&list=PLl4nkmb3a8w135_M4YRPzYD9_6tERz3ce Chào mừng bạn đến với thế giới HTML, và đây cũng là phần mở đầu để bạn biết rõ HTML là gì và nó được ứng dụng ra sao, hiểu được vì sao nó lại quan trọng dù bạn là người làm website chuyên nghiệp hay nghiệp dư đều phải biết qua nó. Thậm chí những người làm công việc không mấy liên quan như Biên tập viên cũng cần nên biết HTML, tại sao ư? Hồi sau sẽ rõ. HTML là gì? 1) HTML là chữ viết tắt của cụm từ HyperText Markup Language (dịch là Ngôn ngữ đánh dấu siêu văn bản) được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang và mỗi trang được quy ra là một tài liệu HTML (thi thoảng mình sẽ ghi là một tập tin HTML). Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World Wide Web và chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra các chuẩn trên môi trường Internet). Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag), các cặp thẻ này được bao bọc bởi một dấu ngoặc ngọn (ví dụ ) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng (ví dụ và ). Các văn bản muốn được đánh dấu bằng HTML sẽ được khai báo bên trong cặp thẻ (ví dụ Đây là chữ in đậm). Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ). Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng là .html hoặc .htm. HTML được xử lý ra sao? Khi một tập tin HTML được hình thành, việc xử lý nó sẽ do trình duyệt web đảm nhận. Trình duyệt sẽ đóng vai trò đọc hiểu nội dung HTML từ các thẻ bên trong và sẽ chuyển sang dạng văn bản đã được đánh dấu để đọc, nghe hoặc hiểu (do các bot máy tính hiểu). Để kiểm tra, bạn có thể sử dụng khung nội dung bên dưới và chuyển qua lại giữa phần HTML và Result để xem kết quả của một tập tin HTML sau khi được xử lý. Tiêu đề website

Đây là một đoạn văn bản, có chứa các chữ in đậm.

Cấu trúc một đoạn HTML Như mình đã nói ở trên, HTML sẽ được khai báo bằng các phần tử bởi các từ khóa. Nội dung nằm bên trong cặp từ khóa sẽ là nội dung bạn cần định dạng với HTML. Ví dụ dưới đây là một đoạn HTML khai báo một đoạn văn bản. 01

Đây là một đoạn văn bản trong HTML.

Ngoài ra, trong các thẻ còn có các thuộc tính, thuộc tính sẽ đặt bên trong thẻ mở đầu, mỗi thuộc tính sẽ có giá trị được đặt trong dấu ngoặc kép và cách nhau bởi dấu bằng (=) với tên thuộc tính. Ví dụ dưới đây là một thẻ có sử dụng thuộc tính- 01
Một thẻ có thể sử dụng nhiều thuộc tính chứ không phải chỉ một thuộc tính nhé. Dùng chương trình gì để tạo tập tin HTML? HTML là một tập tin siêu văn bản nên bạn có thể dùng các chương trình soạn thảo văn bản không có chức năng định dạng văn bản để tạo ra một tập tin HTML. Trong Windows, bạn có thể dùng Notepad để tạo ra một tập tin HTML, còn trên Mac thì có thể dùng TextEdit và Vim trên các hệ điều hành Linux khác. Miễn là sau đó bạn phải lưu tập tin thành đuôi .html và sử dụng trình duyệt website để đọc nó. HTML có thể được soạn thảo bởi bất kỳ một trình soạn thảo văn bản đơn giản. Tuy nhiên Notepad lại quá đơn giản để sử dụng cho mục đích soạn thảo, nên từ các bài sau chúng ta sẽ dùng một chương trình khác tương tự để soạn thảo HTML. Và mình cũng không bao giờ khuyến khích bạn sửa một tập tin HTML bất kỳ bằng chương trinh Notepad để tránh gặp các lỗi hiển thị ký tự tiếng Việt. HTML đóng vai trò gì trong website? Như mình đã nói, HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc. Vai trò của từng ngôn ngữ trong website: Điều đó không có nghĩa là chỉ sử dụng HTML để tạo ra một website mà HTML chỉ đóng một vai trò hình thành trên website. Ví dụ một website như Thachpham.com sẽ được hình thành bởi:  HTML – Xây dựng cấu trúc và định dạng các siêu văn bản.  CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền,….  Javascript – Tạo ra các sự kiện tương tác với hành vi của người dùng (ví dụ nhấp vào ảnh trên nó sẽ có hiệu ứng phóng to).  PHP – Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt (ví dụ như các bài viết sẽ được lưu trong máy chủ).  MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc (SQL – ví dụ như các bài viết sẽ được lưu lại với dạng dữ liệu SQL). Nhưng ở đây, tạm thời bạn chỉ cần quan tâm đến HTML mà thôi. Dễ hiểu hơn, bạn hãy nghĩ rằng nếu website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của cơ thể đó, nó như là một cái khung sườn vậy. Như vậy, dù website thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người truy cập xem. Nhân tiện đây mình cũng nói luôn, website có hai loại chính:  Website tĩnh (static web) – Là một website không giao tiếp với máy chủ web để gửi nhận dữ liệu mà chỉ có các dữ liệu được khai báo sẵn bằng HTML và trình duyệt đọc.  Website động (dynamic web) – Là một website sẽ giao tiếp với một máy chủ để gửi nhận dữ liệu, các dữ liệu đó sẽ gửi ra ngoài cho người dùng bằng văn bản HTML và trình duyệt sẽ hiển thị nó. Để một website có thể giao tiếp với máy chủ web thì sẽ dùng một số ngôn ngữ lập trình dạng server-side như PHP, ASP.NET, Ruby,..để thực hiện. Ví dụ như một website làm bằng WordPress là website động. Tài nguyên tham khảo HTML Trong serie này mình không có nói hết về các thẻ trong HTML mà chỉ nói qua các thẻ quan trọng nhất vì bạn sẽ sử dụng nó thường xuyên. Vì vậy, bạn hãy vào trang HTML Reference để tham khảo ý nghĩa và cách sử dụng của tất cả các thẻ HTML. Lời kết Ở trên mình đã giải thích khá chi tiết và cặn kẽ về HTML và vai trò của nó trên website là như thế nào. Thoạt nhìn có thể bạn sẽ tưởng các thông tin này chỉ mang tính tham khảo nhưng đó lại là các thông tin cực kỳ quan trọng, vì bạn đã làm web thì phải hiểu rõ về nó. Ở các bài sau, chúng ta sẽ đi vào việc chuẩn bị để soạn thảo một tập tin HTML đầu tiên và chạy thử nó nhé. Soạn một đoạn HTML đầu tiên Giới thiệu HTML như bài trước như thế chắc là đủ thông tin rồi nhỉ? Vậy thì bây giờ chúng ta hãy bắt tay vào việc tập soạn thảo văn bản bằng HTML thôi. Soạn thảo văn bản HTML ở đây nghĩa là chúng ta sẽ tập viết một văn bản được định dạng bằng các thẻ HTML chứ không phải là tạo ra một tập tin HTML hoàn chỉnh (việc đó để phần sau), bằng cách này thì các bạn sẽ dễ dàng tiếp cận với HTML hơn. https://www.youtube.com/watch?v=wR_MDC305oQ Hãy sử dụng Sublime Text để soạn thảo Sublime Text là một chương trình soạn thảo văn bản (Text Editor) miễn phí mà thường là phục vụ cho việc soạn thảo các loại văn bản đơn giản cho đến các đoạn code phức tạp. Hiện tại bạn học viết các ngôn ngữ website thì cứ dùng chương trình này, vừa nhẹ, lại đẹp mà chuyên nghiệp nữa. Sau này bạn thành chuyên nghiệp rồi sẽ tự khắc hiểu tại sao bạn quá may mắn vì biết đến Sublime Text ngay từ buổi lúc viết đoạn mã đầu tiên. Bản miễn phí của Sublime Text sẽ tự động hiển thị bảng hỏi bạn mua bản quyền sau vài lần ấn Save, bạn có thể ấn No để từ chối. Soạn thảo văn bản HTML đầu tiên Bây giờ bạn hãy mở chương trình soạn thảo lên và gõ một đoạn nội dung đơn giản chỉ toàn chữ như thế này. Sau đó hãy lưu lại tập tin này với tập tin text.html và mở lên bằng trình duyệt, kết quả sẽ như thế này: Bạn có để ý thấy rằng văn bản chúng ta soạn ra có xuống hàng đầy đủ mà khi in ra trình duyệt nó không xuống hàng, tại sao? Bởi vì trình duyệt chỉ đọc hiểu các văn bản được định dạng bằng HTML mà thôi, nên cho dù bạn soạn văn bản thông thường mà không có HTML thì trình duyệt vẫn sẽ hiểu rằng đó là một đoạn văn bản thô như vậy. Bây giờ bạn thử đặt cặp thẻ

để thiết lập tiêu đề cho văn bản, và đặt các đoạn văn bản nhỏ vào cặp thẻ

giống thế này. Lưu lại và tải lại bằng trình duyệt website sẽ thấy một kết quả khác. Đấy, lúc này trình duyệt đã tự chuyển đổi các thẻ HTML thành loại định dạng siêu văn bản phù hợp để hiển thị rồi đó. Giải thích thêm:  Thẻ

(viết tắt của chữ Heading level 1) là cặp thẻ để xác định một tiêu đề trong văn bản. Tiêu đề sẽ được in đậm, có size chữ lớn hơn và được ngăn cách với các đoạn văn bản khác (có margin). Ngoài thẻ

thì còn có các thẻ heading với thứ bậc thấp hơn như

,

,

,

,
.  Thẻ

(viết tắt của chữ Paragraph) là cặp thẻ xác định một đoạn văn bản. Mỗi đoạn văn bản đặt trong thẻ

sẽ được xem như là một dòng, mỗi dòng sẽ có những khoảng cách ngăn với nhau. Lời kết Kết thúc phần này chắc bạn đã biết làm sao để có được một tập tin HTML rồi phải không nào? Nhưng đó chỉ là một tập tin văn bản mà thôi, vậy làm sao để có thể tạo ra một tập tin website bằng HTML đây? Phần kế tiếp chúng ta sẽ tìm hiểu về vấn đề này nhé. Cấu trúc một tài liệu web bằng HTML https://www.youtube.com/watch?v=i4wfRU40Avs Một tài liệu hay tập tin HTML để được gọi là một tài liệu web thì sẽ được bao gồm bốn yếu tố chính đó là: Có thẻ khai báo loại tập tin/tài liệu. Có thẻ đóng và mở tài liệu HTML. Có thẻ đóng và mở phần thông tin website. Có thẻ đóng và mở phần nội dung website.     Và trong bài này, chúng ta sẽ đi tìm hiểu qua 4 phần đó để tạo ra một tài liệu website bằng HTML đúng chuẩn. Trước khi mình giải thích rõ các thành phần đó thì bạn hãy tạo ra một tập tin HTML với nội dung sau và lưu lại.

Đây là nội dung website

Mục lục nội dung Thẻ khai báo loại tập tin Thẻ đóng mở tài liệu HTML Thẻ đóng và mở phần thông tin website Có thẻ đóng và mở phần nội dung website Lời kết Xem tiếp bài trong serie Thẻ khai báo loại tập tin Ngay tại đoạn đầu tiên của tài liệu, chúng ta phải có một thẻ khai báo loại tập tin cho nó như thế này, cụ thể là ta sẽ khai báo rằng đây là tập tin HTML. 01 Với thẻ ở trên, ta có thêm một tham số đó là html. Tham số html này nghĩa là chúng ta khai báo với trình duyệt rằng đây là tài liệu HTML5 (HTML phiên bản 5), dù rằng chúng ta có thể không sử dụng HTML5 nhưng hiện tại khi khai báo tập tin HTML thì bạn cứ sử dụng tham số này vừa ngắn gọn lại vừa dễ dàng sử dụng thêm HTML5 nếu thích. Ngoài ra, nó còn có một vài tham số khác mà bạn có thể tham khảo thêm tại đây. Có một điều thú vị là thẻ không phải là một thẻ của HTML, mà nó chỉ là một thẻ khai báo thông tin trên tài liệu để trình duyệt hiểu phiên bản HTML mà bạn sử dụng trên website mà thôi. Thẻ đóng mở tài liệu HTML Kế tiếp, ở tầng tiếp theo sẽ là thẻ có nhiệm vụ khai báo cho trình duyệt biết rằng những nội dung bên trong cặp thẻ này là HTML. Tuy nhiên, bên trong thẻ này mình có thêm một thuộc tính tên là lang với giá trị là vi (). Thuộc tính này nghĩa là chúng ta khai báo cho trình duyệt biết mã ngôn ngữ mà ta sử dụng trên website, mã vi nghĩa là Vietnamese – tiếng Việt, bạn có thể tham khảo các mã ngôn ngữ khác tại đây. Bạn nên nhớ một điều là thẻ phải bao bọc toàn bộ nội dung website, không bao gồm thẻ. Thẻ đóng và mở phần thông tin website Phần khai báo thông tin của website sẽ được đặt vào bên trong cặp thẻ gọi là . Nội dung bên trong thẻ này là các thẻ chuyên cho khai báo thông tin website (meta), tên website (title), khai báo CSS (style), khai báo các đoạn Javascript (script) và một số thông tin khác. Thường là các thông tin được khai báo trong đây sẽ không hiển thị trực tiếp thành siêu văn bản trên web nhưng nó sẽ có nhiệm vụ chứa các thông tin quan trọng về website. Có thẻ đóng và mở phần nội dung website Đây là cặp thẻ mà bạn sẽ tiến hành viết nội dung vào, đó là cặp thẻ . Cặp thẻ này là để trình duyệt xác định đây là phần thân của website, nó sẽ chứa toàn bộ các nội dung siêu văn bản hoặc media mà bạn muốn nó hiển thị lên trang web của bạn. Phần này chúng ta sẽ làm việc nhiều hơn ở các bài sau. Bây giờ nếu bạn mở tài liệu HTML ở trên lên bằng trình duyệt thì chỉ sẽ thấy nó có mỗi đoạn nội dung nằm bên trong thẻ mà thôi. Lời kết Vậy là bây giờ bạn đã có thể tự tạo ra một tài liệu website đơn giản bằng HTML rồi đó, chỉ cần áp dụng cấu trúc tài liệu theo thứ tự mà mình đã giải thích và có ví dụ ở trên. Ở bài tiếp theo, chúng ta sẽ tìm hiểu qua một số thẻ quan trọng cần biết mà bạn nên khai báo trong cặp thẻ để khai báo thông tin một website. Các thẻ khai báo thông tin web cơ bản Như ở phần trước thì bạn đã hiểu một tài liệu web bằng HTML hoàn chỉnh sẽ bao gồm 4 phần chính là thẻ khai báo loại tập tin , thẻ , thẻ khai báo thông tin website và thẻ . https://www.youtube.com/watch?v=5QjQWv35iP0 Và bên trong cặp thẻ trong tài liệu thì đầu tiên sẽ là cặp thẻ , cặp thẻ này sẽ có nhiệm vụ để bạn khai báo thông tin tài liệu website mà bạn đang tạo ra như tên tài liệu, tên tác giả, mô tả, khai báo CSS, khai báo Javascript,…rất nhiều. Nhưng tạm thời ở đây, các bạn chỉ cần biết qua một số thẻ khai báo thông tin web cơ bản được đặt bên trong thẻ cặp mà hầu như dự án nào bạn cũng sẽ dùng tới. Trước khi bắt đầu, bạn hãy viết một tài liệu HTML như dưới đây. Thach Pham Blog - wwww.thachpham.com

Đây là nội dung website

Khai báo tên tài liệu với cặp thẻ Thẻ <title> có tác dụng khai báo tên tài liệu web của bạn đang soạn. Ứng dụng thực tiễn của thẻ này là giúp trình duyệt hiển thị tên tài liệu khi mở lên và các cỗ máy tìm kiếm như Google cũng hiển thị nội dung trong cặp thẻ này để lấy tên tài liệu. Ví dụ như với đoạn HTML trên, mình sẽ thiết lập tên tài liệu này là Thach Pham Blog – wwww.thachpham.com, bạn hãy thử lưu lại và mở nó lên bằng trình duyệt sẽ thấy kết quả như sau. Khai báo dữ liệu vĩ mô với thẻ Thẻ là một thẻ đặc biệt vì nó không có thẻ đóng như các thẻ khác mà sẽ có dấu gạch chéo như / ở đằng trước ký tự > cuối cùng. Thẻ này có mục đích khai báo các dữ liệu vĩ mô trong tài liệu web HTML của bạn như mô tả, từ khóa, tên tác giả, bảng mã ký tự sử dụng,… Thẻ meta luôn được khai báo kèm theo ít nhất là một thuộc tính và mỗi thuộc tính phải luôn có giá trị. Ví dụ: 01 Trong đó, charset là tên thuộc tính và utf-8 là giá trị của thuộc tính charset. Thuộc tính charset Thuộc tính charset trong thẻ có nhiệm vụ khai báo cho trình duyệt biết bảng mã ký tự siêu văn bản bên trong tài liệu là gì. Và hiện nay hầu hết chúng ta đều sử dụng bảng mã UTF-8 cho tất cả ngôn ngữ bao gồm các ngôn ngữ tiếng latin, chữ Hán – Nôm và các ngôn ngữ đọc từ phải sang trái (Right to Left – RTL) như tiếng Ả-Rập chẳng hạn. Thuộc tính name Đối với thuộc tính name thì thẻ meta của bạn phải có hai thuộc tính, đó là thuộc tính name và content, trong đó thuộc tính content được xem là thiết lập nội dung cho thuộc tính name. Ví dụ: 01 Trong đó, giá trị của thuộc tính name là một giá trị có sẵn vì hiện tại thuộc tính name hỗ trợ một số giá trị như: author: Khai báo tên tác giả của tài liệu.  description: Khai báo mô tả của tài liệu.  keyword: Khai báo từ khóa của tài liệu, các từ khóa này sẽ đóng vai trò hỗ trợ các trình tìm kiếm văn bản hoặc máy  tìm kiếm website dò tìm. Đó là các giá trị quan trọng thường dùng, ngoài ra còn một số giá trị khác như:   application-name: Tên ứng dụng đại diện của tài liệu web. generator: Khai báo tên ứng dụng tạo ra tài liệu. Lời kết Như mình đã nói ở đầu bài là các thẻ khai báo thông tin quan trọng cho tài liệu HTML còn khá là nhiều nhưng dù sao các thẻ đó bạn cũng sẽ không sử dụng bây giờ nên mình sẽ đề cập tới ở các serie khác. Nhưng trước mắt bạn nên nắm rõ ý nghĩa các thẻ kia để khi nhìn vào một mã nguồn HTML thì bạn còn hiểu được ý nghĩa của chúng. Các thẻ định dạng chữ viết và văn bản Bắt đầu từ phần này, chúng ta sẽ cùng nhau làm việc trong cặp thẻ trong tài liệu web HTML để viết nội dung hiển thị ra ngoài website, và đây cũng sẽ là phần mà bạn sẽ làm việc nhiều nhất sau này vì thẻ chỉ cần đụng tới khi cần khai báo thông tin của tài liệu mà thôi. https://www.youtube.com/watch?v=hHIRAMgtsh4 Trong khuôn khổ bài viết này, mình sẽ giới thiệu chi tiết các thẻ HTML dành cho mục đích định dạng chữ viết và văn bản bên trong website, ví dụ như tiêu đề văn bản, in đậm, in nghiêng,… Mục lục nội dung Tiêu đề và đoạn văn bản Các thẻ định dạng chữ viết Thẻ trích dẫn Thẻ định dạng sẵn Thuộc tính style để định dạng chữ viết Màu chữ Màu nền Kích thước chữ Font chữ Căn lề văn bản Lời kết Xem tiếp bài trong serie Tiêu đề và đoạn văn bản Tiêu đề (Headline) và đoạn văn bản (Paragraph) là hai thành phần mà bạn cần phân biệt để sau này sử dụng cho đúng. Bạn hãy hiểu rằng, tiêu đề văn bản nó giống như tên của từng chương trong một quyển sách vậy, nó sẽ được hiển thị to hơn nhằm nổi bật hơn. Trong HTML, các thẻ tiêu đề sẽ được định nghĩa bằng cặp thẻ , trong đó n là số tự nhiên từ 1 đến6 tương ứng với từng cấp độ, số càng nhỏ thì cấp độ càng lớn. Để dễ hiểu hơn, hãy thử soạn thảo một tài liệu HTML như dưới đây.

Headline level 1

Headline level 2

Headline level 3

Headline level 4

Headline level 5
Headline level 6
Bạn thấy không, thẻ

sẽ có kích thước to nhất và thẻ

sẽ có kích thước nhỏ nhất. Nếu sau này bạn có soạn thảo một bài viết bằng HTML thì nhớ sử dụng các thẻ tiêu đề này để làm văn bản trở nên chuyên nghiệp hơn. Còn đoạn văn bản thì nó sẽ được khai báo bằng cặp thẻ

. Các văn bản nằm trong cặp thẻ này sẽ được hiểu là một đoạn văn bản, mỗi đoạn văn bản sẽ được xuống dòng và cách nhau với tỷ lệ nhất định. Ví dụ bên dưới:

Đây là một đoạn văn bản, mỗi đoạn văn bản sẽ được hiển thị một dòng riêng và được khai báo bằng thẻ <p>.

Đây cũng là một đoạn văn bản.

Các thẻ định dạng chữ viết Đôi khi trong văn bản của bạn sẽ cần định dạng lại chữ viết như in đậm, tô nghiêng, gạch chân,…và đây là các thẻ HTML cho từng chức năng đó. Trước hết là hãy soạn một đoạn văn bản HTML như thế này: Mìn

Trong tài liệu HTML, bạn có thể định dạng lại chữ viết như tô đậm chữ viết, hoặc có thể in nghiêng, hoặc cũng có thể gạch chân nó tùy thích. Một số trường hợp bạn cũng có thể sẽ cần gạch ngang chữ viết.


Ở trên là một đoạn kẻ ngang được khai báo bằng thẻ <hr>.

Nếu bạn cần nhấn mạnh gì đó, bạn có thể viết như thế này.

Mình xin giải thích một số thẻ mới như sau:         : In đậm chữ viết. : In nghiêng chứ viết. : Gạch chân chữ viết. : Gạch ngang chữ viết. : Nhấn mạnh câu. : Định dạng cho một đoạn mã nào đó.
: Thước kẻ ngang trên tài liệu. : Tô sáng chữ viết. Thẻ trích dẫn Trích dẫn (Quote) là một thẻ có thể bạn sẽ thường sử dụng nếu thường xuyên viết báo hay phóng sự, mục đích của nó là định dạng một câu nói như một câu trích dẫn và có thể định dạng thêm tên người trích dẫn một cách chuyên nghiệp hơn, thẻ trích dẫn được quy định là và tên tác giả trích dẫn được quy định là .

Thoạt nhìn đoạn văn này tưởng nó không có nghĩa, nhưng khi nhìn kỹ lại thì đúng là chẳng có nghĩa gì.

- Thạch Phạm
Lưu ý rằng thẻ thường chỉ nên dùng đặt trong thẻ thôi chứ dùng tùy tiện nó lại mất hay. Và mặc định thì các trình duyệt sẽ tự quy định nội dung nằm trong thẻ sẽ được in nghiêng, còn thẻ thì không có gì cả nhưng sau này bạn làm tới phần CSS rồi thì có thể tự thêm tí “phong cách” cho thẻ quote đẹp hơn. Thẻ định dạng sẵn Trong HTML hiện tại nó có một thẻ được gọi là thẻ định dạng sẵn (preformatted), thẻ này sẽ được viết là
 
. Sở dĩ nó được gọi là thẻ định dạng sẵn vì mặc định trình duyệt đã tự động định dạng cho các nội dung nằm bên trong thẻ đó như kích thước chữ, khoảng cách, kiểu chữ. Thẻ
 
này thường được dùng để đăng một câu đối thoại hoặc in một đoạn mã để cho dễ phân biệt với các văn bản thông thường. Xem ví dụ:

To learn AJAX, you must be familiar with the XMLHttpRequest Object.

Ngoài ra cũng lưu ý rằng khi viết văn bản trong cặp thẻ
 thì việc xuống hàng thông thường vẫn sẽ được định dạng ra
mà không cần thêm thẻ 

. Thuộc tính style để định dạng chữ viết Mặc dù việc lên màu sắc trên website là do CSS đảm nhận, nhưng nếu là một văn bản HTML thông thường thì bạn vẫn có thể thêm màu sắc cho chữ viết bằng thuộc tính style. Thuộc tính style có thể đặt trong bất cứ thẻ nào và giá trị của thuộc tính đó là các thuộc tính của CSS (mình sẽ liệt kê một số thuộc tính hay dùng bên dưới).

Đây là một văn bản có thuộc tính style. Nếu bạn muốn dùng nhiều style trong một đoạn văn thì có thể sử dụng thẻ <span> để thêm nhiều style khác nhau.

Cấu trúc viết thuộc tính sẽ là . Màu chữ Để thiết lập màu chữ, bạn có thể sử dụng thuộc tính color. Giá trị của nó là tên màu trong tiếng Anh hoặc mã màu HEX. 01 chữ màu đỏ Màu nền Màu nền có cách thiết lập giống hệt màu chữ, tức là bạn có thể dùng giá trị là tên màu trong tiếng Anh hoặc mã màu HEX. Tên thuộc tính của màu nền là background-color. 01 Chữ có nền màu đỏ và màu chữ là trắng Kích thước chữ Kích thước chữ bạn có thể sử dụng thuộc tính font-size và giá trị là số kèm đơn vị. Bạn có thể sử dụng đơn vị px, %, pt hoặc em tùy thích, đơn giản nhất là dùng px. 01 Chữ có kích thước 32px Font chữ Nếu bạn có nhu cầu sử dụng font chữ khác so với font chữ mặc định thì hãy dùng thuộc tính font-family với giá trị là tên font chữ có trên máy tính. Một số tên font chữ phổ biến nhất là Arial, Helvetica, Time New Roman, Verdana. 01 Font chữ Arial Ngoài ra bạn có thể thêm font chữ dự phòng bằng cách khai báo nhiều tên font chữ khác nhau được ngăn cách bởi dấu phẩy, ví dụ: 01 Font chữ Arial Có nghĩa là nếu máy người đọc không có font chữ Helvetica thì nó sẽ sử dụng font chữ Arial. Căn lề văn bản Để canh lề, chúng ta sử dụng thuộc tính text-align với giá trị là left,center, right hoặc justify. 01 Canh giữa văn bản Lời kết Có vẻ bài này chúng ta đã tìm hiểu hơi nhiều về HTML rồi phải không nè? Nhưng những gì mình đề cập ở trên đều rất quan trọng và bạn cần nên tập viết nhiều để làm quen với nó vì về sau nó sẽ giúp ích bạn nhiều trong công việc nói chung và việc làm web nói riêng. Tạo danh sách (List) Phần tử danh sách (list) được sử dụng rất thường xuyên trong một tài liệu web bằng HTML. Trong một trang web thường người ta sử dụng các phần tử danh sách rất nhiều, chẳng hạn như menu, danh sách những thông tin nào đó,…v…v…đều được tạo ra bởi các thẻ tạo danh sách trong HTML. https://www.youtube.com/watch?v=PvE72A1TD7Y Trong HTML có ba kiểu danh sách (list type) đó là kiểu sắp xếp (ordered list), kiểu không sắp xếp (unordered list) và kiểu danh sách mô tả (description list). Cụ thể:  Kiểu sắp xếp (Ordered List): Là kiểu hiển thị một danh sách mà các mục con của nó được sắp xếp theo thứ tự bằng số hoặc chữ cái.  Kiểu không sắp xếp (Unordered List): Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được sắp xếp theo thứ tự mà chỉ được đánh dấu bằng một ký tự đặc trưng.  Kiểu mô tả (Description List): Là kiểu hiển thị danh sách mà các mục con của nó sẽ không được đánh dấu thứ tự, nhưng sẽ có kèm theo một đoạn miêu tả. Dưới đây là hình ảnh sự khác nhau giữa ba kiểu danh sách do W3School mô tả: Ordered List Để khai báo một danh sách với kiểu được sắp xếp, bạn phải bắt đầu bằng cặp thẻ
. Bên trong cặp thẻ này sẽ là danh sách các mục con, mỗi mục sẽ đặt trong cặp thẻ
  • , xem ví dụ bên dưới.
    1. Mục con 1
    2. Mục con 2
    3. Mục con 3
    4. Mục con 4
    5. Mục con 5

    Một kiểu hiển thị khác của Ordered List

    1. Mục con
    2. Mục con
    3. Mục con
    4. Mục con
    5. Mục con
    1 2 3 4 5 Thẻ
      cũng hỗ trợ thêm một thuộc tính nữa tên làtype, thuộc tính này là để bạn thiết lập kiểu sắp xếp các mục con bên trong danh sách. Giá trị của thuộc tính type là 1, i, I, a, A. Unordered List Giống như Ordered List, kiểu danh sách Unordered List sẽ bắt đầu bằng cặp thẻ
      và bên trong nó các mục con sẽ được khai báo bằng cặp thẻ
    1. .
      • Mục con 1
      • Mục con 2
      • Mục con 3
      • Mục con 4
      • Mục con 5

      Một kiểu hiển thị khác của Unordered List

      • Mục con 1
      • Mục con 2
      • Mục con 3
      • Mục con 4
      • Mục con 5
      Bạn cũng có thể thay đổi kiểu hiển thị của thẻ
        bằng cách thêm thuộc tính style với thuộc tính CSS làlist-styletype và giá trị làdisc,square, circle vànone. Description List Với kiểu danh sách này thì cách viết thẻ hơi khác một tí, đó là nó sẽ bắt đầu danh sách bằng cặp thẻ
        , trong đó tên mỗi mục con sẽ được khai báo bằng cặp thẻ
        và mô tả cho mục con sẽ được khai báo bằng cặp thẻ
        .

        Một website gồm có

        HTML
        - khung xương của website.
        CSS
        - bộ da của website
        Javascript
        - bộ cánh của website
        Ngôn ngữ server-side (ASP.NET, PHP, RUBY,..)
        - linh hồn của website
        Xếp chồng danh sách Trong HTML, bạn có thể tiến hành xếp chồng một danh sách vào nhiều tầng bằng cách lồng thêm một danh sách nữa vào cặp thẻ
      1. của mục con mà bạn muốn thêm tầng cho nó, như ví dụ dưới đây.
        • WordPress
          • WordPress Themes
          • WordPress Plugin
        • Front-end
          • HTML
          • CSS
          • Javascript (jQuery, AngularJS,..)
        Lời kết Quá dễ dàng để khai báo phần tử danh sách trong HTML phải không nào? Vốn dĩ HTML luôn dễ dàng như vậy mà. Cố gắng lên nào, chỉ còn vài phần tử quan trọng nữa thôi là bạn đã thành chuyên gia HTML rồi. Thẻ tạo liên kết và liên kết neo https://www.youtube.com/watch?v=mPVRMxJhV2s Một trong những nét đặc trưng của siêu văn bản là có những đường liên kết (link) tới một tài liệu khác thông qua địa đường dẫn đến tài liệu hoặc địa chỉ website. Để tạo ra các đường liên kết trong HTML ta sẽ sử dụng cặp thẻ chứa các tham số như sau: 01 nhấp vào đây Mặc dù thẻ có rất nhiều thuộc tính nhưng ở trên là các thuộc tính thường dùng nhất hiện tại, bạn có thể tham khảo thêm các thuộc tính về thẻ tại đây.

        Một siêu văn bản sẽ có các siêu liên kết để người đọc có thể truy cập một tài liệu khác.

        Ý nghĩa các thuộc tính: href: Địa chỉ của tài liệu muốn liên kết đến, đây có thể là một đường dẫn thư mục hoặc địa chỉ website. Nếu bạn  muốn truy cập một tài liệu trên cùng một cấp thư mục thì chỉ cần ghi tên-tập-tin.định dạng (ví dụ: gioi-thieu.html). title: Tiêu đề của liên kết, tiêu đề sẽ hiển thị như một thông tin thêm khi rê chuột vào liên kết.   target: Xác định nơi mở tài liệu, nó có các giá trị như _blank (mở tài liệu trên cửa sổ mới), _self (mở tài liệu trên cửa sổ hiện tại, nếu bạn không khai báo thuộc tính target thì nó sẽ sử dụng giá trị này làm mặc định), _top (mở tài liệu trong nội dung trang hiện tại), _parent (mở tài liệu trên khung trình duyệt mẹ của nó). Và một điều bạn cần biết đó là nội dung trong cặp thẻ có thể là một nội dung siêu văn bản nào, bao gồm các thẻ tiêu đề, hình ảnh,… Liên kết neo (Anchor Link) Liên kết neo nghĩa là một liên kết trong siêu văn bản sẽ dẫn đến một vị trí đặc biệt trong cùng tài liệu mà không phải tải lại hoặc mở một tài liệu mới. Một liên kết neo sẽ có hai phần:  Khu vực được neo, được khai báo bằng thẻ bất kỳ với thuộc tính id (ví dụ:

        ).  Liên kết neo, được khai báo bằng thẻ
        nhưng có thuộc tính là href nhưng giá trị là có dấu # và tên id của khu vực cần truy cập đến (ví dụ: xem nội dung). Hãy thử xem một ví dụ sau: Xem thân bài

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam mattis maximus. Phasellus facilisis felis massa, at bibendum lorem fringilla ut. Sed ipsum sapien, elementum id felis ut, iaculis pulvinar elit.

        Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.

        Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.

        Đây là thân bài

        Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.

        Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.

        Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.

        Etiam efficitur felis ac dui tincidunt egestas. Vestibulum auctor justo tellus, ut posuere eros sagittis id. Etiam dignissim blandit porta. Nunc eu suscipit ipsum, vehicula mollis nisi. Nam non iaculis leo. Duis euismod pharetra vestibulum. Praesent cursus ut purus egestas cursus. Nulla eget volutpat neque. Aliquam erat volutpat. Sed at metus convallis, ultrices diam ut, iaculis neque. Nullam purus lacus, ullamcorper a libero sed, facilisis blandit turpis. Nam ac massa ut elit mollis luctus at eu dui. Nullam eu turpis quis eros iaculis convallis in non neque.

        Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula. Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id rutrum tortor.

        Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer dapibus faucibus libero ut porta. Nam vel eleifend odio.

        Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula. Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id rutrum tortor.

        Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer dapibus faucibus libero ut porta. Nam vel eleifend odio.

        Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula. Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id rutrum tortor.

        Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer dapibus faucibus libero ut porta. Nam vel eleifend odio.

        Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula. Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id rutrum tortor.

        Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer dapibus faucibus libero ut porta. Nam vel eleifend odio.

        Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula. Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id rutrum tortor.

        Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer dapibus faucibus libero ut porta. Nam vel eleifend odio.

        Curabitur blandit elementum ex porta dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et eros mollis, laoreet enim nec, aliquam est. Suspendisse cursus justo eu erat viverra, ut scelerisque lectus ultricies. Donec aliquet sodales justo vitae pulvinar. Nulla sagittis tincidunt leo viverra sollicitudin. Donec sit amet tortor ligula. Nullam euismod, nibh non placerat consectetur, eros nibh interdum ligula, et scelerisque mauris nunc sed enim. Pellentesque accumsan varius dolor. Etiam eu pulvinar odio, id rutrum tortor.

        Aenean eros magna, dapibus ac porta in, facilisis ut tellus. Fusce eleifend nunc vitae aliquet congue. Sed eget tincidunt nisl. Sed finibus viverra dolor, ut suscipit dolor tincidunt et. Etiam dui lacus, convallis convallis tincidunt id, posuere a ligula. Integer dapibus faucibus libero ut porta. Nam vel eleifend odio.

        Khi nhấp vào liên kết Xem thân bài thì nó sẽ tự động nhảy đến khu vực được gán thuộc tính id="than-bai". Lời kết Kết thúc bài tới đây, bạn đã nắm được làm sao để tạo ra các liên kết và liên kết neo trong trang chưa nào? Rất dễ dàng phải không, chỉ cần nhớ như vậy thôi là được rồi. Chèn tập tin kỹ thuật số vào web Các tập tin kỹ thuật số (media files) mà mình đang nói đến đó là hình ảnh (image), âm thanh (audio) và phim ảnh (video). Với HTML chúng ta có thể dễ dàng chèn những loại tập tin này vào tài liệu và nó sẽ hiển thị rất là sống động luôn. Lưu ý rằng các tập tin kỹ thuật số được chèn vào phải có đường dẫn tuyệt đối dẫn trực tiếp đến tập tin đó (ví dụ: http://domain.com/file/image.jpg hoặc audio.mp3, video.mp4,…). https://www.youtube.com/watch?v=vAbDajCuswg Mục lục nội dung Chèn ảnh vào HTML Chèn video Chèn âm thanh – nhạc Chèn đối tượng kỹ thuật số với thẻ Nhúng tài liệu HTML vào web Lời kết Xem tiếp bài trong serie Chèn ảnh vào HTML Để chèn ảnh vào HTML, chúng ta sẽ sử dụng thẻ với các tham số bắt buộc, và thẻ này không có thẻ đóng. Ví dụ: Hello Kitty Vector Giải thích các thuộc tính:    src: Đường dẫn đến tập tin hình ảnh. title: Tiêu đề của hình ảnh. alt: Tên định danh của hình ảnh. Ngoài ra bạn có thể bổ sung thêm thuộc tính width và height để điều chỉnh kích thước hiển thị hình ảnh. Bonus: Nếu bạn muốn upload ảnh lên internet để lấy link trực tiếp thì có thể dùng dịch vụ Imgur. Chèn video Mặc dù hiện tại bạn chưa học đến HTML5 nhưng ở chức năng chèn video này chúng ta sẽ sử dụng một thẻ trong HTML để chèn video nhanh chóng đó là cặp thẻ như sau: Nghĩa là trong cặp thẻ sẽ có một thẻ với các thuộc tính nhằm khai báo đường dẫn tập tin video và loại tập tin. Các thuộc tính bên trong cặp thẻ này có vẻ không có gì là khó hiểu vì bạn đã sử dụng mấy lần rồi đó, bạn có thể tham khảo thêm các thuộc tính khác của thẻ