Tong Hop HTML SEM 2

<!
DOCTYPE html> Sử dụng ngôn ngữ html (website)
===== Cú pháp cơ bản của HTML =====
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Tên của website </title>
Link liên kết từ html -> css

<link href="link liên kết tới file css.css" rel="stylesheet">
Link liên kết từ html -> javascript

<script src="link liên kết tới file javascript.js"></script>
</head>
<body>
</body>
</html>
===== Các thẻ <tag> cơ bản của html =====
<html></html> Thẻ mở đầu 1 trang web
<head></head> Thẻ head thường chứa link liên kết với các
trang web khác cũng như các css, javascript liên kết với trang html đang dùng
<meta charset="utf-8"> Quy định về dấu của văn bản (để hiển thị tiếng việt)
trong website
<title>...</title> Thẻ quy định tên của website
<link> Thẻ dùng để liên kết html với css

Cú pháp đầy đủ: <link href="đường link liên kết tới file css.css"
rel="stylesheet">
Tham khảo thêm: <link href="đường link liên kết tới file img.ext" rel="icon"
type="image/x-icon">
-> Đổi icon của website
<script></script> Nội dung bên trong thẻ script là đoạn code javascript
hoặc link liên kết tới file javascript.js
Cú pháp đầy đủ: <script src="đường link liên kết tới file
javascript.js"></script>
<body></body> Thẻ body thường chứa toàn bộ nội dung của

website
<a></a> Tạo liên kết trong trang web
<p></p> Tạo đoạn văn bản (có khoảng hở giữa các

đoạn văn bản khác nhau)
<h1></h1> Tạo tiêu đề có kích thước mặc định 40px

<b></b> | In đậm chữ
<strong></strong> |
<i></i> | In nghiêng chữ

<em></em> |
<br> Ngắt dòng (giữa các dòng không có khoảng hở)
<hr> Tạo 1 đường line full trình duyệt (mặc định)

<hr width="..." color="...">
width & color: attribute để định nghĩa cho thẻ (width là độ dài, color là
màu)
align: căn lề (left/ center/ right)
<strong>...</strong> | Thay đổi kiểu text thành dạng in đậm (bold)

<b>...</b> |
<i>...</i> | Thay đổi kiểu text thành dạng in nghiêng

(italic)
<em>...</em>
Đại diện cho khoảng trắng
<span>...</span> chia văn bản thành nhiều đoạn nhỏ khác nhau
-> Mục đích để đổi màu 1 hoặc 1 vài chữ / từ trong đoạn văn bản đó
-> Đôi khi được dùng như 1 thẻ <div>
<img> Chèn hình ảnh vào website

Cú pháp đầy đủ: <img src="link liên kết từ html -> image.ext">
2 attribute đặc biệt có thể được gắn vào bất kỳ thẻ nào
#id Tên riêng của 1 thẻ, không được đặt trùng tên
<tag id="idname">...</tag>
.class Nhóm định dạng của 1 thẻ, có thể dùng trùng tên (tái sử dụng
nhiều lần)
<tag class="classname">...</tag>
1 thẻ <tag> chỉ có duy nhất 1 tên, nhưng có thể gắn nhiều nhóm định dạng khác
nhau
<tag id="idname" class="classname1 classname2 classname3...">...</tag>
<div>...</div> Tạo 1 khung hình chữ nhật để chứa nội dung
<a>...</a> thẻ đường dẫn, liên kết với trang web khác hoặc
các trang con của website với nhau
Cú pháp đầy đủ: <a href="link liên kết"></a>
===== Các dạng liên kết của thẻ <a> =====
External site link: Link liên kết ngoài hệ thống website

VD: liên kết tới w3schools.com
-> <a href="http://www.w3schools.com">...</a>
Internal site link: Link liên kết giữa các trang trong hệ thống website
VD: liên kết từ trang home -> about us
-> <a href="about.html">...</a> (do các trang html lưu cùng cấp)
Internal page link: Link liên kết giữa các đối tượng trong cùng 1 trang
VD: Nút "back to top" để cuộn ngược lên đầu trang web
<a name="toppage"></a>
. . .
. . .
. . .
<a href="#toppage">TOP</a>
===== Các dạng thẻ list =====
Order List: List được chia theo thứ tự
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Unorder List: List chia không theo thứ tự
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
===== HTML của Navigation =====
<div id="navi">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Promotions</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
...
</ul>
</div>
===== Các class cơ bản trong Boostrap =====
.container-fluid tạo 1 khung full trình duyệt
.container tạo 1 khung bọc nội dung với kích thước cố định
.row tạo 1 hàng ngang chứa các khung nội dung
.col-xl-... phiên bản extra large |

.col-lg-... phiên bản large |
.col-md-... phiên bản medium | gộp ... cột thành 1
khung nội dung
.col-sm-... phiên bản small | (1~12)
.col-... phiên bản extra small |
.offset-xl-... |
.offset-lg-... | đẩy nội dung về phía bên phải, chừa trống
bên trái ... cột
.offset-md-... |
(1~12)
.offset-sm-... |
.offset-... |
.d-...-none giấu khung nội dung từ phiên bản ... trở lên
.d-...-block hiển thị khung nội dung từ phiên bản ... trở
lên
.order-...-... xác định thứ tự trước sau của khung nội dung
(khung được gắn số càng
(0~11) nhỏ sẽ nằm bên trên / trái)
.justify-content-start khung nội dung nằm từ trái -> phải (căn trái)
(chỉ gắn với row)
.justify-content-center khung nội dung nằm chính giữa (căn giữa)

.justify-content-end khung nội dung nằm từ phải -> trái (căn phải)
.img-fluid thu nhỏ hình ảnh cho vừa với khung
.img-thumbnail thu nhỏ hình ảnh cho vừa với khung đồng thời
tạo border bao quanh hình
===== HTML cơ bản trong Boostrap =====
<div class="container-fluid"> -> Có thể bỏ container-fluid nếu không cần

background full màn hình
<div class="container">
<div class="row">
<div class="col-xl-..."></div>
</div>
</div>
</div>
===== HTML form =====
Khung search
<form>
<input type="text" placeholder="nội dung..."> tạo ra 1 vùng để nhập
nội dung
<button></button> tạo nút
</form>
Các đối tượng của form:

1. Text Input: khung nhập dữ liệu cơ bản 1 dòng
<label for="idname">Username:</label>
Khi click vào User thì tự nhảy dấu text vào khung nhập dữ liệu
<input type="text" placeholder="Username" id="idname">
Khung nhập dữ liệu cơ bản
2. Password: Khung nhập Password

<input type="password" placeholder="Password">
3. Radio button: chỉ được chọn 1
<input type="radio" name="same" value="v1">Value1
<input type="radio" name="same" value="v2">Value2
4. Checkbox: chọn 1 / nhiều / toàn bộ lựa chọn

<input type="checkbox" name="same" value="v1">Value1
<input type="checkbox" name="same" value="v2">Value2
5. Drop-down list: lựa chọn 1 option trong các option có sẵn

<select>
<option>option 1</option>
</select>
6. Textarea: nhập đoạn văn bản nhiều dòng

<textarea placeholder="Write something here..." cols="..."
rows="..."></textarea>
Với cols là số lượng ký tự trên 1 hàng = width
rows là số dòng = height
Để không can thiệp được vào kích cỡ của khung -> chỉnh trong CSS
textarea{resize: none;}
7. Button:
<button type="submit" value="SEND"> Customize btn </button> nút gửi
<button type="reset" value="CANCEL"> Customize btn </button> nút xóa dữ
liệu
Ứng dụng: code bộ lọc filter của trang products, trang sign in / sign up, trang
contact us...

Tong Hop HTML SEM 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tong Hop HTML SEM 2

Uploaded by

Copyright:

Available Formats

<!

DOCTYPE html> Sử dụng ngôn ngữ html (website)

===== Cú pháp cơ bản của HTML =====

Link liên kết từ html -> css

Link liên kết từ html -> javascript

===== Các thẻ <tag> cơ bản của html =====

<html></html> Thẻ mở đầu 1 trang web

<title>...</title> Thẻ quy định tên của website

<link> Thẻ dùng để liên kết html với css

<body></body> Thẻ body thường chứa toàn bộ nội dung của

<a></a> Tạo liên kết trong trang web

<p></p> Tạo đoạn văn bản (có khoảng hở giữa các

<h1></h1> Tạo tiêu đề có kích thước mặc định 40px

<i></i> | In nghiêng chữ

<br> Ngắt dòng (giữa các dòng không có khoảng hở)

<hr> Tạo 1 đường line full trình duyệt (mặc định)

<strong>...</strong> | Thay đổi kiểu text thành dạng in đậm (bold)

<i>...</i> | Thay đổi kiểu text thành dạng in nghiêng

&nbsp; Đại diện cho khoảng trắng

<img> Chèn hình ảnh vào website

<div>...</div> Tạo 1 khung hình chữ nhật để chứa nội dung

===== Các dạng liên kết của thẻ <a> =====

External site link: Link liên kết ngoài hệ thống website

===== Các dạng thẻ list =====

Order List: List được chia theo thứ tự

Unorder List: List chia không theo thứ tự

===== HTML của Navigation =====

===== Các class cơ bản trong Boostrap =====

.container-fluid tạo 1 khung full trình duyệt

.row tạo 1 hàng ngang chứa các khung nội dung

.col-xl-... phiên bản extra large |

.justify-content-center khung nội dung nằm chính giữa (căn giữa)

.img-fluid thu nhỏ hình ảnh cho vừa với khung

===== HTML cơ bản trong Boostrap =====

<div class="container-fluid"> -> Có thể bỏ container-fluid nếu không cần

===== HTML form =====

Các đối tượng của form:

2. Password: Khung nhập Password

4. Checkbox: chọn 1 / nhiều / toàn bộ lựa chọn

5. Drop-down list: lựa chọn 1 option trong các option có sẵn

6. Textarea: nhập đoạn văn bản nhiều dòng

You might also like

Đại diện cho khoảng trắng