Chương 1: Những khái niệm cơ bản Chương 2: Ngôn ngữ HTML Chương 3: Quy trình xây dựng website 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 3 MĀC LĀC Ch°¢ng 1: NHĀNG KHÁI NIâM C¡ BÀN. Khái quát chung. Xây dăng chiÁn l°ÿc thiÁt kÁ. ThiÁt kÁ giao diãn.
Đặc tính trang Web. ThiÁt kÁ giao diãn. Xây dăng cÃu trúc hã thống Website. Xác đßnh thß lo¿i trang web (tĩnh - đáng).
Ngôn ngā HTML. Các công cā t¿o trang web. CÃu trúc cÿa mát trang web. Đßnh nghĩa thông tin chung cÿa trang web .1 CÃu trúc chung cÿa trang web .2 CÃu trúc cÿa thẻ HTML.
Đßnh nghĩa và đßnh d¿ng các thành phÅn nái dung .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 .7 Thẻ div, span và phân lo¿i các kißu thẻ trong html .8 Giãi thiãu HTML5. Qui trình xây dăng website. Qui trình xây dăng mát website. Mát số vÃn đề cÅn l°u ý khi xây dăng website .51 Bài tÁp tổng hÿp .51 Tài liãu tham khÁo .54 4 CH¯¡NG TRÌNH MÔN HàC Tên môn hác: THI¾T K¾ WEB C¡ BÀN Mã môn hác: MH 22 Thåi gian thăc hißn môn hác: 30 giå; (Lý thuyÁt: 28 giå; Thăc hành, thí nghiãm, thÁo luÁn, bài tÁp: 0 giå; Kißm tra: 2 giå) I.
Vß trí, tính chÃt cÿa môn hác: 1. Vß trí: Môn hác thiÁt kÁ web c¢ bÁn là môn hác bổ sung kiÁn thāc chuyên ngành, môn hác này s¿ đ°ÿc hác sau khi sinh viên đã hác xong môn lÁp trình cn bÁn. Tính chÃt: Môn hác nhằm giúp sinh viên b°ãc đÅu làm quen vãi thiÁt kÁ Web, qui trình đß phân phối mát website lên internet bao gồm viãc đng ký tên miền và web hosting, s¢ l°ÿc về ngôn ngā HTML. Māc tiêu môn hác: Hác xong môn hác nay, ng°åi hác có khÁ nng: - KiÁn thāc: + Hißu đ°ÿc kiÁn trúc cÿa Internet, mô hình cÿa các dßch vā trên Internet và các thuÁt ngā thông dāng trên Internet; + Hißu đ°ÿc công dāng cÿa các thẻ HTML (ngôn ngā HTML); + Hißu đ°ÿc các b°ãc trong viãc xây dăng mát website và các vÃn đề cÅn l°u ý trong viãc xây dăng website; + Hißu đ°ÿc cách thāc phân phối mát website lên Internet nh° đng ký tên miền, đng ký web hosting.
- Kỹ nng: + Có khÁ nng tổ chāc xây dăng mát āng dāng web đáng. + Có khÁ nng phân tích, đánh giá đß lăa chán n¢i đng ký tên miền và hosting website phù hÿp. + Có khÁ nng sÿ dāng ngôn ngā HTML đß t¿o mát trang web. - Về nng lăc tă chÿ và trách nhiãm: + Rèn tính t° duy sáng t¿o trong hác tÁp, trong công viãc.
Nái dung môn hác: 5 CH¯¡NG 1: NHĀNG KHÁI NIÞM C¡ BÀN Māc tiêu: - Trình bày đ°ÿc khái niãm Internet - Các dßch vā trên Internet - Quy trình xây dăng web - Tìm hißu web đáng và web tĩnh Nái dung ch°¢ng: 1. Khái quát chung 1. Xác định mục đích Website là những trang thông tin trên Internet dưới dạng WWW. Những trang thông tin này được gọi là trang Web.
Māc đích cÿa trang web là cung cÃp thông tin. Nhāng thông tin này có thß là thông tin th°¢ng m¿i, du lßch, thåi să, kinh tÁ. Do đó, tuỳ theo yêu cÅu cÿa tổ chāc, c¢ quan, doanh nghiãp hay thÁm chí là cá nhân nào đó mà nái dung cÿa các trang web có thß khác nhau. CÅn phÁi xác đßnh māc tiêu cÿa hã thống website đß bám sát nó.
Tr°ãc khi xây dăng website cÅn phÁi: Xác định đối tượng truy cập website: Tuỳ theo đối t°ÿng truy cÁp website mà thiÁt kÁ hã thống website. Lāa tuổi khác nhau thì cách nhìn nhÁn khác nhau. Nó s¿ Ánh h°çng đÁn cÃu trúc giao diãn trang web, ngôn từ cũng nh° bố cāc nái dung trang web. Xác định mục đích của website: PhÁi nắm đ°ÿc website chāa đăng nhāng nái dung gì.
Nó s¿ cung cÃp nhāng thông tin gì cho đối t°ÿng truy cÁp website. Nhāng thông tin nào là chính và thông tin nào là phā. Thiết lập các chủ đề của website: Mßi nhóm thông tin khác nhau mà website cung cÃp cho đối t°ÿng truy cÁp chính là mát chÿ đề cÿa website. Hãy phân chia các chÿ đề cho phù hÿp vãi māc đích cÿa website.
Xây dựng các khối thông tin mà website cung cấp theo chủ đề đã xác lập: PhÁi thu thÁp thông tin và tổ chāc các thông tin đó cho phù hÿp vãi cÃu trúc, giao diãn website và chÿ đề mà trang web đó s¿ cung cÃp cho đối t°ÿng truy cÁp website. Nên bắt đÅu vãi viãc xác đßnh nguồn tài nguyên về nái dung, hình Ánh, thông tin mà chúng ta cÅn đÁn đß t¿o nên website phù hÿp vãi māc đích đặt ra. Đây cũng là nguồn thông tin duy trì hã thống website tồn t¿i sau này. Xây dựng chiến lược thiết kế Mái hình thāc trình bày thông tin đều bß khống chÁ bçi các yÁu tố đ°ÿc xác đßnh bçi māc tiêu cÿa website, bçi môi tr°ång cÿa chúng ta và bçi đối t°ÿng truy cÁp website.
PhÁi xác đßnh đ°ÿc website truyền tÁi chāa đăng nái dung gì, và vãi nái dung Ãy thì phÁi thiÁt kÁ nh° thÁ nào. Hai yÁu tố Ánh h°çng lãn trong thiÁt kÁ chính là cÃu trúc trình bày và thåi gian truy nhÁp trang web. PhÁi cân đối giāa hai yÁu tố này vì ng°åi truy cÁp s¿ không thích khi phÁi chå mát trang web tÁi xuống, 6 và cũng không thích thú gì khi nhìn mát trang web đ¢n điãu. Hãy cân đối cÁ hai yÁu tố này cho phù hÿp vãi māc tiêu về đối t°ÿng truy cÁp website.
Khi xây dăng hã thống website, cÅn chú ý đÁn đối t°ÿng truy cÁp mà website s¿ cung cÃp thông tin. D°ãi đây là mát số thß lo¿i trang web dành cho nhóm các đối t°ÿng truy cÁp website nh°: Truy cập web ngẫu nhiên (browsing): Nhóm ng°åi truy website cÁp này là các khách lang thang, không lý do, nhāng ng°åi có thß đác website mà không có bÃt cā să thúc ép nào, hoặc mát ý đßnh nào và nÁu có thì nó rÃt xác đßnh, cā thß. Do đó website cũng cÅn chú ý mát chút đÁn đối t°ÿng này vì khi thiÁt kÁ website cÅn phÁi tính đÁn khâu quÁng cáo, công bố website. Các trang web tìm kiÁm chính là công cā đß quÁng cáo website.
Và chính các thẻ META là chìa khóa đß các website tìm kiÁm tìm thÃy website. PhÁi chú ý đÁn các từ ngā (các khoá) dành cho các website tìm kiÁm có thß nhÁn ra website. Đào tạo - Dạy học – Giáo dục (education – teaching - training): Nhóm ng°åi truy cÁp website này là các khách hàng tìm kiÁm thông tin về lĩnh văc đào t¿o. Há có rÃt ít thåi gian và th°ång không bao giå đi l¿c đề từ trang giãi thiãu (trang chÿ).
Đừng làm há và chính mình bß lán xán bçi các mối liên kÁt ngoài thông tin chÿ chốt. CÅn giãi h¿n thông tin bçi các liên kÁt <TiÁp tāc= hay <Quay trç về trang tr°ãc=. Điều quan tráng đối vãi website về đào t¿o là tính logic, khoa hác cÿa thông tin, cÿa bài giÁng và phÁi luôn bám sát vào thông tin tráng tâm mà trang web cung cÃp. Các bài giÁng th°ång tinh tÁ và có chiều sâu h¢n do đó cÅn phÁi hß trÿ ng°åi truy cÁp sao cho l°ÿng thông tin là phù hÿp và có thß nhāng ng°åi truy cÁp muốn in chính bài giÁng cÿa website đề đác, cÅn cung cÃp cho há mát Ãn bÁn <Print= riêng đß há thuÁn tiãn khi muốn in tài liãu.
Điều này thß hiãn să quan tâm đÁn há và cũng thß hiãn tính khoa hác cÿa website. Tính đa d¿ng về ph°¢ng pháp giÁng d¿y cũng là đißm m¿nh đß thu hút nhóm ng°åi truy cÁp này. Chú ý đÁn nhāng ph°¢ng tiãn thß hiãn bài giÁng, minh háa bài giÁng khác nhau nh° Ánh đáng, phim flash, movie. hay cÁ nhāng âm thanh thăc khác đß thu hút há.
Tham khảo (reference): Các website tham khÁo đ°ÿc thiÁt kÁ tốt sao cho ng°åi đác nhanh chóng tìm thÃy thông tin mà há cÅn tìm và l°u trā, in Ãn thông tin đó mát cách dá dàng. Chú ý đÁn thông tin trình bày ngắn gán, hß trÿ tìm kiÁm nhanh và đặc biãt chú ý đÁn thåi gian tÁi xuống cÿa trang web. Thi¿t k¿ giao dißn 1. Đặc tính trang Web Ng°åi truy cÁp không chỉ xem thông tin, há t°¢ng tác vãi nó theo mát cách thāc mãi không nh° các tiền lã trong viãc thiÁt kÁ tài liãu giÃy.
Giao diãn ng°åi dùng đồ ho¿ (GUI) cÿa hã thống, cáng thêm các t°¢ng tác ẩn dā, hình Ánh và các quan niãm đ°ÿc sÿ dāng đß chuyßn tÁi mái tính nng, thông tin lên màn hình, và trÁi qua thåi gian các đặc thù trăc quan cÿa các thành phÅn giao diãn đồ ho¿ và să t°¢ng tác chāc nng hoá đã t¿o nên nét đặc tr°ng <nhìn thÃy và cÁm nhÁn= cÿa các trang web và các liên kÁt hyperlink (siêu liên kÁt). ThiÁt kÁ đồ ho¿ và các hình Ánh <ký hiãu= trăc giác không chỉ đß làm đẹp trang web mà đồ ho¿ trç thành mát thành phÅn đ°ÿc tích hÿp cÿa kinh nghiãm cÿa nhāng ng°åi truy cÁp website. Trong các tài liãu có hình Ánh, không thß tách råi viãc thiÁt kÁ đồ ho¿ vãi thiÁt kÁ giao diãn. 7 Các trang web đối lÁp vãi thiÁt kÁ tài liãu thông th°ång.
Đ¿i đa số nhÁn thāc hiãn t¿i cÿa chúng ta về thông tin có cÃu trúc bắt nguồn từ viãc tổ chāc các quyßn sách, t¿p chí đã đ°ÿc xuÃt bÁn và tuÃn theo nhāng chuẩn măc thiÁt kÁ nhÃt đßnh nh° māc lāc, đánh số trang, chú thích, tiêu đề. Trang web cũng vÁy, nó cũng có nhāng chuẩn măc riêng về cách thāc tổ chāc thông tin d°ãi d¿ng <điãn tÿ=. Các trang web cÅn đÁm bÁo các đặc tính h°ãng tãi ng°åi dùng: Giao diãn đồ ho¿ ng°åi sÿ dāng (GUI) đ°ÿc thiÁt kÁ nhắm cho ng°åi dùng điều khißn trăc tiÁp máy tính cÿa há mát cách thuÁn tiãn, dá dàng. + Các giúp đỡ định hướng rõ ràng: Đa số nhāng ng°åi truy nhÁp website thăc hiãn t°¢ng tác vãi trang web bằng các liên kÁt hyperlink giāa các tài liãu.