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

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

<b>TR¯âNG CAO ĐÀNG BÁCH KHOA NAM SÀI GỊN </b>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>LâI GIàI THIàU </b>

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 hồn chỉnh. Mơn ThiÁt kÁ web là mơn học chun 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 q 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 q 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 hồ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. &&&&

<b>3. &&&&. </b>

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>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 </b>

<b>Vß trí, tính chÃt, ý nghĩa và vai trị cÿa mơn hác/mơ đun: </b>

- Vị trí: GiÁng d¿y học kỳ 3, mơn học này là mơn chun 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 hồ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:

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

- 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 nng kt hp 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:

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

- Rèn lun lịng 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.

<b>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. </b>

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>2.2. Các dßch vā Internet. </b>

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 ca 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 trun 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".

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

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 sn phm cụng nghồ c to ra bỗi cỏc lp 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ÿ)

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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.

<b>2.4. CÃu trúc l°u trÿ cÿa Website </b>

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 dut đá 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à hồn chỉnh.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

<b>Bài 2: Làm chÿ giao dián Visual Studio Code - quÁn lý website 1. Māc tiêu: </b>

- 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.

<b>2. Nßi dung bài: 2.1. Giái thiáu </b>

Visual Studio Code là mát trình biên tp code c phỏt triỏn bỗi Microsoft dnh cho Windows, Linux và macOS. Nó hß trợ chức năng debug, đi kèm vãi Git, có syntax highlighting, tā hồ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 tho mó nguón mỗ mión phớ ny cho viồc vit 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 vit mi loi code trỗ nờn Ăn gin v thuận tiån h¡n rÃt nhißu. Ngồi ra, nhÿng ai đang làm cơng viåc kiám thử phần mßm hay qn 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

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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

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

File va ti xuỏng thồng nm ỗ trong th mc download

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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

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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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 xng và viÁt các đái t°ợng trên giÃy. Khi b¿n đã có danh sách, hãy nghiờn cu sỗ thớch, k nng, giỏ tr v kin 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? Bn s t trang web ca 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 mn 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 ca bn hoc 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.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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

- Đã họa trên trang web phi c thit k ỗ mc 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 tồ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 trc tip n tỏc ỏ ti trang

- Âm thanh: Nhißu chun gia khun 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 trun thơng ngày nay thì khơng có lý do gì ỏ nú khụng trỗ thnh mỏt phn ca 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å

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

- Đ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. Ln có chức năng cho phép khách quay trỗ li 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.

<b>2.4. CÃu trúc bß Web </b>

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

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>2.5. Đßnh nghĩa Website </b>

2.6. Xây dāng trang Web

Phỏc tho ý tỗng website tin tc trong ngy

<b>Bi tập </b>

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 ? a. Hå tháng th° điån tử (email)

b. Tiån ích trị chun trāc tun (chat) c. Dịch vÿ th°¡ng m¿i trāc tuyÁn d. TÃt cÁ các đáp án trên

3. Đâu là địa chỉ cāa mát trang tìm kiÁm thơng tin trên Internet ?

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

a. b.

c. d. TÃt cÁ các đáp án trên

4. Đá đóng mát trình dut web ta sử dÿng tổ hợp phím nào sau đây? a. Ctrl + W

b. Shift + Del c. Alt + F4 d. Ctrl + F5

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ử d. Nhà cung cÃp dịch vÿ Internet 6. M¿ng Internet là?

a. M¿ng kÁt nái máy tính tồn cầu b. M¿ng kÁt nái máy tính cÿc bá

c. M¿ng kÁt nái các máy tính cāa mát tổ chức d. M¿ng t° nhân

7. Trình dut 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 ca s duyồt web

c. Mỏt a ch web ch c mỗ bng mát trình duyåt web cá định

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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. Internet Explorer

b. Windows Explorer c. Windows Media Player d. TÃt cÁ các đáp án

10. Tên mißn gov.vn đ°ợc dùng cho? a. TÃt cÁ các c¡ quan, tổ chức& b. Các tổ chức phi chính phā

c. Chính phā, các c¡ quan hành chính, tổ chức nhà n°ãc trên lãnh thổ Viåt Nam d. Các đ¡n vị, tổ chức giáo dÿc

11. Đâu khơng phÁi là tên cāa mát trình dut web? a. Mozilla Firefox

b. Google Chrome c. Adobe Flash d. Internet Explorer 12. Thuật ngÿ www, mô tÁ?

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

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.

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

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 tồ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ỗ hu 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

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 tồ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 trc tuyn

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?

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

a. Các máy tìm kiÁm khác nhau ln trÁ vß kÁt q 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 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

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

<b>Bài 3. Ngôn ngÿ HTML. 1. Māc tiêu: </b>

- 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.

<b>2. Nßi dung bài: </b>

<b>2.1. Giái thiáu ngơn ngÿ HTML </b>

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 ngun 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 dng mó nguón mỗ, hon ton mión phớ

- HTML l chun web c vn hnh 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)

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

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

- Khó đá kiám sốt cách đọc và hián thị file HTML cāa trình dut (ví dÿ, mát sá trình dut 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 dut cũng khơng đọc đ°ợc). - Mát vài trình dut cịn chậm cập nhật đá hß trợ tính năng mãi cāa HTML

<b>2.2. CÃu trúc trang Web </b>

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ỗ thnh mỏt nòn tng vng chc 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 cp 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ÿ

</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">

l°u trÿ tồn bá dÿ liåu trên website cāa b¿n và đÁm bÁo cho nó ho¿t đáng xun st 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.

</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">

<b>2.3. CÃu trúc thẻ HTML </b>

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 du ngoặc < > s¿ t¿o ra các th¿. Ví dÿ th mỗ l du hiồu cho bn bit s bt đầu cāa mát Element (ví dÿ: <div>). Th¿ đóng s¿ đánh dÃu vào ci 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>). ổ gia 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 ca mỏt thnh phn v trong th mỗ. Attributes có định d¿ng nh° sau: tên thc 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

</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">

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

</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">

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

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)

</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">

<i>Danh sách không thứ tự </i>

Là lo¿i danh sách đ¡n giÁn nhÃt mà b¿n có thá thêm vào tài liåu HTML. Danh sách không thứ tā là mát <bulleted list=. Các mÿc đ°ợc bắt đầu bằng dÃu chÃm tròn <bullet=. Danh sách không thứ tā đ°ợc nằm trong cặp th¿ <ul>&</ul>. Mßi mÿc trong danh sách đ°ợc đánh dÃu bằng th¿ <li>. li đ°ợc viÁt tắt cāa từ list Item. Th¿ kÁt thúc </li> là tùy chọn (không bắt buác).

<i>Danh sách có thứ tự </i>

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.

<i>Danh sách định nghĩa </i>

Danh sách định nghĩa đ°ợc dùng đá t¿o ra mát danh sách các đißu khoÁn và các định nghĩa cāa chúng. Danh sách định nghĩa nằm trong cặp th¿ <dl>&</dl>. Th¿ <dt> đ°ợc dùng đá chỉ ra đißu khn cịn th¿ <dd> đ°ợc dùng đá chỉ ra định nghĩa cho đißu khn đó.

</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">

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ì

</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">

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 thc tính cāa FONT có thá kÁt hợp trong cùng mát th¿.

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 thc tính định d¿ng CSS, ta có thá thiÁt kÁ đ°ợc Layout nh° ý.

</div><span class="text_page_counter">Trang 29</span><div class="page_container" data-page="29">

- 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 qung cỏo ca website (thồng thỡ nm ỗ hai bờn website v ỗ gia l nỏi dung bi 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ổ chc sỗ hu 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

<b>2.7. Hình Ánh </b>

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 thc 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

</div><span class="text_page_counter">Trang 30</span><div class="page_container" data-page="30">

vói giỏ tr ca URL phi ỗ 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.

Thc 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 thc 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à thc tính thiÁt lập chißu ráng (width) và chißu cao (height) cho hình Ánh.

- 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 ơ). Ci cùng, thêm thc tính border vãi giá trị 1px vào bên trong th¿ <table> đá t¿o đ°ång vißn cho bÁng.

</div><span class="text_page_counter">Trang 31</span><div class="page_container" data-page="31">

<table border="1px"> <tr>

<td>HTML</td> <td>jQuery</td> <td>PHP</td> </tr>

<tr>

<td>CSS</td> <td>Ajax</td> <td>MySQL</td> </tr>

<tr>

<td>Bootstrap 3</td> <td>Angularjs</td> <td>ASP.NET</td> </tr>

</table>

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 ỗ gia), thỡ thay vỡ dựng cp th <td></td> đổi l¿i b¿n dùng cặp th¿ <th></th>

Thuác tính colspan

</div><span class="text_page_counter">Trang 32</span><div class="page_container" data-page="32">

Thuác tính rowspan

<b>Bài tập: </b>

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

</div><span class="text_page_counter">Trang 35</span><div class="page_container" data-page="35">

<b>Bài 4. CSS – CASCADING STYLE SHEET. 1. Māc tiêu: </b>

- 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.

<b>2. Nßi dung bài: 2.1. Giái thiáu CSS </b>

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.

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, thc 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>.

</div><span class="text_page_counter">Trang 36</span><div class="page_container" data-page="36">

<b>2.4. Đßnh nghĩa, áp dāng CSS </b>

- Nhúng CSS vào HTML

- Đá áp dÿng CSS tác dÿng vào các phần HTML có ba cách nhúng CSS: , Internal và External

- 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ử

<link>

- Nhúng CSS d¿ng inline - thuác tính style: cách này là đặt mã CSS vào thẳng thuác tính style cāa phần tử. Mã CSS chỉ tác đáng nên chính phần tử đó. - Nhúng CSS d¿ng Internal - th¿ style: cách này b¿n s¿ dùng th¿ <style>, t¿o ra

khu vāc đá viÁt CSS, b¿n có thá đá bÃt kỳ đâu trong HTML, nh°ng nên đặt trong th¿ <head>

</div><span class="text_page_counter">Trang 37</span><div class="page_container" data-page="37">

- 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 lp vói file HTML (thồng t phn 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

<b>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. </b>

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 chun h°ãng trang đá các cơng cÿ tìm kiÁm có thá lọc tồn bá website.

Mßi website s¿ có nhißu th¿ a, mn bắt mắt vãi ng°åi dùng thì bc 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 thc 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 thc 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.

</div><span class="text_page_counter">Trang 38</span><div class="page_container" data-page="38">

<i>Style các sự kiện (hover, visited, active, link) </i>

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:

</div><span class="text_page_counter">Trang 40</span><div class="page_container" data-page="40">

<b>Bài tập: </b>

Hồn thành bài theo mÁu

Hình 1

Hình 2

</div>