Giáo trình thiết kế web Công nghệ thông tin

Sinh viên chọn học theo hướng web sẽ trải qua các học phần về web khác nhau với mục tiêu cuối cùng là tạo ra được một ứng dụng web hoàn chỉnh, trong đó học phần Thiết kế web là học phần

ỦY BAN NHÂN DÂN TP HỒ CHÍ MINH

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ THỦ ĐỨC

KHOA CÔNG NGHỆ THÔNG TIN

GIÁO TRÌNH HỌC PHẦN: THIẾT KẾ WEB NGÀNH/NGHỀ: CÔNG NGHỆ THÔNG TIN

LỜI GIỚI THIỆU

Ngày nay, với sự bùng nổ của Internet, web hiện diện ở mọi nơi trong đời sống hiện đại Sự phát triển của World Wide Web ảnh hưởng đến mọi mặt của cuộc sống Nếu như trước đây, các chương trình máy tính chủ yếu chỉ chạy ở các máy tính đơn lẻ thì ngày nay, có rất nhiều ứng dụng web cung cấp đầy đủ các chức năng tương tự như một chương trình máy tính Bên cạnh đó, với sự phát triển của công nghệ điện toán đám mây (Cloud Computing), web ngày càng trở nên mạnh mẽ và hỗ trợ con người mọi mặt trong cuộc sống

Trước xu thế đó, Khoa Công nghệ thông tin – Trường Cao đẳng Công nghệ Thủ Đức đã chọn web là một trong bốn nhóm chuyên ngành để định hướng cho sinh viên phát triển sự nghiệp của mình Sinh viên chọn học theo hướng web sẽ trải qua các học phần về web khác nhau với mục tiêu cuối cùng là tạo ra được một ứng dụng web hoàn chỉnh, trong đó học phần Thiết kế web là học phần đầu tiên, đặt nền tảng cho các học phần về web sau này

Giáo trình này được biên soạn dựa theo đề cương học phần “Thiêt kế web 1” của Khoa Công nghệ thông tin – Trường Cao đẳng Công nghệ Thủ Đức Mặc dù nhóm biên soạn đã rất cố gắng, song chắc chắn sẽ không tránh khỏi những sai sót Vì vậy, nhóm rất mong nhận được sự góp ý chân thành từ các quý thầy cô và các bạn sinh viên để giáo trình ngày càng hoàn thiện hơn

Tp.HCM, ngày 03 tháng 05 năm 2018

Tham gia biên soạn

1 Chủ biên: Nguyễn Huy Hoàng

2 Nguyễn Ngọc Cẩm Tú

MỤC LỤC

DANH MỤC CÁC HÌNH vii

BÀI 1: TỔNG QUAN VỀ WEB 1

1.1 | TỔNG QUAN VỀ WEB 2

1.1.1 | Internet và World Wide Web 2

1.1.2 | Client – Server 9

1.1.3 | Tên domain và hosting 9

1.1.4 | Frontend – Backend 11

1.1.5 | Các ngôn ngữ lập trình web 13

1.2 | CÁC TIÊU CHUẨN CHO MỘT WEBSITE HIỆN ĐẠI 14

BÀI 2: TỔNG QUAN VỀ HTML VÀ CSS 16

2.1 | GIỚI THIỆU HTML 17

2.1.1 | Giới thiệu HTML 17

2.1.2 | Thẻ HTML 17

2.1.3 | Soạn thảo HTML 18

2.1.4 | Hiển thị trang web 19

2.1.5 | Phiên bản HTML 19

2.2 | CẤU TRÚC CƠ BẢN MỘT TRANG WEB HTML 20

2.3 | CÁC THẺ HTML CƠ BẢN 21

2.3.1 | HTML cơ bản 21

2.3.2 | HTML định dạng 25

2.3.3 | Danh sách 28

2.3.4 | Liên kết 31

2.3.5 | Hình ảnh 34

2.3.6 | Audio/ Video 35

2.3.7 | Table 38

2.3.8 | Frame 41

2.3.9 | Meta info 42

2.3.10 | Form 43

2.3.11 | Cấu trúc 56

2.4 | GIỚI THIỆU CSS 61

2.4.1 | CSS là gì? 61

2.4.2 | Tại sao phải sử dụng CSS? 61

2.4.3 | Cú pháp 61

2.5 | PHÂN LOẠI CSS 62

2.5.1 | External CSS: 62

2.5.2 | Internal CSS: 63

2.5.3 | Inline CSS: 63

2.6 | CSS SELECTORS 64

2.7 | CÁC CSS CƠ BẢN 65

2.7.1 | CSS Color 65

2.7.2 | CSS Background 66

2.7.3 | CSS Border 68

2.7.4 | CSS Margin 72

2.7.5 | CSS Padding 74

2.7.6 | CSS Width/ Height 76

2.7.7 | CSS Box Model 77

2.7.8 | CSS Text 79

2.7.9 | CSS Font 81

2.7.10 | CSS List 84

2.7.11 | CSS Table 87

2.8 | CSS3 CƠ BẢN 89

2.8.1 | Selectors 90

2.8.2 | CSS3 Border 92

2.8.3 | CSS3 Backgroud 96

2.8.4 | CSS3 Color 101

2.8.5 | CSS3 Gradient 104

2.8.6 | CSS3 Shadow 109

2.8.7 | CSS3 Text 111

BÀI 3: RESPONSIVE WEB DESIGN VỚI HTML, CSS VÀ BOOTSTRAP 116

3.1 | WIREFRAMES, PROTOTYPES VÀ MOCKUPS 117

3.1.1 | Wireframes 117

3.1.2 | Mockups 118

3.1.3 | Prototypes 119

3.2 | CÁC THÀNH PHẦN CƠ BẢN TRÊN TRANG WEB 120

3.2.1 | Page header 121

3.2.2 | Navigation 121

3.2.3 | Page footer 122

3.3 | CÁC KỸ THUẬT XÂY DỰNG WEB LAYOUT HIỆN NAY 122

3.3.1 | Fixed Web design 122

3.3.2 | Fluid Web design 123

3.3.3 | Adaptive Web design 125

3.3.4 | Responsive Web Design 126

3.4 | XÂY DỰNG WEB LAYOUT VỚI HTML VÀ CSS 128

3.4.1 | Container 128

3.4.2 | Grid system 130

3.4.3 | Xây dựng grid system với HTML và CSS float 131

3.4.4 | Kỹ thuật clearing float 134

3.5 | KỸ THUẬT CANH GIỮA THEO TRỤC NGANG 136

3.5.1 | CSS display 136

3.5.2 | Canh giữa theo trục ngang với các display 139

3.6 | RESPONSIVE WEB DESIGN 139

3.6.1 | Media queries 139

3.6.2 | Các bước cơ bản để xây dựng website với kỹ thuật Responsive Web Design 146 3.7 | BOOTSTRAP 149

3.7.1 | Khái niệm Bootstrap 149

3.7.2 | Sử dụng Bootstrap 149

BÀI 4: TỔNG QUAN VỀ JAVASCRIPT 155

4.1 | GIỚI THIỆU JAVASCRIPT 156

4.1.1 | Giới thiệu JavaScript? 156

4.1.2 | JavaScript làm được gì? 157

4.1.3 | Các bước thực thi của JavaScript 157

4.1.4 | Cách đặt mã lệnh JavaScript vào trang web 158

4.2 | CÚ PHÁP CƠ BẢN CỦA JAVASCRIPT 158

4.2.1 | Các quy ước khi viết code JavaScript 158

4.2.2 | Câu lệnh trong JavaScript 162

4.2.3 | Chú thích trong JavaScript 163

4.2.4 | Biến 164

4.2.5 | Kiểu dữ liệu 166

4.2.6 | Toán tử 168

4.2.7 | Cấu trúc điều kiện 171

4.2.8 | Cấu trúc lặp 174

4.2.9 | Mảng 177

4.3 | ĐỐI TƯỢNG TRONG JAVASCRIPT 181

4.3.1 | Khái niệm đối tượng 182

4.3.2 | Tạo đối tượng 182

4.3.3 | Truy cập đối tượng 182

4.3.4 | Đối tượng String 183

4.3.5 | Đối tượng Math 186

4.3.6 | Đối tượng Date 188

4.4 | HÀM TRONG JAVASCRIPT 190

4.4.1 | Khái niệm về hàm 190

4.4.2 | Cách gọi hàm 191

4.5 | HTML DOM 191

4.5.1 | DOM là gì? 191

4.5.2 | HTML DOM nodes 192

4.5.3 | DOM Document 193

4.5.4 | Sự kiện trong JavaScript 195

4.6 | CÁC ĐỐI TƯỢNG TRANG WEB 197

4.6.1 | Thuộc tính của đối tượng Window 197

4.6.2 | Phương thức của đối tượng Window 198

4.6.3 | Phương thức về thời gian 199

BÀI 5: CÁC THƯ VIỆN JAVASCRIPT PHỔ BIẾN 203

5.1 | JQUERY 204

5.1.1 | Giới thiệu về jQuery 204

5.1.2 | Cú pháp của jQuery 205

5.1.3 | jQuery selectors 206

5.1.4 | Sự kiện trong jQuery 207

5.1.5 | Các hàm xử lý HTML và CSS trong jQuery 208

5.1.6 | Hiệu ứng và chuyển động trong jQuery 212

5.1.7 | Form validation với jQuery 217

5.2 | ANGULARJS 220

5.2.1 | Giới thiệu AngularJS 220

5.2.2 | AngularJS Directives 222

5.2.3 | AngularJS Expressions 228

5.2.4 | AngularJS Filters 229

5.2.5 | AngularJS Modules 234

5.2.6 | AngularJS Controllers 237

5.2.7 | Ví dụ ứng dụng AngularJS 238

TÀI LIỆU THAM KHẢO 243

DANH MỤC CÁC HÌNH

Hình 1 – Sơ đồ gửi và nhận files qua Internet 2

Hình 2 – Web Browser Nexus 3

Hình 3 – Mô hình Client – Server 9

Hình 4 – Cách thức hoạt động của web browser 10

Hình 5 – Frontend và Backend 11

Hình 6 – Một vài ngôn ngữ lập trình web trên frontend và backend 13

Hình 7 – Minh họa một wireframe 118

Hình 8 – Minh họa mockup 119

Hình 9 – Minh họa prototype 120

Hình 10 - Cấu trúc cơ bản của một trang web 120

Hình 11 – Ví dụ source code HTML của navigation 121

Hình 12 - Điểm yếu điểm của kỹ thuật Fixed Web design 123

Hình 13 – Kỹ thuật Fluid Web design 124

Hình 14 – Nhược điểm của kỹ thuật Fluid Web design 124

Hình 15 – Kỹ thuật Adaptive Web design 125

Hình 16 – Nhược điểm của kỹ thuật Adaptive Web design 126

Hình 17 – Microsoft OmniTouch 127

Hình 18 – Minh họa container 128

Hình 19 – Minh họa Grid System 130

Hình 20 – Minh họa row 133

Hình 21 – CSS Clear 134

Hình 22 – Vấn đề với CSS float 135

Hình 23 – Display block, inline và inline-block 137

Hình 24 – Width và Height của block, inline và inline-block 138

Hình 25 – Mobile first và Desktop first 146

Hình 26 - Các bước cơ bản để xây dựng website với kỹ thuật Responsive Web Design 146

Hình 27 – Website bị thu nhỏ khi xem trên các thiết bị di động 147

Hình 28 – Website hiển thị đúng kích thước trên các thiết bị di động 147

Hình 29 – Navigation của Bootstrap hiển thị trên browser 151

Hình 30 – Bootstrap navigation hiển thị trên desktop 152

Hình 31 - Bootstrap navigation hiển thị trên điện thoại 152 Hình 32 – Các class dành cho hình của Bootstrap 153

GIÁO TRÌNH HỌC PHẦN

Tên học phần: Thiết kế web

Mã học phần: CNC107411

Vị trí, tính chất, ý nghĩa và vai trò của học phần:

- Vị trí: Học phần được giảng dạy vào học kỳ thứ hai dành cho sinh viên ngành Công nghệ thông tin

- Tính chất: Là học phần bắt buộc đối với sinh viên ngành Công nghệ thông tin

- Ý nghĩa và vai trò của học phần:

Đây là học phần chuyên ngành Công nghệ thông tin, cung cấp cho sinh viên một cách nhìn tổng quát về lĩnh vực web cũng như kiến thức và kỹ năng xây dựng giao diện website Sinh viên sẽ được trình bày kiến thức về HTML, CSS và JavaScript Ngoài ra, sinh viên có thể ứng dụng các framework phổ biến hiện nay trong xây dựng giao diện wesite Bên cạnh đó, học phần cũng đặt nền tảng cho các học phần về web sau này, đặc biệt là cơ sở cho học phần Thiết kế web 2

+ Xây dựng giao diện website hiển thị tốt trên nhiều thiết bị

+ Thực hiện kiểm tra chính xác dữ liệu người dùng nhập trên form;

+ Sử dụng được các thư viện JavaScript phổ biến hiện nay vào giải quyết các yêu cầu tương tác người dùng;

- Về năng lực tự chủ và trách nhiệm:

+ Tuân theo các quy định và tiêu chuẩn trong ngành phát triển web;

+ Thường xuyên tham gia một cách chủ động và tích cực vào các công việc được giao

BÀI 1: TỔNG QUAN VỀ WEB

Bài này trình bày các khái niệm liên quan đến lĩnh vực web Sinh viên sẽ được trình bày

về lịch sử phát triển web, web browser, các công việc liên quan đến lĩnh vực web và các công nghệ cũng như tiêu chuẩn phổ biến nên có cho các website hiện nay

Mục tiêu:

Học xong bài này, sinh viên có khả năng:

- Giải thích được các kiến thức cơ bản về web;

- Biết được và tuân theo các quy định và tiêu chuẩn trong ngành phát triển web;

Nội dung chính:

- Trình bày lịch sử hình thành và phát triển của web

- Trình bày các thuật ngữ cơ bản của web

- Trình bày các ngôn ngữ lập trình hiện nay dành cho web

- Trình bày các tiêu chuẩn cần có của một website hiện đại

1.1 | TỔNG QUAN VỀ WEB

1.1.1 | Internet và World Wide Web

Internet hoạt động dựa trên ý tưởng rằng tất cả các máy tính có thể kết nối với nhau thông qua các địa chỉ, được gọi là địa chỉ TCP/IP TCP/IP viết tắt của Transmission Control Protocol/Internet Protocol Các khái niệm về TCP/IP được đề cập cụ thể và chi tiết ở môn Mạng máy tính Địa chỉ TCP/IP thông thường còn được gọi là địa chỉ IP

Hình 1 – Sơ đồ gửi và nhận files qua Internet

Vào đầu những năm 1990, Tim Berners-Lee đã tận dụng các ưu điểm của Internet để tạo ra một phương pháp cho phép các đồng nghiệp của ông truy cập từ xa dữ liệu được lưu trữ trong máy tính của ông Một người dùng ở bất kỳ đâu trên thế giới với một máy tính có Internet có thể kết nối đến một máy chủ (server) và yêu cầu một trang tài liệu, trang tài liệu này sau đó sẽ được gửi đến máy tính người dùng và hiển thị lên Berners-Lee gọi phương pháp này là World Wide Web và đặt tên cho phần mềm dùng trong phương pháp này là WorldWideWeb – một phiên bản đơn giản của một web browsers

đổi tên thành Nexus để tránh gây nhầm lẫn với World Wide Web Ngày nay, các web browsers và các công nghệ đã phát triển rất nhiều, nhưng ý tưởng thì không hề thay đổi Mỗi máy tính với một địa chỉ IP sẽ có thể gửi yêu cầu các thông tin khác nhau, ví dụ như một trang web, đến một máy tính khác với một địa chỉ IP khác

Hình 2 – Web Browser Nexus

Những nhà nghiên cứu như Berners-Lee đánh giá cao khả năng truy cập tài liệu từ xa,

và World Wide Web ban đầu chỉ phục vụ cho các mục đích học thuật và nghiên cứu Sau đó, các ứng dụng thương mại của web browser với mục đích hiển thị văn bản và hình ảnh đồ họa phát triển nhanh chóng Sự phát triển này thể hiện rõ ràng ở số lượng các website Năm 1994 chỉ có khoảng một vài website, nhưng chỉ sau đó 5 năm, số lượng website đã tăng lên hơn 6 triệu

Hãy cùng điểm qua lịch sử phát triển của web browser từ thời sơ khai cho tới hiện đại:

và là cách duy nhất để xem web ở thời điểm đó

1992

MidasWWW

MidasWWW được phát triển tại Trung tâm Standford Linear Accelerator vào năm 1992

Mosaic được phát triển bởi Marc Andreessen và Eric Bina tại National Center for Supercomputing Applications (NCSA) ở trường đại học Illinois Urbana-Champaign vào

khoảng cuối năm 1992 NCSA đã phát hành browser này vào năm 1993, và chính thức dừng phát triển cũng như hỗ trợ vào ngày 07/01/1997

Sau này, các tác giả của Mosaic đã phát triển một web browser khác là Netscape Navigator, khi vào làm cho công

ty Netscape Tuy nhiên, Netscape Navigator không dùng chung mã nguồn của Mosaic Mã nguồn của Netscape Navigator được sử dụng cho Mozilla Firefox sau này Còn

mã nguồn của Mosaic được nhượng quyền lại cho Microsoft để phát triển thành Internet Explorer vào năm

Internet Explorer 1.0 được phát hành riêng mà chưa được tích hợp vào Windows Cho đến khi Internet Explorer 2.0

ra mắt, nó mới được tích hợp vào Windows 95 OSR trong năm 1996

Opera

Opera khởi đầu là một dự án nghiên cứu cho Telenor – một công ty viễn thông Na Uy trước khi được phát hành chính thức vào năm 1996

2003

Safari

Web browser đầu tiên của Apple – Safari – được phát hành vào năm 2003, thay thế cho Netscape Navigator hoặc Cyberdog được đính kèm chung với các máy Macintosh trước đây

1.1.2 | Client – Server

Mô hình Client – Server là một mô hình phổ biến trong web Mô hình này gồm hai thành phần: Client và Server Server là một máy tính có khả năng xử lý mạnh, được dùng để lưu trữ và chia sẻ tài nguyên (các files khác nhau, VD: các trang web) cho nhiều máy tính clients Clients là các máy tính khác nhau sẽ truy cập vào máy server (thông qua một đường truyền mạng, có thể là Internet) để gửi yêu cầu lấy các files tài nguyên

Hình 3 – Mô hình Client – Server

1.1.3 | Tên domain và hosting

Tên domain giúp người dùng truy cập đến các websites một cách dễ dàng và thuận tiện thay vì phải nhớ các con số địa chỉ IP Tên domain thông thường bắt đầu bằng www ở đầu và kết thúc bằng các đuôi như com, org, edu, gov, v.v…

Tên domain được dùng thay cho các địa chỉ IP khó nhớ Domain Name Servers (DNS)

là công cụ chuyển tên domain thành địa chỉ IP Khi người dùng nhập tên domain vào thanh địa chỉ của web browser, DNS sẽ chuyển tên domain này thành một địa chỉ IP phù hợp, và địa chỉ IP này sẽ dẫn đến một web server cụ thể

Web server là một máy tính được cài đặt các hệ điều hành dành cho server (VD: Windows Server, Centos, v.v…) có khả năng xử lý hàng ngàn truy cập của các người dùng khác nhau tại một thời điểm Ngoài ra, web server phải có một đường kết nối Internet ổn định sẵn sàng 24/24 để duy trì hoạt động của website Thông thường, sẽ có các công ty cung cấp dịch vụ web server Chủ các websites chỉ cần thuê dịch vụ này

(dịch vụ hosting) và đặt website tại web server của các công ty này Mọi việc bảo trì và đảm bảo hoạt động của web server sẽ do các công ty cung cấp dịch vụ hosting đảm nhiệm Để tiết kiệm chi phí, chủ các website nhỏ có thể chọn đặt website trên một server được chia sẻ với nhiều websites khác Đối với các websites lớn hoặc cần độ bảo mật cao, chủ của chúng có thể thuê hẳn một server riêng (dedicated server) Các công ty lớn

có thể tự đặt và quản lý server của riêng mình ngay trong công ty mà không cần thuê công ty bên ngoài

Ở mức độ học tập, sinh viên có thể sử dụng các domain và hosting miễn phí được cung cấp rất nhiều hiện nay Hoặc sinh viên có thể tự làm web server riêng cho mình với một máy tính và một đường truyền Internet Tuy nhiên, để tự làm server riêng, sinh viên cần

có các kiến thức về mạng máy tính nhất định (không thuộc phạm vi của học phần Thiết

kế web)

Hình 4 – Cách thức hoạt động của web browser

Trước đây, khi nói về phát triển web, người ta thường liên tưởng đến backend và xem frontend như một phần công việc của backend Tuy nhiên trong những năm gần đây, công việc được phân định rõ ràng Khi nói về các công việc của frontend development thì bao gồm công việc của designer sẽ thiết kế bằng Photoshop, công việc của frontend web developer sẽ chuyển các bản thiết kế đó thành các giao diện chạy trên web browser với các hiệu ứng và tương tác người dùng Trong thực tế, một số designers đảm nhận luôn toàn bộ công việc từ thiết kế Photoshop đến lập trình giao diện

Vì thế, ngày nay, khi nhắc đến thuật ngữ “thiết kế web (web design)”, chúng ta thường ngụ ý là cả những người làm việc với Photoshop lẫn những người sử dụng HTML, CSS, JavaScript hay jQuery để lập trình nên giao diện

Tất cả những gì chúng ta thấy trên web đều là sự kết hợp của HTML, CSS và JavaScript Nội dung học phần Thiết kế web này cũng nhằm mục tiêu lập trình nên giao diện web với HTML, CSS và JavaScript

Cần lưu ý, frontend chỉ tạo nên giao diện tĩnh (trong thực tế còn được gọi là web tĩnh), nghĩa là nội dung trên giao diện ấy sẽ không bao giờ thay đổi Muốn giao diện ấy thật

sự “sống”, nghĩa là thay đổi, cập nhật nội dung tùy theo từng ngữ cảnh cụ thể, thì đó là công việc của backend Có thể hiểu nôm na như ví dụ một tờ đơn, thì frontend sẽ thiết

kế ra một mẫu đơn trống, chưa có thông tin, còn backend sẽ điền các thông tin cần thiết vào mẫu đơn trống có sẵn ấy

Backend

Backend thông thường gồm ba thành phần: server, application và database Trong đó, application và database được đặt tại server Để hiểu rõ hơn về backend, hãy xét ví dụ sau:

Khi cần đặt vé máy bay hoặc vé xem phim, chúng ta thường vào các website đặt vé và tương tác với phần frontend (những gì chúng ta thấy) Một khi chúng ta đã nhập các thông tin cần thiết, application sẽ lưu trữ các thông tin ấy trong database được đặt ở server Tất cả thông tin đều được lưu trữ trong database tại server Vì vậy, mỗi khi chúng

ta quay lại websites, đăng nhập lại tài khoản, chúng ta đều có thể thấy được các thông tin ấy

Chúng ta gọi người tạo nên application, tạo ra các hoạt động lưu trữ, truy xuất thông tin trên database, làm cho mọi thứ hoạt động cùng nhau là backend developer Có rất nhiều công nghệ để lập trình ở phía backend, bao gồm các ngôn ngữ như PHP, Ruby, Python, C#, Java, v.v Để đơn giản hóa và hỗ trợ các công việc lập trình backend, người ta cũng tạo ra các frameworks như Ruby on Rails, Cake PHP, Code Igniter, Laravel, v.v… Những công nghệ này sẽ được dạy trong các học phần về web sau này như Lập trình web, các chuyên đề web

1.1.5 | Các ngôn ngữ lập trình web

Hình 6 – Một vài ngôn ngữ lập trình web trên frontend và backend

Khi nhắc đến web, không thể không nhắc đến HTML (Hypertext Markup Language) Mọi thứ hiển thị trên web browser cho người dùng thấy đều được viết bằng HTML

HTML sử dụng các tags để bao bọc lấy văn bản (VD: <p>Hello World </p>) Các tags

này quy định cách mà văn bản hiển thị trên web browser Web browser sẽ đọc các tags

và hiển thị văn bản đúng theo quy định của tag đó Bài 2 của giáo trình này sẽ trình bày

rõ hơn về HTML

Ngoài ra, để trở nên đẹp và sinh động hơn, các websites sẽ được định dạng bằng các thuộc tính CSS (Cascading Style Sheet) Có thể hiểu nôm na một trang web giống như một căn nhà, trong đó phần khung sườn thô chính là HTML và phần trang trí sơn phết chính là CSS Bài 2 của giáo trình này sẽ trình bày rõ hơn về CSS

Về cơ bản, chỉ với HTML và CSS, chúng ta đã có thể tạo được các trang web đẹp và hấp dẫn Sự kết hợp này sẽ được trình bày cụ thể ở bài 3 của giáo trình này Tuy nhiên,

để trang web tăng tính tương tác với người dùng, tạo các hiệu ứng sinh động, bắt mắt, các chuyển động phong phú, chúng ta sẽ sử dụng thêm JavaScript JavaScript là một dạng ngôn ngữ lập trình thông dịch (khác với C là ngôn ngữ biên dịch), dùng để tạo nên các hiệu ứng tương tác, chuyển động trên trang web Trước đây, JavaScript là ngôn ngữ lập trình ở phía client Tuy nhiên, hiện nay JavaScript còn được sử dụng ở phía Server

Bài 4, bài 5 và bài 6 sẽ trình bày cách sử dụng JavaScript cũng như các thư viện hỗ trợ JavaScript

HTML, CSS và JavaScript là các ngôn ngữ được sử dụng để tạo nên frontend Theo dòng thời gian, ngôn ngữ ở frontend hầu như không thay đổi, có chăng chỉ là thay đổi

về các phiên bản khác nhau Trái lại, ngôn ngữ cũng như công nghệ ở phía backend thì ngày càng đa dạng Có thể kể đến một vài ngôn ngữ phổ biến hiện nay như PHP, Python, C#, Java, Ruby, v.v… JavaScript nếu như trước đây chỉ được dùng để lập trình frontend thì hiện nay đã bắt đầu phát triển nhanh ở backend Tại Khoa Công nghệ thông tin – Trường Cao đẳng Công nghệ Thủ Đức, ngôn ngữ phía backend được chú trọng giảng dạy là PHP cùng với các frameworks hỗ trợ PHP và các frameworks PHP sẽ được giảng dạy trong các học phần như Lập trình web 1, Lập trình web 2, các chuyên đề về web

The myth: “I know more programming languages than you, so I

will be more successful.”

The fact: “It’s NOT about how much you KNOW, but rather

what you DO with what you know.”

Ngày nay, một website tốt không chỉ có đẹp, có đầy đủ chính năng được yêu cầu, không

có lỗi, mà còn phải đạt các tiêu chuẩn khác nhau để có thể sống sót và cạnh tranh được với vô vàn websites trên Internet Không hề có một tổ chức nào quy định danh sách các tiêu chuẩn này Từ kinh nghiệm làm việc của các web developer trong bối cảnh hiện nay, tạp chí Forbes gợi ý một số tiêu chuẩn tham khảo cho một website hiện đại như sau:

• Mobile First: một website được thiết kế theo kiểu responsive (RWD – Sẽ được

nói rõ ở bài 3 của giáo trình này) giúp website hiển thị tốt trên nhiều thiết bị khác nhau Ngày nay với sự bùng nổ của các dạng thiết bị di động, thì RWD trở thành một yêu cầu bắt buộc đối với mọi website Cách thức thực hiện RWD cho website

• Fast Loading: nếu website tải lên chậm, điều này đồng nghĩa với việc mất lượt

xem, cũng đời nghĩa với việc bị các bộ máy tìm kiếm (search engine) đánh gía thấp Vì vậy website cần được tối ưu để tải lên nhanh trên tất cả các thiết bị

• Tracking Enabled: website phải theo dõi, phân tích hoạt động của người dùng

trên website, website conversion* để có các chiến lược phát triển website cụ thể Điều này đặc biệt quan trọng với các website liên quan đến thương mại điện tử

* Website conversion: là một yếu tố quan trọng dẫn đến thành công của các chiến lược marketing trực tuyến Thuật ngữ này có nghĩa là người dùng sẽ làm điều

mà chủ website muốn họ làm, VD: mua sản phẩm, đăng ký nhận bản tin, download một file, v.v…

• SEO Ready: SEO là từ viết tắt của Search Engine Optimization – Tối ưu hóa bộ

máy tìm kiếm Các search engines (như Google, Bing, v.v…) là một công cụ quan trọng đưa websites đến với công chúng Vì vậy, các websites phải đạt các chuẩn “On-page SEO” để có thể được hiển thị ở các vị trí đầu tiên khi người dùng tìm chúng trên search engine Các chuẩn về “On-page SEO” sẽ không được dạy

cụ thể trong giáo trình này, mà được lồng rải rác trong nội dung của Bài 2

• Social Media: các mạng xã hội đang phát triển vô cùng nhanh chóng và mạnh

mẽ Vì vậy, không có lý do gì để một website không kết nối với các mạng xã hội

để có thể tiếp cận được nhiều người dùng hơn

• Strong Security: tình hình an ninh thông tin diễn biến ngày càng phức tạp, đặt

biệt là an ninh mạng Vì vậy, một website tốt phải được bảo mật đầy đủ và cẩn thận, ít nhất là không mắc các lỗi bảo mật cơ bản như SQL Injection

BÀI TẬP

Sinh viên vào các website quen thuộc và nhận xét các tiêu chuẩn mà website ấy đạt được

BÀI 2: TỔNG QUAN VỀ HTML VÀ CSS

HTML và CSS là hai phần không thể thiếu để tạo nên một bố cục hoàn chỉnh cho trang

web, làm cho trang web có thể hiển thị tốt trên nhiều thiết bị Hiểu HTML và CSS có

thể giúp bất kỳ ai có thể làm việc với web, người thiết kế có thể tạo ra trang web hấp

dẫn và hữu dụng hơn, người biên tập trang web có thể tạo ra nội dung tốt hơn, v.v

Bài này sẽ trình bày các kiến thức tổng quan về HTML, HTML5, CSS và CSS3; danh

sách các thẻ HTML và HTML5; các thuộc tính cơ bản của CSS và CSS3; các bộ chọn

trong CSS để chọn các phần tử trong trang web

Mục tiêu:

Học xong bài này, sinh viên có khả năng:

- Áp dụng chính xác các kiến thức về HTML và CSS vào xây dựng giao diện website

theo mẫu được cung cấp;

- Biết được và tuân theo các quy định và tiêu chuẩn trong ngành phát triển web;

Nội dung chính:

- Kiến thức về HTML

- Kiến thức về CSS

2.1 | GIỚI THIỆU HTML

2.1.1 | Giới thiệu HTML

Năm 1989, Tim Berners-Lee nhận nhiệm vụ tạo ra một hệ thống điện tử có thể liên kết các tài liệu với nhau dễ dàng hơn Vì vậy ông tạo ra một ngôn ngữ đơn giản, ai cũng có thể sử dụng đó chính là HTML

HTML là chữ viết tắt của cụm từ Hypertext Markup Language, là ngôn ngữ đánh dấu siêu văn bản, cho phép đưa vào văn bản nhiều thuộc tính cần thiết để có thể truyền thông trên mạng toàn cầu WWW HTML cho phép đưa hình ảnh đồ họa vào văn bản, thay đổi cách trình bày văn bản và tạo những tài liệu siêu văn bản có thể tương tác với người dùng HTML sử dụng khái niệm “thẻ” (tag) để tạo nên các phần tử HTML dùng để mô

tả cấu trúc một trang web Trình duyệt không hiển thị các thẻ HTML nhưng sử dụng chúng để hiển thị nội dung của trang

Năm 1994, tổ chức W3C phát hành phiên bản HTML 2.0 Năm 1997, HTML 3.2 được đưa ra và sau đó là HTML 4.0 được đưa ra vào mùa xuân năm 1998

Năm 2004, cùng với sự phát triển của Internet, HTML 4.0 trở nên già cỗi, W3C tiếp tục đưa ra phiên bản 4.1 và 4.2 được gọi là XHTML (HTML + XML) Tuy nhiên, lúc này HTML trở nên khó hiểu hơn so với ban đầu Lúc này, nhóm nghiên cứu WHATWG (Web Hypertext Application Technology Working Group) đã tạo ra HTML5, đơn giản hơn, mạnh mẽ hơn Sau này W3C đã chọn HTML5 làm tiêu chuẩn cho Web

HTML5 ra đời nhằm mục đích giảm thiểu nhu cầu sử dụng các plugins độc quyền bên ngoài

HTML5 bổ sung rất nhiều cái mới, từ các thẻ tổ chức nội dung (article, aside, title…) đến các thẻ hỗ trợ tương tác và multimedia (video, audio…) Bên cạnh đó còn có các thẻ mang ngữ nghĩa như header, footer, nav, đem lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại kết quả

2.1.2 | Thẻ HTML

Cấu trúc chung của một thẻ HTML là:

<tagname attributes>content</tagname>

tagname: tên của một thẻ HTML, viết liền với dấu “< “, không có khoảng trắng

content: là nội dung cần định dạng trong trang web

attributes: là danh sách thuộc tính của thẻ, là những đặc điểm bổ sung vào cho một thẻ,

thứ tự các thuộc tính trong một thẻ là tuỳ ý Nếu có từ 2 thuộc tính trở lên thì mỗi thuộc tính cách nhau bởi khoảng trắng

<tagname attribute1=”value1” attribute2=”value2” …> content </tagname>

Thực hiện 4 bước sau để có được 1 trang web đơn giản

Bước 1: Mở chương trình soạn thảo

Bước 2: Viết code HTML

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Bước 3: Lưu tập tin với phần mở rộng là “html”

Bước 4: Sử dụng trình duyệt để hiển thị tập tin “html” vừa lưu

2.1.4 | Hiển thị trang web

Khởi động trình duyệt web (Chrome, IE, Firefox, Safari, ), nhập đường dẫn của trang web vào ô địa chỉ để trình duyệt đọc tài liệu HTML và hiển thị chúng

2.1.5 | Phiên bản HTML

Một trang HTML được tạo thành bởi 2 thành phần chính: <head> và <body> Tuy nhiên, chỉ có nội dung bên trong phần <body> mới được hiển thị trên trình duyệt, còn nội dung trong phần <head> chỉ được đọc trước khi hiển thị trang web

Dưới đây là hình ảnh về cấu trúc của một trang HTML:

<!DOCTYPE> phải được khai báo đầu tiên trong tài liệu HTML

Ví dụ: <!DOCTYPE html> là khai báo cho HTML5

Định nghĩa và sử dụng:

Thẻ <title> là thẻ định nghĩa tiêu đề trang web được hiển thị trên thanh công cụ của trình duyệt, nó cung cấp tiêu đề cho trang khi trang được thêm vào mục yêu thích, nó hiển thị tiêu đề cho trang trong kết quả của công cụ tìm kiếm và nó được yêu cầu trong tất cả các tài liệu HTML

Các thẻ <h1>, <h2>, <h3>, <h4>, <h5>, <h6> là các thẻ tạo tiêu đề cho văn bản

<h1> được sử dụng để tạo tiêu đề quan trọng nhất, giảm dần xuống đến <h6> xác định tiêu đề ít quan trọng nhất

Cấu trúc:

Cấu trúc:

<p> content </p>

2.3.1.8 | <br>

Thẻ <! > dùng để chèn một chú thích cho mã nguồn, điều này sẽ hữu ích trong việc chỉnh sữa mã nguồn sau này Nội dung chú thích sẽ không được hiển thị trên các trình duyệt

Ví dụ: Kết quả

2.3.3 | Danh sách

2.3.3.1 | <ul>

Định nghĩa và sử dụng:

Thẻ <ul> định nghĩa một danh sách không có thứ tự Sử dụng thẻ <ul> kết hợp với thẻ

<li> để tạo danh sách

Cấu trúc:

<ul>

<li> item1 </li>

<li> item2 </li>

<li> item3 </li>

Ø dist: l

- Nếu type đặt trong <ul> thì ảnh hưởng đến toàn danh sách Còn nếu type đặt trong

<li> thì chỉ ảnh hưởng đến mục hiện hành Tuy nhiên, chúng ta sẽ dùng CSS để định dạng loại đánh dấu cho danh sách

<li> item1 </li>

<li> item2 </li>

<li> item3 </li>

</ol>

Thuộc tính:

- Thuộc tính type chỉ định loại đánh dấu được sử dụng trong danh sách, có thể là số

hoặc chữ cái (1, a, A, i, I)

- Thuộc tính start chỉ định một giá trị bắt đầu cho danh sách

- Thuộc tính reversed chỉ định số thứ tự của danh sách giảm dần

2.3.3.3 | <dl>

Định nghĩa và sử dụng:

Thẻ <dl> được sử dụng để tạo một danh sách mô tả Sử dụng thẻ <dl> kết hợp với thẻ

<dt> tạo các từ cần mô tả và thẻ <dd> tạo nội dung mô tả cho các từ