Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 54 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
54
Dung lượng
4,06 MB
Nội dung
2/16/2011 1 ĐẠI HỌC SÀI GÒN – KHOA CNTT THIẾT KẾ WEB R ÌNH WEB Ngôn ngữ HTML K Ế VÀ LẬP T R GV: Trần Đình Nghĩa tdnghia1977@gmail.com THIẾT K 1 2/16/2011 2 Nội dung buổi học trước 1. Các bướcthiếtlậpwebsite 2 Thiết kế lập trình website 2 . Thiết kế lập trình website • Thiếtkế g iao di ệ n R ÌNH WEB g ệ 3. Xây dựng website dướigóc K Ế VÀ LẬP T R nhìn ngộ nghĩnh THIẾT K 2 2/16/2011 3 Nội dung 1. Giớithiệuvề HTML 2 Cấu trúc 1 tài liệu HTML 2 . Cấu trúc 1 tài liệu HTML 3. Các ta g ( thẻ ) HTML R ÌNH WEB g ( ) 4. Hướng dẫnthựchànhHTML K Ế VÀ LẬP T R 5. Gợiýchọn đề tài cho đồ án THIẾT K 3 2/16/2011 4 Giớithiệu về HTML HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu siêu HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu siêu vănbản, dùng để xây dựng một webpage. HTML: chứa các thành phần định dạng để báo cho browser biết cách hiểnthị một webpage. Một trang web thông thường gồm: Dữ liệu ( văn bản âm thanh hình ảnh ) R ÌNH WEB Dữ liệu ( văn bản , âm thanh , hình ảnh , … ) Các tag (thẻ) HTML để định dạng mô tả cách thứccácdữ liệuhiển thị trên trình duyệt â í ể á ể ộ K Ế VÀ LẬP T R Web brose r : ph â nt í ch & “hi ể u” c á ctags HTM L , hi ể n thị n ộ i dung web cho người dùng Web p a g e HTML: 1 file *.htm || *.html THIẾT K 4 pg || 2/16/2011 5 Trình duyệt – Trình soạn thảo Web browser – trình duyệtweb Notepad R ÌNH WEB K Ế VÀ LẬP T R Dreamweaver THIẾT K 5 2/16/2011 6 HTML cănbản - Tag (thẻ) HTML <html> <html> <head> HelloWorld.html <title>Hello world</title> </head> R ÌNH WEB <body> Hello world!<br> K Ế VÀ LẬP T R It's my first html. </body> THIẾT K 6 </body> </html> 2/16/2011 7 Cú pháp, đặc tính của HTML <TAG ten thuoc tinh=“ g ia tri” …… >__ g Dữ liệu </TAG> HTML tag: Tên gợinhớ Tag được quy định trong cặp dấu ngoặc <> Phần lớn ta g g ồm 2 p hần mở <ta g > và đón g < / ta g > R ÌNH WEB gg p g g /g Mộtsố tag chỉ có 1 phần& khôngcódữ liệu: <br>, <hr> Cấutrúclồng Thuộc tính của tag cung cấp thông tin bắt buộc / tùy chọn cho tag K Ế VÀ LẬP T R Thuộc tính của tag cung cấp thông tin bắt buộc / tùy chọn cho tag Mộtsố web browser không hiểumộtsố tag hoặcthuộctính Không phân biệt chữ hoa, thường ỏ á ả ắ THIẾT K 7 B ỏ qua c á ckho ả ng tr ắ ng 2/16/2011 8 Cấutrúc một webpage HTML <html> <head> <title>Hello world ầ utrang rang </title> </head> Phần đ ầ kết thúc 1 t R ÌNH WEB <body> Hello world!<br> ội dung Bắt đầuvà K Ế VÀ LẬP T R It's my first html. </body> Phầnn THIẾT K 8 </html> 2/16/2011 9 Cấu trúc 1 tài liệu HTML <ht l></ht l> Đị h hĩ h i ủ ă bả <ht m l></ht m l> : Đị n h ng hĩ a p h ạm v i c ủ a v ă n bả n HTML <head></head> : Đị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 R ÌNH WEB trang web <title></title> : Mô tả tiêu đề trang web K Ế VÀ LẬP T R <body></body> : Xác định vùng thân của trang web, nơi chứa các thông tin THIẾT K 9 2/16/2011 10 Các tag HTML cơ bản T ử lý đị h d ă bả T ag x ử lý đị n h d ạng v ă n bả n Tag danh sách Tag tạobảng <table> R ÌNH WEB Tag liên kếttrang<a> Ta g hình ảnh <im g > K Ế VÀ LẬP T R g g Tag âm thanh THIẾT K 10 [...]... thứ tự: THIẾT KẾ VÀ LẬP TR K RÌNH WEB OrderedList .html 23 23 2/16/2011 Danh sách có thứ tự THIẾT KẾ VÀ LẬP TR K RÌNH WEB OrderedListType .html 24 24 2/16/2011 Danh sách không có thứ tự UnOrderedList .html THIẾT KẾ VÀ LẬP TR K RÌNH WEB Vd: Danh sách không có thứ tự: g ự 25 25 2/16/2011 Danh sách tự định nghĩa THIẾT KẾ VÀ LẬP TR K RÌNH WEB DefinitionList .html 26 26 2/16/2011 Tag liên kết trang - URL ... http://172.0.0.1/demo/Thumuc1/fileB .html /demo/Thumuc1/fileB .html /d /Th 1/fil B ht l /Thumuc1/fileB .html Thumuc1/fileB .html Th 1/fil B ht l 35 35 2/16/2011 Phân loại URL file B có link đến file C, vậy file B có , ậy HTML element: Liên kết đến C THIẾT KẾ VÀ LẬP TR K RÌNH WEB URL = http://172.0.0.1/demo/Thumuc1/Thumuc1_1/fil eC .html /demo/Thumuc1/Thumuc1_1/fileC .html /Thumuc1_1/fileC .html / /... http://www.google.com.vn/search?hl=vi&q=Teach&met THIẾT KẾ VÀ LẬP TR K RÌNH WEB a http://server:port/directory/file http://www.microsoft.com:8080/products/greetings.htm l 28 28 2/16/2011 Tag liên kết trang - URL Tag liên kết trang – Tag (anchor) Cú pháp: Linked content Thuộc tính target của tag name: tải trang web vào frame có tên là name THIẾT KẾ VÀ LẬP TR K RÌNH WEB blank: tải trang web. .. trang web vào cửa sổ mới parent: tải trang web vào cửa sổ cha của nó self: tải trang web vào chính cửa sổ hiện hành top: tải trang web vào cửa sổ cao nhất Ví dụ: 29 29 2/16/2011 Phân loại liên kết Phân loại: â Liên kết ngoại (external link) THIẾT KẾ VÀ LẬP TR K RÌNH WEB Liên kết nội (internal link) Liên kết email (email link) 30 30 2/16/2011 Liên kết ngoại (external link) ... đề - h di Tiêu heading t tags: , …, , Đoạn văn bản: Định dạng chuỗi: , , , và THIẾT KẾ VÀ LẬP TR K RÌNH WEB g g g Đường kẻ ngang: Xuống dòng Hiển thị các ký tự đặc biệt ể á ý ặ ệ 11 11 2/16/2011 Ví dụ: Tag Heading THIẾT KẾ VÀ LẬP TR K RÌNH WEB Nội dung hiện thị Trong trình duyệt Ngôn ngữ HTML Trong trình soạn thảo Introduction_HeadingTag .html. .. Introduction_HeadingTag .html 12 12 2/16/2011 Ví dụ: Tag Paragraph Thuộc tính của tag THIẾT KẾ VÀ LẬP TR K RÌNH WEB ParagraphFormat .html P hF t ht l 13 13 2/16/2011 THIẾT KẾ VÀ LẬP TR K RÌNH WEB Horizontal rules > HorizontalRules .html Thuộc tính : align : Canh hàng đường kẻ ngang so với trang web width : Chiều dài đường kẻ ngang size : Bề rộng của đường kẻ ngang ộ g g g g noshade... …………………… …………………… …………………… THIẾT KẾ VÀ LẬP TR K RÌNH WEB …………………… …………………… …………………… …………………… … PAGE A …………………… …………………… …………………… …………………… … Mouse-Click … PAGE B …………………… …………………… …………………… …………………… … Trang có địa chỉ URL g PageB .html Trang hiện hành PageA .html PageA html 31 31 2/16/2011 Liên kết nội (internal link) Vị t í bắt đầ “TenViTri”> trí đầu anchor .html ... Số lần lặp (bằng -1 : Lặp vô hạn) Thường đặt trong tag của web Ví d dụ: BGSOUND ‘b id’ LOOP ‘1’ Tag comment – Ghi chú trong HTML < !- - Nội dung ghi chú > 21 21 2/16/2011 Tag danh sách Tags T Items i Li t It in List Ordered List Unordered List List Item Li t It User-defined List THIẾT KẾ VÀ LẬP TR K RÌNH WEB Types T ... >Liên THIẾT KẾ VÀ LẬP TR K RÌNH WEB …………………… …………………… …………………… …………………… … Liên hệ Admin Mouse-Click …………………… …………………… …………………… …………………… … 33 33 2/16/2011 Phân loại URL Link content URL target … > Địa chỉ URL phân làm 2 loại: Địa chỉ tuyệt đối: là vị trí tuyệt đối so với mạng Internet Địa chỉ tương đối: là vị trí tương đối so với trang THIẾT KẾ VÀ LẬP TR K RÌNH WEB web... nền cho trang web Sử dụng thẻ THIẾT KẾ VÀ LẬP TR K RÌNH WEB ví dụ: 20 20 2/16/2011 Tag âm thanh : Không có tag đóng g g g g Thuộc tính của tag Sound .html SRC : Đường dẫn đến file âm thanh THIẾT KẾ VÀ LẬP TR K RÌNH WEB Loop : Số . CNTT THIẾT KẾ WEB R ÌNH WEB Ngôn ngữ HTML K Ế VÀ LẬP T R GV: Trần Đình Nghĩa tdnghia1977@gmail.com THIẾT K 1 2/16/2011 2 Nội dung buổi học trước 1. Các bướcthiếtlậpwebsite 2 Thiết kế lập trình website 2 . Thiết kế lập trình website •. thảo Web browser – trình duyệtweb Notepad R ÌNH WEB K Ế VÀ LẬP T R Dreamweaver THIẾT K 5 2/16/2011 6 HTML cănbản - Tag (thẻ) HTML < ;html& gt; < ;html& gt; <head> HelloWorld .html <title>Hello. bướcthiếtlậpwebsite 2 Thiết kế lập trình website 2 . Thiết kế lập trình website • Thiếtkế g iao di ệ n R ÌNH WEB g ệ 3. Xây dựng website dướigóc K Ế VÀ LẬP T R nhìn ngộ nghĩnh THIẾT K 2 2/16/2011 3 Nội dung 1. Giớithiệuvề HTML 2 Cấu trúc 1 tài liệu HTML 2 . Cấu trúc 1 tài liệu HTML 3.