Bài giảng Thiết kế và lập trình Website: Chương 1 - ThS. Dương Thành Phết

Bài giảng Thiết kế và lập trình Website - Chương 1 giới thiệu tổng quan về Website và ngôn ngữ HTML. Chương này trình bày các nội dung cụ thể như: Tổng quan về Website (Các khái niệm, soạn thảo trang Web, các thẻ của tập tin HTML, làm tươi trang web và xem mã nguồn), ngôn ngữ HTML (Các thẻ định dạng văn bản, tổ chức Website, thiết kế bảng biểu, thiết kế biểu mẫu). Mời các bạn cùng tham khảo.

KHOA CAO ĐẲNG THỰC HÀNH THIẾT KẾ & LẬP TRÌNH WEBSITE (Chuyên ngành: Đồ Họa Đa Truyền Thông) Chƣơng TỔNG QUAN VỀ WEBSITE VÀ NGÔN NGỮ HTML Tổng quan Website Ngơn ngữ HTML © Dương Thành Phết www.thayphet.net - phetcm@gmail.com TỔNG QUAN VỀ THIẾT KẾ WEBSITE 1.1 Các khái niệm 1.2 Soạn thảo trang Web 1.3 Các thẻ tập tin HTML 1.4 Làm tƣơi trang web xem mã nguồn © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 1.1 CÁC KHÁI NIỆM 1.1.1 Khái niệm WebTĩnh, Web động Web tĩnh: - Được xây dựng ngơn ngữ HTML, CSS, Javascript, Website có nội dung cần thay đổi cập nhật - Thích hợp với cá nhân, tổ chức, doanh nghiệp nhỏ làm quen với môi trường Internet - Các trang web tĩnh có phần mở rộng html/html © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 1.1 CÁC KHÁI NIỆM 1.1.1 Khái niệm WebTĩnh, Web động (tt)  Web động: - Web có kết nối CSDL, thơng tin hiển thị gọi từ CSDL - Được phát triển công nghệ tiến PHP, ASP, ASP.NET, Java, sử dụng hệ quản trị CSDL như: Access, My SQL, MS SQL, Oracle…  Tất website Thương mại điện tử, mạng thông tin lớn, website tổ chức, doanh nghiệp hoạt động chuyên nghiệp Net sử dụng cơng nghệ web động © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 1.1 CÁC KHÁI NIỆM 1.1.2 Mạng Internet: - Mạng máy tính tồn cầu – Hệ thống mạng mạng - Tiền thân ban đầu mạng ARPANET(Tổ chức Advanced Research Projects Agency) Mỹ sáng lập 1969 Phục vụ trao đổi liệu trường đại học & Bộ quốc phòng © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 1.1 CÁC KHÁI NIỆM 1.1.3 Các dịch vụ Internet  WWW-Wold Wide Web: Dịch vụ trao đổi,tìm kiếm truy cập thông tin mạng theo giao thức HTTP Được sử dụng thơng qua trình duyệt Web  HTTP-Hyper Text Tranfer Protocol: Giao thức dùng để giao tiếp với trang Web © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 1.1 CÁC KHÁI NIỆM 1.1.3 Các dịch vụ Internet (tt)  Email – Eletronic Mail-Thƣ điện tử: Dịch vụ trao đổi thông điệp cho nhau, quản lý mail server  Chat –Tán gẫu: Dịch vụ trao đổi trực tuyến với qua mạng internet văn bản, âm thanh, hình ảnh như: AOL, Yahoo messenger, © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 1.1 CÁC KHÁI NIỆM 1.1.3 Các dịch vụ Internet (tt)  FTP – File Transfer Protocol – Truyền tải tập tin : Dịch vụ trao đổi tập tin máy Internet thường dùng để Download & Upload trang web từ người thiết máy chủ thông qua chương trình FTP FTP Explorer, FlashFXP © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 1.1 CÁC KHÁI NIỆM 1.1.4 Các thuật ngữ HTML-Hyper Text Makeup Language: Ngôn ngữ đánh dấu siêu văn dùng để thiết kế trang Web WebPage-Trang Web: Là tập tin văn soạn thảo theo ngơn ngữ HTML có phần mở rộng HTML HTM © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 1.1 CÁC KHÁI NIỆM 1.1.4 Các thuật ngữ Web Site: Tập hợp trang web thuộc chủ thể Home Page: Trang đầu tiên-Trang Website(Index.htm, Default.htm ) chủ WebServer: Máy chủ web-Máy tính cấu hình mạnh, lưu trữ trang Web kết nối thường xuyên với mạng Internet cho phép máy khác truy cập thông tin 10 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.2 TỔ CHỨC WEBSITE, SỬ DỤNG HÌNH ẢNH & LIÊN KẾT 2.2.3 Thiết lập liên kết cho trang Web (tt) Nhúng tập tin Media Các dạng tập tin âm thông dụng Internet: wav, mp3, wmv, wma,.mpeg, Ra, Rm hay tập tin Flash : swf 56 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu - Table - Table cấu trúc gồm nhiều hàng giao với nhiều cột (kỹ thuật thiết kế bố cục trang) Cần phát thảo cấu trúc bảng trước thiết kế 57 Nội dung tiêu đề bảng Nội dung tiêu đề cột 1 Nội dung tiêu đề cột 2 Nội dung ô dịng Nội dung dịng © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 58 2.3.1 Thiết kế bảng biểu – Table(tt) Định dạng Table Tạo đƣờng viền Thiết lập độ rộng canh lề bảng n: Độ rộng tính pixel Hoặc % kích thước cửa sổ “Center” / ”Left”/ ”Right”: Canh giữa/trái/phải cửa sổ trình duyệt, văn cuộn quanh bảng © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu – Table(tt) Định dạng Table Xác lập màu, ảnh cho bảng, hàng, Thuộc tính Ý nghĩa Màu cho toàn bảng Ảnh cho tịan bảng Màu cho tóan hàng Ảnh cho tòan hàng Màu cho ô Ảnh cho ô Màu cho ô tiêu đề Ảnh cho tiêu đề 59 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu – Table(tt) Định dạng Table Định dạng Thuộc tính Ý nghĩa Canh theo chiều ngang: Left, Right, Center Canh theo chiều dọc: Top, Bottom, Middle Canh hàng tiêu đề theo chiều ngang Canh hàng tiêu đề theo chiều dọc Canh theo chiều ngang ô hàng Canh theo chiều dọc ô hàng 60 CellSpacing=“n” Khoảng cách ô CellPadding=“n” Khỏang cách quanh nội dung Pixel © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.3 THIẾT KẾ BẢNG BIỂU (TABLE) 2.3.1 Thiết kế bảng biểu – Table(tt) Định dạng Table Trộn ơ: Dùng thuộc tính RowSpan ColSpan cho thẻ TD/TH Thuộc tính Ý nghĩa Tạo có độ cao n hàng Tạo có độ rộng n cột Tạo tiêu đề có độ cao n hàng Tạo tiêu đề có độ rộng n cột 61 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.3 THIẾT KẾ BIỂU MẪU (FORM) 2.3.2 Thiết kế Biểu mẫu – Form(tt)  Định nghĩa form Dạng 1: Chỉ trình bày khơng gửi liệu Các đối tượng Form Dạng 2: Thông tin từ Form chuyển cho địa Mail Các đối tượng Form Dạng 3: Thông tin từ Form chuyển lên Webserver Các đối tượng Form 62 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.3 THIẾT KẾ BIỂU MẪU (FORM) 2.3.2 Thiết kế Biểu mẫu – Form(tt)  Thiết kế thành phần a Hộp văn – Text box n: chiều dài tính số ký tự, m: Số ký tự tối đa nhập b Hộp văn – Password n: chiều dài, m: Số ký tự tối đa nhập 63 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.3 THIẾT KẾ BIỂU MẪU (FORM) 2.3.2 Thiết kế Biểu mẫu – Form(tt)  Thiết kế thành phần c Nút gửi liệu – Submit Button Hoặc d Nút hủy liệu vừa nhập - Reset Button 64 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.3 THIẾT KẾ BIỂU MẪU (FORM) 2.3.2 Thiết kế Biểu mẫu – Form(tt)  Thiết kế thành phần Ví dụ: ĐĂNG NHẬP DIỄN ĐÀN Tên đăng nhập: Mật khẩu: 65 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.3 THIẾT KẾ BIỂU MẪU (FORM) 2.3.2 Thiết kế Biểu mẫu – Form(tt)  Thiết kế thành phần e Khung văn – TextArea Văn mặc định Wrap: Cuộn văn xuống dòng đến lề phải f Nút chọn – Radio Button g Hộp kiểm Checkbox Value=”Trị” : Giá trị On/ Off gửi lên Server 66 © Dương Thành Phết www.thayphet.net - phetcm@gmail.com 2.3 THIẾT KẾ BIỂU MẪU (FORM) 2.3.2 Thiết kế Biểu mẫu – Form(tt)  Thiết kế thành phần Ví dụ: 67 PHIẾU THĂM DỊ Ý KIẾN Tên đăng nhập: Giới tính : Nam Tin tức Học tập