Bài giảng Thiết kế web - Ngôn ngữ HTML

2/16/2011 1 ĐẠI HỌC SÀI GÒN – KHOA CNTT THIẾT KẾ WEB R Ì N H W E B Ngôn ngữ HTML K Ế V À L Ậ P T R GV: Trần Đình Nghĩa tdnghia1977@gmail.com T H I Ế T K 1 2/16/2011 2 Nội dung buổi học 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 R Ì N H W E B 3. Xây dựng website dưới góc K Ế V À L Ậ P T R nhìn ngộ nghĩnh T H I Ế T K 2 2/16/2011 3 Nội dung 1. Giới thiệu về HTML 2 Cấu trúc 1 tài liệu HTML. 3. Các tag (thẻ) HTML R Ì N H W E B 4. Hướng dẫn thực hành HTML K Ế V À L Ậ P T R 5. Gợi ý chọn đề tài cho đồ án T H I Ế T K 3 2/16/2011 4 Giới thiệu về HTML HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu siêu văn bả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ển thị 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 Ì N H W E B , , , … Các tag (thẻ) HTML để định dạng mô tả cách thức các dữ liệu hiển thị trên trình duyệt â í ể á ể ộ K Ế V À L Ậ P T R Web broser: ph n t ch & “hi u” c c tags HTML, hi n thị n i dung web cho người dùng Webpage HTML: 1 file *.htm || *.html T H I Ế T K 4 2/16/2011 5 Trình duyệt – Trình soạn thảo Web browser – trình duyệt web Notepad R Ì N H W E B K Ế V À L Ậ P T R Dreamweaver T H I Ế T K 5 2/16/2011 6 HTML căn bản - Tag (thẻ) HTML HelloWorld.html Hello world R Ì N H W E B Hello world! K Ế V À L Ậ P T R It's my first html. T H I Ế T K 6 2/16/2011 7 Cú pháp, đặc tính của HTML _ _ Dữ liệu HTML tag:  Tên gợi nhớ  Tag được quy định trong cặp dấu ngoặc  Phần lớn tag gồm 2 phần mở và đóng R Ì N H W E B Một số tag chỉ có 1 phần & không có dữ liệu: , Cấu trúc lồ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 Một số web browser không hiểu một số tag hoặc thuộc tính Không phân biệt chữ hoa, thường ỏ á ả ắ T H I Ế T K 7  B qua c c kho ng tr ng 2/16/2011 8 Cấu trúc một webpage HTML Hello world ầ u t r a n g r a n g P h ầ n đ ầ k ế t t h ú c 1 t R Ì N H W E B Hello world! ộ i d u n g B ắ t đ ầ u v à K Ế V À L Ậ P T R It's my first html. P h ầ n n T H I Ế T K 8 2/16/2011 9 Cấu trúc 1 tài liệu HTML  Đị h hĩ h i ủ ă bả m m : n ng a p ạm v c a v n 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 R Ì N H W E B trang web  : Mô tả tiêu đề trang web K Ế V À L Ậ P T R  : Xác định vùng thân của trang web, nơi chứa các thông tin T H I Ế T K 9 2/16/2011 10 Các tag HTML cơ bản  T ử lý đị h d ă bảag x n ạng v n n Tag danh sách Tag tạo bảng R Ì N H W E B Tag liên kết trang Tag hình ảnh K Ế V À L Ậ P T R Tag âm thanh T H I Ế T K 10 2/16/2011 11 Tag xử lý định dạng văn bản  Tiê đề h di t u - ea ng ags: , , …, Đoạn văn bản: Định dạng chuỗi: , , , và Đường kẻ ngang: R Ì N H W E B Xuống dòng ể á ý ặ ệ K Ế V À L Ậ P T R Hi n thị c c k tự đ c bi t T H I Ế T K 11 2/16/2011 12 Ví dụ: Tag Heading Nội dung hiện thị Trong trình duyệt R Ì N H W E B K Ế V À L Ậ P T R Ngôn ngữ HTML Trong trình soạn thảo Introduction_HeadingTag.html T H I Ế T K 12 2/16/2011 13 Ví dụ: Tag Paragraph Thuộc tính của tag P hF t ht l R Ì N H W E B aragrap orma . m K Ế V À L Ậ P T R T H I Ế T K 13 2/16/2011 14 Horizontal rules … Thuộc tính : align : Canh hàng đường kẻ ngang so với HorizontalRules.html trang web width : Chiều dài đường kẻ ngang size : Bề rộng của đường kẻ ngang R Ì N H W E B noshade : Không có bóng K Ế V À L Ậ P T R T H I Ế T K 14 2/16/2011 15 Định dạng chữ H ll ldon e o wor on <font style="font-family:Verdana, Geneva, sans-serif" color="#000099" size="3"> Hello world This text is bold This text is strong R Ì N H W E B This text is big This text is emphasized This text is italic K Ế V À L Ậ P T R This text is small This text contains a2 T H I Ế T K 15 This text contains x2= a x a 2/16/2011 16 Định dạng chữ Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences TextFormat.html R Ì N H W E B Computer Sciences Computer Sciences K Ế V À L Ậ P T R Computer Sciences Computer Sciences T H I Ế T K 16 Computer Sciences 2/16/2011 17 Đị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 R Ì N H W E B K Ế V À L Ậ P T R T H I Ế T K 17 2/16/2011 18 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ấ à& u v & & “ Ngoặc kép " " < Nhỏ hơn < < Lớ hơ R Ì N H W E B > n n > > Ví dụ:Để hiển thị được: & “SGU” <Dai hoc sai Gon>  ; & K Ế V À L Ậ P T R ;   ; "SGU" HTML special character -- Google T H I Ế T K 18 SpecialCharacter.html 2/16/2011 19 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 : scr : Đường dẫn đến file hình ảnh ImageTag.html R Ì N H W E B alt : Chú thích cho hình ảnh width: chiều rộng của hình khi hiển thị K Ế V À L Ậ P T R height: chiều dài của hình khi hiển thị position: Top, Bottom, Middle T H I Ế T K 19 border : Độ dày nét viền quanh ảnh (default=0) 2/16/2011 20 Tag hình ảnh Giá t ị ặ đị h ủ 2 th ộ tí h idth h i ht là kí hr m c n c a u c n w , e g c thước thật của file ảnh. Đặt ảnh nền cho trang web Sử dụng thẻ  ví dụ: R Ì N H W E B <img scr=“123 jpg” alt=“Something is here” width K Ế V À L Ậ P T R . =“45” height = “45”> T H I Ế T K 20 2/16/2011 21 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ần lặp (bằng -1 : Lặp vô hạn) R Ì N H W E B  Thường đặt trong tag của web. Ví d BGSOUND ‘b id’ LOOP ‘1’ K Ế V À L Ậ P T R ụ: Tag comment – Ghi chú trong HTML T H I Ế T K 21 2/16/2011 22 Tag danh sách T T It i Li types ags ems n s Ordered List Unordered List Li t It s em User-defined List , R Ì N H W E B  Thuộc tính type của các tag danh sách Xem các ví dụ K Ế V À L Ậ P T R T H I Ế T K 22 2/16/2011 23 Tag danh sách Vd: Danh sách có thứ tự: OrderedList.html R Ì N H W E B K Ế V À L Ậ P T R T H I Ế T K 23 2/16/2011 24 Danh sách có thứ tự OrderedListType.html R Ì N H W E B K Ế V À L Ậ P T R T H I Ế T K 24 2/16/2011 25 Danh sách không có thứ tự Vd: Danh sách không có thứ tự: UnOrderedList.html R Ì N H W E B K Ế V À L Ậ P T R T H I Ế T K 25 2/16/2011 26 Danh sách tự định nghĩa DefinitionList.html R Ì N H W E B K Ế V À L Ậ P T R T H I Ế T K 26 2/16/2011 27 Tag liên kết trang - URL  t l // it dd /di t /filpro oco : s e a ress rec ory ename Các dạng địa chỉ HTTP:    R Ì N H W E B   K Ế V À L Ậ P T R   T H I Ế T K 27  2/16/2011 28 Tag liên kết trang - URL     a R Ì N H W E B   K Ế V À L Ậ P T R l T H I Ế T K 28 2/16/2011 29 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  blank: tải trang web vào cửa sổ mới R Ì N H W E B  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 K Ế V À L Ậ P T R  top: tải trang web vào cửa sổ cao nhất  Ví dụ: T H I Ế T K 29 2/16/2011 30 Phân loại liên kết âPh n loại: Liên kết ngoại (external link) Liên kết nội (internal link) R Ì N H W E B K Ế V À L Ậ P T R Liên kết email (email link) T H I Ế T K 30 2/16/2011 31 Liên kết ngoại (external link) Li k d t t a re = n e con en a …………………… …………………… …………………… …………………… …………………… …………………… …………………… PAGE A …………………… …..PAGE B …………………… …………………… R Ì N H W E B ….. …………………… …………………… …………………… …………………… …………………… …. Mouse-Click Trang có địa chỉ URL K Ế V À L Ậ P T R …………………… …. Trang hiện hành PageA html PageB.html T H I Ế T K 31 . 2/16/2011 32 Liên kết nội (internal link) Vị t í bắt đầ a name = en r r u a Text đại diện …………………… …….……………… …………… Text đ d ệ anchor.html …………………… …………….. …….……………… …………… Text đại diện ại i n …………………… ……………..…….. …………………… R Ì N H W E B …………………… …….. …………………… Vị tri bat Mouse-Click … Vị tri bat dau………abc123xyz… …. …………………… K Ế V À L Ậ P T R ………… dau ………abc123xyz… ….Nội dung trang khi Nội dung trang khi bấm liên kết …………………… ………………. T H I Ế T K 32 chưa liên kết 2/16/2011 33 Liên kết email (email link) Liên hệ Admin …………………… …………………… …………………… …………………… R Ì N H W E B …..Liên hệ Admin …………………… Mouse-Click K Ế V À L Ậ P T R …………………… …………………… …………………… …. T H I Ế T K 33 2/16/2011 34 Phân loại URL Link content Đị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 R Ì N H W E B web hiện hành đang chứa liên kết. Một số ký hiệu đường dẫn đặc biệt: K Ế V À L Ậ P T R Ký hiệu Ý nghĩa / Trở về thư mục gốc của site ./ Thư mục hiện tại của webpage sử dụng link (mặc T H I Ế T K 34 định) ../ Quay ra thư mục cha/ đi ngược 1 cấp thư mục 2/16/2011 35 Phân loại URL file A có link đến file B vậy file A , có HTML element: …. Liên kết đến B URL R Ì N H W E B = /d /Th 1/fil B ht l K Ế V À L Ậ P T R emo umuc e . m ./Thumuc1/fileB.html Th 1/fil B ht l T H I Ế T K 35 umuc e . m 2/16/2011 36 Phân loại URL file B có link đến file C, vậy file B có HTML element: Liên kết đến C URL R Ì N H W E B = eC.html K Ế V À L Ậ P T R /demo/Thumuc1/Thumuc1_1/fileC.html ./Thumuc1 1/fileC.html T H I Ế T K 36 _ Thumuc1_1/fileC.html 2/16/2011 37 Phân loại URL file C có link đến file D, vậy file C có HTML element: Liên kết đến D URL R Ì N H W E B = eD.html K Ế V À L Ậ P T R /demo/Thumuc1/Thumuc1_2/fileD.html ./../Thumuc1 2/fileD.html T H I Ế T K 37 _ ../Thumuc1_2/fileD.html 2/16/2011 38 Phân loại URL file D có link đến file F, vậy file D có HTML element: Liên kết đến F URL R Ì N H W E B = /d /Th 2/fil F ht l K Ế V À L Ậ P T R emo umuc e . m ./../../Thumuc2/fileF.html / /Th 2/fil F ht l T H I Ế T K 38 .. .. umuc e . m 2/16/2011 39 Phân loại URL file F có link đến file E, vậy file F có HTML element: Liên kết đến E URL = R Ì N H W E B humuc1_2_1/fileE.html K Ế V À L Ậ P T R /demo/Thumuc1/Thumuc1_2/Thumuc1_2_1/file E.html ../Thumuc1/Thumuc1 2/Thumuc1 2 1/fileE.ht T H I Ế T K 39 _ _ _ ml 2/16/2011 40 Phân loại URL fil E ó li k đế fil A ở ị t íe c n n e v r xác định X, vậy file E có HTML element: R Ì N H W E B URL = ../../../fileA.html#positionX Liên kết đến A tại X K Ế V À L Ậ P T R T H I Ế T K 40 2/16/2011 41 Phân loại URL Bài tập: R Ì N H W E B K Ế V À L Ậ P T R Nội dung về: Phân loại các URL Reference from: GV. Trần Thị Bích Hạnh (2007) T H I Ế T K 41 Bài giảng Môn Lập trình và thiết kế web, K.CNTT, ĐHKHTN 2/16/2011 42 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ởi tạo 1 bảng … Tạo 1 dòng, thẻ nằm trong thẻ … Tạo 1 ô tiêu để, thẻ nằm trong thẻ R Ì N H W E B … Tạo 1 ô, thẻ phải nằm trong thẻ Colspan Thiết lập ô có độ rộng bằng bao nhiêu cột ế ậ ô ó ộ ằ ê ò K Ế V À L Ậ P T R Rowspan Thi t l p c đ cao b ng bao nhi u d ng Background Thiết lập ảnh nền cho thẻ , , B l Thiết lậ à ề h thẻ t bl td T H I Ế T K 42 gco or p m u n n c o , , 2/16/2011 43 Tag kẻ bảng - Table Code STT Ho va Ten 1 Tran Van Coc R Ì N H W E B 2 Le Thi Oi SimpleTableTag.html K Ế V À L Ậ P T R 3 Nguyen Le Let T H I Ế T K 43 2/16/2011 44 Colspan Table Tag C do e Name Cellphone ColspanTableTag.html Dai Hoc Sai Gon 88352100 d 862 60 / d R Ì N H W E B 511 K Ế V À L Ậ P T R T H I Ế T K 44 2/16/2011 45 Rowspan Table Tag Code First Name: Dai Hoc Sai Gon Cellphone: 86251160 RowspanTableTag.html R Ì N H W E B 88352100 K Ế V À L Ậ P T R T H I Ế T K 45 2/16/2011 46 Attribute Table Tag B k dT bl T ht lShow Code Background Puppy d Pi / d / ac groun a e ag. m ggy Kitty Mummy R Ì N H W E B Bgcolor Puppy Piggy / K Ế V À L Ậ P T R Kitty Mummy T H I Ế T K 46 BackColorTableTag.html 2/16/2011 47 Một số ví dụ Table R Ì N H W E B K Ế V À L Ậ P T R Picture reference from: GV Trần Thị Bích Hạnh (2007) T H I Ế T K 47 . Bài giảng Môn Lập trình và thiết kế web, K.CNTT, ĐHKHTN 2/16/2011 48 Một số ví dụ Table R Ì N H W E B K Ế V À L Ậ P T R T H I Ế T K 48 2/16/2011 49 Tham khảo htt // 3 h l /ht l/p: www.w sc oo s.com m   css/tutorials/ R Ì N H W E B Lisa Fiedor, HTML Basics, DELTA Instructional Services, 2007 K Ế V À L Ậ P T R Bài tập: T H I Ế T K 49 2/16/2011 50 ĐẠI HỌC SÀI GÒN – KHOA CNTT BÀI THỰC HÀNH R Ì N H W E B Ngôn ngữ HTML K Ế V À L Ậ P T R T H I Ế T K 50 2/16/2011 51 Giới thiệu 1 số website tham khảo làm đồ án  Bán sách R Ì N H W E B  Quảng cáo phim, cho thuê đĩa K Ế V À L Ậ P T R zing vn/ T H I Ế T K 51 . . 2/16/2011 52 Giới thiệu 1 số website tham khảo làm đồ án  Bán game hotgameshop net/. . R Ì N H W E B  Bán máy tính htt // iti h h / K Ế V À L Ậ P T R p: www.v n p ongvu.com saigonlaptops com/ T H I Ế T K 52 . . 2/16/2011 53 Giới thiệu 1 số website tham khảo làm đồ án Bá điệ th i di dộ n n oạ ng R Ì N H W E B  Các trang tương tự khác ….. K Ế V À L Ậ P T R T H I Ế T K 53 2/16/2011 54 Bài thực hành HTML  Bài tập: HTML cơ bản Introduction, Thời gian giao: Buổi đầu Tuần 02 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) R Ì N H W E B Giới thiệu thông tin cá nhân và các sở thích liên quan, chủ đề tùy ý. K Ế V À L Ậ P T R Các trang phải liên kết với nhau và sử dụng tất cả các tag đã học. T H I Ế T K 54