Bài giảng Thiết kế Web 1: Bài 1 - Nguyễn Đức Cương

MÔN HỌC: THIẾT KẾ WEB Giảng viên: Nguyễn Đức Cương Email: cuongnguyenduc@gmail.com Web: http://www.nguyenduccuong.com PHẦN 1: NGÔN NGỮ HTML (HyperText Markup Language) Bài 1: TỔNG QUAN VỀ WEB Mục tiêu  Nắm vững kiến thức www – internet  Hiểu web, Web tĩnh, Web động  Hiểu kiến thức thiết kế web: HTML, CSS,  Biết công dụng, ý nghĩa số công cụ thiết kế, lập trình web: MS Front Page, Dreamweaver 8, MS Expression Web, VS Studio 2005, http://nguyenduccuong.com Slide Tại lại WEB?  Văn phòng di động 24/24  Thông tin liên lạc lúc, nơi  Giới thiệu quảng bá hình ảnh nhà trường, cơng ty,  Thực dịch vụ mua bán nhanh, thuận tiện, Nội dung  Các thuật ngữ  Giới thiệu kiến thức thiết kế web: HTML, CSS,  Giới thiệu số công cụ thiết kế web: MS Front Page, Dreamweaver 8, MS Expression Web, VS Studio 2005, http://nguyenduccuong.com Slide Tài nguyên  Phần cứng:   Máy tính chạy Win 2000 cao Phần mềm:  Phần mềm TK Web: Dreamweaver MX, VS Studio,  Trình duyệt: IE, Fire Fox, http://nguyenduccuong.com Slide Nguồn tham khảo  Giáo trình thiết kế web – trường ĐH Công nghiệp Tp HCM  Principle web design - Joel Sklar  http://www.google.com  http://w3c.org  … http://nguyenduccuong.com Slide Các thuật ngữ  Internet :  TCP/IP:(Transfer Control Protocol/Internet Protocol)  Mơ hình Client-Server:  Internet Server: Server cung cấp dịch vụ Internet (Web Server, Mail Server, FTP Server…)  Internet Service Provider (ISP):  Internet Protocol :  Phương thức truyền tin internet – thông qua gateway http://nguyenduccuong.com Slide http://nguyenduccuong.com Slide Các thuật ngữ  World Wide Web (WWW):dịch vụ truy xuất tài liệu máy  Web Browser :  Internet Explorer, Mozilla FireFox, Nestcape, …  Hosting provider:  DNS: Domain Name Service  Publish: làm cho trang web chạy internet  URL(Unioform resource locator): địa chỉ đến file cụ thể nguồn tài nguyên mạng http://nguyenduccuong.com Slide 10 Các thuật ngữ  Web: Một ứng dụng chạy mạng (Client-Server) tương tự ứng dụng khác Nhưng chia sẻ tồn cầu thơng qua mạng Internet dịch vụ  Web Page: tập tin lưu với phần mở rộng html, htm (web tĩnh); aspx, php, (web động)  Website: Một tập hợp nhiều web page, thể thông tin tổ chức chủ đề http://nguyenduccuong.com Slide 11 Tổng quan HTML  HTML (HyperText markup Language) gồm thẻ (tag), đoạn mã đặc biệt – định dạng để báo cho trình duyệt Web biết cách hiển thị  Cho phép liên kết loại âm thanh, hình ảnh bên trang web  HTML khơng phải ngơn ngữ lập trình  Trình soạn thảo trang web :Notepad,  Hỗ trợ thiết kế: FrontPage, Dreamweaver,  MS VS Studio, http://nguyenduccuong.com Slide 12 Tổng quan HTML – Tag HTML  Cú pháp:  Object  TagName : ,  Object : văn bản, ảnh,  ListPropeties: danh sách thuộc tính Tag http://nguyenduccuong.com Slide 13 Tổng quan HTML – Tag HTML  Nếu có nhiều thuộc tính thuộc tính cách khoảng trắng Object  Ví dụ: nội dung http://nguyenduccuong.com Slide 14 Cấu trúc trang web Nội dung thông tin trang web Nội dung hiển thị trình duyệt http://nguyenduccuong.com Slide 15 Thao tác trình duyệt  Refresh (Reload) – F5  Chỉnh kích cỡ - View/Text size (Zoom)  Bảng mã – View/Encoding (Character Encoding)  Xem mã nguồn – View/Source (Page Source)  Lưu lại trang ưa thích- Favorites (Bookmark), http://nguyenduccuong.com Slide 16 Một số phần mềm thiết kế web  Phần mềm không hỗ trợ giao diện TK:  PM hỗ trợ thiết kế   Notepad, Text pad,  FrontPage: 2000, 2003, Expression Web (2007)  Macromedia Dreamweaver: MX, 8,  MS VS Studio 2000, 2003, 2005,  PHP Designer Các ví dụ http://nguyenduccuong.com Slide 17 Tổng quan HTML – tag  Hiển thị tiêu đề web:  Welcome to my web page  Tạo heading cho văn (6 cấp – từ H1 – H6)  Ngắt đoạn  Kẻ đường ngang    HTML gì? ,

http://nguyenduccuong.com Slide 18 Tổng quan HTML – tag   Định dạng văn bản: đậm, nghiêng,  Văn bản  văn  Văn Định dạng font chữ   Định dạng toàn trang   http://nguyenduccuong.com Slide 19 Tổng quan HTML – tag  Cho đối tượng chuyển động:  Chèn ảnh vào trang web    Chèn âm   Object Chèn movie  http://nguyenduccuong.com Slide 25 Tổng quan HTML – tag  Tag :Đưa chữ lên cao xuống thấp so với văn bình thường  Cú pháp:  Nội dung chữ dưa lên cao  Nội dung chữ đưa xuống thấp http://nguyenduccuong.com Slide 26 Tổng quan HTML – tag …: Cú pháp: Nội dung văn muốn định dạng  Ví dụ: If A < B Then A=A+1   http://nguyenduccuong.com Slide 27 Tổng quan HTML – tag : Định dạng chữ đậm (giống ) Cú pháp: Văn nhấn mạnh  : Nội dung khối văn nhấn mạnh   http://nguyenduccuong.com Slide 28 Tổng quan HTML – tag : Giữ nguyên định dạng như: ngắt dòng, khoảng cách, thích hợp với việc tạo bảng  Cú pháp: Nội dung văn cần định dạng trứơc với tất định dạng khoảng cách, xuống dòng ngắt hàng  http://nguyenduccuong.com Slide 29 Tổng quan HTML – tag Ví dụ: Learning HTML Trường Đại Học Công Nghiệp TP.HCM Khoa Công Nghệ Thông Tin  http://nguyenduccuong.com Slide 30 10 Tổng quan HTML – tag : Chia văn thành khối, có chung định dạng  chia văn thành khối dòng  tách khối khơng dịng  Cú pháp: Nội dung khối dòng  http://nguyenduccuong.com Slide 31 Tổng quan HTML – tag Ví dụ: Learning HTML Trường Đại Học Công Nghiệp TP.HCM Khoa Công Nghệ Thông Tin  http://nguyenduccuong.com Slide 32 Tổng quan HTML – tag Nội dung khối dịng Ví dụ: Learning HTML Creating Web Pages With HTML http://nguyenduccuong.com Slide 33 11 Tổng quan HTML – tag   Các ký tự đặc biệt:  Lớn (>): >  Nhỏ (