Bài giảng Phát triển ứng dụng web 1 Ngôn ngữ HTML

28 4 0
Bài giảng Phát triển ứng dụng web 1 Ngôn ngữ HTML

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Thông tin tài liệu

9/20/23 Phát triển ứng dụng web Đại Học Sài Gịn – Khoa CNTT Ngơn ngữ HTML – Ngơn ngữ HTML - Ngôn ngữ HTML GV: Phan Thị Kim Loan 2 Nội dung buổi học trước Các bước thiết lập website Thiết kế lập trình website • Thiết kế giao diện Xây dựng website góc nhìn ngộ nghĩnh – Ngơn ngữ HTML 3 9/20/23 Nội dung Giới thiệu HTML Cấu trúc tài liệu HTML Các tag (thẻ) HTML Hướng dẫn thực hành HTML Gợi ý chọn đề tài cho đồ án 4 – Ngôn ngữ HTML Giới thiệu HTML §HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu siêu văn bản, dùng để xây dựng webpage §HTML: chứa thành phần định dạng để báo cho browser biết cách hiển thị 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 liệu hiển thị trình duyệt §Web browser: phân tích & “hiểu” tags HTML, thị nội dung web cho người dùng §Webpage HTML: file *.htm || *.html – Ngôn ngữ HTML 5 9/20/23 Trình duyệt – Trình soạn thảo Web browser – trình duyệt web Notepad – Ngơn ngữ HTML 6 HTML - Tag (thẻ) HTML First page title Hello world! It's my first html – Ngôn ngữ HTML 7 9/20/23 Cú pháp, đặc tính HTML Dữ liệu HTML tag: § Tên gợi nhớ § Tag quy định cặp dấu ngoặc § Phần lớn tag gồm phần mở đóng § Một số tag có phần & khơng có liệu: , § Cấu trúc lồng § Thuộc tính tag cung cấp thông tin bắt buộc/tùy chọn cho tag § Một số web browser không hiểu số tag thuộc tính § Khơng phân biệt chữ hoa, thường § Bỏ qua khoảng trắng – Ngôn ngữ HTML Cấu trúc webpage HTML Phần đầu trang First page title Phần nội dung Bắt đầu kết thúc trang Hello world! It's my first html – Ngôn ngữ HTML 9 9/20/23 Cấu trúc tài liệu HTML § : Định nghĩa phạm vi văn HTML § : Định nghĩa mơ tả trang HTML Thông tin tag không hiển thị trang web § : Mơ tả tiêu đề trang web § : Xác định vùng thân trang web, nơi chứa thông tin 10 – Ngôn ngữ HTML 10 Các tag HTML § Tag xử lý định dạng văn §Tag danh sách §Tag tạo bảng §Tag liên kết trang §Tag hình ảnh §Tag âm – Ngơn ngữ HTML 11 11 9/20/23 Tag xử lý định dạng văn § Tiêu đề - heading tags: , , …, §Đoạn văn bản:

§Định dạng chuỗi: , , , §Đường kẻ ngang: §Xuống dịng §Hiển thị ký tự đặc biệt 12 – Ngơn ngữ HTML 12 Ví dụ: Tag Heading Nội dung thị Trong trình duyệt Ngơn ngữ HTML Trong trình soạn thảo – Ngôn ngữ HTML 13 13 9/20/23 Ví dụ: Tag Paragraph Thuộc tính tag 14 – Ngôn ngữ HTML 14 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 đường kẻ ngang • noshade : Khơng có bóng – Ngôn ngữ HTML 15 15 9/20/23 Định dạng chữ Định dạng: Hello world Hello world This text is bold This text is strong This text is big This text is emphasized This text is italic This text is small This text contains a2 This text contains x2= a x a 16 – Ngôn ngữ HTML 16 Định dạng chữ Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences – Ngôn ngữ HTML 17 17 9/20/23 Định dạng theo tag Hiển thị dạng văn soạn thảo (khoảng trắng, xuống dòng, tag,…) 18 – Ngôn ngữ HTML 18 Các ký tự đặc biệt §Hiển thị ký tự đặc biệt Result Description Entity name Entity number Khoảng trắng     & Dấu & & “ Ngoặc kép " " < Nhổ < < > Lớn > > v v Ví dụ: Để hiển thị được: & “SGU” <Dai hoc sai Gon>  ; & ;   ; "SGU" HTML special character Google – Ngôn ngữ HTML 19 19 9/20/23 Tag hình ảnh § : Khơng có thẻ đóng § §Các thuộc tính tag : –src : Đường dẫn đến file hình ảnh –alt : Chú thích cho hình ảnh -width: chiều rộng hình hiển thị -height: chiều dài hình hiển thị –position: Top, Bottom, Middle –border : Độ dày nét viền quanh ảnh (default=0) 20 – Ngơn ngữ HTML 20 Tag hình ảnh §Giá trị mặc định thuộc tính width, height kích thước thật file ảnh §Đặt ảnh cho trang web –Sử dụng thẻ § ví dụ: – Ngôn ngữ HTML 21 21 10 9/20/23 Tag liên kết trang - URL § protocol://site address/directory/filename § Các dạng địa HTTP: § http://server/ http://www.yahoo.com/ § http://server/file http://games.yahoo.com/index.php § http://server/directory/ http://games.yahoo.com/games/ § http://server/directory/file http://games.yahoo.com/download/Dominoes.exe 28 – Ngôn ngữ HTML 28 Tag liên kết trang - URL § http://server/directory/file#marker http://games.yahoo.com/index.php#Puzzle § http://server/directory/file?parameters http://www.google.com.vn/search?hl=vi&q=Teach&meta § http://server:port/directory/file http://www.microsoft.com:8080/products/greetings.html § ftp://user:password@server:port/directory/file – Ngôn ngữ HTML 29 29 14 9/20/23 Tag liên kết trang - URL § Tag liên kết trang – Tag (anchor) § Cú pháp: Linked content § Thuộc tínht target tag • name: tải trang web vào frame có tên name • blank: tải trang web vào cửa sổ • parent: tải trang web vào cửa sổ cha • self: tải trang web vào cửa sổ hành • top: tải trang web vào cửa sổ cao • Ví dụ: 30 – Ngôn ngữ HTML 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) § Liên kết email (email link) – Ngôn ngữ HTML 31 31 15 9/20/23 Liên kết ngoại (external link) Linked content …………………………… …………………………… …………………………… …………………………… …………………………… …………………………… PAGE A …………………………… …………………………… …………………………… PAGE B Mouse-Click …………………………… …………………………… …………………………… Trang có địa URL PageB.html Trang hành PageA.html 32 – Ngôn ngữ HTML 32 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…… Nội dung trang …….……………………… …… Text đại diện Mouse-Click ………………………… …………………………… … Vị tri bat dau ………abc123xyz…… …………………………… …………………………… Nội dung trang bấm liên kết chưa liên kết – Ngôn ngữ HTML 33 33 16 9/20/23 Liên kết email (email link) Liên hệ Admin …………………………… …………………………… …………………………… Liên hệ Admin Mouse-Click …………………………… …………………………… …………………………… 34 – Ngôn ngữ HTML 34 Phân loại URL Link content § Địa URL phân làm loại: • Địa tuyệt đối: vị trí tuyệt đối so với mạng Internet • Địa tương đối: vị trí tương đối so với trang web hành chứa liên kết § Một số ký hiệu đường dẫn đặc biệt: Ký hiệu Ý nghĩa / Trở thư mục gốc site / Thư mục webpage sử dụng link (mặc định) / Quay thư mục cha/ ngược cấp thư mục – Ngôn ngữ HTML 35 35 17 9/20/23 Phân loại URL file A có link đến file B, file A có HTML element: Liên kết đến B § URL = http://172.0.0.1/demo/Thumuc1/fileB.html /demo/Thumuc1/fileB.html /Thumuc1/fileB.html Thumuc1/fileB.html 36 – Ngôn ngữ HTML 36 Phân loại URL file B có link đến file C, file B có HTML element: Liên kết đến C § URL = http://172.0.0.1/demo/Thumuc1/Thumuc1_ 1/fileC.html /demo/Thumuc1/Thumuc1_1/fileC.html /Thumuc1_1/fileC.html Thumuc1_1/fileC.html – Ngôn ngữ HTML 37 37 18 9/20/23 Phân loại URL file C có link đến file D, file C có HTML element: Liên kết đến D § URL = http://172.0.0.1/demo/Thumuc1/Thumuc1_ 2/fileD.html /demo/Thumuc1/Thumuc1_2/fileD.html / /Thumuc1_2/fileD.html /Thumuc1_2/fileD.html 38 – Ngôn ngữ HTML 38 Phân loại URL file D có link đến file F, file D có HTML element: Liên kết đến F § URL = http://172.0.0.1/demo/Thumuc2/fileF.html /demo/Thumuc2/fileF.html / / /Thumuc2/fileF.html / /Thumuc2/fileF.html – Ngôn ngữ HTML 39 39 19 9/20/23 Phân loại URL file F có link đến file E, file F có HTML element: Liên kết đến E § URL = http://172.0.0.1/demo/Thumuc1/Thumuc1_ 2/Thumuc1_2_1/fileE.html /demo/Thumuc1/Thumuc1_2/Thumuc1_2_1 /fileE.html /Thumuc1/Thumuc1_2/Thumuc1_2_1/fileE html 40 – Ngôn ngữ HTML 40 Phân loại URL file E có link đến file A vị trí xác định X, file E có HTML element:

Ngày đăng: 17/12/2023, 10:22

Từ khóa liên quan

Tài liệu cùng người dùng

Tài liệu liên quan