Bài giảng Thiết kế Web: Chương 1 - Từ Thị Xuân Hiền

Chương 1 của bài giảng Thiết kế Web giới thiệu tổng quan về Web. Chương này trình bày những nội dung sau: Các khái niệm cơ bản, giới thiệu khái quát về Web, tag HTML, cấu trúc cơ bản của trang Web, các tag HTML cơ bản,...và một số nội dung khác.

BÀI GIẢNG THIẾT KẾ WEB (SỐ TIẾT: 30 LT- 60 TH) GV: TỪ THỊ XUÂN HIỀN Giới thiệu môn học  Môn học cung cấp kỹ thiết kế web tĩnh xử lý liệu client  Nội dung gồm phần:  Căn HTML  Phần mềm hỗ trợ thiết kế web – Dreamweaver  Ngôn ngữ Javascript  Thời lượng : 30 tiết lý thuyết + 60 tiết thực hành Giới thiệu môn học  Tuấn :     Tuần :     Form Tuần :   Bảng trình bày trang Frame Form Tuần :   Giới thiệu Web Siêu liên kết – hình ảnh Danh sách Casscading style sheet – CSS Tuần :    Giới thiệu Dreamweaver Định dạng văn dùng CSS Hình ảnh liên kết trang Giới thiệu môn học  Tuần :     Tuần :   Hàm JavaScript Tuần :   Tổng quan JavaScript Tuần 8:   Bảng trình bày trang Dreamweaver Behaviors – Form Framesets – Kiểm tra xuất Các cấu trúc điều khiển Tuần 10 :  Mơ hình đối tượng PHẦN 1: NGƠN NGỮ HTML (HyperText Markup Language) CHƯƠNG I GIỚI THIỆU VỀ WEB I CÁC KHÁI NIỆM CƠ BẢN  Internet : mạng máy tính tồn cầu, máy truyền thơng với giao thức chung TCP/IP (Transfer Control Protocol/Internet Protocol)  Intranet : mạng cục không nối vào Internet, truyền thông giao thức TCP/IP  Mô hình Client-Server: mơ hình khách-chủ Server chứa tài ngun dùng chung cho nhiều máy Client  Internet Server: Server cung cấp dịch vụ Internet (Web Server, Mail Server, FTP Server…) I    CÁC KHÁI NIỆM CƠ BẢN Internet Service Provider (ISP): Nhà cung cấp dịch vụ Internet cho khách hàng Mỗi ISP có nhiều khách hàng có nhiều loại dịch vụ Internet khác Internet Protocol : tiêu chuẩn chi phối việc chuyển tải thơng tin máy tính mạng World Wide Web (WWW): dịch vụ tra cứu thông tin Internet Dịch vụ đưa cách truy xuất tài liệu máy phục vụ dễ dàng thông qua giao tiếp đồ họa Để sử dụng dịch vụ máy Client cần có chương trình gọi Web Browser I  CÁC KHÁI NIỆM CƠ BẢN Web Browser : trình duyệt Web Dùng để truy xuất tài liệu Web Server – – Internet Explorer Nestcape  Home page: trang web web site  Hosting provider: công ty tổ chức đưa trang lên mạng  Publish: Xuất trang web  Web server chương trình đáp ứng yêu cầu truy xuất tài nguyên  Webserver dạng phần mềm cài máy server để phục vụ quản lý website Ví dụ : apache, iis tích hợp giao diện lập trình ngơn ngữ cụ thể  Web ứng dụng (trên mạng client-server) chia mạng internet 16 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 17 : Gạch ngang văn Cú pháp: Nội dung văn bị gạch ngang 18 …: Dùng để nhập dịng mã có định dạng ký tự riêng Dịng mã không thực mà hiển thị dạng văn bình thường   Cú pháp: Nội dung văn muốn định dạng Ví dụ: If A < B Then A=A+ 19 : Văn nhấn mạnh (giống tag ) Cú pháp: Văn nhấn mạnh 20 : Định dạng chữ đậm (giống ) Cú pháp: Văn nhấn mạnh 21 : Dùng phân cách khối văn để nhấn mạnh, đoạn văn tách thành paragraph riêng, thêm khoảng trắng đoạn đồng thời thụt vào so với lề trái (tương đương chức phím tab) Cú pháp: Nội dung khối văn nhấn mạnh 22 : 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 Ví dụ: Learning HTML Trường Đại Học Công Nghiệp TP.HCM Khoa Công Nghệ Thông Tin 23 : 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 Ví dụ: Learning HTML Trường Đại Học Công Nghiệp TP.HCM Khoa Công Nghệ Thông Tin Nội dung khối dòng Ví dụ: Learning HTML Creating Web Pages With HTML 24 Các ký tự đặc biệt: a) b) Lớn (>): > Ví dụ: If A > B Then A=A+ Nhỏ (Text size Chỉnh lại font chữ: Chọn Menu View->EnCoding Nếu trang Web không hiển thị Font tiếng Việt: • Chọn menu Tool chọn Internet Options->Chọn Tab Fonts chọn Font tiếng Việt • Hoặc chọn Menu View >EnCoding chọn font User defined,Vietnamese… Các tuỳ chọn khác cho trang Web: Tools  Internet option • Chọn trang web mặc định mở trình duyệt  Tab General(Hình 1): thiết lập tùy chọn cho trình duyệt – –   Use Current: chọn trang để load lên lần khởi động IE Use Default: địa trang Web mặc định mở trình duyệt Ví dụ Khi mở IE tự động hiển thị trang Web Yahoo Address nhập: http://yahoo.com , chọn Use Blank hiển thị trang trắng History: lưu lại trang web duyệt qua máy Client thông tin đăng nhập user hành…Nếu khộng muốn lưu lại: Chọn Delete Cookies Delete Files Days to keep pages in history: thiết lập khoảng thời gian lưu trữ trang đối tượng History  – –  Tab Advance(Hình 2): chọn tùy chọn khác như: Ngăn chặn khơng cho tải hình xuống trang web Màu liên kết, cách thể liên kết trang Hiệu chỉnh trang Web: View source->hiệu chỉnhchọn File  Save để lưu lại F5 để cập nhật lại nội dung vừa hiệu chỉnh ... makup Language) gồm đoạn mã chuẩn quy ước để thiết kế Web hiển thị trình duyệt Web Hypertext (Hypertext link) từ hay cụm từ đặc biệt dùng để tạo liên kết trang web – Mark up: cách định dạng văn... 10 : Điều khiển đối tượng chạy cách tự động trang Web Cú pháp: Object 11 : không hiển thị trang Cú pháp: 12 :... lại trang Web: Click biểu tượng Refresh (F5) công cụ Chỉnh size chữ hiển thị trang: Chọn Menu View->Text size Chỉnh lại font chữ: Chọn Menu View->EnCoding Nếu trang Web không hiển thị Font tiếng