BÞ XÂY DĂNG TR¯âNG CAO ĐÀNG XÂY DĂNG SÞ 1 GIÁO TRÌNH MÔN HàC: THI¾T K¾ WEBSITE NGÀNH: CÔNG NGHÞ THÔNG TIN ĀNG DĀNG PHÄN MÀM TRÌNH Đà: CAO ĐÀNG Ban hành kèm theo Quyết định số: 368ĐT/QĐ-CĐXD1 ngày 10 tháng 8 năm 2021 của Hiệu trưởng Trường Cao đẳng Xây dựng số 1 Hà Nßi, năm 2021 TUYÊN BÞ BÀN QUYÀN Tài liÉu này thuác lo¿i sách giáo trình nên các ngußn thông tin có thÅ đ°ÿc phép dùng nguyên bÁn hoặc trích dùng cho các māc đích và đào t¿o và tham khÁo. Mãi māc đích khác mang tính lÉch l¿c hoặc sā dāng vãi māc đích kinh doanh thiÁu lành m¿nh s¿ bá nghiêm cÃm. LâI NÓI ĐÄU Giáo trình THIÀT KÀ WEBSITE đ°ÿc biên so¿n nh¿m phāc vā cho giÁng d¿y và hãc tÁp cho trình đá Trung cÃp ngành Công nghÉ Thông tin āng dāng phÅn mÃm ç tr°ång Cao đÁng Xây dąng sá 1. THIÀT KÀ WEBSITE là môn hãc chuyên ngành nh¿m cung cÃp các kiÁn thāc và công nghÉ thông tin, kỹ nng thiÁt kÁ, xây dąng mát giao diÉn trang web c¢ bÁn.
Giáo trình THIÀT KÀ WEBSITE do bá môn Tin c¢ sç gßm: THS.Đß Thá Xuân Thắm làm chÿ biên đã và đang giÁng d¿y trąc tiÁp trong bá môn cùng tham gia biên so¿n. Giáo trình này đ°ÿc viÁt theo đà c°¢ng môn hãc thiÁt kÁ web, tuân thÿ theo các quy tắc tháng nhÃt. Ngoài ra giáo trình còn bá sung thêm mát sá kiÁn thāc mà trong các giáo trình tr°ãc ch°a đà cÁp tãi. Nội dung gồm 4 chương sau: Ch°¢ng 1.
Ngôn ngă HTML Ch°¢ng 2. Giãi thiêu CSS Ch°¢ng 3. JavaScript và Document Object Model (DOM) Ch°¢ng 4. Bootstrap CSS Trong quá trình biên soạn, nhóm giảng viên Bộ môn Tin cơ sở của Trường Cao đẳng Xây dựng Số 1 - Bộ Xây dựng, đã được sự động viên quan tâm và góp ý của các đồng chí lãnh đạo, các đồng nghiệp trong và ngoài trường.
Mặc dù có nhiều cố gắng, nhưng trong quá trình biên soạn, biên tập và in ấn khó tránh khỏi những thiếu sót. Chúng tôi xin được lượng thứ và tiếp thu những ý kiến đóng góp. Trân trọng cảm ơn! Hà Nái, ngày&&tháng&&nm&&& Tham gia biên so¿n 1. Đß Thá Xuân Thắm - Chÿ biên MĀC LĀC Ch°¢ng 1: NGÔN NGĂ HTML.
Giãi thiÉu HTML. Giãi thiÉu HTML. Các công cā t¿o trang web. CÃu trúc cÿa mát trang web .2 CÃu trúc mát trang web và thÁ HTML .1 CÃu trúc chung mát trang HTML .2 CÃu trúc c¢ bÁn cÿa mát trang Web .3 CÃu trúc cÿa thÁ HTML .4 Đ¢n vá trong HTML và CSS .1 Các thÁ tiêu đà heading (h) .3 ThÁ pre trong HTML .4 ThÁ liên kÁt a và đáa chß t°¢ng đái – tuyÉt đái và các lo¿i liên kÁt .5 ThÁ chèn hình Ánh IMG .6 ThÁ danh sách tuÅn tą (ol) và bÃt tuÅn tą (ul) trong HTML .9 ThÁ div, span và phân lo¿i các kiÅu thÁ trong html .16 Bài 4: Sÿ dāng form lo¿i thẻ Radio button.
GIâI THIÈU CSS. Giãi thiÉu CSS. Các cách sā dāng CSS trong trang web .1 Đánh nghĩa bá chãn HTML (HTML Seclector) .3 Bá chãn đánh danh (ID Seclector) .4 Bá chãn cho liên kÁt. Mát sá thuác tính CSS c¢ bÁn .1 Thuác Tính Cho Vn BÁn Text .2 Thuác tính border (đ°ång viÃn) .3 Thuác tính cho toàn khái vn bÁn .4 Đánh nghĩa thuác tính khái .5 Thuác tính danh sách .6 Thuác tính hiÉu āng .7 Thuác tính position và z-index trong css .8 Thuác tính flexbox.3 Text-shadow: đá bóng cho chă.
T¿o bá cāc (layout) cho trang web. Mô hình khung (box model). Mát sá l°u ý khi viÁt CSS .61 Bài tÁp ch°¢ng 4. JavaScript và Document Object Model (DOM).
Giãi thiÉu JavaScript .2 Các cách sā dāng JavaScript trong trang web.3 Ngôn ngă JavaScript .4 LÁp trình h°ãng đái t°ÿng trong JavaScript. Mô hình đái t°ÿng vn bÁn (DOM) .1 Khái niÉm Dom .2 Phân lo¿i Dom .4 LÃy nái dung trong Dom. Các háp tho¿i hÉ tháng trong JavaScript .1 HiÅn thá thông báoJavascript .5 Time events trong javascript. BiÅu thāc chính qui (regular expression) .76 Bài tÁp ch°¢ng 3 .1 Giãi thiÉu Bootstrap CSS .2 Sā dāng Bootstrap CSS .3 Các thành phÅn cÿa bootstrap CSS .88 CH¯¡NG TRÌNH MÔN HàC Tên môn hác: THI¾T K¾ WEBSITE Mã môn hác: MH20 Thãi gian thăc hißn môn hác: 105 giå; (Lý thuyÁt: 45 giå; Thąc hành, thí nghiÉm, thÁo luÁn, bài tÁp: 56 giå; KiÅm tra: 4 giå) I.
Vß trí, tính chÃt cÿa môn hác: - Vá trí: Môn ThiÁt kÁ và triÅn khai Website vãi mã ngußn mç là môn hãc bắt buác thuác nhóm các mô đun, môn hãc đào t¿o ngành Công nghÉ thông tin. - Tính chÃt: Môn ThiÁt kÁ và triÅn khai Website vãi mã ngußn mç đ°ÿc sā dāng ráng rãi trong các lĩnh vąc cÿa ngành Công nghÉ thông tin. Môn hãc cũng góp phÅn nâng cao chÃt l°ÿng đào t¿o nghà và phát triÅn ngußn nhân ląc trong giai đo¿n mãi. Māc tiêu môn hác: - Và kiÁn thāc: Nắm đ°ÿc mát cách có hÉ tháng các kiÁn thāc c¢ bÁn và thiÁt kÁ và vÁn hành Website; nắm đ°ÿc quy trình thiÁt kÁ Website b¿ng mã ngußn mç WordPress.
- Và kỹ nng: Ng°åi hãc thiÁt kÁ đ°ÿc Website vãi mã ngußn mç WordPress; tìm kiÁm và sā dāng nhăng công cā có sẵn hß trÿ cho viÉc thiÁt kÁ Website. - Và nng 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 môn hác: CH¯¡NG 1: NGÔN NGĀ HTML Māc tiêu: PhÅn mÃm h°ãng d¿n viÁt code Trình bày đ°ÿc cú pháp cÿa HTML CÃu trúc các thÁ HTML Thao tác vãi các thÁ c¢ bÁn trong HTML Thao tác thÁ form, thÁ liên kÁt, thÁ chèn hình Ánh,. Xây dąng đ°ÿc cÃu trúc chung cÿa mát trang web BiÁt cách tá chāc và t¿o các file html Nßi dung ch°¢ng: 1.
Giái thißu HTML 1. Giới thiệu HTML HTML (Hyper Text Markup Language) là ngôn ngă đánh dÃu, thÅ hiÉn b¿ng các tag (gãi là thÁ), nhăng thÁ này giúp cho trình duyÉt đãc đ°ÿc nái dung, có thÅ là text, image, hay video, form,& và sau đó trình duyÉt s¿ hiÅn thá nái dung cho ng°åi dùng xem. HTML có khoÁng h¢n 80 thÁ, mßi thÁ có mát nhiÉm vā riêng, tuy nhiên s¿ có nhăng thÁ sā dāng th°ång xuyên và mát sá thÁ ít khi sā dāng. Tài liÉu HTML t¿o thành mã ngußn mç cÿa trang Web.
Khi đ°ÿc xem trên trình so¿n thÁo , tài liÉu là mát chußi các thÁ các phÅn tā, mà chúng xác đánh trang Web hiÅn thá nh° thÁ nào. Trình duyÉt đãc các file tÿ đuôi .htm và hiÅn thá trang web theo các lÉnh trong đó. HTML không phÁi là ngôn ngă lÁp trình, html là ngôn ngă đánh dÃu (markup language), ngôn ngă đánh dÃu là mát nhóm các thÁ đánh dÃu tag. HTML dùng các thÁ đÅ mô tÁ trang web.
T¿i sao phÁi sÿ dāng HTML khi xây dăng trang Web. HTML là ngôn ngă duy nhÃt trình duyÉt có thÅ hiÅu và biên dách đ°ÿc. Biên dách có nghĩa là gì? Biên dách là chuyÅn mã ngußn thành nhăng mã ngußn mà chúng ta có thÅ nhìn thÃy. TÃt cÁ các trình duyÉt chß có thÅ hiÅu đ°ÿc HTML cho nên dù website xây dąng b¿ng công nghÉ gì đi năa thì đÅu ra v¿n là HTML đÅ đÁm bÁo trình duyÉt có thÅ đãc đ°ÿc.
T¿i sao sā dāng các thÁ HTML? Trình duyÉt có khÁ nng biên dách ngôn ngă HTML. Dù có chãn ngôn ngă nào thì cũng phÁi đ°a và HTML. CÃu trúc mát trang web Ctrl + U hoặc chuát phÁi xem ngußn s¿ thÃy mã ngußn trang. Các công cā t¿o trang web Công cā so¿n thao HTML tát phÁi có trình kiÅm tra chính tÁ, sá dòng, tą đáng hoàn thành, xem tr°ãc trang và công cā so¿n thÁo vn bÁn và hình Ánh.
Có nhiÃu công cā so¿n thÁo: phÅn mÃm NotePad ++, subline text, Visual Studio Code, 1 & Trong bài giÁng này sā dāng công cā Visual Studio Code. TÁi công cā t¿i trang https://code. Thay đái màu nÃn Visual Stadio code: File/ Preference/ Color Theme/ Chãn Light (Visual Stadio). Đái font chă Visual Stadio code: File/ Preference/ Settings/ Chán Font size: 16 CÁC B¯àC KHI CH¾Y FILE CODE B°ác 1: Mở file mái: Ân ctrl + N/ L°u file: tên file.html (luôn luôn có đuôi là .html)/ Trong màn hình so¿n thÁo Visual Stadio code: Giă phím Shift + 1 đÅ ra dÃu chÃm than ! (sā dāng phÅn viÁt code là subline text 3 thì gõ <html rßi Ãn phím Enter.
Ân phím tab trên bàn phím s¿ hiÅn thá ra cÃu trúc cÿa trang web Trong phÅn head sāa nái dung ç thÁ <title>Tên trang web</title> B°ãc 2: Gõ nái dung các thÁ trong phÅn: chú ý các thÁ chß cÅn gõ tên thÁ rßi Ãn Enter s¿ tą đáng ra thÁ đóng cÿa nó. Giăa hai thÁ bao giå cũng là nái dung cÅn hiÅn thá cÿa thÁ. <body> </body> B°ác 3: Gõ xong nái dung code/ l°u file: ctrl + S/ B°ác 4: Vào file đã l°u/NhÃp phÁi chuát chãn mát trình duyÉt web 2 Muán gõ chú thích: Gõ nái dung/ bôi đen dòng vn bÁn muán làm ghi chú/ Ãn phím ctrl + / 1. Cấu trúc của một trang web Mßt tài lißu HTML gßm ba phÅn c¢ bÁn: PhÅn HTML: Mãi tài liÉu HTML phÁi bắt đÅu b¿ng thÁ mç HTML <HTML> và kÁt thúc b¿ng thÁ đóng HTML </HTML>.
PhÅn tiêu đÁ: PhÅn tiêu đà bắt đÅu b¿ng thÁ <head> và kÁt thúc bçi thÁ </head>. PhÅn này chāa tiêu đà mà đ°ÿc hiÅn thá truên thanh điÃu h°ãng cÿa trang web. Tiêu đà n¿m trong thÁ <title> và kÁt thúc b¿ng thÁ </title>. Liên kÁt vãi file css.
PhÅn thân: phÅn này n¿m sau tiêu đÅ. PhÅn thân bắt dÅu b¿ng thÁ <body> và kÁt thúc b¿ng thÁ <body>. PhÅn thân gßm nái dung trang web, hình Ánh các liên kÁt muán hiÅn thá trong trang web. Liên kÁt đÁn file Javascript.
CÃu trúc c¢ bÁn <html> <head> <title> Tiêu đà trang </title> <!-- ThÁ liên kÁt đÁn file css -- > </head> <body> <!-- Chāa tÃt cÁ các thÁ HTML đÅ hiÅn thá nái dung trang web lên trình duyÉt. ThÁ liên kÁt đÁn file Javascript -- > </body> </html> 1.2 Cấu trúc một trang web và thẻ HTML 3 1.1 Cấu trúc chung một trang HTML Mßi trang web đÃu có cách thÅ hiÅn cÃu trúc khác nhau, có trang 1 cát, có trang 2 và có trang có chāa nhiÃu cát. D°ãi đâu là cÃu trúc c¢ bÁn cÿa mát trang web. PhÅn đÅu: Header, có thÅ chwuas logo, câu slogan, các liên kÁt, các banner liên kÁt, các button, đo¿n flash, hoặc các form ngắn nh° form tìm kiÁm,& PhÅn liên k¿t toàn cāc: global navigation, dùng đÅ chwuas các liên kÁt đÁn nhăng trang quan trãng trong toàn bá trang, trong phÅn này có thÅ chāa thêm các liên kÁt con (sub navigation).
PhÅn thân cÿa trang: page body, phÅn này chāa nái dung chính (content) và phÅn nái dung phā (sidebar).