Bài giảng Thiết kế Web tĩnh - Phần 1: Ngôn ngữ HTML - Chương 1: Giới thiệu về Web

 Buổi 4 : 
  Casscading style sheet – CSS 
 Giới thiệu môn học 
  Buổi 5: 
  Giới thiệu Dreamweaver 
  Định dạng văn bản dùng CSS 
  Hình ảnh và liên kết trang 
  Buổi 6: 
  Bảng và trình bày trang bằng Dreamweaver 
  Behaviors – Form 
  Framesets – Kiểm tra và xuất bản 
 Buổi 7: 
  Tổng quan về JavaScript 
 Buổi 8: 
  Hàm trong JavaScript 
 Buổi 9: 
  Các cấu trúc điều khiển 
 Giới thiệu môn học 
  Buổi 10: 
  Mô hình đối tượng 
 Buổi 11: 
  Thiết kế Layout 
 Buổi 12: 
  Snippets 
  Buổi 13 : 
  Kiểm tra môn học 
 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 toàn cầu, các máy truyền 
 thông với nhau bằng giao thức chung là TCP/IP 
 (Transfer Control Protocol/Internet Protocol) 
 Intranet : là mạng cục bộ không nối vào Internet, 
 truyền thông bằng giao thức TCP/IP. 
 Mô hình Client-Server: mô hình khách-chủ. Server 
 chứa tài nguyên dùng chung cho nhiều máy Client 
 Internet Server: là các Server cung cấp các 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 và có thể có nhiều loại dịch vụ Internet khác 
 nhau. 
 Internet Protocol : tiêu chuẩn chi phối việc chuyển 
 tải thông tin giữa các máy tính trong mạng 
 World Wide Web (WWW): dịch vụ tra cứu thông tin 
 Internet. Dịch vụ này đưa ra cách truy xuất các tài 
 liệu của các máy phục vụ dễ dàng thông qua các 
 giao tiếp đồ họa. Để sử dụng dịch vụ này máy Client 
 cần có một chương trình gọi là Web Browser. 
 I. CÁC KHÁI NIỆM CƠ BẢN 
 Web Browser : trình duyệt Web. Dùng để truy xuất 
 các tài liệu trên các Web Server. 
 – Internet Explorer 
 – Firefox, Opera… 
 Home page: là trang web đầu tiên trong web site 
 Hosting provider: là công ty hoặc tổ chức đưa các 
 trang của chúng ta lên mạng 
 Publish: Xuất bản trang web 
 Web server là một chương trình đáp ứng yêu cầu 
 truy xuất tài nguyên 
 Webserver là dạng phần mềm cài trên máy 
 server để phục vụ quản l{ các website . Ví dụ : 
 apache, iis .tích hợp các giao diện lập trình 
 bằng một ngôn ngữ cụ thể. 
 Web là ứng dụng (trên mạng client-server) 
 được chia sẽ trên mạng internet 
 I. CÁC KHÁI NIỆM CƠ BẢN 
 URL(Unioform resource locator): một địa chỉ chỉ 
 đến một file cụ thể trong nguồn tài nguyên mạng. 
 Ví dụ: 207.46.130.149 được biểu diễn trong URL là 
 www.microsoft.com 
 – URL tuyệt đối – là địa chỉ Internet đầy đủ của một 
 trang hoặc file, bao gồm giao thức, vị trí mạng, đường 
 dẫn tuz chọn và tên file. 
 Ví dụ, http:// www.microsoft.com/ms.htm. 
 – URL tương đối - mô tả ngắn gọn địa chỉ tập tin kết nối 
 có cùng đường dẫn với tập tin hiện hành, URL tương 
 đối đơn giản bao gồm tên và phần mở rộng của tập tin. 
 II. GIỚI THIỆU KHÁI QUÁT VỀ WEB 
 Web là một ứng dụng chạy trên mạng Client-Server, 
 khách và chủ web liên lạc nhau bằng giao thức http 
 (HyperText Transfer Protocol). Các web server cung 
 cấp thông tin được định dạng theo ngôn ngữ HTML 
 Web Page: là một file văn bản chứa những tag 
 HTML hoặc những đọan mã đặc biệt mà trình duyệt 
 web có thể hiểu và thông dịch được, file được lưu 
 với phần mở rộng là .html hoặc htm. 
 Website: Một tập hợp nhiều web page, thể hiện 
 thông tin của một tổ chức hoặc một chủ đề nào đó 
 II. GIỚI THIỆU KHÁI QUÁT VỀ WEB 
 HTML (HyperText makup Language) gồm các đoạn mã 
 chuẩn được quy ước để thiết kế Web và được hiển thị bởi 
 trình duyệt Web 
 – Hypertext (Hypertext link) là một từ hay một cụm từ 
 đặc biệt dùng để tạo liên kết giữa các trang web 
 – Mark up: là cách định dạng văn bản để trình duyệt 
 hiểu và thông dịch được. 
 – Language: tập những quy luật để định dạng văn bản 
 trên trang web. 
 Trình soạn thảo trang web :Có thể soạn thảo web trên 
 bất kz trình soạn thảo văn bản nào: Notepad, 
 FrontPage hoặc Dreamweaver. 
 III. TAG HTML 
 Cú pháp: 
 Object 
 – TagName : tên tag HTML, liền với dấu “< “, 
 không có khoảng trắng 
 – Object :đối tượng hiển thị trên trang Web 
 – ListPropeties: danh sách thuộc tính của Tag 
 III. TAG HTML 
 Nếu có nhiều thuộc tính thì các thuộc tính cách 
 nhau khoảng trắng 
 Object 
Ví dụ: 
 nội dung 
IV. CẤU TRÚC CƠ BẢN CỦA TRANG WEB 
 Nội dung thông tin của trang web 
 Nội dung hiển thị trên trình duyệt 
 V. CÁC TAG HTML CƠ BẢN 
1. : Hiển thị nội dung tiêu đề của trang web 
 trên thanh tiêu đề của trình duyệt 
 Cú pháp: 
 Nội dung tiêu đề 
2. : Tạo header, gồm 6 cấp header, được đặt 
 trong phần BODY 
 Cú pháp 
 Nội dung của Header 
3. : Dùng để ngắt đoạn và bắt đầu đoạn mới 
 Cú pháp: 
 Nội dung của đoạn 
4. : Ngắt dòng tại vị trí của tag. 
5. : Kẻ đường ngang trang 
 Cú pháp: 
 <HR Align=”directtion” Width= “Value” 
 Size=value color=#rrggbb> 
6. : định dạng font chữ 
 – Định dạng Font chữ cho cả tài liệu thì đặt tag 
 trong phần 
 – Định dạng từng phần hoặc từng từ thì đặt tại vị 
 trí muốn định dạng 
 Cú pháp: 
 <FONT Face=”fontName1, fontName2, 
 fontName3” size=”value” Color=”rrggbb”> 
 Nội dung hiển thị 
7. : Chứa nội dung của trang web 
 Cú pháp: 
 Nội dung chính của trang web 
 Các thuộc tính của 
 – BgColor: thiết lập màu nền của trang 
 – Text: thiết lập màu chữ 
 – Link: màu của siêu liên kết 
 – Vlink: màu của siêu liên kết đã xem qua 
 – Background: load một hình làm nền cho trang 
 – LeftMargin: Canh lề trái 
 – TopMargin: Canh lề trên của trang 
Ví dụ: 
 LearningHTML 
 Welcome to HTML 
8. : Chèn một hình ảnh vào trang Web 
 Cú pháp: 
<Img src=”URL of Image” alt=”Text” width=value 
 height=value border=value> 
9. : Chèn một âm thanh vào trangWeb. Âm 
 thanh này sẽ được phát mỗi khi người sử dụng mở trang 
 Web. 
 Cú pháp: 
10. : Cho phép đưa âm thanh trực tiếp vào trang 
 WEB. 
 Cú pháp: 
Ví dụ: 
<embed src=“nhac.wmv" width="80%" height="50%" 
 autostart="true" loop="true" hidden="false"> 
10. : Điều khiển đối tượng 
 chạy một cách tự động trên trang Web 
 Cú pháp: 
 Object 
11. : không hiển thị trong trang 
 Cú pháp: 
12. : định dạng chữ đậm 
 Cú pháp 
 Nội dung chữ đậm 
13. Tag : Định dạng chữ nghiêng 
 Cú pháp: 
 Nội dung chữ nghiêng 
14. Tag : Gạch chân văn bản 
 Cú pháp: 
 Nội dung chữ gạch chân 
15. Tag và : Chỉnh cở chữ to hoặc 
 nhỏ hơn cở chữ xung quanh 
 Cú pháp 
 Nội dung chữ to 
 Nội dung chữ nhỏ 
16. Tag và :Đưa chữ lên cao hoặc 
 xuống thấp so với văn bả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 bản 
 Cú pháp: 
 Nội dung văn bản bị gạch ngang 
18. …: 
 Dùng để nhập một dòng mã có định dạng ký tự riêng. 
 Dòng mã này không được thực hiện mà được hiển thị 
 dưới dạng văn bản bình thường 
  Cú pháp: 
 Nội dung văn bản muốn định dạng 
  Ví dụ: 
 If A < B 
 Then 
 A = A + 1 
19. : Văn bản được nhấn mạnh (giống tag ) 
 Cú pháp: 
 Văn bản được nhấn mạnh 
20. : Định dạng chữ đậm (giống ) 
 Cú pháp: 
Văn bản được nhấn mạnh 
21. : 
 Dùng phân cách một khối văn bản để nhấn mạnh, 
 đoạn văn bản này được tách thành một paragraph 
 riêng, thêm khoảng trắng trên và dưới đoạn đồng 
 thời thụt vào so với lề trái (tương đương chức 
 năng của phím tab) 
 Cú pháp: 
 Nội dung khối văn bản nhấn mạnh 
22. : Giữ nguyên các đị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 bản cần định dạng trứơc với tất cả 
 định dạng khoảng cách, xuống dòng và ngắt hàng 
Ví dụ: 
 Learning HTML 
 TRƯỜNG ĐẠI HỌC SÀI GÒN 
 Khoa Công Nghệ Thông Tin 
23. : Chia văn bản thành các khối, có 
 chung một định dạng 
 – chia văn bản thành một khối bắt đầu 
 từ một dòng mới. 
 – tách khối nhưng không bắt đầu từ 
 một dòng mới 
 Cú pháp: 
 Nội dung của khối bắt đầu từ một dòng mới 
Ví dụ: 
 Learning HTML 
 TRƯỜNG ĐẠI HỌC SÀI GÒN TP.HCM 
 Khoa Công Nghệ Thông Tin 
 Nội dung của khối trong 1 dòng 
Ví dụ: 
 Learning HTML 
 Creating Web Pages 
 With HTML 
24. Các ký tự đặc biệt: 
 a) Lớn hơn (>): & gt;
 Ví dụ: 
 If A > B 
 Then 
 A = A + 1 
 b) Nhỏ hơn (<): < 
 Ví dụ: 
 If A < B 
 Then 
 A = A + 1 
c) Cặp nháy””: " 
 Ví dụ: 
 " To be or not to be? " That is the 
 question 
d) Ký tự và &: & 
 Ví dụ: 
 William & Graham went to the fair 
e) Ký tự khoảng trắng:   
 VI.CÁC THAO TÁC TRONG CỬA SỔ TRÌNH DUYỆT 
– Cách load lại trang Web: Click biểu tượng Refresh (F5) trên 
 thanh công cụ. 
– Chỉnh size chữ hiển thị trên 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ị được 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 các font 
 như User defined,Vietnamese…. 
 
– Các tuz chọn khác cho trang Web: Tools Internet option 
 • Chọn trang web mặc định khi mở trình duyệt 
 Tab General(Hình 1): thiết lập các tùy chọn cho trình duyệt 
 – Use Current: chọn trang hiện tại để load lên mỗi lần khởi động IE 
 – Use Default: địa chỉ trang Web mặc định mỗi khi trìnhmở duyệt 
 Ví dụ 
 Khi mở IE thì tự động hiển thị trang Web Yahoo thì trong ô 
 Address nhập:  , nếu chọn Use Blank thì hiển 
 thị trang trắng . 
 History: lưu lại các trang web đã duyệt qua tại máy Client 
 và thông tin đăng nhập của user hiện hành…Nếu khộng 
 muốn lưu lại: Chọn Delete Cookies và Delete Files. 
 Days to keep pages in history: thiết lập khoảng thời gian 
 lưu trữ trang trong đối tượng History 
 Tab Advance(Hình 2): có thể chọn các 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ể hiện liên kết trên 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