giáo trình thiết kế web nghề tin học ứng dụng cao đẳngtrung cấp

GIÁO TRÌNH MÔN HàC/MÔ ĐUN Tên môn hác/mô đun: ThiÁt kÁ Web Mã môn hác/mô đun: MH19 Vß trí, tính chÃt, ý nghĩa và vai trò cÿa môn hác/mô đun: - Vị trí: GiÁng d¿y học kỳ 3, môn học này là

ĀY BAN NHÂN DÂN THÀNH PHà Hâ CHÍ MINH

TR¯âNG CAO ĐÀNG BÁCH KHOA NAM SÀI GÒN

GIÁO TRÌNH MÔN HàC/MÔ ĐUN: THI¾T K¾ WEB NGÀNH/NGHÀ: TIN HàC ĀNG DĀNG

TRÌNH ĐÞ: CAO ĐÀNG

Ban hành kèm theo Quy ết định số: 459/QĐ-NSG, ngày 31 tháng 08 năm 2022

c ủa Hiệu trưởng Trường Cao Đẳng Bách Khoa Nam Sài Gòn

Tp Hồ Chí Minh, năm 2022

LâI GIàI THIàU

Môn ThiÁt kÁ web là môn học cung cÃp cho học sinh kiÁn thức và kỹ năng đá

có thá thāc hiån các website tĩnh, nhÿng kiÁn thức nßn tÁng vÿng chắc vß thiÁt kÁ mát trang web hoàn chỉnh Môn ThiÁt kÁ web là môn học chuyên ngành trong ch°¡ng trình ngành Tin học ứng dÿng hå Cao đẳng

Nái dung giáo trình gãm 9 bài:

- Bài 1: Giãi thiåu, khái niåm c¡ bÁn

- Bài 2: Làm chā giao diån - QuÁn lý website

- Bài 3: Ngôn ngÿ HTML

- Bài 4: CSS - CASCADING STYLE SHEET

- Bài 5: Siêu liên kÁt – Link

- Bài 6: ThiÁt kÁ biáu mÁu – Form

- Bài 7: Xây dāng trang mÁu –Template

- Bài 8: ThiÁt kÁ website bán hàng

- Bài 9: XuÃt bÁn website

Trong quá trình biên so¿n chúng tôi đã kÁt hợp kinh nghiåm giÁng d¿y trong nhißu năm cāa nhóm tác giÁ vãi mong muán có thá giúp cho học sinh – sinh viên dã dàng nắm bắt đ°ợc nái dung cāa môn học Mặc dù, rÃt cá gắng trong quá trình biên so¿n, nh°ng chắc chắn không thá tránh khßi nhÿng thiÁu sót, vì vậy, nhóm tác giÁ chúng tôi rÃt mong nhận đ°ợc ý kiÁn đóng góp cāa b¿n đọc đá giáo trình ngày mát hoàn thiån h¡n

Tp.HCM ngày 31 tháng 08 năm 2022 Tham gia biên so¿n

1 Chā biên: ThS Lê Thị Thùy Trang

2 &&&&

3 &&&&

MỤC LỤC

LäI GIâI THIäU 3

Bài 1 Giãi thiåu, khái niåm c¡ bÁn 6

Bài 2: Làm chā giao diån Visual Studio Code - quÁn lý website 9

Bài tập 15

Bài 3 Ngôn ngÿ HTML 20

Bài tập: 32

Bài 4 CSS – CASCADING STYLE SHEET 34

Bài tập: 40

Bài 5 SIÊU LIÊN KÀT - LINK 45

Bài tập: 47

Bài 6 THIÀT KÀ BIàU MÀU – FORM 49

Bài tập: 51

Bài 7 XÂY DĀNG TRANG MÀU - TEMPLATE 53

Bài tập: 59

Bài 8 THIÀT KÀ WEBSITE BÁN HÀNG 62

Bài tập: 63

Bài 9 XUÂT BÀN WEBSITE 65

Bài tập: 76

TÀI LIäU THAM KHÀO: 81

GIÁO TRÌNH MÔN HàC/MÔ ĐUN

Tên môn hác/mô đun: ThiÁt kÁ Web

Mã môn hác/mô đun: MH19

Vß trí, tính chÃt, ý nghĩa và vai trò cÿa môn hác/mô đun:

- Vị trí: GiÁng d¿y học kỳ 3, môn học này là môn chuyên ngành trong ch°¡ng trình đào t¿o bậc cao đẳng ngành Tin học ứng dÿng

- Tính chÃt: Môn ThiÁt kÁ web là môn học cung cÃp cho học sinh kiÁn thức và kỹ năng đá có thá thāc hiån các website tĩnh, nhÿng kiÁn thức nßn tÁng vÿng chắc vß thiÁt kÁ mát trang web hoàn chỉnh Môn ThiÁt kÁ web là môn học chuyên ngành trong ch°¡ng trình ngành Tin học ứng dÿng hå Cao đẳng.- Ý nghĩa và vai trò cāa môn học/mô đun:

Māc tiêu cÿa môn hác/mô đun:

Vß kiÁn thức:

- Trình bày đ°ợc các nguyên tắc c¡ bÁn thiÁt kÁ Web vãi Dreamweaver;

- Trình bày đ°ợc các b°ãc thiÁt kÁ web;

- Trình bày đ°ợc các quy trình t¿o trang web mÁu

Vß kỹ năng:

- ThiÁt kÁ trang web theo mÁu;

- ThiÁt kÁ trang web theo yêu cầu cāa công viåc hoặc khách hàng;

- T¿o mãi 1 Host miãn phí

- Sử dÿng thành th¿o các công cÿ thiÁt kÁ Web;

- Xây dāng đ°ợc các ứng dÿng Multimedia;

- Cài đặt, cÃu hình đ°ợc dịch vÿ IIS;

- Có khÁ năng kÁt hợp vãi c¡ sç dÿ liåu đá t¿o ra các trang Web đáng

Vß năng lāc tā chā và trách nhiåm:

- Rèn luyån lòng yêu nghß, t° thÁ tác phong công nghiåp, tính kiên trì, sáng t¿o trong công viåc

Nßi dung cÿa môn hác/mô đun:

Bài 1 Giái thiáu, khái niám c¡ bÁn

1 Mÿc tiêu:

- Phát biáu đ°ợc các khái niåm vß c¡ bÁn Internet, URL, HTTP, Website , webpage;

- Trình bày đ°ợc các dịch vÿ c¡ bÁn cāa Internet;

- Mô tÁ đ°ợc cÃu trúc l°u trÿ cāa Website

2 Nái dung bài:

2.1 Internet là gì?

Internet là mát hå tháng thông tin toàn cầu có thá đ°ợc truy nhập công cáng gãm các m¿ng máy tính đ°ợc liên kÁt vãi nhau Hå tháng này truyßn thông tin theo kiáu nái chuyán gói dÿ liåu (packet switching) dāa trên mát giao thức liên m¿ng đã đ°ợc chu¿n hóa (giao thức IP) Hå tháng này bao gãm hàng ngàn m¿ng máy tính nhß h¡n cāa các doanh nghiåp, cāa các viån nghiên cứu và các tr°ång đ¿i học, cāa ng°åi dùng cá nhân, và các chính phā trên toàn cầu

2.2 Các dßch vā Internet

Tổ chức và khai thác thông tin trên web (WWW - World Wide Web): ng°åi dùng có thá dã dàng truy cập đá xem nái dung các trang web khi máy tính đ°ợc kÁt nái vãi Internet

Tìm kiÁm thông tin trên Internet: dùng Google hoặc danh mÿc thông tin Ng°åi dùng nhanh chóng tìm đ°ợc đúng thông tin cần thiÁt

Th° điån tử (E-mail): đây là dịch vÿ trao đổi thông tin trên Internet thông qua các háp th° điån tử, đ°ợc sử dÿng ráng rãi rÃt phổ biÁn, tiån lợi, nhanh chóng, vãi chi phí thÃp

Hái thÁo trāc tuyÁn: Tổ chức các cuác họp, hái thÁo trāc tuyÁn từ xa vãi sā tham gia cāa nhißu ng°åi ç nhißu n¡i khác nhau Hình Ánh, âm thanh cāa hái thÁo và cāa các bên tham gia đ°ợc truyßn hình trāc tiÁp qua m¿ng và hián thị trên màn hình hoặc phát trên loa máy tính

Đào t¿o qua m¿ng: ng°åi học có thá truy cập Internet đá nghe các bài giÁng, trao đổi hoặc nhận các chỉ dÁn trāc tiÁp từ giáo viên , nhận các bài tập hoặc các tài liåu học tập khác và náp kÁt quÁ qua m¿ng mà không cần tãi lãp Đào t¿o qua m¿ng cho phép mọi ng°åi "học mọi lúc, mọi n¡i"

2.3 Các khái niám c¡ bÁn URL, HTTP, Website , webpage

HTTP là chÿ viÁt tắt cāa HyperText Transfer Protocol, là mát giao thức ứng dÿng đ°ợc sử dÿng th°ång xuyên nhÃt trong bá các giao thức TCP/IP (gãm mát nhóm các giao thức nßn tÁng cho internet) Http ho¿t đáng dāa trên mô hình Client (máy khách) – Server (máy chā)

URL là chÿ viÁt tắt cāa <Uniform Resource Locator<, t¿m dịch: <Trình định

vị tài nguyên tháng nhÃt< Đây là mát đ°ång dÁn liên kÁt đÁn website, tham chiÁu tãi các tài nguyên trên m¿ng Internet Đ°ång dÁn URL là đo¿n text có thá đọc đ°ợc thay cho địa IP mà máy tính sử dÿng đá liên hå vãi server

Website là mát sÁn ph¿m công nghå đ°ợc t¿o ra bçi các lập trình viên, bao gãm nhißu thành phần khác nhau nh° văn bÁn, hình Ánh, video, các tập tin đa ph°¡ng tiån,& và có thá truy cập đ°ợc thông qua mát tên mißn (hoặc tên mißn phÿ)

Web page (trang web) là mát trang trên website, nó có thá là 1 bài viÁt, 1 chuyên mÿc hoặc 1 trang thông tin bÃt kỳ Các b¿n l°ãt web s¿ thÃy mßi website th°ång có rÃt nhißu các nái dung khác nhau nh° trang giãi thiåu, trang thông tin liên

hå, các bài viÁt giãi thiåu vß sÁn ph¿m, dịch vÿ,& mßi trang nái dung có mát URL (đ°ång link) riêng biåt, ta gọi mßi trang đó là mát web page

2.4 CÃu trúc l°u trÿ cÿa Website

Tên mißn (domain): Đ°ợc xem là địa chỉ website GiÁ sử nh° website là mát cửa hàng thì tên mißn chính là tên địa chỉ cāa cửa hàng đó Do đó đá truy cập website, b¿n phÁi gõ địa chỉ tên mißn trên trình duyåt đá có thá đi đÁn đ°ợc vãi website đó

Web hosting: Sau khi đã có tên mißn Công viåc tiÁp theo cāa b¿n đó chính là thuê mát máy chā Đó đ°ợc gọi là web hosting Máy chā s¿ l°u trÿ tÃt cÁ các thông tin, hình Ánh và tài liåu cāa website đá từ đó có thá đ°a ra đ°ợc nhÿng kÁt quÁ phù hợp vãi truy vÃn cāa ng°åi dùng

Source Code: Đây đ°ợc xem là mã nguãn cāa website NÁu tên mißn là địa chỉ, web hosting chính là mÁnh đÃt thì source code chính là phần g¿ch và bê tông đá xây nên website Và b¿n đã có mát website, chính là mát ngôi nhà hoàn chỉnh

Bài 2: Làm chÿ giao dián Visual Studio Code - quÁn lý website

1 Māc tiêu:

- Cài đặt và sử dÿng ứng dÿng Visual Studio Code

- Xây dāng đ°ợc cÃu trúc Website

- Lập kÁ ho¿ch cho bá Web

- Xây dāng đ°ợc trang web đ¡n giÁn

2 Nßi dung bài:

2.1 Giái thiáu

Visual Studio Code là mát trình biên tập code đ°ợc phát trián bçi Microsoft dành cho Windows, Linux và macOS Nó hß trợ chức năng debug, đi kèm vãi Git, có syntax highlighting, tā hoàn thành code thông minh, snippets, và cÁi tiÁn mã nguãn

Hầu hÁt các lập trình viên Frontend đßu ứng dÿng trình so¿n thÁo mã nguãn

mç miãn phí này cho viåc viÁt code JavaScript, HTML hoặc CSS Ngoài ra, trên thāc

tÁ, cũng có không ít các lập trình viên Backend dùng VS Code đá viÁt mã Scala

Vãi VS Code, viåc viÁt mọi lo¿i code trç nên đ¡n giÁn và thuận tiån h¡n rÃt nhißu Ngoài ra, nhÿng ai đang làm công viåc kiám thử phần mßm hay quÁn lý dÿ liåu cũng có thá sử dÿng trình so¿n thÁo này

¯u điám cāa Visual Studio Code:

- Cài đặt nhanh

- Khçi đáng ch°¡ng trình nhanh

- Thao tác file và th° mÿc trên trình so¿n thÁo code dã dàng

- Giao diån đ¡n giÁn, dã sử dÿng

- Sá l°ợng các tiån ích mç ráng phong phú dành cho nhißu ngôn ngÿ khác nhau

- Đ°ợc t¿o ra bçi tập đoàn Microsoft và hoàn toàn MIâN PHÍ

2.2 Giao diån màn hình

Các b°ãc cài đặt VS Code:

- B°ãc 1: TÁi phần mßm VS Code

Link: https://code.visualstudio.com/

- B°ãc 2: NhÃn vào file vừa tÁi đá cài đặt

File vừa tÁi xuáng th°ång nằm ç trong th° mÿc download

- B°ãc 3: Khçi đáng phần mßm và sử dÿng

2.3 Lập kÁ ho¿ch cho bá Web

BÁng kÁ ho¿ch thiÁt kÁ website là viåc làm không thá thiÁu trong quy trình thiÁt kÁ bÃt kỳ mát website nào, dù là website nhß hay website lãn Có bÁng kÁ ho¿ch chi tiÁt, đầy đā s¿ giúp cho khách hàng và bên dịch vÿ thiÁt kÁ theo sát và nắm đ°ợc nhÿng công viåc mình cần phÁi làm, đÁm bÁo tiÁn đá công viåc

Khi lập kÁ ho¿ch xây dāng trang web cần phÁi trÁ låi các câu hßi sau:

- WHO? Đái t°ợng mÿc tiêu cāa trang web cāa b¿n là ai? Nghiên cứu công chúng cāa b¿n Xem nhÿng gì họ thích? Ngãi xuáng và viÁt các đái t°ợng trên giÃy Khi b¿n đã có danh sách, hãy nghiên cứu sç thích, kỹ năng, giá trị và kiÁn thức cāa họ

- WHAT? Mÿc đích cāa trang web cāa b¿n là gì? Đá giáo dÿc, đá giÁi trí, cung cÃp sÁn ph¿m hoặc dịch vÿ, đá cung cÃp thông tin hay thu thập thông tin ng°åi dùng? Khi lập kÁ ho¿ch phát trián trang web, hãy nhã rằng mßi trang phÁi có

ít nhÃt mát mÿc tiêu Và nhÿng mÿc tiêu này phÿc vÿ cho mÿc đích cāa trang web NÁu b¿n ch°a quen vãi đißu này, b¿n nên tham khÁo cách làm từ các trang web hàng đầu cùng ngành khác

- WHEN? Khi nào b¿n muán bắt đầu? Lịch cập nhật website: hàng ngày, hàng tuần, hai lần mát tháng hoặc hàng tháng

- WHERE? B¿n s¿ đặt trang web cāa mình ç đâu? Tùy thuác vào khÁ năng và yêu cầu cāa cá nhân mà chọn mát nhà cung cÃp dịch vÿ l°u trÿ tát nhÃt

- Why? T¿i sao b¿n muán có mát trang web? L°u trÿ thông tin cāa b¿n bè, gia đình hoặc tìm đái tác phÿc vÿ cho sç thích cāa b¿n hoặc nh° mát hình Ánh cāa doanh nghiåp

- HOW? Làm thÁ nào đá t¿o mát trang web? Làm thÁ nào đá lập kÁ ho¿ch nái dung cāa trang web? Hãy nhã rằng nái dung trên trang web s¿ làm nên thành công hay thÃt b¿i cāa trang web

Khi thiÁt kÁ mát trang web, cần l°u ý mát sá nguyên tắc sau đây:

- Trang web nên có mát mÿc đích hay đúng h¡n là mßi trang phÁi có mát mÿc đích

- Website phÁi có tác đá tÁi nhanh

- Đã họa trên trang web phÁi đ°ợc thiÁt kÁ ç mức tái thiáu đá đÁm bÁo tác đá load đ°ợc tái °u

- Sử dÿng tiêu đß thông minh và mßi trang phÁi có các liên kÁt hÿu ích

- Sử dÿng cùng mát màu nßn cho toàn bá website (phổ biÁn nhÃt hiån nay là màu trắng)

- Sử dÿng cùng mát màu cho văn bÁn trên trang web cāa b¿n (màu đen phổ biÁn)

- Sử dÿng cùng mát cỡ chÿ và màu chÿ cho các chā đß khác nhau,

- ThiÁt lập mát sá quy tắc cho trang web

- Luôn giÿ cho website đ¡n giÁn và tinh tÁ

- Sử dÿng các nguyên tắc trên cho mọi trang trên trang web

- Liên kÁt: Mÿc đích thāc sā cāa mát trang web là t¿o ra các trang có thá liên kÁt Bao gãm các tåp, tài liåu, hình Ánh, phim hoặc âm thanh T¿o liên kÁt bên ngoài và bên trong trang web

- Hình Ánh: Chọn hình Ánh c¿n thận vì chúng Ánh h°çng trāc tiÁp đÁn tác đá tÁi trang

- Âm thanh: Nhißu chuyên gia khuyên không nên sử dÿng âm thanh cho trang web Nh°ng nh° mát xu h°ãng cāa thåi đ¿i cáng vãi các ph°¡ng tiån truyßn thông ngày nay thì không có lý do gì đá nó không trç thành mát phần cāa trang web

- Logo, banner, chân trang, tiêu đß và button: Đá có thá đãng bá hóa giÿa các yÁu tá này, chúng cần phÁi giáng nhau hoặc cùng mát phong cách trên mọi trang trên website Tiêu đß là dòng đầu tiên cāa bài viÁt, chân trang cần có mát

sá thông tin quan trọng nh°:

- URL trang web,

- Liên kÁt đÁn trang mà khách truy cập có thá liên hå

- Đißu h°ãng: ThiÁt kÁ trang web có nghĩa là t¿o ra các danh mÿc chính cāa trang web, các danh mÿc chính này cần giúp ng°åi truy cập dã dàng hình dung

vß sá l°ợng chā đß mà trang web bao trùm Luôn có chức năng cho phép khách quay trç l¿i đầu trang, cho phép khách nhanh chóng thay đổi chā đß, khu vāc cāa trang web cần hián thị rõ ràng &

- PhÁn hãi: Sá l°ợng phÁn hãi nói lên sā quan tâm cāa khách truy cập vào trang web Cung cÃp cho khách truy cập cāa b¿n các tính năng cho phép họ viÁt nhận xét và phÁn hãi vß thông tin họ quan tâm Tái thiáu, trang web phÁi có địa chỉ email cāa b¿n đá khách truy cập có thá cung cÃp cho b¿n các đß xuÃt, nhận xét và ý kiÁn Cần đÁm bÁo rằng các thông tin này xuÃt hiån trên mßi trang

2.4 CÃu trúc bß Web

Xây dāng cÃu trúc cây th° mÿc cho website

2.5 Đßnh nghĩa Website

2.6 Xây dāng trang Web

Phác thÁo ý t°çng website tin tức trong ngày

Bài tập

1 Phát biáu nào sau đây đúng vß Internet?

a Internet là mát trình duyåt web

b Internet là mát dịch vÿ trang tin điån tử

c Internet là tập hợp các máy tính và thiÁt bị dùng chung nguãn điån

d Internet là hå tháng m¿ng gãm các m¿ng thông tin máy tính, đ°ợc liên kÁt vãi nhau trên ph¿m vi toàn cầu

2 Dịch vÿ nào sau đây là tiån ích cāa internet ?

5 Thuật ngÿ URL dùng đá mô tÁ?

a Địa chỉ cāa mát tài nguyên trên Internet

b Địa chỉ IP cāa mát máy tính

c Địa chỉ cāa mát th° điån tử

7 Trình duyåt web (browser) là?

a Mát phần mßm ứng dÿng cho phép ng°åi sử dÿng xem và t°¡ng tác vãi nái dung cāa trang web

b Mát phần mßm so¿n thÁo văn bÁn

c Mát phần mßm giúp ng°åi sử dÿng t¿o ra trang web

d Mát công cÿ đá thiÁt kÁ giao diån trang web

8 Phát biáu nào d°ãi đây là đúng?

a Mát trang web có thá hián thị khác nhau trên các trình duyåt khác nhau

b Mát trình duyåt web chỉ mç đ°ợc mát cửa sổ duyåt web

c Mát địa chỉ web chỉ đ°ợc mç bằng mát trình duyåt web cá định

d Mßi máy tính chỉ đ°ợc cài đặt mát trình duyåt web

9 Đá xem nái dung các trang web ta dùng công cÿ nào sau đây?

a Địa chỉ mát trang web

b Địa chỉ IP cāa mát máy tính

c Địa chỉ mát email

d mát dịch vÿ cāa Internet

13 Đâu là mát dÃu hiåu đá nhận biÁt mát website đ°ợc bÁo mật?

a URL bắt đầu vãi http://

b Trên thanh địa chỉ có biáu t°ợng cāa c¡ quan, tổ chức sç hÿu trang web

c URL bắt đầu vãi https://

d URL đ°ợc mã hóa

14 Siêu liên kÁt (hyperlink) là?

a Mát phần văn bÁn hay hình Ánh thá hiån đ°ång dÁn đÁn trang web khác hoặc phần khác cāa trang

b Mát d¿ng dÿ liåu đa ph°¡ng tiån

c Mát lo¿i đ°ång truyßn Internet

15 Website là?

a Mát tập các trang web, th°ång chỉ nằm trong mát tên mißn hoặc tên mißn phÿ trên World Wide Web cāa Internet

b Là mát không gian thông tin toàn cầu mà mọi ng°åi có thá truy nhập (đọc và

viÁt) qua các máy tính nái m¿ng Internet

c Mát tập tin HTML hoặc XHTML có thá truy nhập dùng giao thức HTTP

16 Trang web chā (Homepage) là?

a Trang đầu tiên cāa mát website, đ°ợc máy chā gọi ra đầu tiên khi truy cập vào địa chỉ mát website

b Trang cung cÃp thông tin liên hå vãi chā sç hÿu website

c Trang web chứa thông tin vß nhà cung cÃp trình duyåt web

17 Mát URL th°ång bao gãm các thành phần nào sau đây?

a Tên cāa giao thức

b Tên mißn trang web

c Đ°ång dÁn trß đÁn th° mÿc, tåp tin hoặc mát tài nguyên trên máy chā

d TÃt cÁ các ph°¡ng án

18 http://www.google.com.vn là?

a Là trang web cung cÃp các lo¿i thông tin trên Internet

b Là mát máy chā cung cÃp thông tin d¿ng Web

c Là máy chā cung cÃp dịch vÿ tìm kiÁm thông tin và các dịch vÿ hß trợ ng°åi dùng

19 Khi tham gia vào cáng đãng Áo và các ho¿t đáng trāc tuyÁn?

a Luôn đÁm bÁo an toàn vì các giao dịch và thông tin đ°ợc thāc hiån trên m¿ng Áo

b Luôn đÁm bÁo bí mật vì thông tin cá nhân đ°ợc mã hóa bçi các công cÿ trāc tuyÁn

c Có nhißu nguy c¡ rāi ro nh° lá thông tin cá nhân, bị lợi dÿng thông tin cá nhân, mÃt mát thông tin, &

20 Phát biáu nào sai khi nói vß máy tìm kiÁm?

a Các máy tìm kiÁm khác nhau luôn trÁ vß kÁt quÁ giáng nhau cho cùng mát từ khóa

b Cho phép tìm kiÁm các thông tin trên Internet theo yêu cầu cāa ng°åi dùng

c Các máy tìm kiÁm th°ång l°u trÿ thông tin vß các website trên Internet

Bài 3 Ngôn ngÿ HTML

1 Māc tiêu:

- Trình bày đ°ợc cú pháp các th¿ c¡ bÁn trong HTML;

- Hiáu đ°ợc cách thức định d¿ng Web;

- Sử dÿng đ°ợc các th¿ HTML trong thiÁt kÁt trang web;

- Xây dāng trang web đ¡n giÁn bằng HTML

2 Nßi dung bài:

2.1 Giái thiáu ngôn ngÿ HTML

HTML viÁt tắt cāa Hypertext Markup Language là ngôn ngÿ lập trình dùng đá xây dāng và cÃu trúc l¿i các thành phần có trong Website

- HTML t¿m dịch là ngôn ngÿ đánh dÃu siêu văn bÁn Ng°åi ta th°ång sử dÿng HTML trong viåc phân chia các đo¿n văn, heading, links, blockquotes,&

- HTML đ°ợc sử dÿng đá t¿o bá cÿc, cÃu trúc trang web HTML mát sá °u điám sau:

- Có nhißu tài nguyên hß trợ vãi cáng đãng ng°åi dùng vô cùng lãn

- Có thá ho¿t đáng m°ợt mà trên hầu hÁt mọi trình duyåt hiån nay

- Học HTML khá đ¡n giÁn

- Các markup sử dÿng trong HTML th°ång ngắn gọn, có đá đãng nhÃt cao

- Sử dÿng mã nguãn mç, hoàn toàn miãn phí

- HTML là chu¿n web đ°ợc vận hành bçi W3C

- Dã dàng đá tích hợp vãi các lo¿i ngôn ngÿ backend (ví dÿ nh°: PHP, Node.js,&)

Bên c¿nh °u điám, HTML cũng có các nh°ợc điám nhÃt định nh° sau:

- Chỉ đ°ợc áp dÿng chā yÁu cho web tĩnh NÁu muán t¿o các tính năng đáng, lập trình viên phÁi dùng thêm JavaScript hoặc ngôn ngÿ backend cāa bên thứ

3 (ví dÿ nh°: PHP)

- Mßi trang HTML cần đ°ợc t¿o riêng biåt, ngay có khi có nhißu yÁu tá trùng lặp nh° header, footer

- Khó đá kiám soát cách đọc và hián thị file HTML cāa trình duyåt (ví dÿ, mát

sá trình duyåt cũ không render đ°ợc tag mãi Do đó, dù trong HTML document có sử dÿng các tag này thì trình duyåt cũng không đọc đ°ợc)

- Mát vài trình duyåt còn chậm cập nhật đá hß trợ tính năng mãi cāa HTML

2.2 CÃu trúc trang Web

Mát Website th°ång chứa nhißu trang con và mßi trang con này l¿i có mát tập tin HTML riêng L°u ý, HTML không phÁi là ngôn ngÿ lập trình Đißu này có nghĩa

là nó không thá thāc hiån các chức năng <đáng= Hiáu mát cách đ¡n giÁn h¡n, cũng t°¡ng tā nh° phần mßm Microsoft Word, HTML chỉ có tác dÿng bá cÿc và định d¿ng trang web HTML khi kÁt hợp vãi CSS và JavaScript s¿ trç thành mát nßn tÁng vÿng chắc cho thÁ giãi m¿ng

CÃu t¿o cāa website s¿ gãm 3 thành phần chính đó là: Hosting, domain và source code Đái vãi website chúng ta cần 1 n¡i đá đặt nßn móng, đá l°u trÿ dÿ liåu

và xây dāng website gọi là hosting, nguyên vật liåu đá xây dāng chính là phần mã nguãn cāa website gọi là source code; và cuái cùng là 1 địa chỉ đá khách hàng có thá truy cập vào website cāa mình gọi là Domain

Hosting là không gian dùng đá l°u trÿ các dÿ liåu cāa website nh°: âm thanh, hình Ánh, video&.Hosting th°ång đ°ợc cung cÃp bçi các công ty đ°ợc đặt ç khắp n¡i trên thÁ giãi Hosting có thá hiáu là mát máy chā vật lý hay 1 sever có nhiåm vÿ

l°u trÿ toàn bá dÿ liåu trên website cāa b¿n và đÁm bÁo cho nó ho¿t đáng xuyên suát

và không bị gián đo¿n trong quá trình khách hàng hay b¿n truy cập vào website

Domain là tên mißn cāa website chính là địa chỉ đá khách hàng truy cập vào

Ví dÿ website cāa mình có domain là xuanmkt.com Khi khách hàng muán truy cập vào website cāa b¿n thì phÁi cần có 1 cái tên, 1 địa chỉ Đó chính là domain

Source code chính là phần mã nguãn do các lập trình viên viÁt ra, nó chính là phần khung x°¡ng t¿o nên website Phần này có thá đ°ợc viÁt bằng các ngôn ngÿ nh°: html, css, js, php&vv

2.3 CÃu trúc thẻ HTML

Các trang HTML đ°ợc quy định bằng các th¿ tag Nhÿng th¿ này đ°ợc chứa trong các dÃu ngoặc đ¡n d¿ng: <tên th¿> Trừ mát vài th¿ đặc biåt, hầu hÁt các th¿ c¡ bÁn đßu có các th¿ đóng t°¡ng ứng vãi nó Ví dÿ, th¿ <html> có th¿ đóng t°¡ng ứng

là </html>, th¿ <body> có th¿ đóng t°¡ng ứng là </body> & D°ãi đây là các mÁu th¿ tag b¿n th°ång gặp trong HTML

Các thuật ngÿ HTML phổ biÁn:

- Elements: Là các chỉ định xác định nái dung, cÃu trúc cāa các đái t°ợng trong mát Website Tên Element đ°ợc bao quang, xác định bằng dÃu ngoặc < > Nhÿng yÁu tá đ°ợc sử dÿng phổ biÁn là đo¿n văn ( <p>), các cÃp đá tiêu đß (từ <h1> đÁn <h6>), danh sách tiÁp tÿc bao gãm <a>, <div>, <span>,

<strong>, và <em>,&

- Tags: Mát Element đ°ợc bao quanh bçi các dÃu ngoặc < > s¿ t¿o ra các th¿

Ví dÿ th¿ mç là dÃu hiåu cho b¿n biÁt sā bắt đầu cāa mát Element (ví dÿ:

<div>) Th¿ đóng s¿ đánh dÃu vào cuái cāa mát Element, có hình thức là dÃu ngặc nhß + dÃu chéo + dÃu ngoặc lãn (ví dÿ: </div>) æ giÿa th¿ mç và th¿ đóng là nái dung cāa Element

- Attributes: Là thuác tính sử dÿng đá cung cÃp thông tin bổ sung vß mát Element Các Attributes bao gãm tên và giá trị, đ°ợc xác định sau tên cāa mát thành phần và trong th¿ mç Attributes có định d¿ng nh° sau: tên thuác tính + dÃu bằng + giá trị thuác tính đ°ợc trích dÁn Ví dÿ Element <a> gãm mát

Attribute href: <a href==http://shayhowe.com/=>Shay Howe</a> Mát sá thuác tính mà tôi th°ång dùng là Attribute Class, ID, SRC, thuác tính href,&

Thẻ khối <span>, <div>

Có nhÿng tr°ång hợp chúng ta muán chia văn bÁn trong mát trang web thành nhÿng khái thông tin logic khi đó phần tử div và span đ°ợc sử dÿng đá nhóm nái dung l¿i vãi nhau Th¿ div rÃt th°ång đ°ợc sử dÿng trong thiÁt kÁ layout website

Phần tử div dùng đá chia tài liåu thành các thành phần có liên quan vãi nhau Phần tử span dùng đá định nghĩa nái dung trong dòng(in-line) còn phần tử div dùng

đá định nghĩa nái dung mức khái (block-level)

Danh sách có thứ tự

Danh sách có thứ tā nằm trong cặp th¿ <ol>&</ol> Danh sách có thứ tā cũng hián thị các mÿc danh sách Sā khác nhau là các mÿc danh sách hián thị theo thứ tā đ°ợc t¿o ra mát cách tā đáng

Thẻ đường ngang <hr>

Th¿ <hr>(horizontal rule) đ°ợc dùng đá k¿ mát đ°ång ngang trên trang Nó chỉ có th¿ bắt đầu, không có th¿ kÁt thúc và không có nái dung

Sử dụng font

Th¿ <FONT> dùng đá đißu khián sā hián thị văn bÁn trên trang web Chúng

ta cũng có thá chỉ định các thuác tính nh° kích th°ãc, màu sắc, kiáu&

Chúng ta có thá đặt các thuác tính <FONT> cho cÁ tài liåu bằng cách đặt phần

tử vào bên trong th¿ <BODY> Ngoài ra, thuác tính FONT có thá đặt cho từng từ, từng block trong trang

COLOR

Được dùng để chỉ màu của font

giá trị thập phân để xác định màu

SIZE

Được dùng để chỉ kích thước của font Chúng ta có thể xác định các kích thước FONT từ 1 cho đến 7 Kích thước lớn nhất là 7 và nhỏ nhất

là 1 Chúng ta có thể dùng một kích thước chuẩn và chỉ ra những kích thước tiếp theo liên quan đến kích thước chuẩn Ví dụ, nếu kích thước chính là 3, thì

SIZE=+4 sẽ tăng lên 7 SIZE=-1 sẽ giảm xuống 2 FACE

Được dùng để chỉ định kiểu font (phông chữ)

Các thuác tính cāa FONT có thá kÁt hợp trong cùng mát th¿

Sử dụng màu sắc

Chúng ta có thá thêm màu vào trang và vào các phần tử trong trang COLOR

là thuác tính có thá đ°ợc sử dÿng vãi nhißu phần tử nh° phần tử FONT và BODY

Layout có thá hiáu là cách mà chúng ta bá trí các thành phần chính trên mát trang web

Trong viåc thiÁt kÁ Layout, th¿ <div> th°ång đ°ợc dùng đá phân chia các thành phần chính cāa trang web KÁt hợp vãi thuác tính định d¿ng CSS, ta có thá thiÁt

kÁ đ°ợc Layout nh° ý

- Header: Tiêu đß cāa trang web, th°ång thì đây là chß cāa logo website

- Navigation Menu: Đây là phần menu đißu h°ãng, giúp cho ng°åi đọc có thá truy cập vào các phần khác nhau cāa trang web

- Content: Đây là phần chứa nái dung chính cāa trang web, cũng có thá là n¡i hián thị quÁng cáo cāa website (th°ång thì nằm ç hai bên website và ç giÿa là nái dung bài viÁt)

- Footer: Đây là phần cuái cāa website, th°ång là n¡i chứa tên cāa cá nhân hoặc

tổ chức sç hÿu website và cũng là n¡i chứa thông tin bÁn quyßn Mát sá website có thá cho vào navigation link ví dÿ nh° About, Contact, Help vân vân mây mây 2.6 Định d¿ng văn bÁn

2.7 Hình Ánh

Cú pháp chèn Ánh trong HTML

Trong HTML, Ánh đ°ợc định nghĩa vãi th¿ <img>

Th¿ <img> là tráng, nó chỉ chứa các thuác tính, và không có th¿ đóng

<img src=<url< alt=<some_text< height= <= width= <=>

Src là thuác tính chứa đ°ång dÁn trß đÁn file hình Có nhißu lo¿i hình khác nhau nh° png, jpg, gif, và tÃt cÁ đßu có thá hián thị đ°ợc trên website Riêng đái

vãi giá trị cāa URL phÁi ç mát trong hai d¿ng đó là URL kèm domain hoặc URL ç ngay th° mÿc hiån t¿i

Alt là thuác tính alt định nghĩa mát văn bÁn thay thÁ cho hình Ánh, nÁu hình Ánh không thá hiån thị đ°ợc

Thuác tính alt cung cÃp thông tin thay thÁ cho mát hình Ánh, nÁu mát ng°åi vì

lí do nào đó không thá xem nó (vì kÁt nái m¿ng chậm, hoặc lßi trong thuác tính src, hoặc nÁu ng°åi dùng sử dÿng mát trình đọc màn hình)

Width và Height là thuác tính thiÁt lập chißu ráng (width) và chißu cao (height) cho hình Ánh

2.8 Liên k¿t

Liên kÁt đ°ợc tìm thÃy trong hầu hÁt các trang web Liên kÁt cho phép ng°åi

sử dÿng kích chuát đá di chuyán từ trang này đÁn trang khác

Trong HTML, liên kÁt đ°ợc xác định bçi cặp th¿ <a> :

<a href=<url<>text hián thị</a>

2.9 BÁng biáu

Cách t¿o bÁng:

- B°ãc 1: Dùng cặp th¿ <table></table> đá t¿o mát cái bÁng

- B°ãc 2: Dùng cặp th¿ <tr></tr> đá t¿o hàng cho bÁng (mát cặp th¿ <tr></tr> t°¡ng ứng vãi mát hàng)

- B°ãc 3: Đặt cặp th¿ <td></td> vào bên trong cặp th¿ <tr></tr> đá t¿o ô cho hàng (mát cặp th¿ <td></td> t°¡ng ứng vãi mát ô) Cuái cùng, thêm thuác tính border vãi giá trị 1px vào bên trong th¿ <table> đá t¿o đ°ång vißn cho bÁng

Th¿ caption đ°ợc sử dÿng đá định nghĩa bÁng, th¿ này chỉ đ°ợc sử dÿng

ngay sau th¿ table NÁu muán dùng hàng đầu tiên làm hàng tiêu đß (chÿ đ°ợc tô

đậm và đặt ç giÿa), thì thay vì dùng cặp th¿ <td></td> đổi l¿i b¿n dùng cặp th¿

<th></th>

Thuác tính colspan

Thuác tính rowspan

Bài tập:

ThiÁt kÁ bài tập theo mÁu:

Bài 4 CSS – CASCADING STYLE SHEET

1 Māc tiêu:

- Trình bày đ°ợc cú pháp khai báo CSS;

- T¿o mãi và liên kÁt trang CSS bằng bÁng CSS style;

- Liên kÁt đ°ợc tập tin CSS vào trang web;

- Hiáu đ°ợc cách bá cÿc trang web bằng CSS

2 Nßi dung bài:

2.1 Giái thiáu CSS

CSS là viÁt tắt cāa Cascading Style Sheets, mát ngôn ngÿ thiÁt kÁ đ¡n giÁn,

xử lý mát phần giao diån cāa trang web CSS mô tÁ cách các phần tử HTML hián thị trên màn hình và các ph°¡ng tiån khác

2.2 T¿o CSS

Có 3 cách đá thêm tập tin định d¿ng cho văn bÁn HTML

Tập tin định d¿ng ngoài – External CSS

Vãi mát style sheet ngoài, b¿n có thay đổi diån m¿o cāa cÁ website mà chỉ cần thay đổi mát tập tin duy nhÃt, Mßi trang s¿ có tham chiÁu tãi tập tin ngoài này trong phần tử <link> nằm trong phần <head>

Tập tin định d¿ng nái bá - Internal CSS

Nên dùng tập tin này khi mßi trang có mát kiáu định d¿ng khác nhau, đ°ợc định nghĩa bằng phần tử <style> và nằm trong phần <head> cāa trang HTML

Định d¿ng nái dòng – Inline CSS

Nên dùng kiáu định d¿ng này nÁu áp dÿng mát kiáu định d¿ng riêng cho mát phần tử riêng Đá áp dÿng, thêm thuác tính style cho phần tử liên quan, thuác tính style có thá chứa đặc tính CSS Ví dÿ d°ãi đây cho thÃy cách thay đổi màu sắc và căn

lß cho phần tử <h1>

- Inline: mã CSS viÁt t¿i thuác tính style cāa phần tử HTML

- Internal: mã CSS trong chính văn bÁn HTML, nằm trong khái th¿ <style>

- External: mã CSS ç mát file riêng biåt sau đó n¿p vào HTML bằng phần tử

- Nhúng CSS d¿ng External - th¿ link tÁi file CSS: cách này các mã CSS b¿n viÁt tập trung vào mát file đác lập vãi file HTML (th°ång đặt phần mç ráng

là css) sau đó dùng th¿ link đặt ç phần head đá n¿p vào theo cú pháp, ví dÿ file ngoài là demo.css

2.5 T¿o mái và liên k¿t trang, hiáu chỉnh, xóa style b¿ng bÁng CSS style

Th¿ a đóng vai trò rÃt quan trọng vì nhiåm vÿ cāa nó là giúp chuyán trang giÿa các file trong hå tháng website Không nhÿng vậy mà bên SEO nó cũng có tác dÿng chuyán h°ãng trang đá các công cÿ tìm kiÁm có thá lọc toàn bá website

Mßi website s¿ có nhißu th¿ a, muán bắt mắt vãi ng°åi dùng thì buác phÁi style cho nó nh° xác định chißu cao, đá lãn chÿ, màu sắc, hover,

Chọn màu sắc cho th¿ a: mặc định th¿ a nó có màu tím tím nên đá chọn màu sắc thì b¿n s¿ nhã đÁn thuác tính color và selector cāa th¿ a thì chính là tên cāa nó luôn a

Tắt g¿ch chân th¿ a vãi text-decoration: thông th°ång khi b¿n t¿o th¿ a thì theo mặc định nó có g¿ch chân nên đá tắt g¿ch chân thì sử dÿng thuác tính text-decoration:none

Chọn background cho th¿ a: cũng t°¡ng tā các phần trên ta s¿ sử dÿng mát thuác tính chuyên vß CSS background đó là background

Style các sự kiện (hover, visited, active, link)

Các sā kiån này xay ra khi chúng ta dùng chuát thao tác lên nó

- hover: Khi b¿n hover chuát qua nó s¿ có tác dÿng

- visited: khi ¿n click vào the a thì tr¿ng thái cāa th¿ a đó là visited

- active: Khi ¿n click vào th¿ a nh°ng nhÃn giÿ chuát

- link: th¿ a nào b¿n ch°a click lần nào thì nó s¿ có tác dÿng

Các sā kiån cāa th¿ a s¿ có quy tắc CSS selector nh° sau:

Bài tập:

Hoàn thành bài theo mÁu

Hình 1

Hình 2