Nội dung kiến thức môn ứng dụng web

1. Các thẻ xác định bố cục trang web

Thẻ <div> (phân chia khu vực)
Thẻ phân chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ
những vùng được bố cục trên trang web.
Thẻ <header> (xác định phần nội dung nằm ở đầu trang web)
Chứa tất cả phần đầu của trang web, gồm: logo, mô tả, liên kết, …
Thẻ <footer> (xác định phần nội dung nằm ở cuối trang web)
Chứa tất cả phần cuối của trang web, gồm: logo, bản quyền, thông tin doanh
nghiệp (tên, mã số thuế, địa chỉ liên lạc,…)
2. Các thẻ để định dạng văn bản trong HTML gồm có:
Thẻ <b> cho biết nội dung cần nhấn mạnh,
Thẻ <strong> cho biết nội dung cần nhấn mạnh, trình duyệt hiện thị với chữ đậm
Thẻ <big> hiện thị với cỡ chữ lớn hơn một cấp (thẻ này đánh dấu lạc hậu không nên dùng
nữa)
Thẻ <small> hiện thị chữ nhỏ hơn một cấp
Thẻ <i> hiện thị chữ in nghiêng
Thẻ <em> đánh dấu nhấn mạnh (hiện thị in nghiêng)
Thẻ <ins> đánh dấu đoạn text được chèn vào
Thẻ <del> đánh dấu đoạn text xóa đi
Thẻ <sub> tạo chỉ số dưới
Thẻ <sup> tạo chỉ số trên
3. Những thẻ được dùng trong thẻ <p> bao gồm:
Thẻ liên kết <a></a>
Thẻ <img /> (image): hiển thị một hình ảnh
Thẻ <span></span>: dùng để nhóm các inline
Thẻ <strong></strong>: được dùng để đánh dấu, nhấn mạnh text
Thẻ <em></em>: được dùng để nhấn mạnh nội dung văn bản
Thẻ <br></br>: dùng để ngắt đoạn văn bản
4. Thẻ hinh anh
Thẻ <img> chèn ảnh vảo HTML
Để nhúng hình ảnh vào HTML sử dụng thẻ <img>, với thuộc tính src là đường dẫn ảnh,
alt là dòng text thay thế, xác định chiều rộng và chiều cao ảnh bằng thuộc tính width và
height
vd: <img src="flower.jpg" height="50%" width="50%" alt="" />
<img src="C:\Users\ADMIN\Desktop\11.jpg" height="500px" width="600px" />
<img src="https://vietchinabusiness.vn/wp-content/uploads/2018/10/tho-che-hoc-
sinh.jpg" />
5. Thẻ liên kết

Chèn liên kết tới 1 website khac

cú pháp:
<a href="https://glitch.com"> </a>
VD: <a href="đường dẫn tới website">
Link nóng hổi vừa thổi vừa code <br/>
</a>
6. Thẻ danh sách
- Thẻ <ol> và <ul> tạo danh sách HTML
Sử dụng thẻ<ol> tạo danh sách có thứ tự và thẻ<ul> tạo danh sách không có thứ tự
trong HTML, mỗi phần tử trong danh sách là thẻ <li>, thiết lập kiểu hiện thị danh sách
với thuộc tính type của <ol> và <ul>
+ Danh sách có thứ tự (ordered list) được tạo ra bằng thẻ <ol>, mỗi phần tử khi xuất
hiện có chỉ số ở đầu (1,2, 3 ... A, B, C ...)
+ Danh sách không có thứ tự (unordered list) được tạo ra bằng thẻ <ul>, mỗi phần tử
khi xuất hiện có thể có ký hiệu như dấu chấm, gạch ngang ... các phần tử.
- Thẻ <li>
Mỗi phần tử trong một danh sách (<ul> hay <ol>) được biểu diễn bằng thẻ <li>
(list item). Thẻ <li> chứa bất kỳ nội dung HTML nào trong nó, nó có thuộc tính value có
thể gán bằng một số nguyên để thiết lập giá trị chỉ số khi nằm trong danh sách có thứ tự
(xem ví dụ ở phần sau).

7. TẠO BẢNG
Sử dụng thẻ <table> để tạo bảng biểu, trình bày nội dung <table> với các thẻ <td>,
<tr>, <th>. Thiết lập tiêu đề bảng với <caption>, nhóm tiêu đề cột với <thead> và <tfoot>
VD:
<table border="1">
<tr>
<th colspan="3">THÔNG TIN SINH VIÊN</th>
</tr>
<tr>
 <td>Nguyễn Văn A</td>
<td>20/10/2013</td>
<td>Nam</td>
</tr>
<tr>
<td>Trần Thu B</td>
<td>10/10/2014</td>
<td>Nữ</td>
</tr>
<tr>
<td>Trieu Phi Ho</td>
<td>06/10/2012</td>
<td>Nam</td>
</tr>
<tr>
<td>Trieu Phi Bao</td>
<td>06/10/2012</td>
<td>Nam</td>
<td>Ha Noi</td>
</tr>
</table>
8. Phần tử dạng block và inline
8.1 Phần tử dạng block
- Các phần tử block hiện thị liên tiếp theo chiều đứng của phần tử chứa nó: <h1>,
<form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div> ...
8.2 Phần tử dạng inline
- Phần tử HTML cấp độ inline (trong hàng) là những phần tử chiếm không gian chiều
ngang theo nội dung của phần tử, không tạo ra dòng mới (xuống dòng) trước và sau phần
tử.
Lưu ý:
- Các phần tử inline như: <b>, <a>, <strong>, <img>, <input>, <em>, <span> ... Khi sử
dụng cần nhớ quy tắc đảm bảo mô hình nội dung của HTML:
+ Phần tử cấp độ inline không được chứa phần tử cấp độ block, nó chỉ chứa dữ
liệu hoặc các phần tử inline khác.
+ Phần tử block thì được chứa các phần tử block, inlinne, dữ liệu. Có một số ngoại
lệ như thẻ <a> (inline) có thể chứa phần tử kiểu block.

9. Màu sắc trong HTML

- link mã màu
https://www.w3schools.com/colors/colors_names.asp
VD:
<h1 style="color:Tomato;">Đây là màu Tomato = </h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
9.1 Màu RGB:
Link tham khảo
https://www.w3schools.com/html/html_colors_rgb.asp
Giá trị màu RGB
Trong HTML, một màu có thể được chỉ định làm giá trị RGB bằng công thức sau:
rgb (đỏ, xanh lá cây, xanh dương)
 Mỗi tham số (đỏ, lục và lam) xác định cường độ của màu với giá trị từ 0 đến 255.
Điều này có nghĩa là có 256 x 256 x 256 = 16777216 màu có thể có!
Ví dụ: rgb(255, 0, 0) được hiển thị dưới dạng màu đỏ, vì màu đỏ được đặt ở giá trị
cao nhất (255) và hai giá trị còn lại (xanh lục và xanh lam) được đặt thành 0.
Một ví dụ khác, rgb(0, 255, 0) được hiển thị dưới dạng màu xanh lục, vì màu xanh
lá cây được đặt ở giá trị cao nhất (255) và hai giá trị còn lại (đỏ và xanh lam) được đặt
thành 0.
Để hiển thị màu đen, đặt tất cả tham số màu thành 0, như sau: rgb(0, 0, 0).
Để hiển thị màu trắng, đặt tất cả tham số màu thành 255, như sau: rgb(255, 255,
255).
9.2 Màu HEX
Màu thập lục phân được chỉ định bằng: #RRGGBB, trong đó các số nguyên thập
lục phân RR (đỏ), GG (xanh lục) và BB (xanh lam) chỉ định các thành phần của màu.
Giá trị màu HEX
Trong HTML, một màu có thể được chỉ định bằng giá trị thập lục phân ở dạng: #rrggbb _
Trong đó rr (đỏ), gg (xanh lục) và bb (xanh lam) là các giá trị thập lục phân từ 00 đến ff
(giống như số thập phân 0-255).
VD:<h1 style="background-color:#ff6347;">Màu HEX </h1>
Ví dụ:
#ff0000 được hiển thị dưới dạng màu đỏ, vì màu đỏ được đặt ở giá trị cao nhất (ff)
và hai giá trị còn lại (xanh lục và xanh lam) được đặt thành 00.
Một ví dụ khác, #00ff00 được hiển thị dưới dạng màu xanh lá cây, vì màu xanh lá
cây được đặt ở giá trị cao nhất (ff) và hai giá trị còn lại (đỏ và xanh lam) được đặt
thành 00.
Để hiển thị màu đen, đặt tất cả tham số màu thành 00, như sau: #000000.
Để hiển thị màu trắng, đặt tất cả tham số màu thành ff, như sau: #ffffff.
9.3 Màu RGBA
Giá trị màu RGBA là phần mở rộng của giá trị màu RGB với kênh Alpha - kênh
này chỉ định độ mờ cho màu.
Giá trị màu RGBA được chỉ định bằng:
 rgba( đỏ, lục , lam, alpha )
Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không
trong suốt):
vd: <h1 style="background-color:rgba(255, 99, 71, 0.1);">Màu định dạng theo
RGBA</h1>
9.4 Màu HSL
Trong HTML, một màu có thể được chỉ định bằng cách sử dụng màu sắc, độ bão
hòa và độ sáng (HSL) ở dạng:
hsl(màu sắc , độ bão hòa , độ sáng )
(hsl(hue, saturation, lightness)
Màu sắc (Hue) là một độ trên bánh xe màu từ 0 đến 360. 0 là đỏ, 120 là xanh lục
và 240 là xanh lam.
Độ bão hòa (saturation) là một giá trị phần trăm. 0% có nghĩa là màu xám và
100% là màu đầy đủ.
Độ sáng (lightness) cũng là một giá trị phần trăm. 0% là màu đen và 100% là màu
trắng.
VD: <h1 style="background-color:hsl(50, 100%, 50%);">hsl(50, 100%, 50%)</h1>
9.4 Giá trị màu HSLA
Giá trị màu HSLA là phần mở rộng của giá trị màu HSL, với kênh Alpha - chỉ
định độ mờ cho màu.
Giá trị màu HSLA được chỉ định bằng:
hsla( màu sắc, độ bão hòa , độ sáng, alpha )
Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (hoàn toàn không
trong suốt):
Thử nghiệm bằng cách trộn các giá trị HSLA bên dưới:
vd: <h1 style="background-color:hsla(9, 100%, 64%, 0.6);">Màu định dạng theo
HSLA</h1>
10. Tùy chỉnh hiển thị (Display): inline, block, inline-block
10.1 Display – inline
- Các phần tử Display - inline khi ở cạnh nhau sẽ hiển thị sẽ cùng trên 1 hàng ngang
Vd:

Trang chủ Giới thiệu

- Chỉ tác động đến khoảng cách trái phải. Không thể tác động đến khoảng cách trên dưới
của phần tử (Padding)
- Các thẻ mặc định hiển thị dạng inline: a, b, i, strong, span…
10.1 Display – block
- Các phần tử Display - block sẽ tự động chiếm riêng 1 hàng

VD:
- Tác động đến khoảng cách trên dưới trái phải
 Trang chủ

Giới thiệu

- Các thẻ mặc định hiển thị dạng inline: form, li, ol, ul, p, pre, table, div, nav, section…
10.3 Display inline – block
- Kết hợp giữa inline và block. Khi các phần tử ở cạnh nhau thì sẽ xếp theo 1 hàng
- Tùy chỉnh padding trên – dưới – trái – phải
10.4 cập nhật Display
- Khi muốn tùy chỉnh kiểu hiển thị cho 1 phần tử ta dùng css để cập nhật
Cú pháp:
<tên thẻ> {
Display: kiểu hiển thị;
}
Vd: a{
Display: inline-block
}
11. Thẻ DIV và SPAN
Thẻ div để phân chia nội dung trang, là loại phần tử cấp độ block tổng quát.
Thẻ Span trong HTML là loại phần tử cấp độ inline tổng quát.
12. Chữ chạy
<marquee attribute_name ="value"....>
Một hoặc nhiều dòng văn bản hoặc hình ảnh
</marquee>
12. Form
Để tạo ra một form trong tài liệu HTML, chúng ta sử dụng thẻ FORM với cú
pháp như sau:
Cú pháp:
<FORM
ACTION = ulr
METHOD = GET | POST
NAME = name
TARGET = Frame_name | _Blank | _ seft>

= frame_name | _blank | _self

>
<!-- Các phần tử điều khiển của form được đặt ở đây -->
<INPUT ...>
<INPUT ...>
</FORM>
Trong đó:
Sử dụng GET khi nào?
Bạn có thể sử dụng GET (mặc định phương thức này). Sử dụng GET nếu việc gửi form là
thụ động (giống như bạn thực hiện truy vấn trên các máy tìm kiếm) và dữ liệu không cần
mã hoá, không chứa các thông tin nhạy cảm như mật khẩu, v.v. Khi bạn sử dụng GET, dữ
liệu form sẽ bị nhìn thấy trên thanh địa chỉ của trang như ví dụ dưới:
action_page.php?txtHoDem=Trần+Hùng&txtTen=Dũng

Sử dụng POST khi nào?

Bạn nên sử dụng POST: Trong trường hợp nếu form cập nhật dữ liệu hoặc dữ liệu trên
form gửi đi bao gồm các thông tin nhạy cảm như mật khẩu, mã thẻ ngân hàng,v.v. POST
cung cấp cơ chế bảo mật hơn bởi vì dữ liệu được gửi đi không được hiển thị trên thanh
địa chỉ của trang.