Thiết kế Web - Ngôn ngữ HTML
Nội dung buổi họp trước:
1, Các bước thiết lập Website
2, Thiết kế lập trình Website
Thiết kế giao diện
3, Xây dựng Website dưới góc nhìn ngộ nghĩnh
Tóm tắt nội dung Thiết kế Web - Ngôn ngữ HTML, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
This text is emphasized ÌNH WEB R This text is italic P T Ậ This text is small VÀL Ế K This text contains a2 T Ế This text contains x2= a x a THI 15 15 2/16/2011 Định dạng chữ Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences TextFormat.html Computer Sciences ÌNH WEB Computer Sciences R P T Ậ Computer Sciences VÀL Ế Computer Sciences K T Ế Computer Sciences THI 16 16 2/16/2011 Định dạng theo tag Hiển thị đúng dạng văn bản đã soạn thảo (khoảng trắng, xuống dòng, tag,…) PreTag.html ÌNH WEB R P T Ậ VÀL Ế K T Ế THI 17 17 2/16/2011 Các ký tự đặc biệt Hiển thị các ký tự đặc biệt Result Description Entity name Entity number Khoảng trắng & Dấuvà & & “ Ngoặckép " " < Nhỏ hơn < < > Lớn hơn > > Ví dụ:Để hiểnthịđược: & “SGU” ÌNH WEB R <Dai hoc sai Gon> ; & P T Ậ ; ; "SGU" VÀL Ế K HTML special character -- Google T SpecialCharacter.html Ế THI 18 18 2/16/2011 Tag hình ảnh : Không có thẻ đóng <img scr=“URL” alt=“Description” width =“Number” height =“ Number”> Các thuộc tính của tag : ImageTag.html scr : Đường dẫn đến file hình ảnh alt : Chú thích cho hình ảnh ÌNH WEB width: chiều rộng của hình khi hiển thị R P T Ậ height: chiềudàicủa hình khi hiểnthị VÀL Ế K position: Top, Bottom, Middle T Ế border : Độ dày nét viền quanh ảnh (default=0) THI 19 19 2/16/2011 Tag hình ảnh Giá trị mặc định của 2 thuộc tín h width, hei ght là kíc h thướcthậtcủa file ảnh. Đặt ảnh nền cho trang web Sử dụng thẻ ví dụ: ÌNH WEB R <img scr=“123.jpg” alt=“ Something is here” width P T Ậ =“45” height = “45”> VÀL Ế K T Ế THI 20 20 2/16/2011 Tag âm thanh : Không có tag đóng Thuộc tính của tag Sound.html SRC : Đường dẫn đến file âm thanh Loop : Số lầnlặp(bằng -1 : Lặpvôhạn) Thường đặt trong tag củaweb. ÌNH WEB R Ví dụ: P T Ậ VÀL Tag comment – Ghi chú trong HTML Ế K T Ế THI 21 21 2/16/2011 Tag danh sách Types Tags Items in List Ordered List Unordered List Lis t Item User-defined List , Thuộctínhtype của các tag danh sách ÌNH WEB Xem các ví dụ R P T Ậ VÀL Ế K T Ế THI 22 22 2/16/2011 Tag danh sách Vd: Danh sách có thứ tự: OrderedList.html ÌNH WEB R P T Ậ VÀL Ế K T Ế THI 23 23 2/16/2011 Danh sách có thứ tự OrderedListType.html ÌNH WEB R P T Ậ VÀL Ế K T Ế THI 24 24 2/16/2011 Danh sách không có thứ tự Vd: Danh sách không có thứ tự: UnOrderedList.html ÌNH WEB R P T Ậ VÀL Ế K T Ế THI 25 25 2/16/2011 Danh sách tự định nghĩa DefinitionList.html ÌNH WEB R P T Ậ VÀL Ế K T Ế THI 26 26 2/16/2011 Tag liên kết trang - URL protoco l: //s ite address /direc tory /filename Các dạng địa chỉ HTTP: ÌNH WEB httppy://server/directory/ R P T Ậ VÀL Ế K T Ế THI 27 27 2/16/2011 Tag liên kết trang - URL a ÌNH WEB R P T l Ậ VÀL Ế K T Ế THI 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ủatag name: tải trang web vào frame có tên là name blank: tải trang web vào cửa sổ mới parent: tải trang web vào cửasổ cha củanó self: tải trang web vào chính cửasổ hiệnhành ÌNH WEB R top: tải trang web vào cửasổ cao nhất P T Ậ Ví dụ: VÀL Ế K T Ế THI 29 29 2/16/2011 Phân loại liên kết Phânloại: Liên kếtngoại (external link) Liên kết nội (internal link) ÌNH WEB R P T Ậ Liên kết email (email link) VÀL Ế K T Ế THI 30 30 2/16/2011 Liên kết ngoại (external link) Lin ked content …………………… …………………… …………………… …………………… …………………… …………………… …..PAGE B …………………… …………………… …………………… …………………… …..PAGE A Mouse-Click …………………… …………………… …………………… …………………… …. …………………… ÌNH WEB …………………… Trang có địachỉ URL R …. P T Ậ PageB.html Trang hiệnhành VÀL Ế K PageA.html T Ế THI 31 31 2/16/2011 Liên kếtnội (internal link) Vị títrí bắt đầu anchor.html Text đạidiện …….……………… …………………… …………… Text …………………… đại diện …………….. …………………… …….……………… …………… Text ……………..…….. đại diện …………………… …………………… … Vị tri bat dau Mouse-Click ………abc123xyz… …….. …. …………………… …………………… ÌNH WEB ………… Vị tri bat R …………………… dau P T ………………. Ậ Nội dung trang khi ………abc123xyz… …. VÀL Ế Nội dung trang khi bấm liên kết K T Ế chưa liên kết THI 32 32 2/16/2011 Liên kết email (email link) Liên hệ Admin …………………… …………………… …………………… …………………… …..Liên hệ Admin Mouse-Click …………………… ÌNH WEB R …………………… P T …………………… Ậ …………………… VÀL …. Ế K T Ế THI 33 33 2/16/2011 Phân loạiURL Link content Địachỉ URL phân làm 2 loại: Địachỉ tuyệt đối: là vị trí tuyệt đối so vớimạng Internet Địachỉ tương đối: là vị trí tương đối so vớitrang web hiệnhànhđang chứa liên kết. Mộtsố ký hiệu đường dẫn đặcbiệt: ÌNH WEB R Ký hiệuÝnghĩa P T Ậ / Trở về thư mụcgốccủasite VÀL Ế ./ Thư mụchiệntạicủa webpage sử dụng link (mặc K T định) Ế THI ../ Quay ra thư mục cha/ đingược1 cấpthư mục 34 34 2/16/2011 Phân loạiURL file A có link đến file B, vậy file A có HTML element: Liên kết đếnB URL = ÌNH WEB R /demo /Thumuc1/fil eB .ht ml P T Ậ ./Thumuc1/fileB.html VÀL Ế K Thumuc1/fil e B.ht m l T Ế THI 35 35 2/16/2011 Phân loạiURL file B có link đến file C, vậy file B có HTML element: Liên kết đếnC URL = ÌNH WEB eC.html R P T Ậ /demo/Thumuc1/Thumuc1_1/fileC.html VÀL Ế ./Thumuc1_ 1/fileC.html K T Ế THI Thumuc1_1/fileC.html 36 36 2/16/2011 Phân loạiURL file C có link đến file D, vậy file C có HTML element: Liên kết đếnD URL = ÌNH WEB eD.html R P T Ậ /demo/Thumuc1/Thumuc1_2/fileD.html VÀL Ế .///../Thumuc1_ 2/fileD.html K T Ế THI ../Thumuc1_2/fileD.html 37 37 2/16/2011 Phân loạiURL file D có link đến file F, vậy file D có HTML element: Liên kết đếnF URL = ÌNH WEB R /demo /Thumuc2/fil eF .ht ml P T Ậ ./../../Thumuc2/fileF.html VÀL Ế K ..//Th/../Thumuc 2/filFht2/fileF.html T Ế THI 38 38 2/16/2011 Phân loạiURL file F có link đến file E, vậy file F có HTML element: Liên kết đếnE URL = humuc1_2_1/fileE.html ÌNH WEB R /demo/Thumuc1/Thumuc1_2/Thumuc1_2_1/file P T Ậ E.html VÀL Ế K ../Thumuc1/Thumuc1_2/Thumuc1 _2 _1/fileE.ht T Ế ml THI 39 39 2/16/2011 Phân loạiURL file E có lin k đến file A ở vị títrí xác định X, vậy file E có HTML element: Liên kết đếnA tạiX ÌNH WEB URL = ..////../../fileA.html#positionX R P T Ậ VÀL Ế K T Ế THI 40 40 2/16/2011 Phân loạiURL Bài tập: ÌNH WEB R P T Ậ Nội dung về: Phân loại các URL VÀL Ế Reference from: GV. Trần Thị Bích Hạnh (2007) K T Ế Bài giảng Môn Lập trình và thiếtkế web, K.CNTT, ĐHKHTN THI 41 41 2/16/2011 Tag kẻ bảng - Table Tên thẻ và các thuộc tính của thẻ Tên thẻ / T. tính Mô tả Khởitạo1 bảng … Tạo1 dòng, thẻ nằmtrongthẻ … Tạo1 ô tiêuđể, thẻ nằmtrongthẻ … Tạo1 ô, thẻ phảinằmtrongthẻ Colspan Thiếtlậpô cóđộ rộng bằng bao nhiêu cột ÌNH WEB R Rowspan Thiếtlập ô có độ cao bằng bao nhiêudòng P T Ậ Background Thiếtlập ảnh nềnchothẻ , , VÀL Ế K T BlBgcolor Thiết lậpmàunềncho thẻ , , Ế THI 42 42 2/16/2011 Tag kẻ bảng - Table Code STT Ho va Ten 1 Tran Van Coc 2 SimpleTableTag.html Le Thi Oi ÌNH WEB R P T Ậ 3 VÀL Ế Nguyen Le Let K T Ế THI 43 43 2/16/2011 Colspan Table Tag CdCode ColspanTableTag.html Name "2"> Cellphone Dai Hoc Sai Gon 88352100 86251160 ÌNH WEB R P T Ậ VÀL Ế K T Ế THI 44 44 2/16/2011 Rowspan Table Tag Code First Name: Dai Hoc Sai Gon RowspanTableTag.html Cellphone: 86251160 88352100 ÌNH WEB R P T Ậ VÀL Ế K T Ế THI 45 45 2/16/2011 Attribute Table Tag Show Code Bac kgroun dTa ble Tag. html Background Puppy Piggy Kitty Mummy Bgcolor Puppy Piggy ÌNH WEB R P T Ậ Kitty Mummy VÀL Ế K T Ế THI BackColorTableTag.html 46 46 2/16/2011 Mộtsố ví dụ Table ÌNH WEB R P T Ậ VÀL Ế K Picture reference from: GV. Trần Thị Bích Hạnh (2007) T Ế Bài giảng Môn Lậptrìnhvàthiếtkế web, K.CNTT, ĐHKHTN THI 47 47 2/16/2011 Mộtsố ví dụ Table ÌNH WEB R P T Ậ VÀL Ế K T Ế THI 48 48 2/16/2011 Tham khảo http:// www.w3 sch ool s.com/ht ml/ css/tutorials/ Lisa Fiedor, HTML Basics, DELTA Instructional Services, ÌNH WEB 2007 R P T Ậ Bài tập: VÀL Ế K T Ế THI 49 49 2/16/2011 ĐẠI HỌC SÀI GÒN – KHOA CNTT BÀI THỰC HÀNH Ngôn ngữ HTML ÌNH WEB R R P T Ậ VÀL Ế K T Ế THI 50 50 2/16/2011 Giới thiệu 1 số website tham khảo làm đồ án Bán sách Quảng cáo phim, cho thuê đĩa ÌNH WEB R P T Ậ VÀL Ế K . vn/ T Ế THI 51 51 2/16/2011 Giới thiệu 1 số website tham khảo làm đồ án Bán game hotgameshop.net/ Bán máy tính ÌNH WEB R http:// www.viti n hp hongvu.com / P T Ậ VÀL Ế K T saigonlaptops.com/ Ế THI 52 52 2/16/2011 Giới thiệu 1 số website tham khảo làm đồ án Bán điện thoại di dộng Các trang tương tự khác ÌNH WEB ….. R P T Ậ VÀL Ế K T Ế THI 53 53 2/16/2011 Bài thựchànhHTML Bài tập: HTML cơ bản, Introduction Thời gian giao: Buổi đầuTuần02 Thời gian nộp: Buổi đầu Tuần 03 Yêu cầu: Viết ít nhất 4 trang *.html (1 homepage) Giớithiệuthôngtincánhânvàcácsở thích liên ÌNH WEB quan, chủđềtùy ý. R P T Ậ Các trang phảiliênkếtvớinhauvàsử dụng tấtcả VÀL Ế các tag đãhọc. K T Ế THI 54 54
File đính kèm:
Thiết kế Web - Ngôn ngữ HTML.pdf
