Bài giảng Phát triển ứng dụng web 1 - Chương 4: Ngôn ngữ HTML

Nội dung buổi học trướcCác bước thiết lập website Thiết kế lập trình websiteThiết kế giao diệnXây dựng website dưới góc nhìn ngộ nghĩnhNội dungGiới thiệu về HTMLCấu trúc 1 tài liệu HTMLCác tag (thẻ) HTMLHướng dẫn thực hành HTMLGợi ý chọn đề tài cho đồ ánGiới thiệu về HTMLHTML (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, )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ệtWeb browser: phân tích & “hiểu” các tags HTML, hiện thị nội dung web cho người dùngWebpage HTML: 1 file *.htm || *.htmlTrình duyệt – Trình soạn thảo Web browser – trình duyệt webNotepad Dreamweaver HTML căn bản - Tag (thẻ) HTMLFirst page titleHello world!It's my first html.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 Một số tag chỉ có 1 phần & không có dữ liệu: , Cấu trúc lồngThuộc tính của tag cung cấp thông tin bắt buộc/tùy chọn cho tagMột số web browser không hiểu một số tag hoặc thuộc tínhKhông phân biệt chữ hoa, thườngBỏ qua các khoảng trắngCấu trúc một webpage HTMLFirst page titleHello world!It's my first html.Phần đầu trangPhần nội dungBắt đầu và kết thúc 1 trangCấu trúc 1 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 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 tinCác tag HTML cơ bản Tag xử lý định dạng văn bảnTag danh sáchTag tạo bảng Tag liên kết trang Tag hình ảnh Tag âm thanh Tag xử lý định dạng văn bản Tiêu đề - heading tags: , , , Đoạn văn bản: Định dạng chuỗi: , , , và Đường kẻ ngang: Xuống dòng Hiển thị các ký tự đặc biệtVí dụ: Tag HeadingNgôn ngữ HTMLTrong trình soạn thảoNội dung hiện thịTrong trình duyệtVí dụ: Tag ParagraphThuộc tính của tag Horizontal rules–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• noshade : Không có bóngĐịnh dạng chữĐịnh dạng:Hello world Hello world This text is boldThis text is strong This text is big This text is emphasized This text is italic This text is smallThis text contains a2This text contains x2= a x aĐịnh dạng chữ Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Đị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,)Các ký tự đặc biệtResult DescriptionEntity nameEntity numberKhoảng trắng  &Dấu và&&“Ngoặc kép""Lớn hơn>>..v ..v..Hiển thị các ký tự đặc biệtVí dụ:Để hiển thị được: & “SGU”<Dai hoc sai Gon>  ; &   ; "SGU" HTML special character -- GoogleTag hình ảnh : Không có thẻ đóngCác thuộc tính của tag :–src : Đường dẫn đến file hình ảnh–alt : Chú thích cho hình ảnhwidth: chiều rộng của hình khi hiển thịheight: chiều dài của hình khi hiển thị–position: Top, Bottom, Middle–border : Độ dày nét viền quanh ảnh (default=0)Tag hình ảnhGiá trị mặc định của 2 thuộc tính width, height là kích thước thật của file ảnh.Đặt ảnh nền cho trang web–Sử dụng thẻ ví dụ:Tag âm thanh : Không có tag đóngThuộc tính của tag –SRC : Đường dẫn đến file âm thanh–Loop : Số lần lặp (bằng -1 : Lặp vô hạn)– Thường đặt trong tag của web.Ví dụ: Tag comment – Ghi chú trong HTML Tag danh sáchTypesTagsItems in ListOrdered ListUnordered ListList ItemUser-defined List, Thuộc tính type của các tag danh sáchXem các ví dụTag danh sáchVd: Danh sách có thứ tự:Danh sách có thứ tựDanh sách không có thứ tựVd: Danh sách không có thứ tự:Danh sách tự định nghĩaTag liên kết trang - URLprotocol://site address/directory/filenameCác dạng địa chỉ HTTP: liên kết trang - URL liên kết trang - URLTag liên kết trang – Tag (anchor) Cú pháp: Linked content Thuộc tínht target của tag name: tải trang web vào frame có tên là nameblank: tải trang web vào cửa sổ mớiparent: 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ànhtop: tải trang web vào cửa sổ cao nhấtVí dụ:Phân loại liên kếtPhân loại:Liên kết ngoại (external link)Liên kết nội (internal link)Liên kết email (email link)Liên kết ngoại (external link) Linked content ..PAGE A ...PAGE B .Mouse-ClickTrang hiện hànhPageA.html Trang có địa chỉ URLPageB.html Liên kết nội (internal link) Vị trí bắt đầu Text đại diện .. . Text đại diện .. Vị tri bat dau abc123xyz.Mouse-ClickNội dung trang khi chưa liên kếtNội dung trang khibấm liên kết. Text đại diện .. Vị tri bat dau abc123xyz..Liên kết email (email link) Liên hệ Admin ..Liên hệ Admin .Mouse-ClickPhâ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 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ý 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 định)../Quay ra thư mục cha/ đi ngược 1 cấp thư mụcPhân loại URLfile A có link đến file B, vậy file A có HTML element: Liên kết đến B URL = ân loại URLfile B có link đến file C, vậy file B có HTML element: Liên kết đến C URL = ân loại URLfile C có link đến file D, vậy file C có HTML element: Liên kết đến D URL = ân loại URLfile D có link đến file F, vậy file D có HTML element: Liên kết đến F URL = ân loại URLfile F có link đến file E, vậy file F có HTML element: Liên kết đến E URL = ân loại URLURL = ../../../fileA.html#positionXfile E có link đến file A ở vị trí xác định X, vậy file E có HTML element: Liên kết đến A tại X Phân loại URLBài tập:Nội dung về: Phân loại các URLReference from: GV. Trần Thị Bích Hạnh (2007)Bài giảng Môn Lập trình và thiết kế web, K.CNTT, ĐHKHTNTag kẻ bảng - TableTên thẻ / T. tínhMô 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ẻ Tạo 1 ô, thẻ phải nằm trong thẻ ColspanThiết lập ô có độ rộng bằng bao nhiêu cộtRowspanThiết lập ô có độ cao bằng bao nhiêu dòngBackgroundThiết lập ảnh nền cho thẻ , , BgcolorThiết lập màu nền cho thẻ , , Ví dụ minh hoạTên thẻ và các thuộc tính của thẻTag kẻ bảng - TableShowCode STT Ho va Ten 1 Do Minh Tung 2 Cao T. Phuong Thanh 3 Phan Thi Kim Loan Colspan Table TagShowCode Name Cellphone Phan Thi Kim Loan 88352100 86251160 Rowspan Table TagShowCode First Name: Phan Thi Kim Loan Cellphone: 86251160 88352100 Attribute Table TagShowCodeBackground Puppy Piggy Kitty Mummy Bgcolor Puppy Piggy Kitty Mummy Một số ví dụ TablePicture reference from: GV. Trần Thị Bích Hạnh (2007)Bài giảng Môn Lập trình và thiết kế web, K.CNTT, ĐHKHTNMột số ví dụ TableTham khảo Fiedor, HTML Basics, DELTA Instructional Services, 2007Bài tập: - Ngôn ngữ HTML51Giới thiệu 1 số website tham khảo làm đồ án Bán sách Quảng cáo phim, cho thuê đĩaới thiệu 1 số website tham khảo làm đồ án Bán game Bán máy tínhớ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..Bài thực hành HTMLBài tập: HTML cơ bản, IntroductionThời gian giao: Cuối Lecture04 Thời gian làm việc: 1 tuần Yêu cầu: Viết ít nhất 4 trang *.html (1 homepage)Giới thiệu thông tin cá nhân và các sở thích liên quan, chủ đề tuỳ ý.Các trang phải liên kết với nhau và sử dụng tất cả các tag đã học.4 - Ngôn ngữ HTML56