Tạo trang web với HTML Trần Phước Tuấn tranphuoctuan.khoatoan.dhsp@gmail.com ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Nội dung Ví dụ trang web Giới thiệu chung HTML Đặc điểm HTML Trình bày văn HTML Multimedia Form trang web Frame 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Ví dụ trang web – Cấu trúc Lập Lập trình trình web web Chào Chào mừng mừng bạn bạn đến đến với với HTML! HTML! 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Ví dụ trang web – Cấu trúc § Thử nghiệm: – Mở trình duyệt web (IE) – Vào File/Open, chọn file CHAO.HTM vừa ghi – Nhấn OK → Có kết hình bên § Thay đổi: – Quay lại Notepad, sửa lại nội dung trang web ghi lại – Chuyển sang IE, nhấn nút Refresh (F5) → thấy kết 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Giới thiệu chung HTML § HTML = HyperText Markup Language ngôn ngữ đánh dấu siêu văn bản, ngôn ngữ dùng để viết trang web § Do Tim Berner Lee phát minh W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Đặc điểm HTML § HTML sử dụng thẻ (tags) tags để định dạng liệu § HTML không phân biệt chữ hoa, chữ thường § Các trình duyệt thường không báo lỗi cú pháp HTML § Khi viết sai cú pháp trình duyệt hiển thị không với dự định § Có nhiều thẻ, thẻ có tên mang ý nghĩa khác 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Đặc điểm HTML § Một thẻ có thuộc tính nhằm bổ sung tác dụng cho thẻ § Mỗi thuộc tính có tên thuộc tính (tên_TT) § Viết thẻ có thuộc tính: § Chú ý: – Có thể thay đổi thứ tự, số lượng thuộc tính mà không gây lỗi cú pháp – Sự hỗ trợ thẻ, thuộc tính trình duyệt khác Chỉ giống thẻ, thuộc tính – Thẻ đóng thẻ có thuộc tính viết bình thường () 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Đặc điểm HTML § Có loại thẻ: thẻ đóng thẻ mở § Cách viết thẻ: – Thẻ mở: Ví dụ: , , … – Thẻ đóng tương ứng: Ví dụ: , Chú ý: • Luôn có thẻ mở thẻ đóng tương ứng Ví dụ: thẻ đóng • Các thẻ lồng nhau, không đan xen lẫn 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Đặc điểm HTML § Tập tin HTML có phần mở rộng (đuôi) HTM HTML tập tin văn (plain text) § Có thể soạn thảo file HTML trình soạn thảo “văn thuần” (Notepad, EditPlus, Notepad++, …) § Trình hỗ trợ soạn thảo HTML (trực quan, code): – Microsoft FrontPage – Macromedia Dreamweaver –… 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn TRÌNH BÀY TÀI LIỆU TRONG HTML ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 6.2 Các thành phần Form – LABEL 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 58 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 6.2 Các thành phần Form – Fieldset Subject English Mathematics Graph Theory 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 59 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 6.3 Các tiện ích form input § Accesskey=char – Tạo phím nóng cho form fields – Áp dụng cho tất form fields – Cách nhấn Alt + char – Tránh phím tắt browser § Title = string – Tạo tooltip cho form fields – Áp dụng cho tất form fields § Autocomplete = ON/OFF – Gợi ý tự động nhập liệu – Áp dụng cho tất tag form, input 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 60 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 6.3 Các tiện ích form input §Để sử dụng tính AutoComplete phải mở lên trình duyệt web §Cách mở: –Tool Internet Options –Chọn tab Content –Chọn settings ô AutoComplete 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 61 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 6.4 Gởi liệu phương thức POST/GET § Các đối số Form ghi kèm theo vào đường dẫn URL thuộc tính Action tag § Khối lượng liệu đối số truyền Form bị giới hạn chiều dài tối đa URL Address bar § Chiều dài tối đa URL 2048 bytes GET 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 62 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 6.4 Gởi liệu phương thức POST/GET Anh văn: Nhật: [...]... so với Mạng Internet – Địa chỉ tương đối: Là vị trí tương đối so với trang web hiện hành đang chứ liên kết 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 25 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.7 Bảng 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 26 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.7 Bảng 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn. .. HTTP-EQUIV="Content-Type" CONTENT="text /html; charset=utf-8"> 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 16 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.2 Thẻ META Tự động chuyển hướng trang web § Tự động chuyển hướng trang web sang trang web khác (URL) sau một khoảng thời gian t (tính theo giây) § Cú pháp 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 17 ĐẠI HỌ HỌC SP TPHCM,... 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 11 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.1 Thẻ thể hiện cấu trúc tài liệu 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 12 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.1 Thẻ thể hiện cấu trúc tài liệu § < /html> : Định nghĩa phạm vi của văn bản HTML § : Định nghĩa các mô tả về trang HTML Thông... 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn Mục 1 Mục 2 Mục 3 Mục 1 Mục 2 Mục 3 19 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.4 Thẻ định dạng danh sách 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 20 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.4 Thẻ định dạng danh sách 7/24/2009 Lập trì trình Web - Trầ Trần. .. 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 14 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.2 Thẻ META § Đặt ở giữa … § Thường dùng quy định thuộc tính cho trang web § Có tác dụng lớn với Search Engine § Có 2 cách viết thẻ : 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn. .. Dấu ngoặc kép (“): " • Ký hiệu Ó: © • … § Ghi chú trong HTML: HTML > 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 32 5 Multimedia ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Nội dung 1 Hình ảnh 2 Âm thanh 3 Video 4 Flash 5 Applet 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 34 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 5.1 Hình... _blank: blank tải trang web vào cửa sổ mới • _parent: parent tải trang web vào cửa sổ cha của nó • _self: self tải trang web vào chính cửa sổ hiện hành • _top: top tải trang web vào cửa số cao nhất 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 23 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.6 Liên kết § Lưu ý: – Liên kết với địa chỉ e-mail thì đặt href=“mailto:địa_chỉ_e-mail” – Thực... đối (+2,-4 ) so với font chữ hiện tại 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 22 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.6 Liên kết § Thuộc tính: – href=“đích liên kết”: Nếu trong cùng web nên sử dụng đường dẫn tương đối – target=“tên cửa sổ đích”, tên cửa sổ phân biệt chữ hoa/thường • name: name tải trang web vào frame có tên name • _blank: blank tải trang web vào cửa sổ... bản HTML § : Định nghĩa các mô tả về trang HTML Thông tin trong tag này không được hiển thị trên trang web § : Mô tả tiêu đề trang web § : Xác định vùng thân của trang web, nơi chứa các thông tin 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 13 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.1 Thẻ thể hiện cấu trúc tài liệu Thuộc tính của Body... đặt href=“javascript:lệnh” § Liên kết đến trang khác – Thuộc tính href=“url của trang khác” – Khi click vào liên kết sẽ chuyển đến trang khác § Liên kết trong cùng một trang – Thuộc tính href=“#id của thẻ trong trang – Khi click và liên kết sẽ chuyến đến thẻ có “id” được ghi trong thuộc tính id của thẻ 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 24 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN ... HỌ HỌC Nội dung Ví dụ trang web Giới thiệu chung HTML Đặc điểm HTML Trình bày văn HTML Multimedia Form trang web Frame 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM,... đối so với trang web hành liên kết 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 25 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.7 Bảng 7/24/2009 Lập trì trình Web - Trầ Trần. .. 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 20 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.4 Thẻ định dạng danh sách 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn