Trang chủ Web DevelopmentHTML/CSS [Học HTML] Soạn một đoạn HTML đầu tiên

[Học HTML] Soạn một đoạn HTML đầu tiên

bởi Thạch Phạm
15 bình luận 9711 views
Khuyến mãi hosting

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.

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.

soan-text-don-gian

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:

soan-text-don-gian-02

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ẻ <h1> </h1> để 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ẻ <p> </p> giống thế này.

soan-text-don-gian-03

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.

soan-text-don-gian-04

Đấ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ẻ <h1> (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ẻ <h1> thì còn có các thẻ heading với thứ bậc thấp hơn như <h2>, <h3>, <h4>, <h5>, <h6>.
  • Thẻ <p> (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ẻ <p> 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é.

15 bình luận

Có thể bạn quan tâm

15 bình luận

Tuanpham 09/05/2017 - 11:04 Chiều

Khi em đặt cặp thẻ vào đoạn văn bản nhưng nó không đổi màu đỏ ạ. Bật bằng trình duyệt vẫn hiện

Reply
GHV 07/04/2017 - 8:50 Sáng

đã làm được rồi. cảm ơn anh 🙂

Reply
Hoàng Lê Quang Vũ 26/03/2017 - 2:47 Chiều

không đổi màu ik ạ

Reply
Hoàng Lê Quang Vũ 26/03/2017 - 9:04 Sáng

a ơi cho e hỏi, sao sublime của e nó không có đổi mà chữ như của a vậy ạ @@

Reply
daquy 02/04/2017 - 1:35 Sáng

bạn save tên file có đuôi .html rồi trở lại viết code nhé!

Reply
Hoàng Lê Quang Vũ 02/04/2017 - 9:38 Chiều

tks bạn

Reply
trang 15/09/2016 - 3:40 Chiều

a ơi cho e hỏi e gõ tiếng việt trong sublime hiển thị được nhưng khi save r mở bằng browse lai k hiện được thì fải lsao hả a..thanks a

Reply
Thạch Phạm 17/09/2016 - 2:24 Sáng

Bạn cứ xem các bài sau nhé sẽ hiểu tại sao web lại không hiển thị tiếng Việt.

Reply
Doãn Mắn 01/11/2016 - 2:48 Chiều

thêm thẻ định dạng chữ vào utf-8

Reply
Quí 12/08/2016 - 11:37 Chiều

xin hỏi a làm sao save lại .

Reply
Thạch Phạm 13/08/2016 - 10:47 Sáng

Bạn vào File -> Save hoặc Ctrl + S nhé.

Reply
tấn đạt 15/07/2016 - 7:20 Chiều

em ko gắn thẻ h1 hay p dc ạ
nó ko lên màu đò như anh

Reply
tấn đạt 15/07/2016 - 7:07 Chiều

cho em xin link subline ạ

Reply
Thạch Phạm 17/07/2016 - 6:00 Chiều

Bạn lên Google gõ sẽ thấy.

Reply

Để lại một bình luận

* Khi bình luận, bạn đồng ý rằng thông tin bạn nhập vào bao gồm tên, email và địa chỉ IP sẽ được lưu giữ tại website.