THIẾT KẾ WEB - Ngôn ngữ HTML

Chia sẻ: Kun | Ngày: | Loại File: PDF | Số trang:54

Thêm vào BST

Báo xấu

613
lượt xem 294
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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ÌNH WEB bản, thanh, ả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ệt KẾ VÀ LẬP TRÌNH 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...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: THIẾT KẾ WEB - Ngôn ngữ HTML

2/16/2011 ĐẠI HỌC SÀI GÒN – KHOA CNTT THIẾT KẾ WEB THIẾT KẾ VÀ LẬP TRÌNH WEB Ngôn ngữ HTML GV: Trần Đình Nghĩa tdnghia1977@gmail.com 1 1
2/16/2011 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 THIẾT KẾ VÀ LẬP TRÌNH WEB 3. Xây dựng website dưới góc nhìn ngộ nghĩnh 2 2
2/16/2011 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 THIẾT KẾ VÀ LẬP TRÌNH WEB 4. Hướng dẫn thực hành HTML 5. Gợi ý chọn đề tài cho đồ án 3 3
2/16/2011 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, …)  Các tag (thẻ) HTML để định dạng mô tả cách thức các dữ liệu hiển THIẾT KẾ VÀ LẬP TRÌNH WEB thị trên trình duyệt 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 || 4 4
2/16/2011 Trình duyệt – Trình soạn thảo Web browser – trình duyệt web Notepad THIẾT KẾ VÀ LẬP TRÌNH WEB Dreamweaver 5 5
2/16/2011 HTML căn bản - Tag (thẻ) HTML HelloWorld.html Hello world THIẾT KẾ VÀ LẬP TRÌNH WEB Hello world! It's my first html. 6 6
2/16/2011 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: , THIẾT KẾ VÀ LẬP TRÌNH WEB  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  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  Bỏ qua các khoảng trắng 7 7
2/16/2011 Cấu trúc một webpage HTML Phần đầu trang Bắt đầu và kết thúc 1 trang Hello world Phần nội dung THIẾT KẾ VÀ LẬP TRÌNH WEB Hello world! It's my first html. 8 8
2/16/2011 Cấ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 THIẾT KẾ VÀ LẬP TRÌNH 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 tin 9 9
2/16/2011 Các tag HTML cơ bản  Tag xử lý định dạng văn bản Tag danh sách Tag tạo bảng Tag liên kết trang THIẾT KẾ VÀ LẬP TRÌNH WEB Tag hình ảnh Tag âm thanh 10 10
2/16/2011 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: THIẾT KẾ VÀ LẬP TRÌNH WEB Xuống dòng Hiển thị các ký tự đặc biệt 11 11
2/16/2011 Ví dụ: Tag Heading Nội dung hiện thị Trong trình duyệt THIẾT KẾ VÀ LẬP TRÌNH WEB Ngôn ngữ HTML Trong trình soạn thảo Introduction_HeadingTag.html 12 12
2/16/2011 Ví dụ: Tag Paragraph Thuộc tính của tag ParagraphFormat.html THIẾT KẾ VÀ LẬP TRÌNH WEB 13 13
2/16/2011 Horizontal rules Thuộc tính : HorizontalRules.html 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 THIẾT KẾ VÀ LẬP TRÌNH WEB width= % width % 14 14
2/16/2011 Định dạng chữ Hello world  Hello world This text is bold This text is strong This text is big THIẾT KẾ VÀ LẬP TRÌNH WEB This text is emphasized This text is italic This text is small This text contains a2 This text contains x2= a x a 15 15
2/16/2011 Định dạng chữ Computer Sciences Computer Sciences Computer Sciences Computer Sciences Computer Sciences /KBD TextFormat.html Computer Sciences THIẾT KẾ VÀ LẬP TRÌNH WEB Computer Sciences Computer Sciences Computer Sciences Computer Sciences 16 16
2/16/2011 Định dạng theo tag Hi 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 THIẾT KẾ VÀ LẬP TRÌNH WEB 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ấu và “ " " Ngoặc kép < < < Nhỏ hơn > > > Lớn hơn THIẾT KẾ VÀ LẬP TRÌNH WEB Ví dụ:Để hiển thị được: & “SGU” <Dai hoc sai Gon>&nbsp ; &amp ; &nbsp ; "SGU" HTML special character -- Google SpecialCharacter.html 18 18
2/16/2011 Tag hình ảnh  : Không có thẻ đóng  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 THIẾT KẾ VÀ LẬP TRÌNH WEB width: 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) 19 19
2/16/2011 Tag hình ảnh Giá 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ụ: THIẾT KẾ VÀ LẬP TRÌNH WEB 20 20