Ngôn ngữ đánh dấu siêu văn bản_ HTML

Chia sẻ: Thanh Tai | Ngày: | Loại File: PDF | Số trang:0

Thêm vào BST

Báo xấu

705
lượt xem 227
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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ả. Có 2 loại trang web: tĩnh và động. Thông tin được khai báo bằng cách dùng các thẻ theo một quy luật khai. Người dùng sử dụng các trình duyệt để đọc các thông tin.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Ngôn ngữ đánh dấu siêu văn bản_ HTML

Bùi Vũ Anh - Bài giảng HTML 08-08-2005 Nội dung Khái niệm Bài 1 • Khái niệm cơ bản • Web (World Wide Web): Mạng toàn cầu, • Cấu trúc trang Web sử dụng ngôn ngữ đánh dấu siêu văn bản Ngôn ngữ ngữ đá đánh dấ dấu siêu văn bả bản (HTML – Highper Text Markup Language) • Một số thẻ thông dụng (Highper Text Markup Language – HTML) để mô tả nội dung. • Một số thẻ đặc biệt • Có 2 loại trang Web: Tĩnh và động BVA1 Ths. Bùi Vũ Anh • Cấu trúc thẻ Script • Thông tin được khai báo bằng cách dùng Bộ môn Tin học các thẻ theo một quy luật khai báo. BVA5 Khoa Toán – Cơ – Tin học vuanh@vnu.edu.vn • 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 Trình chủ và ngôn ngữ script Trình chủ và ngôn ngữ script… • Internet Explorer, Nescape, FireFox… • Trình chủ (web server): Nơi cung cấp dịch • Client script không phụ thuộc vào Server • Kịch bản (script): Có 2 loại, chạy trên máy vụ web, đặt và chạy trên máy tính script và Web server (tương đối) chủ (server script) và máy khách – máy • Môi trường chạy trình chủ: • Có thể dùng nhiều loại client script trong duyệt web (client script). Đó là dạng lập – Windows: IIS (Internet Information Server), cùng một trang Web nhưng không được Apache trình dùng để nâng cao hiệu quả, tính khai báo lẫn lộn – Linux: Apache, JRUN, Weblogic… năng của trang web. • Ngôn ngữ script: ASP (Active Server • Các hệ CSDL gắn với trang web dùng để Page), JSP (Java Server Page), Servlet, lưu thông tin: Access, SQL Server, PHP, Perl, ASP.NET MySQL, Oracle… – Phổ biến: VB Script và Java Script 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 Ý nghĩa các thẻ Các thẻ định dạng • Là một file text có cấu trúc • Div: Canh lề đoạn văn bản • Head: Thông tin không xuất hiện trên • Tên file lưu trữ: .htm, .html, .jhtm, phtm… trang web, mục đích cung cấp thông tin… … • Tên thẻ không phân biệt chữ hoa/thường • Title: Tên trên thanh tiêu đề của trình duyệt • 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 Tiêu đề … • 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 • .... : Làm nổi bật
Bùi Vũ Anh - Bài giảng HTML 08-08-2005 Ngắt dòng và đoạn Chèn bảng Chèn bảng… BVA8 BVA9 • Dấu trắng, dấu ngắt đoạn trên trình duyệt chỉ • Table: Định dạng bảng được tính 1 lần … BVA10 BVA11 –Td: Khai báo cột • Để tách đoạn, dùng thẻ p, div : Khai báo cột BVA6 BVA7 … : Khai báo hàng duyệt hiện đúng văn bản như đã trình bầy … • Dùng thẻ … để định dạng tiêu đề cột của trong trang web. bảng • Dùng thẻ … để căn đều theo Thiết kế bảng chỉ quan tâm chiều rộng, thẻ tr chiều rộng một dòng tiêu đề trong bảng. Thẻ này quan tâm chiều cao, thẻ td quan tâm chiều rộng. đặt trong thẻ Đơn vị dùng tính theo điểm 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 Danh sách mô tả Thẻ chèn ảnh • Không thứ tự (unorder list) • description description1 Item 2 description title2 • Imag không có thẻ đóng, align dùng để dóng văn bản so với ảnh, mặc định là bottom. Nếu dùng left | right, văn description description2 • Có thứ tự (order list) … bản sau đó cũng bị tác động (tương quan text-image) • Ảnh có thể bị biến dạng nếu cung cấp chiều cao, rộng description titleN Item 1 sao tỉ lệ => Không nên chỉ chiều cao và rộng nếu không Item 2 description descriptionN cần thiết. • Nếu muốn ảnh không có viền, chọn border m=0 • Danh sách sẽ đánh số thứ tự từ y (y là số, type tuỳ ý) Khi trình bầy, danh sách sẽ lùi đầu dòng theo sự • Khi không nạp được ảnh, xâu trong alt sẽ hiện thay thế • Danh sách có thể lồng nhau nhưng không được đan chéo phân cấp • Các loại ảnh hỗ trợ: .GIF, .JPG, .PNG Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 16 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 17 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 18 Bộ môn Tin học, Khoa Toán - Cơ - Tin học, Trường ĐH Khoa học Tự nhiên 3
Slide 14 BVA6 Độ đậm đường viền, 0 tức là không có viền. Đơn vị là điểm Bui Vu Anh, 8/2/2005 BVA7 Khoảng cách giữa các hàng và cột. Đơn vị là điểm Bui Vu Anh, 8/2/2005 Slide 15 BVA8 Độ rộng của cột so với bảng tính theo % Bui Vu Anh, 7/23/2005 BVA9 Dóng nội dung trong ô Bui Vu Anh, 7/23/2005 BVA10 Kết hợp m hàng Bui Vu Anh, 7/23/2005 BVA11 Kết hợp k cột Bui Vu Anh, 7/23/2005
Bùi Vũ Anh - Bài giảng HTML 08-08-2005 Các ký tự đặc biệt Thẻ chèn liên kết Thẻ chèn liên kết… BVA17 • Dấu xuống dòng: . Clear • Gắn với văn bản: … BVA16 Bookmark this URL • Gắn với ảnh • &gt (>), &lt (
Slide 20 BVA16 URL: Universal Relate Link - địa chỉ internet, mail hay intranet UNC: Địa chỉ mạng cục bộ Bui Vu Anh, 7/23/2005 Slide 21 BVA17 Máy cần hỗ trợ Java Virtual Machine Bui Vu Anh, 7/23/2005 Slide 22 BVA18 Các thẻ này dùng để khai báo dữ liệu nhằm kết nối đến kịch bản chạy trên trình chủ Bui Vu Anh, 7/23/2005
Bùi Vũ Anh - Bài giảng HTML 08-08-2005 Thẻ checkbox Thẻ radio Thẻ submit Dùng cho tuỳ chọn • Dùng cho chọn 1 trong nhiều lựa chọn ¾ Dùng chấp nhận những dữ liệu nhập trong input • Quan tâm đến thuộc tính checked (true/false) khi sử • Các radio phải có cùng tên, khác nhau về giá trị phía trình chủ bằng phương thức Post (trong thẻ dụng Client Script. form) hay Get (trong QueryString) • Server side tham chiếu thẻ dưới dạng giá trị của thẻ • Chỉ một mục được checked, ưu tiên mục cuối thông qua tên nên cần định nghĩa giá trị trước. cùng nếu cố tình check nhiều mục ¾ Chuyển các giá trị lên QueryString, khai bảo thẻ • Khi khai báo trùng tên, chuỗi giá trị nhận được cách • Khi tham chiếu bằng Server Script sẽ nhận form với phương thức Get; muốn Server Script lấy nhau bởi dấu phảy (,) được giá trị của tuỳ chọn được chọn dữ liệu từ thẻ form, khai báo thẻ form với phương thức Post How can you know us: Gender: Newspaper Male (value là giá trị caption trên nút) Television Female Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 25 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 26 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 27 Thẻ button Thẻ reset Thẻ hidden • Chấp nhận những dữ liệu nhập trong các thẻ • Phục hồi dữ liệu nhập trong các thẻ input, • Tương tự thẻ text nhưng không hiển thị trên input lên trình khách (nếu dùng phương thức select, textarea trang web, không cho phép người dùng nhập submit(), nút sẽ gửi thẻ form lên trình chủ • Được khai báo trong thẻ form dùng để reset dữ liệu mà cần định nghĩa trước giá trị cho web). Muốn tính toán trên trang web => dùng dữ liệu trên trang web nó, nhằm thực hiện mục đích tiềm ẩn. thẻ này • Thực thi phương thức Client Script Ví dụ: Quay về trang trước Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 28 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 29 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 30 Bộ môn Tin học, Khoa Toán - Cơ - Tin học, Trường ĐH Khoa học Tự nhiên 5
Bùi Vũ Anh - Bài giảng HTML 08-08-2005 Thẻ image Thẻ textarea Thẻ select • Hình ảnh trên trang web gắn với một chức • Nhập dữ liệu trên nhiều dòng (không giới • Chọn các phần tử trong danh sách (ListBox, năng (ví dụ gắn kèm các nút submit, reset, hạn trước chiều dài lớn nhất) ComboBox) button). • Hạn định số dòng (rows) và cột (cols) phục • Cho chọn một (ComboBox) hoặc nhiều mục vụ việc hiển thị (ListBox)
Bùi Vũ Anh - Bài giảng HTML 08-08-2005 Thẻ form… Thẻ form… Các thẻ đặc biệt dùng thẻ form: loại font sử dụng, tìm kiếm, xoá cache, … Các input nằm ở đây … chuyển trang… Nếu muốn hiện nội dung tiếng Việt và cho phép Khi bấm Enter trong hộp Text, hành động submit cũng sẽ Ứng dụng trên Server Script muốn Upload file từ nhập dữ liệu trên thẻ input bằng tiếng Việt Unicode được thực hiện và nó sẽ gọi hành động tương ứng Client lên Server đều phải khai báo thẻ này trong chuẩn UTF-8 (dùng bộ gõ Unicode), khai báo thẻ (doaction) trang chọn file. meta như ở trên. Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 37 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 38 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 39 Các thẻ đặc biệt… Các thẻ đặc biệt… Các thẻ đặc biệt… • Thẻ meta tìm kiếm: • Tự động chuyển đến URL/UNC sau một thời • Xoá cache: Cung cấp thông tin cho các Search Engine khi gian: –Trang web được nạp vào cache để truy nhập trang web được đăng ký sử dụng trên internet nhanh khi duyệt
Bùi Vũ Anh - Bài giảng HTML 08-08-2005 Các thẻ đặc biệt… Các thẻ đặc biệt… Các thẻ đặc biệt… • Thẻ marquee: –Khai báo dòng chữ chuyển động ngang trên – Dùng thống nhất trong trang web trang web
Bùi Vũ Anh - Bài giảng HTML 08-08-2005 Thẻ script JavaScript VBScript • Kiểm soát các hành động của người dùng • Khai báo phương thức dùng cú pháp lập trình của • Khai báo phương thức dùng cú pháp lập trình của • Khai báo và sử dụng các phương thức, thuộc tính của JavaApplet Visual Basic for Application Client Script. Ví dụ 2 loại script // khai báo biến ; biến không cần khai báo kiểu // code Function Tên(tham số):kiểu trả lại Function Tên(tham số) as Kiểu trả lại { Begin // khai báo biến ; Dim biến as kiểu // câu lệnh ; câu lệnh # code // phát biểu điều kiện ; phát biểu điều kiện … … Các script có thể để bất kỳ đâu nhưng nên để trong thẻ head } End Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 49 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 50 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 51 Tổng kết • Giới thiệu về ngôn ngữ HTML • Các thẻ mô tả cơ bản tạo nên trang web tĩnh • Các thẻ phục vụ việc nhập dữ liệu • Các thẻ đặc biệt dùng tăng tuỳ chọn cho trang web • Thẻ nhúng phần lập trình trong trang web Bài tập: Tạo trang web cá nhân minh hoạ việc sử dụng các thẻ đã học. Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 52 Bộ môn Tin học, Khoa Toán - Cơ - Tin học, Trường ĐH Khoa học Tự nhiên 9