LẬP TRÌNH FRONT END

LÊ THỊ THANH TÂM

01/2022

THIẾT KẾ WEBSITE
GIỚI THIỆU

• 2TC =30t = 15 buổi học

• Dành cho SV chuyên ngành

CNTT

• Thi thực hành/ đồ án môn học

LẬP TRÌNH FRONT- END LÀ GÌ?

• Front End = client-side

• Là tất cả những gì liên quan đến điều mà ngƣời dùng nhìn
thấy mỗi khi truy cập vào một trang web.
• Bao gồm vấn đề thiết kế giao diện, các ngôn ngữ tạo nên
trang web hay website
• Các nội dung chính phổ biến gồm HTML, CSS, Javascript
• Các nội dung nâng cao: Jquery, Bootstrap, AngularJS,
ReactJS, …
NỘI DUNG HỌC PHẦN

• Bài 1: Tổng quan

• Bài 2: HTML
• Bài 3: CSS
• Bài 4: Javascript
• Bài 5: Jquery
BÀI 1: TỔNG QUAN

• CÁC KHÁI NIỆM CƠ BẢN

• LỊCH SỬ HÌNH THÀNH WWW
• CÁC DỊCH VỤ TRÊN INTERNET
• THIẾT LẬP WEBSITE
• CÁC CÔNG CỤ TẠO WEBSITE
• CÂU HỎI VÀ BÀI TẬP
CÁC KHÁI NIỆM CƠ BẢN

• Internet, World Wide Web

• Web Hosting
• ISP (Internet Service Provider)
• Domain Name
• Sub Domain

Lê Thị Thanh Tâm - CĐCN Huế 6

CÁC KHÁI NIỆM

• Internet là mạng máy tính toàn cầu sử dụng tập giao thức TCP/IP
• WWW (World Wide Web) là một phần của Internet, bao gồm các
Web Server (gọi là Máy chủ Web) trên khắp mọi nơi trên thế giới
• Web Hosting là không gian trên máy chủ mà ở đó chứa nội dung
trang web hay dữ liệu.
• Truy cập vào internet thông qua các ISP (Internet Service Provider -
Nhà cung cấp dịch vụ Internet)

Lê Thị Thanh Tâm - CĐCN Huế 7

ISP- Nhà cung cấp dịch vụ Internet

• Lựa chọn nhà cung cấp dịch vụ Web hosting:

o Tốc độ truy cập Internet tại server Web hosting.
o Dung lƣợng của Web Hosting.
o Hỗ trợ các tiện ích đi kèm: hệ quản trị CSDL, Web mail, …

Lê Thị Thanh Tâm - CĐCN Huế 8

Domain Name – Tên miền

• Là định danh của website trên Internet. Tên miền thƣờng gắn kèm
với tên công ty và thƣơng hiệu của doanh nghiệp.
• Tên miền là duy nhất và đƣợc cấp phát cho chủ thể nào đăng ký
trƣớc. Tên miền có hai dạng:
o Tên miền quốc tế dạng: www.tencongty.com (.net, .biz .org, .info…)
o Tên miền quốc gia có hai dạng:
• Tên miền cấp 3: www.tencongty.com.vn (hoặc .net.vn, .biz.vn
.org.vn, .gov.vn…)
• Tên miền cấp 2: www.tencongty.vn

Lê Thị Thanh Tâm - CĐCN Huế 9

SUB DOMAIN

• Là tên miền thứ cấp thƣờng đƣợc dùng bởi một doanh nghiệp hoặc
công ty nào đó cho nội dung của trang web đó.
• Nó chỉ đơn tuần là một thƣ mục nằm dƣới thƣ mục gốc, nhƣng đƣợc
sử dụng một địa chỉ URL riêng để truy cập.
• Ví dụ:
o Tên miền hueic.edu.vn là dạng địa chỉ URL bình thƣờng không có sub
domain.
o Tên miền daotao.hueic.edu.vn là địa chỉ sub domain dẫn đến trang thông
tin Đào tạo.

Lê Thị Thanh Tâm - CĐCN Huế 10

LỊCH SỬ HÌNH THÀNH

1. Ai là ngƣời tạo ra Web? Nêu ngắn gọn tiểu sử của ông?

2. Các mốc quan trong trong lịch sử hình thành WWW?

Lê Thị Thanh Tâm - CĐCN Huế 11

CÁC DỊCH VỤ TRÊN INTERNET

• WWW
• THƢ ĐIỆN TỬ - MAIL
• TRUYỀN FILE - FTP
• TÁN GẪU – CHAT
• MẠNG XÃ HỘI, BÁO ĐIỆN TỬ, MÁY TÌM KIẾM

Lê Thị Thanh Tâm - CĐCN Huế 12

DỊCH VỤ WWW

• Thông dụng nhất, chỉ cần 1 trình duyệt Web (browser)

• Có các trình duyệt Web nào???
• Để truy cập 1 trang web cần biết địa chỉ (URL- Uniform Resource
Locator)
• Dịch vụ này dùng giao thức HTTP/ HTTPS
• BT: Liệt kê 10 trình duyệt web: tên đầy đủ, ngày phát hành
và phiên bản mới nhất, tên nhà SX, điểm mạnh yếu, hình
ảnh logo

Lê Thị Thanh Tâm - CĐCN Huế 13

CÁC DỊCH VỤ KHÁC – TỰ TÌM HIỂU

• THƢ ĐIỆN TỬ - MAIL

• TRUYỀN FILE - FTP
• TÁN GẪU – CHAT
• MẠNG XÃ HỘI, BÁO ĐIỆN TỬ, MÁY TÌM KIẾM
THIẾT LẬP WEBSITE

• Bƣớc 1: Mua Web Hosting hoặc đăng ký miễn phí trên Internet
(www.digipower.vn, www.matbao.net, …)
• Bƣớc 2: Mua Domain Name hoặc đăng ký miễn phí trên Internet
(www.dyndns.org, www.co.cc, …)
• Bƣớc 3: Thiết kế và lập trình Website
• Bƣớc 4: Upload mã nguồn Website lên Hosting

Lê Thị Thanh Tâm - CĐCN Huế 15

CÁC CÔNG CỤ TẠO WEBSITE

• Ngôn ngữ biểu diễn, lập trình: HTML, CSS, ASP, PHP, ASP .NET,
JAVA,…
• Cơ sở dữ liệu: MySQL, SQL Server,…
• Web server: IIS, Apache, …
• Công cụ phát triển: Sublime Text, Visual Studio
• Up load mã nguồn: Filezilla, CuteFTP, …

Lê Thị Thanh Tâm - CĐCN Huế 16

CÂU HỎI

1. Liệt kê các Website hữu ích mà bạn biết?

o Tra cứu thông tin
o Thƣ viện phần mềm
o Nghiên cứu học tập
o Mua bán trực tuyến (Thƣơng mại điện tử)
2. Các công cụ khai thác tài nguyên trên Web?
3. Cách lƣu một trang Web từ Internet?
o Add Favourites (Chọn Make Available Offline)
o Save as (Chọn Web Archive *.mht ở mục Save As Type)
4. Các Website cho phép hosting miễn phí?

Lê Thị Thanh Tâm - CĐCN Huế 17