Xem mẫu
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
Bài 1
Ngôn ngữ đánh dấu siêu văn bản (Highper Text Markup Language – HTML)
Ths. Bùi Vũ Anh Bộ môn Tin học
Khoa Toán – Cơ – Tin học vuanh@vnu.edu.vn
Nội dung
• Khái niệm cơ bản
• Cấu trúc trang Web
• Một số thẻ thông dụng • Một số thẻ đặc biệt
• Cấu trúc thẻ Script
Khái niệm
• Web (World Wide Web): Mạng toàn cầu, sử dụng ngôn ngữ đánh dấu siêu văn bản (HTML – Highper Text Markup Language) để mô tả nội dung.
• Có 2 loại trang Web: Tĩnh và động BVA1
• Thông tin được khai báo bằng cách dùng các thẻ theo một quy luật khai báo.
• Người dùng sử dụng các trình duyệt để đọc các thông tin
Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 2 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 3
Trình duyệt và kịch bản
• Internet Explorer, Nescape, FireFox…
• Kịch bản (script): Có 2 loại, chạy trên máy chủ (server script) và máy khách – máy duyệt web (client script). Đó là dạng lập trình dùng để nâng cao hiệu quả, tính năng của trang web.
• Các hệ CSDL gắn với trang web dùng để lưu thông tin: Access, SQL Server, MySQL, Oracle…
Trình chủ và ngôn ngữ script
• Trình chủ (web server): Nơi cung cấp dịch vụ web, đặt và chạy trên máy tính
• Môi trường chạy trình chủ:
– Windows: IIS (Internet Information Server), Apache
– Linux: Apache, JRUN, Weblogic…
• Ngôn ngữ script: ASP (Active Server Page), JSP (Java Server Page), Servlet, PHP, Perl, ASP.NET
– Phổ biến: VB Script và Java Script
Trình chủ và ngôn ngữ script…
• Client script không phụ thuộc vào Server script và Web server (tương đối)
• Có thể dùng nhiều loại client script trong cùng một trang Web nhưng không được khai báo lẫn lộn
Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 4 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 5 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 6
Bộ môn Tin học, Khoa Toán - Cơ - Tin học, Trường ĐH Khoa học Tự nhiên 1
Slide 3
BVA1 - Web tĩnh: Không kết nối CSDL, thông tin hiện lên được lưu trữ trên file text hay các file riêng biệt.
- Web động: Có kết nối tới CSDL, khi trang web được làm tươi, dữ liệu được trình bầy được đọc từ CSDL Bui Vu Anh, 7/23/2005
BVA5 Thẻ: Tag, thường gồm 2 thẻ, thẻ mở được đặt trong < > và thẻ đóng đặt trong . Chúng có cùng tên và phần nằm trong 2 thẻ sẽ chịu tác động của thẻ
Bui Vu Anh, 7/23/2005
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
Cấu trúc trang Web • Là một file text có cấu trúc
• Tên file lưu trữ: .htm, .html, .jhtm, phtm… • Tên thẻ không phân biệt chữ hoa/thường
Tiêu đề …
…
…
Ý nghĩa các thẻ
• Head: Thông tin không xuất hiện trên trang web, mục đích cung cấp thông tin…
• Title: Tên trên thanh tiêu đề của trình duyệt
• Body: Thông tin xuất hiện trên trang web, có thể che dấu một phần thông tin tuỳ theo phương thức của client script
Các thẻ định dạng
• Div: Canh lề đoạn văn bản
… : gạch ngang qua
• BVA6 BVA7
…
Thiết kế bảng chỉ quan tâm chiều rộng, thẻ tr quan tâm chiều cao, thẻ td quan tâm chiều rộng. Đơn vị dùng tính theo điểm
Chèn bảng…
BVA8 BVA9
… BVA10 BVA11
: Khai báo cột
… : Khai báo hàng
• Dùng thẻ … để định dạng tiêu đề cột của bảng
• Dùng thẻ … để căn đều theo chiều rộng một dòng tiêu đề trong bảng. Thẻ này đặt trong thẻ
Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 13 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 14 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 15
Danh sách
• Không thứ tự (unorder list)
…
• P: Định dạng câu, sau thẻ kết thúc sẽ sang một dòng mới, tách nhau bằng một khoảng cách
…
•....: Làm nổi bật đoạn văn bản bằng cách lùi vào phía trong trang web, giữ nguyên định dạng Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 7 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 8 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 9 Các thẻ định dạng… Mã 16 màu Các thẻ định dạng… • Font: Quy định font cho đoạn văn bản – … – Tên font sử dụng: font viết trước quy định sẽ dùng nếu máy đã cài đặt, font thứ 2 được dùng nếu font thứ nhất không cài đặt… – Hệ 16 màu chuẩn thì có thể dùng tên: red, blue…, hệ màu 24bit, dùng 6 số hệ hexa dạng #FFFFFF (dấu # ở trước) – Cỡ chữ 1, 2, 3…7 hoặc dùng kích thước tương đối so với trình duyệt, dùng –n, +n size=+1, size=-2 aqua black gray green navy olive silver teal blue fuchsia lime maroon purple red white yellow • B, I, U: Quy định font chữ đậm, nghiêng, gạch chân … , … , … Một số thẻ khác làm thay đổi hình thức của chữ. • Heading: H1 đến H6, Typewriter: tt • ..., ... • ... : superscript - chỉ số trên • ... : subscript - chỉ số dưới •
…nếu muốn trình duyệt hiện đúng văn bản như đã trình bầy trong trang web. Chèn bảng • Table: Định dạng bảng –Tr: Khai báo hàng –Td: Khai báo cột