Giáo trình Thiết kế web cung cấp cho người học những kiến thức như: Giới thiệu internet; các bước thiết kế website; HTML; css và javasript; đăng ký và quản lý website. Mời các bạn cùng tham khảo!
ỦY BAN NHÂN DÂN TỈNH ĐỒNG THÁP TRƯỜNG CAO ĐẲNG CỘNG ĐỒNG ĐỒNG THÁP GIÁO TRÌNH MƠN HỌC: THIẾT KẾ WEB NGÀNH, NGHỀ: CƠNG NGHỆ THƠNG TIN TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định số /QĐ-CĐCĐ ngày tháng năm 20… Hiệu trưởng trường Cao đẳng Cộng đồng Đồng Tháp) Đồng Tháp, năm 2017 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm i LỜI NÓI ĐẦU Các ứng dụng web ảnh hƣởng trực tiếp đến hoạt động thói quen sinh hoạt hàng ngày ngƣời, từ sinh viên, ngƣời nội trợ giới văn phòng doanh nhân Lợi nhuận cao thu đƣợc từ việc kinh doanh ứng dụng web thu hút công ty phần mềm chuyển hƣớng sang lĩnh vực Điều mở nhiều hội việc làm cho thực quan tâm yêu thích lĩnh vực thiết kế web Bài giảng bao gồm chƣơng sau: Chƣơng 1: GIỚI THIỆU INTERNET Chƣơng 2: CÁC BƢỚC THIẾT KẾ WEBSITE Chƣơng 3: HTML Chƣơng 4: CSS VÀ JAVASRIPT Chƣơng 5: ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE Cuối cùng, xin gửi lời cảm ơn chân thành đến bè, đồng nghiệp có ý kiến đóng góp sâu sắc cho giảng Mọi ý kiến đóng góp xin vui lịng gửi đến địa mail: pqcuong@dtcc.edu.vn Xin chân thành cảm ơn! Đồng Tháp, ngày 09 tháng 04 năm 2015 Tác giả Phan Quốc Cƣờng Trang i MỤC LỤC LỜI NÓI ĐẦU i MỤC LỤC ii DANH MỤC CÁC HÌNH .iv Chƣơng GIỚI THIỆU INTERNET 1.1 Giới thiệu khái niệm 1.1.1 Khái niệm Internet 1.1.2 Khái niệm World Wide Web 1.2 Thuật ngữ Internet 1.2.1 Webpage 1.2.2 Website 1.2.3 Homepage - Trang chủ 1.2.4 Website tĩnh 1.2.5 Website động 1.2.6 Tên miền 1.2.7 Máy chủ 1.2.8 URL 1.2.9 Trình duyệt web CÂU HỎI ÔN TẬP CHƢƠNG Chƣơng CÁC BƢỚC THIẾT KẾ WEBSITE 2.1 Mục đích website cần thiết kế 2.2 Chiến lƣợc thiết kế 2.3 Thiết kế giao diện CÂU HỎI ÔN TẬP CHƢƠNG 15 Chƣơng 16 HTML 16 Trang ii 3.1 Giới thiệu HTML 16 3.2 Trình soạn thảo HTML 19 3.3 Các thuộc tính HTML (HTML Attributes) 22 3.4 HTML Headings 25 3.5 HTML Paragraphs 26 3.6 Các thẻ định dạng 28 3.6.1 HTML Style 28 3.6.2 HTML Formatting 32 3.7 HTML Comments 37 3.8 HTML Links 38 3.9 HTML Images 41 3.10 HTML Tables 43 3.11 HTML Lists 45 3.12 Thẻ 49 3.13 HTML Iframes 50 3.14 HTML Forms 51 CÂU HỎI ÔN TẬP CHƢƠNG 56 Chƣơng 76 CSS VÀ JAVASCRIPT 76 4.1 Giới thiệu CSS 76 4.2 Một số đặc tính CSS 79 4.3 Giới thiệu ngôn ngữ JavaScript 90 CÂU HỎI ÔN TẬP CHƢƠNG 95 Chƣơng 107 ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE 107 5.1 Đăng ký tên miền (domain) miễn phí 107 5.1.1 Tên miền tiếng việt 107 5.1.2 Tên miền miễn phí TK 108 Trang iii 5.1.3 Tên miền miễn phí uni.me 109 5.1.4 Tên miền VN.EE 110 5.2 Đăng ký host miễn phí 111 5.2.1 Đăng ký host miễn phí với freeservers 111 5.2.2 Đăng ký host miễn phí với Hostinger 114 CÂU HỎI ÔN TẬP CHƢƠNG 117 TÀI LIỆU THAM KHẢO 118 DANH MỤC CÁC HÌNH Trang iv Hình – Mơ hình Internet Hình – Bố cục website 13 Hình – Độ phân giải hình 14 Hình – Soạn thảo HTML Notepad 20 Hình – Đặt tên chọn kiểu mã hóa cho tập tin HTML Notepad 21 Hình – Kết hiển thị trình duyệt Google Chrome 22 Hình – Tra cứu tên miền tiếng Việt 107 Hình – Tên miền miễn phí TK 108 Hình – Đăng ký tên miền TK 109 Hình 10 – Trang uni.me 109 Hình 11 – Đăng ký tài khoản uni.me 110 Hình 12 – Tên miền VN.EE 111 Hình 13 – Website freeservers 111 Hình 14 – Chọn gói cƣớc miễn phí 112 Hình 15 – Đăng ký thông tin freeservers 113 Hình 16 – Freeserver cung cấp số lựa chọn xây dựng website 113 Hình 17 – Đăng ký tài khoản Hostinger 114 Hình 18 – Gói hosting miễn phí 114 Hình 19 – Chọn gói hosting miễn phí Hostinger 115 Hình 20 – Form đăng ký tên miền Hostinger 116 Trang v Chƣơng GIỚI THIỆU INTERNET MỤC ĐÍCH Cung cấp kiến thức tổng quát Internet, giúp sinh viên hiểu đƣợc khái niệm thuật ngữ Internet Nhiệm vụ tự học tài liệu tham khảo sinh viên chƣơng Để đạt đƣợc mục đích đề chƣơng 1, sinh viên phải thực tốt yêu cầu sau đây: Phải đọc trƣớc nội dung Chƣơng giảng trƣớc lên lớp 1.1 Giới thiệu khái niệm 1.1.1 Khái niệm Internet Internet tập hợp máy tính đƣợc liên kết nối lại với thông qua hệ thống dây cáp mạng đƣờng điện thoại tồn giới với mục đích trao đổi, chia sẻ liệu thông tin Bất nguời hệ thống tiếp cận xem thơng tin từ máy tính hệ thống hay hệ thống khác Trƣớc mạng Internet đƣợc sử dụng chủ yếu tổ chức phủ trƣờng học Ngày mạng Internet đƣợc sử dụng hàng tỷ ngƣời bao gồm cá nhân doanh nghiệp lớn, nhỏ, trƣờng học tất nhiên nhà nƣớc tổ chức phủ Phần chủ yếu mạng Internet World Wide Web Mạng Internet chung điều có nghĩa khơng thực sở hữu với tƣ cách cá nhân Mỗi phần nhỏ mạng đƣợc quản lý tổ chức khác nhƣng không không thực thể nhƣ khơng trung tâm máy tính nắm quyền điều khiển mạng Mỗi phần mạng đƣợc liên kết với theo cách thức nhằm tạo nên mạng toàn cầu Trang Internet mạng toàn cầu bao gồm nhiều mạng LAN (Local Area Network), MAN (Metropolitan Area Network) WAN (Wide Area Network) giới kết nối với Mỗi mạng thành viên đƣợc kết nối vào Internet thông qua router Hình – Mơ hình Internet 1.1.2 Khái niệm World Wide Web Word Wide Web đƣợc gọi tắt Web - mạng lƣới nguồn thông tin cho phép ngƣời khai thác thông tin qua số công cụ chƣơng trình hoạt động dƣới giao thức mạng World Wide Web số dịch vụ Internet nhằm giúp cho việc trao đổi thông tin trở nên thuận tiện dễ dàng Sở dĩ Web trở nên phổ biến Web cung cấp cho ngƣời sử dụng khả truy cập dễ dàng từ ngƣời sử dụng khai thác thơng tin đa dạng Internet bao gồm phần, hình ảnh chí âm video nghĩa mà cảm nhận đƣợc, Web đơi cịn đƣợc gọi đa phƣơng tiện mạng Internet Thông tin đƣợc biểu diễn “website” mà nhìn thấy hình máy tính Mọi thơng tin hiển thị website đó, kể âm thanh, hình ảnh động, nhƣng vấn đề lý thú Web nằm khía cạnh khác, website mà nhìn thấy hình máy tính có khả liên kết với website khác, dẫn đến nguồn thông tin khác Trang Khả Web có đƣợc nhờ thơng qua “siêu liên kết” (hyperlink), siêu liên kết chất địa trỏ tới nguồn thông tin (website) nằm Internet Bằng siêu liên kết này, website liên kết với thành mạng chằng chịt, trang trỏ tới trang khác, cho phép ngƣời chu du biển thông tin 1.2 Thuật ngữ Internet 1.2.1 Webpage Webpage website, tức tập tin có htm hay html Đó tập tin viết mã code HTML chứa siêu liên kết (hyperlink) đến trang khác Trên website ngồi thành phần chữ cịn chứa thành phần khác nhƣ hình ảnh, nhạc, video 1.2.2 Website Website tập hợp website liên kết với siêu liên kết Website đƣợc đƣa vào mạng Internet để hoà website khác, ngƣời khắp giới truy cập đƣợc vào website để lấy thông tin 1.2.3 Homepage - Trang chủ Homepage - Trang chủ, trang xuất website đƣợc truy cập Trang chủ thƣờng chứa thông tin website liên kết đến trang chuyên đề Trang chủ có tên nhƣ index.htm, default.htm 1.2.4 Website tĩnh Web tĩnh website đơn mô tả thông tin thông tin không thƣờng xuyên đƣợc cập nhật thay đổi nội dung theo thời gian 1.2.5 Website động Web động website có đƣờng liên kết đến sở liệu Database Khi chọn liên kết, thành phần sở liệu xuất nhƣ thể có website Trang 10 Trong Javascript kiện Onload thực khi: a Khi bắt đầu chƣơng trình chạy b Khi click chuột c Khi kết thúc chƣơng trình d Khi di chuyển chuột qua 11 Trong Javascript kiện OnUnload thực nào? a Khi bắt đầu chƣơng trình chạy b Khi click chuột c Khi kết thúc chƣơng trình d Khi di chuyển chuột qua 12 Trong Javascript kiện Onblur thực nào? a Khi đối tƣợng form focus b Khi đối tƣợng form c focus c Khi di chuyển chuột qua form d Khi click chuột vào nút lệnh 13 Trong Javascript kiện OnMouseOver thực nào? a Khi đối tƣợng form focus b Khi đối tƣợng form c focus c Khi di chuyển chuột qua đối tƣợng form d Khi click chuột vào nút lệnh 14 Trong Javascript kiện Onclick thực nào? a Khi đối tƣợng form focus b Khi đối tƣợng form c focus c Khi click chuột vào đối tƣợng form Trang 104 d Khi click chuột vào nút lệnh 15 Trong Javascript kiện Onchange thực nào? a Khi đối tƣợng form focus b Khi đối tƣợng form có focus c Xảy giá trị trƣờng form đƣợc ngƣời dùng thay đổi d Khi click chuột vào nút lệnh 16 Trong Javascript đoạn mã sau cho kết gì? function kiemtra(){ window.open("http://www.dtcc.edu.vn","Chao"); } a Khi chạy trang khác (VNN) đƣợc b Khơng chạy đƣợc sai c Khi kết thúc site khác d Hiện trang dtcc (Trƣờng CĐCĐ Đồng Tháp) 17 Lệnh lặp for có dạng nhƣ nào? a for ( biến = Giá trị đầu; Điều kiện; Giá trị tăng) b for ( biến = Giá trị đầu; Giá trị tăng; điều kiện) c for ( biến = Điều kiện; Giá trị tăng; Giá trị cuối) d Tất dạng 18 Vòng lặp While dạng vòng lặp? Trang 105 a Không xác định xét điều kiện lặp b Không xác định lặp xét điều kiện c Cả hai dạng d Không tồn dạng 19 Vòng lặp (do while) dạng vịng lặp? a Khơng xác định x t điều kiện lặp b Không xác định lặp x t điều kiện c Cả hai dạng d Khơng có dạng 20 Lệnh break kết hợp với vòng for dùng để? a Ngƣng vịng for gặp lệnh b Khơng có ý nghĩa vòng lặp c Nhảy đến tập lệnh khác d Không thể kết hợp đƣợc 21 Hàm alert() dùng để làm gì? a Dùng để thông báo b Dùng để thông báo nhập c Dùng để chuyển đổi số sang chữ d Tất dạng Trang 106 Chƣơng ĐĂNG KÝ VÀ QUẢN LÝ WEBSITE MỤC ĐÍCH Cung cấp sinh viên cách thức đăng ký host miễn phí đƣa website lên mạng Internet Nhiệm vụ tự học tài liệu tham khảo sinh viên chƣơng Để đạt đƣợc mục đích đề chƣơng 5, sinh viên phải thực tốt yêu cầu sau đây: Phải đọc trƣớc nội dung Chƣơng giảng trƣớc lên lớp 5.1 Đăng ký tên miền (domain) miễn phí 5.1.1 Tên miền tiếng việt Tại ta lại chọn tên miền tiếng việt đầu tiên, việc tạo đơn giản, lại tên miền quốc gia Việt Nam Chúng ta vào trang tenmientiengviet.vn, tênmiền.vn, tênmiềntiếngviệt.vn để đăng ký: Hình – Tra cứu tên miền tiếng Việt Trang 107 Nhập tên miền muốn tạo, sau bấm vào nút “Tra cứu” để kiểm tra xem tên miền có tồn hay chƣa Nếu tên miền mà muốn tạo hợp lệ hệ thống cấp tên miền cho sử dụng 5.1.2 Tên miền miễn phí TK Hình – Tên miền miễn phí TK Đây tên miền đƣợc nhiều ngƣời sử dụng miễn phí ngắn gọn, dễ nhớ Chỉ cần nhập tên miền cần tạo, sau tiến hành đăng ký có tên miền để sử dụng Trang 108 Hình – Đăng ký tên miền TK 5.1.3 Tên miền miễn phí uni.me Đầu tiên vào trang uni.me: Hình 10 – Trang uni.me Trang 109 Nhập tên miền cần tạo bấm Register Domain, sau tiến hành đăng ký tài khoản uni.me sở hữu tên miền miễn phí: Hình 11 – Đăng ký tài khoản uni.me 5.1.4 Tên miền VN.EE Đây website cung cấp tên miền việt nam, vào có nhiều lựa chọn nhƣ: VN.EE, VN.AE, BIZ.EE Sau đăng ký thành cơng, vui lịng xác thực tài khoản theo yêu cầu Ban Quản Trị Trong thời gian chờ duyệt, phải theo dõi tình trạng xác thực liên tục, tập tin upload không đạt yêu cầu, tài khoản quay lại trạng thái chƣa xác thực Trong vòng tuần tài khoản tình trạng chƣa xác thực bị xóa Khi tình trạng xác thực chuyển sang xác thực hồn tồn n tâm sử dụng dịch vụ VN.EE Trang 110 Hình 12 – Tên miền VN.EE 5.2 Đăng ký host miễn phí 5.2.1 Đăng ký host miễn phí với freeservers - Bƣớc 1: Vào địa http://www.freeservers.com để đăng kí website miễn phí với địa truy cập có dạng http://.freeservers.com Hình 13 – Website freeservers Trang 111 - Bƣớc 2: Gõ vào địa mà dự định đăng kí yourname Sau click Go Màn hình ra, chọn mục cuối 100% Free Hosting Option click vào SignUp Hình 14 – Chọn gói cƣớc miễn phí - Bƣớc 3: Sau điền vào thơng tin liên quan cần thiết nhƣ Họ tên, mật khẩu, email, … Cuối gõ vào ARTK để đồng ý với qui định FreeServers cung cấp dịch vụ miễn phí Trang 112 Hình 15 – Đăng ký thông tin freeservers - Bƣớc 4: Nếu đăng kí thành cơng, hình sau để cung cấp cho số lựa chọn xây dựng website Hình 16 – Freeserver cung cấp số lựa chọn xây dựng website Trang 113 5.2.2 Đăng ký host miễn phí với Hostinger Với 2.000 MB Space, 100 GB Traffic,PHP MySQL, Site Builder, không quảng cáo banner Hostinger lựa chọn ƣa thích cần host miễn phí, sau bƣớc để đăng ký đƣợc gói Hosting miễn phí này: - Bƣớc 1: Chúng ta đăng ký qua đƣờng dẫn sau đây: http://www.hostinger.vn/order - Bƣớc 2: Điền đầy đủ thông tin vào khung FORM đăng ký: Hình 17 – Đăng ký tài khoản Hostinger - Bƣớc 3: Xuất khung tạo gói HOSTING miễn phí: Hình 18 – Gói hosting miễn phí Chúng ta nhận đƣợc email bao gồm: email thơng tin đăng nhập email kích hoạt tài khoản (Kích hoạt tài khoản trƣớc chuyển sang bƣớc tiếp theo) Trang 114 - Bƣớc 4: Khi kích hoạt xong chọn gói tƣơng ứng, chọn gói HOSTING miễn phí: Hình 19 – Chọn gói hosting miễn phí Hostinger - Bƣớc 5: Tới FORM dùng để điền thông tin domain mật để đăng nhập gói HOSTING (Có thể chọn domain có sẵn sử dụng domain chúng ta): Trang 115 Hình 20 – Form đăng ký tên miền Hostinger Sau đó, chờ email từ bên nhà cung cấp tồn thơng tin HOSTING miễn phí hồn tất q trình đăng ký Hostinger Trang 116 CÂU HỎI ÔN TẬP CHƢƠNG Sinh viên sử dụng dịch vụ cung cấp tên miền host miễn phí giới thiệu chƣơng để đƣa website đồ án cuối môn học lên Internet Trang 117 TÀI LIỆU THAM KHẢO [Thái Kim Phụng], Giáo trình Thiết kế web, Trung tâm CNTT, 2010 [Jonathan Fielding], Beginning Responsive Web Design with HTML5 and CSS3, Apress, 2014 [Richard Rutter, Patrick H Lauke, Cynthia Waddell, Jim Thatcher, Shawn Lawton Henry, Bruce Lawson, Andrew Kirkpatrick, Christian Heilmann, Michael R Burks, Bob Regan, Mark Urban], Web Accessibility Web Standards and Regulatory Compliance, Apress, 2006 www.w3schools.com Trang 118 ... tính là: "Trƣờng Cao đẳng Cộng đồng Đồng Tháp" :Trường Cao đẳng Cộng đồng Đồng Tháp xin chào bạn
Thuộc tính href Liên kế HTML đƣợc định... thiết Trang 10 kế website tƣơng tự Nhƣng trừ muốn chép nguyên si thiết kế họ (mà nhƣ chẳng gọi thiết kế) , cảm hứng từ thiết kế nhƣ không đủ để giúp làm nên thiết kế riêng - chắn thiết kế đóng vai... tin khác Trang website địa web mạng tồn cầu mạng nội Phần hình ảnh website chứa siêu liên kết tới website khác địa web địa web khác Trình duyệt web cho phép ngƣời sử dụng truy cập thông tin website