Thiết kế và lập trình web

Giảng viên: Trần Dũng Khánh

Email: kan@neu.edu.vn
Tel: 0919900084
VP Viện CNTT & KTS =A1.1309
Key tài liệu lms:

Kiến thức yêu cầu

Kỹ năng lập trình
Kiến thức về hệ quản trị cơ sở dữ liệu
Kỹ năng sử dụng ngôn ngữ SQL
Công cụ sử dụng: CSS, HTML (Visual Studio Code; w3schools; codepen.io); Lập trình PHP
(Visual Studio Code; phpMyAdmin; w3schools); Webserver (XAMPP; WampServer)

Chương 1: Tổng quan về website

1. Khái niệm cơ bản
Ngôn ngữ đánh dấu siêu văn bản-hypertext link markup language-html
Giao thức World Wide Web
IP (Internet Protocol): tương đồng với địa chỉ vệ tinh (xđ tọa độ); xác nhận đối tượng gửi, nhận
thông tin trên Internet; chuỗi 32 bit chia thành 4 Octet (IPv4); 1 Octet là từ 0-255; địa chỉ IP trên
máy tính là IP động, mỗi khi vào Internet là một địa chỉ IP mới; Website cần có IP tĩnh-tức IP cố
định, không thay đổi được.
TCP/IP: giao thức, cách thức để các máy tính nối mạng truyền thông tin;
HTTP: là giao thức TCP/IP giao tiếp giữa web client và webserver (client là hướng người dùng
khi truy cập vào webserver, tức là khi nhập https://neu.edu.vn là đang giao tiếp với server)
FPT: giao thức TCP/IP truyền file giữa FPT Client và FPT Server
HTML: ngôn ngữ biểu diễn các thành phần của Webpage
URL: địa chỉ web, xác định duy nhất
Chứng chỉ SSL: chứng chỉ bảo mật website; http sẽ thành https
Domain: tên miền, tên một website hoạt động trên Internet; phụ thuộc vào lãnh thổ và lĩnh
vực: .com; .net; .gov; .biz; .edu; hoạt động đăng ký tên miền được giám sát bằng tổ chức gọi là
ICANN (tên miền đã được đki chưa; tên miền trỏ đến tọa độ nào); tại VN thì được quản lý bới
VNNIC.

www.doamin.com : domain là tên domain; .com là top domain

DNS (Domain name system): hệ thống phân giải tên miền, thiết lập tương ứng giữa domain và IP
VD: neu.edu.vn có IP là 175.244.50.30; DNS xđ domain tương ứng với địa chỉ IP nào
Nên kiểm tra tên miền .com đầu tiên, nếu không còn mới chọn tên khác, tránh các từ mô tả
ngành nghề, địa danh, vì không được bảo hộ bản quyền.
Hosting: dịch vụ lưu trữ các trang web trên máy chủ kết nối Internet; server, data center,
software, internet connection, support; phân loại:
 Shared hosting: nhiều website cùng lưu trữ trên 1 máy chủ (server) vật lý; giống như
nhiều gia đình thuê chung 1 ngôi nhà, rẻ nhưng ảnh hưởng đến tốc độ lướt web,…
 Dedicated server: website lưu trữ trên 1 máy chủ (server) vật lý, giống như xây riêng một
ngôi nhà, tốn nhiều chi phí, có thể tùy ý làm bất kỳ điều gì trên trang web
 VPS hosting: lơu trữ máy chủ ảo riêng, có 1 máy chủ vật lý, sau đó chia thành các server
ảo, rồi cho thuê server ảo; tương tự 1 tòa nhà to cho thuê từng căn chung cư một.
 Cloud Server hosting: lưu trữ máy chủ đám mây; tương tự như 1 chuỗi khách sạn trên
khắp thế giới, bạn đến đâu cũng có vào ở được; không bị giới hạn về mặt vật lý; an toàn
vì được lưu trên cloud; tự động thay đổi quy mô giúp tối ưu chi phí dựa vào nhu cầu, trả
phí theo giừ, phút.

2. Website hoạt động như thế nào

3. Các bước thiết lập website
4. Lập trình web
- Front-end: thiết kế thay đổi giao diện: html, CSS; lập trình JavaScript
- Back-end: PHP, Java, ASP.NET, Python… để có thể giao tiếp với CSDL; thiết kế CSDL
quan hệ; thiết lập, cấu hình một DBMS quan hệ (MySQL, SQL Server, Oracle)
- Full Stack = Front-end + Back-end
5. Làm quen với Dev Tool
6. Static Website/ Dynamic Website
Static website: website tĩnh (gồm HTML, CSS, JS); dynamic website: web động (lấy từ
CSDL sử dụng PHP và SQL)
 CHƯƠNG 2: HTML

Html: HyperText Markup Language: ngôn ngữ đánh dấu siêu văn bản.
Elements: các thành phần của trang web
Tag: thẻ mô tả dữ liệu

1. Thẻ HTML
- Các thẻ lồng nhau: mở thẻ-đóng thẻ
<tên thẻ>Nội dung</tên thẻ>
- Thẻ đơn sẽ không có thẻ đóng mà sẽ đóng thẻ luôn trong 1 thẻ
<tên thẻ danh sách thuộc tính/>
VD: <br/>
<img src= “url”/>
- Thẻ html không phân biệt chữ HOA hay thường
- Mọi khoảng trống, dấu xuống dòng trong html được thể hiện trên trang web là 1 khoảng
trắng duy nhất.
- Để gõ 1 số ký tự đặc biệt: sử dụng mã:
 Khoảng trống (TH muốn có nhiều hơn 1 ký tự trống): &nbsp;
 Dấu nhỏ hơn (<) và lớn hơn (>): &lt; &gt;
 Dấu ngoặc kép (“): &quot;
 Xuống dòng: <br/>
 Gạch nganh dòng: <hr/>
- Html sẽ không báo lỗi khi viết sai cú pháp. Khi viết sai cú pháp chỉ dẫn đến hiển thị
không đúng.

2. Cấu trúc file html

<!DOCTYPE HTML>
<html>
<head>
<title>Mô tả tiêu đề</title>
<!--Mô tả hoặc liên kết khác-->

</head>
<body>
</body>
</html>
3. Thuộc tính (Attribute)
- Cấu trúc:
 <tên thẻ thuộc tính = “giá trị”></tên thẻ>
- Chỉ nên dùng thuộc tính để:
 Mô tả
 Đánh dấu dữ liệu mở rộng
 Đặt thêm hoặc dùng định danh (id, class)
- Không nên dùng:
 Định dạng (màu, kích thước font, kiểu font…) (sử dụng CSS)

4. Ghi chú
Để ghi chú trong code, không hiển thị trên web; vô hiệu hóa 1 đoạn code khi không
muốn xóa hẳn.
<!--Nội dung ghi chú-->

5. Thẻ định dạng văn bản

- Paragraph: <p></p>
- In đậm: <b></b>
<strong></strong> : strong là nhấn mạnh nội dung, thể hiện sự quan trọng
- In nghiêng: <i></i>
- Gạch chân: <u></u>

6. Thẻ tiêu đề: nhấn mạng nội dung, tối ưu hóa cho bộ máy tìm kiếm của google (SEO);
h1 là quan trọng nhất, mỗi trang thường chỉ có 1 thẻ h1.
<h1></h1>
<h2></h2>
…..
<h6></h6>

7. Thẻ danh sách

- Đánh số thứ tự: 1,2,3,4,… hoặc I,II,III,IV,…

- Thẻ ordered list:
<ol>
<li></li>
<li></li>
</ol>
- Thẻ unordered list (gạch đầu dòng, ký hiệu,…):
<ul>
<li></li>
</ul>

8. Đường dẫn (link)

- Đường dẫn tuyệt đối (absolute URLs)

  Là đường dẫn chính xác từ nguồn tới đích. VD: “C:\\Windows\..” hoặc
https://sitde.neu.edu.vn/....
- Đường dẫn tương đối (Relative URLs)
 Dựa trên vị trí của tài liệu hiện tại
 ./: vị trí hiện tại của tài liệu
 ../: vị trí hiện tại trở lại 1 cấp (thư mục) trước đó
9. Siêu liên kết, Ảnh
- Siêu liên kết:
<a href= “đường dẫn”>Tên lk</a>
- Ảnh:
<img src= “link”/>
<img src= “link” alt= “Mô tả ảnh”/>

10. Bảng

tr: table row

th: table heading
td: table data

<table>
<tr>
<th>Tiêu đề cột 1</th>
<th>Tiêu đề 2</th>
</tr>
<tr>
<td>Hàng 1, cột 1</td>
<td>Hàng 1, cột 2</td>
</tr>
….
</table>
Các thuộc tính của bảng:
- Border= “số”: kích thước đường viền (mặc định= “0”:ko có đg viền)
- Width= “rộng”, height= “cao”: độ rộng và cao của bảng; có thể đặt theo pxx hoặc %
- Colspan= “số”: số cột mà ô này chiếm (mặc định là 1)
- Rowspan= “số”: số dòng mà ô này chiếm (mặc định là 1)
11. Form

- Textbox: nhập văn bản ngắn (trên 1 dòng) hoặc mật khẩu
 Thẻ: <input/>
 Thuộc tính:
 Name= “tên thuộc tính”: quan trọng
 Type= “text”: ô nhập văn bản thường
 Type= “pass”: ô nhập mk
 Value= “giá tị mặc định”
- Checkbox: cho phép chọn nhiều lựa chọn trong nhóm các lựa chọn bằng cách đánh dấu
tích
 Thẻ: <input/>: mỗi ô chọn cần 1 thẻ
 Thuộc tính:
 Name= “tên thuộc tính”: quan trọng
 Type= “checkbox”
 Value= “giá trị”: giá trị chương trình nhận được nếu chọn ô này
 Checked= “checked” nút được check

- Radio button: cho phép chọn 1 lựa chọn trong nhóm các lựa chọn
 Thẻ: <input/>: mỗi ô chọn cần 1 thẻ
 Thuộc tính:
 Name= “tên thuộc tính”: quan trọng, các đối tượng cùng tên thì chung 1 nhóm
 Type= “radio”
 Value= “giá trị”: giá trị chương trình nhận được nếu chọn ô này
 Checked= “ checked”: giá trị ô được check
- Button
 Gồm 3 loại button:
 Submit: tự động ra lệnh gửi dữ liệu
 Reset: đưa mọi dữ liệu về trạng thái mặc định
 Normal: người lập trình tự xử lý
 Thẻ: <input/>
 Thuộc tính:
 Name= “tên thuộc tính”: thường không quan trọng
 Type= “submit/reset/normal”: nút submit/reset/ normal
 Value= “tiêu đề nút”
- Drop-down menu (combo box): Danh sách có nhiều phần tử
 Tại 1 thời điểm chỉ có 1 phần tử được chọn
 Thẻ: <select>Danh sách </select>
 Thuộc tính:
 Name= “tên”: quan trọng
 Thẻ tạo 1 phần tử trong danh sách <option></option>
 Value= “giá trị”: giá trị nhận được nếu phần tử được chọn
 Selected: nếu có thì phần tử này mặc định được chọn
- Listbox:
- TextArea:
 Cho phép nhập văn bản trên nhiều dòng
 THẻ: <textarea></textarea>
 Thuộc tính:
Name= “tên”: quan trọng
Rows= “số dòng”
Cols= “số cột”

12. iFrame
- Nhúng 1 nội dung html vào trang html hiện tại
- Thẻ <iframe></iframe>
- Thuộc tính:
 Src= “đường dẫn”
 Width= “chiều rộng”
 Height= “chiều cao”
 Frameborder= “kích thước viền”

13. Div-Span
- Thẻ <div></div>: dùng để nhóm 1 số thẻ htm, dùng để layout web
- Thẻ <span></span>: không có tác dụng hiện thị trong htm, chỉ dùng chứa text và áp dụng
style.

14. Block và Inline

15. Web Layout
 CHƯƠNG 3: CSS
1. CSS
- CSS= Cascade Style Sheet
- Mô tả cách hiển thị của html trên trình duyệt
- Trang web tĩnh gồm 2 phần: html+css
- Cú pháp: h1{color:blue; font-size:12px;}: h1 là selector (vùng chọn); color là
property(thuộc tính); blue là value (giá trị).
- /* đây là comment trong css */
- Cách sử dụng CSS: Internal (viết trong thẻ <style></style>); Inline (viết thuộc
tính cho từng thẻ html luôn); External (viết CSS trong file riêng và chèn vào
html qua 1 đường link: <link rel=”stylesheet” href= “.css”>
2. Selector
- Sử dụng tên thẻ (element) html
- Sử dụng #id
- Sử dụng .class
- Sử dụng kết hợp.
a. Id: định danh duy nhất, css chỉ áp dụng với duy nhất 1 thẻ với id duy nhất:
 Khai báo: id=”tên id”
 Gọi css: #tên id{}
b. Class: áp dụng với 1 số thẻ có cùng class
 Khai báo: class=”tên class”
 Gọi css: .tên class{}
- Mức độ ưu tiên: Internal và External: mức độ ưu tiên theo thứ tự được gọi đến
ntrong html; gọi sau sẽ đc áp dụng; Inline sẽ được ưu tiên cao nhất, sau đó đến
id >class >element.
3. Units
- Absolute Units: px, pt, mm, cm, in
- Relative Units: %, vw, rem, em, vmax, vmin (so sánh với 1 cái gì đó)
 %: so sánh với parent element của nó.
VD: <div>
<p width= “50%”>
 Thẻ <p> bằng 50% so với thẻ <div>
 Rem: so phông chữ với thẻ root element (ở đây chính là thẻ <html> vì
thẻ <html> chính là thẻ cao nhất)
 Em: tương ứng với phông chữ của parent element
 Vw: tương ứng với 1% width của viewport (tức là view của màn hình)
 Vh: tướng ứng với 1% height của viewport.
4. Colors
- Color name: red, green,…
- Color: RGB(R,G,B): RGB(255,0,255)
- RGBA(R,G,B,A): RGBA(255,0,255,0.3); (A: alpha-opacity:0.1-1.0)
- HexNumber: #ff6347
5. Text
- Text color: color
- Text-align: text-align: left; right; center; justify.
- Text decoration: text-decoration:
 None: thường dùng để bỏ gạch chân dưới các đường link
 Overline, line-through, underline
- Text Transform: text-transform: uppercase; lowercase; capitalize

6. Text Spacing
- Text Indent: text-indent: dòng đầu tiên của para luôn thụt vào 1 đoạn
- Letter Spacing: letter-spacing: Khoảng cách giữa các ký tự
- Line Height: line-height: khoảng cách giữa các dòng
- Word Spacing: word-spacing: khoảng cách giữa các từ
7. Font
- Font-family: Time New Roman; Arial;…
- Font-style: bold; italic;..
- Font-weight: độ béo của phông chữ:
 normal; italic;…
 number: 600, 800;…
- Font-size: cỡ chữ
- Font Shorthand:
 Font: viết mọi thuộc tính ở trên trong 1 thuộc tính “font”(font-size và
font-family bắt buộc phải có).
 VD: font: 20px Arial
8. Background
- Background-color: mã_màu
- Background-image: url (“link”):
 Background-image: url(“./image.jpg”): vị trí tương đối của ảnh so với
vị trí của file .css
- Background-repeat: sử dụng kèm background-image: lặp lại ảnh
 No-repeat: không lặp lại
 Repeat-x: lặp chiều ngang
 Repeat-y: lặp chiều dọc
 Repeat: theo 2 chiều (mặc định)
- Backgorund-attachment: sử dụng kèm background-image: cố định ảnh hay
scroll theo nội dung khi lăn chuột:
 Scroll: ảnh scroll theo thẻ html, mặc định
 Fixed: ảnh cố định, không scroll
 Local: ảnh scroll theo nội dung
 Inherit: kế thừa của thẻ cha
- Background-position: sử dụng kèm background-image: chỉ ra vị trí của ảnh nền
so với thẻ html:
  apx bpx: ảnh hiển thị ở vị trí apx cách biên trái, bpx cách biên trên (có
thể thay thế px bằng %)
 key key: top, right, bottom, left, center
- background-size: chỉ ra kích thước ảnh nền:
 x, y: width and height (px, %, auto)
 contain: đảm bảo nhìn đủ ảnh
 cover: đảm bảo nhìn đủ nội dung
- background shorthand: bao gồm tất cả các thuộc tính: theo thứ tự (color-image-
repeat-attachment-position)

9. Box Model

1 block có cấu trúc của 1 box:

- Margin
- Border
- Padding:
 Top
 Right
 Bottom
 Left
a. Border: giúp định dạng kiểu đường viền, kích thước, màu sắc:
- Border style:
- Border width:
- Border color:
- Border sides:
- Border shorthand:
- Rounded border:

b.