Show Chào các bạn, Như ở bài trước mình đã giới thiệu về cấu trúc của một trang HTML thì bạn thấy rằng một tài liệu HTML được cấu tạo hoàn toàn từ các thẻ. Hay cũng có thể nói các thẻ HTML chính là bản chất của tài liệu HTML. Vậy bạn chỉ nắm rõ được HTML khi bạn hiểu rõ được các thẻ cấu tạo nên nó. Vì vậy mà trong series này, mình có dành một số lượng bài nhất định để trình bày về cách sử dụng các thẻ phổ biến trong HTML, mà mở đầu chính là bài này – Các thẻ định dạng văn thường gặp trong HTML. I. Các thẻ headingHeading là các thẻ được sử dụng để đánh dấu tiêu đề cho nội dung trang web. Trong HTML, các thẻ heading được chia làm 6 cấp bậc, với kích thước nhỏ dần như sau: Heading 2Heading 3Heading 4Heading 5Heading 6Cụ thể cú pháp của các thẻ heading trong HTML như sau: <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> Giống như bạn trình bày một trang sách, các mục Một lớn, Hai lớn sẽ ưu tiên được đặt trong các thẻ h1, h2, các mục nhỏ hơn thì sử dụng các thẻ h3, h4… Đặc biệt, các công cụ tìm kiếm như Google sẽ dựa vào các thẻ heading này để nhận biết về cấu trúc nội dung trang web của bạn, vì vậy nếu bạn có làm việc trong nghề SEO thì cũng nên để ý tới việc sử dụng các thẻ heading hợp lý. II. Các thẻ định dạng văn bảnThẻ định dạng văn bản trong HTML rất phong phú. Cụ thể bạn có thể dễ dạng định dạng một dòng chữ đậm, chữ nghiêng, chữ gạch chân bằng HTML. Ví dụ
Dòng chữ này đậm Các thẻ định dạng văn bản này rất dễ học và dễ nhớ, vì vậy mình có tổng hợp một số thẻ hay dùng trong bảng dưới đây để các bạn tiện theo dõi.
III. Các thẻ định dạng đoạn văn bảnNgoài việc định dạng văn bản nói chung, HTML còn cho bạn định dạng từng đoạn văn bản. Cụ thể, bạn có thể đánh dấu một đoạn văn bản bằng cách sử dụng thẻ <p>...</p>, hay quản lý việc xuống dòng bằng thẻ <br />. Ví dụ
Đây là đoạn văn thứ nhất. HTML là chữ viết tắt của Hyper Text Markup Language, dịch ra có nghĩa là Ngôn ngữ đánh dấu siêu văn bản. Trong lập trình web, HTML có nhiệm vụ là xây dựng lên bố cục trang web. Đây là đoạn văn thứ 2. Ở dạng nguyên thể, HTML chỉ là văn bản đơn thuần, chỉ khi đi qua bộ biên dịch của trình duyệt nó mới có thể trở thành như những gì bạn trông thấy. Nếu bạn muốn ngắt dòng,
Mỗi một đoạn văn bản trên đều được đặt trong cặp thẻ <p>...</p>. Khi nội dung đặt trong cặp thẻ này, nó sẽ tự động được ngăn cách với các phần tử bên dưới một khoảng nhất định, đủ để bạn phân biệt rạch ròi nội dung đó thuộc về đoạn văn bản nào. Trường hợp bạn muốn xuống hàng lưng chừng câu, bạn chỉ cần đặt vào chỗ muốn xuống hàng thẻ <br> là xong. IV. Tự định dạng thông qua thuộc tính styleCác thẻ định dạng văn bản trong HTML tuy phong phú, nhưng chưa đủ độ biến hóa để có thể thể hiện được hết óc sáng tạo của các web developer. Chính vì vậy mà HTML cung cấp một thuộc tính có tên là style để giúp các developer có thể tùy chỉnh thêm các thuộc tính nâng cao khác. 4.1 Định dạng màu chữCác màu cơ bản như xanh, đỏ, tím, vàng, đen,… trong HTML được mô tả bằng cách từ Tiếng Anh tương ứng, như red là đỏ, black là đen, green là xanh lá cây,… Để định dạng lại màu chữ, bạn sử dụng theo cú pháp như sau: <tagname style="color: colorname">...</tagname>Ví dụ
4.2 Căn lề văn bảnNếu bạn muốn căn lề trái, phải, giữa, căn đều hai bên cho đoạn văn, bạn có thể sử dụng cú pháp: <div style="text-align: align">...</div>Với align nhận các giá trị được thể hiện trong bảng dưới
Ví dụ
Căn trái Căn giữa Căn phải Căn đều Code HTML của ví dụ trên <div style="text-align: left">Căn trái</div> <div style="text-align: center">Căn giữa</div> <div style="text-align: right">Căn phải</div> <div style="text-align: justify;">Căn đều</div> Với trường hợp căn đều, bạn cần phải thử với một đoạn văn dài mới cảm thấy sự khác biệt 4.3 Thay đổi kích thướcTrong trường hợp bạn muốn thay đổi kích thước văn bản, bạn có thể sử dụng cú pháp: <tagname style="font-size: size">...</tagname>Trong đó size là một đơn vị đo kích thước, thường là pixel, pixel càng lớn thì văn bản càng lớn. Ví dụ: Dòng chữ này lớn 20 pixel Code HTML của ví dụ trên <b style="font-size: 20px">Dòng chữ này lớn 20 pixel</b> <b style="font-size: 18px">Dòng chữ này lớn 18 pixel</b> V. Tổng kếtViệc căn chỉnh, định dạng một nội dung khoa học và đẹp mắt sẽ khiến người đọc cảm thấy dễ chịu khi trải nghiệm trang web của bạn, vì vậy mà thao tác định dạng văn bản là điều cực kỳ quan trọng và cần thiết. Mặt khác, văn bản lại là một trong những nội dung phổ biến trên các website hiện nay, điều này càng nhắc nhở bạn phải nắm rõ các cách căn chỉnh văn bản. Vì vậy mà mình muốn bạn hãy lưu ý lại bài viết này của mình, để khi cần sẽ có tài liệu để tra cứu. Chúc các bạn học tập hiệu quả.
|