Mở đầu các trang văn bản thường là các tiêu đề cần làm nổi bật từng phần của văn bản như Chương, Mục,. cũng cần có đề mục rõ ràng khác với phần thân để người đọc theo dõi cho thuận tiện. Có 6 mức tiêu đề trong HTML: h1, h2, h3, h4, h5, h6. Sử dụng như các thẻ html thông thường gồm có thẻ mở và thẻ đóng.
Ví dụ: <H1>Tiêu đề 1</H1> cho kết quả Tiêu đề 1 <H6>Tiêu đề 6</H6> cho kết quả Tiêu đề 2 1. Thẻ đoạn văn bản: Thẻ này dùng để xác định một đoạn văn bản. Thẻ <p> (Paragraph) có thể dùng kèm thuộc tính để ấn định cách trình bày đoạn văn bản. Ví dụ: <p>Đoạn văn bản 1</p> <p>Đoạn văn bản 2</p> Để căn lề văn bản, chúng ta có thể dùng thuộc tính chỉnh lề nằm trong thẻ p như sau: <p align= “left” | “right” | “center”>Đoạn văn bản</p> 1.
Thẻ xuống dòng: Khi dùng thẻ p, các đoạn văn bản sẽ tự xuống dòng để phân thành 1 đoạn. Nếu chúng ta cần xuống dòng tại 1 vị trí bất kỳ, thì có thể dùng thẻ <br>, khi dùng thẻ <br> thì toàn bộ văn bản phía sau sẽ nhảy xuống 1 dòng, dùng nhiều <br> sẽ nhảy xuống nhiều dòng. Ví dụ: 12 <p>Đoạn <br>văn <br><br>bản 1<p> → có kết quả là: Đoạn văn bản 1 1. Đường kẻ ngang: Thẻ này sẽ cho chúng ta 1 đường kẻ ngang màn hình, đường kẻ này có thể chỉnh chiều dài bằng cách thay đổi thuộc tính chiều rộng của thẻ Ví dụ: <hr> → 1 đường kẻ ngang màn hình <hr width=”50%”> → 1 đường kẻ ngang màn hình có độ rộng là 50% màn hình <hr width=”50px”> → 1 đường kẻ ngang màn hình có độ rộng là 50px 1.
Thẻ định dạng văn bản thông dụng: Để định dạng văn bản như in đậm, in nghiêng, gạch dưới chúng ta có thể sử dụng các thẻ lần lượt là <b>, <i>, <u> Ví dụ: <b><i><u><p>Đoạn văn bản</p></u></i></b> → Đoạn văn bản <p><b>Đoạn</b> <i>văn</i> <u>bản</u></p> → Đoạn văn bản 1. Thẻ giữ nguyên định dạng văn bản: Thông thường khi dùng thẻ p để tạo đoạn văn bản, nếu chúng ta xuống nhiều dòng trong đoạn đó sẽ không được tính, và khi hiển thị sẽ chỉ hiển thị 1 đoạn. Để hiển thị đúng với những gì mình thực hiện khi soạn thảo, chúng ta có thể dùng thẻ <pre> thay cho p. Khi dùng thẻ pre, văn bản sẽ chuyển thành font chữ Courier.
Thẻ khối và thẻ trong dòng văn bản (nội tuyến) Mỗi thẻ HTML đều có giá trị hiển thị mặc định, tùy thuộc vào loại thẻ đó. Có hai giá trị hiển thị: khối và nội tuyến. Thẻ cấp khối: Một thẻ cấp khối luôn bắt đầu trên một dòng mới. Một thẻ cấp khối luôn chiếm toàn bộ chiều rộng có sẵn (trải dài sang trái và phải hết mức có thể).
Thẻ cấp khối có lề trên và lề dưới, trong khi thẻ nội tuyến thì không. Thẻ <div>, <p> là thẻ cấp khối. Một số thẻ cấp khối: <address><article><aside><blockquote><canvas><dd> <div><dl><dt><fieldset><figcaption><figure><footer><form> <h1>-<h6><header><hr><li><main><nav> <noscript><ol><p><pre><section><table><tfoot><ul><video> 2. Thẻ nội tuyến: 13 Một thẻ nội tuyến không bắt đầu trên một dòng mới.
Một thẻ nội tuyến chỉ chiếm nhiều chiều rộng khi cần thiết. Thẻ <span>, <b>, <i>, <u> là thẻ nội tuyến. Một số thẻ nội tuyến: <a><abbr><acronym><b><bdo><big><br><button> <cite><code><dfn><em><i><img><input><kbd><label> <map><object><output><q><samp><script><select> <small><span><strong><sub><sup><textarea><time><tt><var> 2. Thẻ DIV Thẻ <div> thường được sử dụng làm vùng chứa cho các phần tử HTML khác.
Thẻ <div> không có thuộc tính bắt buộc, nhưng style, class và id thường được dùng. Khi được sử dụng cùng với CSS, <div>phần tử có thể được sử dụng để tạo kiểu cho các khối nội dung, xây dựng bố cục trang web. Ví dụ: <div style="background-color:black;color:white;padding:20px;"> <h2>DIV</h2> <p> Thẻ div thường được sử dụng làm vùng chứa cho các phần tử HTML khác. Thẻ SPAN Thẻ <span> là một vùng chứa nội tuyến được sử dụng để đánh dấu một phần của văn bản hoặc một phần của tài liệu.
Thẻ <span> không có thuộc tính bắt buộc, nhưng style, class và id thường được dùng. Khi được sử dụng cùng với CSS, <span> phần tử có thể được sử dụng để tạo kiểu cho các phần của văn bản. Ví dụ: <p>Thẻ <span style="color:blue;font-weight:bold">span</span> là một vùng chứa <span style="color:darkolivegreen;font-weight:bold">nội tuyến</span> được sử dụng để đánh dấu một phần của văn bản hoặc một phần của tài liệu</p> 3. Thẻ hình ảnh và thẻ link 3.
Thẻ Link: Các liên kết được tìm thấy trong hầu hết các trang web. Liên kết cho phép người dùng nhấp theo cách của họ từ trang này sang trang khác. Các liên kết HTML là các siêu liên kết. Có thể nhấp vào một liên kết và chuyển đến một tài liệu khác.
Khi di chuyển chuột qua một liên kết, mũi tên chuột sẽ biến thành một bàn tay nhỏ. 14 Lưu ý: Một liên kết không nhất thiết phải là văn bản. Một liên kết có thể là một hình ảnh hoặc bất kỳ phần tử HTML nào khác! <a>Thẻ HTML xác định một siêu liên kết. Cú pháp: <a href="url">Liên kết</a> Thuộc tính quan trọng nhất của <a> là href, chỉ ra điểm đến của liên kết.
Các văn bản liên kết là phần mà sẽ được hiển thị cho người đọc. Nhấp vào văn bản liên kết, sẽ đưa người đọc đến địa chỉ URL được chỉ định. Ví dụ: <a href="https://www.com/">Cùng học HTML</a> Theo mặc định, trang được liên kết sẽ được hiển thị trong cửa sổ trình duyệt hiện tại. Để thay đổi điều này, bạn phải chỉ định một target - mục tiêu khác cho liên kết.
Các target quy định cụ thể thuộc tính nơi để mở tài liệu được liên kết. Các target có thể có một trong các giá trị sau: _self: Mở tài liệu trong cùng một cửa sổ / tab khi nó được nhấp vào _blank: Mở tài liệu trong một cửa sổ hoặc tab mới _parent: Mở tài liệu trong khung chính _top: Mở tài liệu trong toàn bộ phần thân của cửa sổ Ví dụ: <a href="https://www.com/" target="_blank">Cùng học HTML</a> 3. Thẻ hình ảnh: Hình ảnh có thể cải thiện thiết kế và giao diện của một trang web <img> là thẻ HTML được sử dụng để nhúng một hình ảnh vào một trang web. Hình ảnh không được chèn vào một trang web về mặt kỹ thuật; hình ảnh được liên kết với các trang web.
Các <img>thẻ trống, nó chỉ chứa các thuộc tính, và không có một thẻ đóng. Các <img>thẻ có hai thuộc tính cần thiết: src - Chỉ định đường dẫn đến hình ảnh alt - Chỉ định văn bản thay thế cho hình ảnh khi hình ảnh bị lỗi không hiển thị được Cú pháp: <img src="đường dẫn chứa hình ảnh" alt="văn bản sẽ thay thế cho hình ảnh"> Ví dụ: <img src="hinhnen.png" alt="Hình nền"> → hinhnen.png nằm cùng thư mục với tập tin html <img src="https://ibb.co/qF1NZqY/" alt="Flowers in Chania"> → https://ibb.co/qF1NZqY/ là đường dẫn chứa hình ảnh trên internet 15 Có thể đặt kích thước hiển thị cho hình ảnh theo tỉ lệ % hay px. Đặt kích thước hình ảnh bằng cách dùng thuộc tính width hay height hoặc đặt theo css với thuộc tính style. Ví dụ: <img src="hinhnen.png" alt="Hình nền" width="500" height="600"> <img src="hinhnen.png" alt="Hình nền" style="width:500px;height:600px;"> Có thể đặt link cho hình ảnh để tạo ra hình ảnh có dạng liên kết, bằng cách đặt thẻ img bên trong thẻ a Ví dụ: <a href= “https://google.com”> <img src="hinhgoogle.png" alt="Hình Google" width="500" height="600"> </a> Các định dạng hình ảnh chung: Dưới đây là các loại tệp hình ảnh phổ biến nhất, được hỗ trợ trong tất cả các trình duyệt (Chrome, Edge, Firefox, Safari, Opera): Loại tập tin Mô tả Đuôi của tập tin APNG Hình động dùng cho mạng .apng GIF Hình ảnh có thể chuyển động .gif ICO Hình dạng ICON của Microsoft .cur JPEG Hình ảnh thông thường .pjp PNG Hình ảnh chuyên dùng trên mạng .png SVG Hình ảnh dạng vector (dùng trong .svg thiết kế) 4.
Thẻ Table - tạo bảng Bảng HTML cho phép các nhà phát triển web sắp xếp dữ liệu thành các hàng và cột. Ví dụ: Company Contact Country Alfreds Futterkiste Maria Anders Germany 16 Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Laughing Bacchus Winecellars Yoshi Tannamuri Canada Magazzini Alimentari Riuniti Giovanni Rovelli Italy Thẻ dùng để tạo bảng là <table>. Một bảng trong HTML bao gồm các ô bảng bên trong các hàng <tr> và cột <td>. Tiêu đề của bảng có thể có hoặc không, <th> là thẻ để tạo tiêu đề.
Ví dụ: Một bảng thông thường trong HTML <table> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table> Theo ví dụ trên ta thấy, các thẻ <td> và <th> phải nằm trong thẻ <tr>, tức là phải tạo hàng trước rồi mới tạo cột hay tiêu đề. <td> ở đây còn gọi là ô, vì chỉ những gì thể hiện trong <td> mới hiển thị lên website 4. Đường viền: Mặc định bảng khi được tạo ra sẽ không có đường viền. Để hiển thị đường viền, chúng ta cần thay đổi thuộc tính border của table thành giá trị (thông thường là 1) 17 Ví dụ: <table border= “1”>… Ngoài ra, chúng ta có thể dùng thuộc tính style để tùy chỉnh hoặc dùng CSS (sẽ học ở bài sau) để làm cho bảng chúng ta sinh động hơn.
Kích thước bảng: Bảng HTML có thể có các kích thước khác nhau cho từng cột, hàng hoặc toàn bộ bảng. Sử dụng thuộc tính style với width hoặc height để chỉ định kích thước của bảng, hàng hoặc cột. Để đặt chiều rộng của bảng, hãy thêm thuộc tính style vào <table>: Ví dụ: <table style="width:100%"> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table> Để đặt kích thước của một cột cụ thể, hãy thêm thuộc tính style vào một <th> hoặc <td> phía trên cùng. 18 <table style="width:100%"> <tr> <th style="width:70%">Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table> Để đặt chiều cao của một hàng cụ thể, hãy thêm thuộc tính style vào <tr> trong bảng: <table style="width:100%"> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr style="height:200px"> <td>Emil</td> <td>Tobias</td> <td>Linus</td> 19 </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table> 4.
Cellspacing & cellpadding: Cellspacing và cellpadding là 2 thuộc tính của table có công dụng điều chỉnh khoảng cách giữa các ô và khoảng cách từ biên của ô đến nội dung bên trong ô, ngoài 2 thuộc tính này, chúng ta có thể sử dụng css để điều chỉnh <table style="width:100%" cellspacing=”10px” cellpadding=”10px”> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> 20 <td>14</td> <td>10</td> </tr> </table> 4. Trộn hàng và trộn cột trong bảng của HTML: Bảng HTML có thể có các ô kéo dài (trộn lại) trên nhiều hàng hoặc cột. Để tạo một ô mở rộng trên nhiều cột, sử dụng thuộc tính colspan cho 1 ô. Cú pháp colspan= “số ô muốn trộn” Ví dụ: <table> <tr> <th colspan="2">Name</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>43</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>57</td> </tr> </table> Để tạo một ô mở rộng trên nhiều hàng, hãy sử dụng thuộc tính rowspan cho 1 ô.