Tự học những thẻ html cơ bản

Categories

Tổng số lượt truy cập

loading...

Wednesday, November 1, 2017

Thẻ Paragraph


Một trang HTML được chia thành nhiều đoạn khác nhau, mỗi đoạn được xác định bởi thẻ paragraph
Cấu trúc của thẻ paragraph: <p> </p>, đừng quên đóng thẻ, vì một số trình duyệt hiển thị được đoạn văn, nhưng một số khác lại không đúng ý đồ của người viết.
Ví dụ về một paragraph
Câu lệnh:
<p> Only you know how i feel. Only you know how i miss. Can you see you've just what i need. After all that we've been through. After all i've done for you. You should know my love for real </p>
<p> Am i asking for too much? Am i waiting for too long. All i need is your tender touch. Don't you know i'm on my knees. Don't you know i'm begging please. Won't you take a look at me now </p>
Kết quả:
Only you know how i feel. Only you know how i miss. Can you see you've just what i need. After all that we've been through. After all i've done for you. You should know my love for real
Am i asking for too much? Am i waiting for too long. All i need is your tender touch. Don't you know i'm on my knees. Don't you know i'm begging please. Won't you take a look at me now
Như vậy, thẻ Paragraph tự tạo ra các dòng khoảng cách giữa đầu và cuối đoạn văn, chúng ta có thể dùng thẻ <br/> để xuống dòng giữa 2 đoạn này
Câu lệnh:
<p> Only you know how i feel. Only you know how i miss. Can you see you've just what i need. After all that we've been through. After all i've done for you. You should know my love for real <br />
Am i asking for too much? Am i waiting for too long. All i need is your tender touch. Don't you know i'm on my knees. Don't you know i'm begging please. Won't you take a look at me now </p>
Kết quả:
Only you know how i feel. Only you know how i miss. Can you see you've just what i need. After all that we've been through. After all i've done for you. You should know my love for real
Am i asking for too much? Am i waiting for too long. All i need is your tender touch. Don't you know i'm on my knees. Don't you know i'm begging please. Won't you take a look at me now

Chúng ta dễ dàng nhận thấy sự khác nhau khi dùng thẻ paragraph và thẻ br, không chỉ về hình thức, chúng còn thể hiện ý đồ của người viết.

Canh lề cho đoạn văn bản trong HTML


Trong word, chúng ta có một số trường hợp canh lề cho một đoạn văn bản
  • Canh trái (left)
  • Canh giữa (right)
  • Canh phải (center)
  • Canh đều 2 bên (justify)
Vậy với một đoạn văn bản được tạo bởi thẻ <p> </p> trong HTML, chúng ta có làm được như vậy không?
Quay lại ví dụ cũ về đoạn văn bản trong bài Thẻ paragraph :
Ví dụ: <p> Only you know how i feel. Only you know how i miss. Can you see you've just what i need. After all that we've been through. After all i've done for you. You should know my love for real </p>
Kết quả mặc định canh trái:
Only you know how i feel. Only you know how i miss. Can you see you've just what i need. After all that we've been through. After all i've done for you. You should know my love for real
OK, canh phải nào:
Câu lệnh:
<p align="right"> Only you know how i feel. Only you know how i miss. Can you see you've just what i need. After all that we've been through. After all i've done for you. You should know my love for real </p>
Kết quả:
Only you know how i feel. Only you know how i miss. Can you see you've just what i need. After all that we've been through. After all i've done for you. You should know my love for real

Tương tự, canh giữa
Only you know how i feel. Only you know how i miss. Can you see you've just what i need. After all that we've been through. After all i've done for you. You should know my love for real

và canh đều 2 bên
Only you know how i feel. Only you know how i miss. Can you see you've just what i need. After all that we've been through. After all i've done for you. You should know my love for real

Đường kẻ ngang trong HTML - Hr tag


Để kẻ một đường ngang trong HTML, ta dùng lệnh Hr, và vì nó là một thẻ đơn nên không có thẻ đóng (end tag) như các bạn thẻ khác.
Cú pháp của thẻ hr Rất đơn giản:
</hr>
Một đường kẻ ngang mặc định của HTML là như thế này:

Đường kẻ ngang kéo dài từ lề trái sang lề phải và có màu đen. Vậy nếu chỉ muốn đường kẻ ngang này chỉ từ lề trái đi đến khoảng giữa của trang web, có màu sắc khác cho sinh động thì làm thế nào?

HTML chuẩn bị sẵn cho Hr những thuộc tính như thế này

Thuộc tính Align với các giá trị Left, Right và Center cho phép canh lề cho đường thẳng. Tất nhiên, đường thẳng ấy phải có chiều dài nhỏ hơn đường thẳng mặc định thì mới gọi là canh lề được.
Thuộc tính width với giá trị số (10, 20 px) hoặc % (20,30% của độ rộng trang web) cho phép xác định chiều dài đoạn thẳng
Thuộc tính size với giá trị số (10, 20 px)giúp bạn vẽ những đường thẳng dày hay mỏng.

Ví dụ cho các thuộc tính

1. Một đường kẻ rộng bằng 30% của trang web và canh giữa
Câu lệnh : <hr  width="30%" align="center" />
Kết quả :

2. Cũng đường thẳng ấy nhưng canh trái
Câu lệnh : <hr  width="30%" align="left" />
Kết quả :

3. Độ dày mặc định của đường thẳng là 1px, giờ muốn tăng độ dày lên 10px
Câu lệnh : <hr  width="30%" size="10px" align="center" />
Kết quả :

4. Xấu quá, giảm bớt độ dày xuống 5
Câu lệnh : <hr  width="30%" size="5px" align="center" />
Kết quả :

5. Vậy còn màu sắc thì sao?? Màu sắc có lẽ sẽ có thuộc tính color với các giá trị màu tương ứng. Thử xem với màu đỏ
Câu lệnh : <hr  width="30%" size="5px" align="center" color="red" />
Kết quả :

Good