WebCourse - Bài 3: Thiết kế trang Web
HTML (Hyper Text Markup Language - Ngôn ngữ
đánh dấu siêuvăn bản)
l Làmột ngôn ngữ dùng để xây dựng một trang Web.
l Chứa các thành phần định dạng để báo cho trình
duyệt Web biết cách để hiển thị một trang Web.
l Một trang web thông thường gồm có 2 thành phần
chính:
– Dữ liệu của trang web (văn bản, âm thanh, hình ảnh.)
– Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các
dữ liệu trên hiển thị trên trình duyệt
Tóm tắt nội dung WebCourse - Bài 3: Thiết kế trang Web, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
1BÀI 3 THIẾT KẾ TRANG WEB Khoa CNTT – ĐH KHTN Nội dung 1. Giới thiệu về HTML 2. HTML – Cơ bản 3. Frame 1. Giới thiệu về HTML l HTML (Hyper Text Markup Language - Ngôn ngữ đánh dấu siêu văn bản) l Là một ngôn ngữ dùng để xây dựng một trang Web. l Chứa các thành phần định dạng để báo cho trình duyệt Web biết cách để hiển thị một trang Web. l Một trang web thông thường gồm có 2 thành phần chính: – Dữ liệu của trang web (văn bản, âm thanh, hình ảnh...) – Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ liệu trên hiển thị trên trình duyệt. 21. Giới thiệu về HTML Ví dụ 1 Welcome to HTML My first HTML document Kết quả hiển thị ở trình duyệt 1. Giới thiệu về HTML Browsers và Editors l Browsers – Netscape's Navigator – Microsoft's Internet Explorer l Editors – Microsoft FrontPage – Macromedia Dreamweaver – Notepad 1. Giới thiệu về HTML Thẻ (tag) HTML? l Welcome to HTML My first HTML document 31. Giới thiệu về HTML Thẻ (tag) HTML – Đổi thuộc tính 1. Giới thiệu về HTML Thẻ (tag) HTML – Đổi thuộc tính Mã HTML Hiển thị Đây là một dòng được in đậm Đây là một dòng được in đậm Mức tiêu đề 3 Mức tiêu đề 3 Mã HTML Hiển thị Hello Hello - Không phân biệt chữ HOA và thường - Bỏ qua các khoảng trắng thừa và các dấu ngắt dòng 2. HTML – Cơ bản Cấu trúc một tài liệu HTML l The HTML section l The Header section. l The BODY section. Welcome to the world of HTML This is going to be real fun 42. HTML – Cơ bản Cấu trúc một tài liệu HTML l : định nghĩa phạm vi của văn bản HTML l : Định nghĩa các mô tả về trang HTML. Các thông tin trong tag này không được hiển thị trên trang web l : mô tả tiêu đề trang web. l xác định vùng thân của trang web, nơi chứa các thông tin. 2. HTML – Cơ bản Các tag HTML cơ bản Ðịnh dạng văn bản l Block-level elements – Headers (H1 to H6) – Paragraphs (P) – List Items (LI) – Horizontal Rules (HR). l Inline or text level elements – EM, I, B and FONT (character emphasis) – A (hypertext links) – BR (line breaks) 2. HTML – Cơ bản Các tag HTML cơ bản l HEADING Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML Introduction to HTML 52. HTML – Cơ bản Các tag HTML cơ bản - l PARAGRAPH - Welcome to HTML My first HTML document This is going to be real fun Using another heading Another paragraph element 2. HTML – Cơ bản Các tag HTML cơ bản - l HORIZONTAL RULES l – Attributes l align l Width l Size l Noshade Ø Ø 2. HTML – Cơ bản Các tag HTML cơ bản - Welcome to HTML My first HTML document This is going to be real fun Using another heading This should surprise you Another paragraph element 62. HTML – Cơ bản Các tag HTML cơ bản–Định dạng l 1 l 2 l 3 l 4 l 5 l 6 l 7 l 8 l 9 2. HTML – Cơ bản Các tag HTML cơ bản–Định dạng l 1 l 2 l 3 l 4 l 5 l 6 l 7 l 8 l 9 l 0 2. HTML – Cơ bản Các tag HTML cơ bản– l Hiển thị đúng dạng văn bản đã soạn thảo (khoảng trắng, xuống dòng, tag,…) Ban co the xuong dong va cach khoang trang thoai mai 72. HTML – Cơ bản Các tag HTML cơ bản–Kí tự đặc biệt l Greater than (>) – > l Less than (<) – < l Quotes (“) – " l Ampersand (&) – & l Space – l @ – © l ® – ® 2. HTML – Cơ bản Chèn hình ảnh - position là TOP, BOTTOM, hoặc MIDDLE. l Ảnh nền trang Web l Scrolling <BODY BACKGROUND=“path/clouds.gif" BGPROPERTIES=FIXED> 2. HTML – Cơ bản Thêm Sound l l – Nhạc nền trang Web (MIDI) – Loop = “-1” : lặp vô hạn 82. HTML – Cơ bản HyperLink - l Chèn liên kết cho 1 đoạn văn bản hay hình ảnh hypertext l Có 2 loại liên kết – Internal Link: liên kết đến những phần trong cùng 1 trang web – External Link: liên kết đến những trang web khác hay website khác 2. HTML – Cơ bản HyperLink - l Tạo liên kết nội và liên kết – Đánh dấu vị trí liên kết nội Chapter 1 – Tạo liên kết nội Go to Chapter 1 hoặc Hypertext 2. HTML – Cơ bản HyperLink - l Có 2 loại địa chỉ URL trong hyperlink – Địa chỉ tuyệt đối Hypertext / : vị trí thư mục gốc của website – Địa chỉ tương đối l Là vị trí tương đối so với trang web sử dụng link l .. : quay ra thư mục cha VD: trong file A.HTM có hyperlink Liên kết đến trang B l Liên kết email TDDuan 92. HTML – Cơ bản HyperLink - My web Đây là trang Web đầu tiên tôi <img border="1" src="j0304933.wmf" width="100" height="90" align="left" hspace="20" vspace="20" alt="Anh ve chu tho"> Đây là một bức ảnh có kích thuớc 100 x 90 Có viền xung quanh (boder =1 và vspace,hspace = 20) Text thay th ế là " Bức ảnh về chú thỏ " Canh lề trái Bạn hãy thiết kế thử xem !!! Trở về hình vẽ ! Liên hệ lamquangvu@zapo.net 2. HTML – Cơ bản HyperLink - l Thuộc tính TARGET hypertext – name: tải trang web vào frame có tên NAME – _blank: tải trang web vào cửa sổ mới – _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 – _top: tải trang web vào cửa số cao nhất 2. HTML – Cơ bản HyperLink - 10 2. HTML – Cơ bản HyperLink – Liên kết đa hình ảnh l Xác định các vùng liên kết trên ảnh <area shape = "rect" coords = "x1,y1,x2,y2" href = "URL"> <area shape = "rect" coords = "x4,y4,x5,y5" href = "URL"> .... l Sử dụng trong ảnh 2. HTML – Cơ bản HyperLink – Liên kết đa hình ảnh <area href="Toan.htm" shape="rect" coords="0, 0, 100, 100"> <area href="Ly.htm" shape="rect" coords="0,100, 100,200"> <area href="Hoa.htm" shape="rect" coords="100, 0,200, 100"> <area href="Anhvan.htm" shape="rect" coords="100,100, 200,200"> <img border="0" src="hinhdalienket.png" usemap="#Dalienket" width="200" height="200"> 2. HTML – Cơ bản Chuyển hướng trang web tự động l <META HTTP-EQUIV=“refresh” CONTENT=“3”; URL=“URL”> – Chuyển hướng tự động sang trang URL sau thời gian 3 giây – Đặt trong phần … 11 2. HTML – Cơ bản Bảng biểu - l : định dạng bảng. Mỗi ô là 1 cell l Các thuộc tính – BORDER=“x” : kích thước viền – BGCOLOR: màu nền, ALIGN: canh chỉnh – WIDTH,HEIGHT : kích thước – CELLPADDING, CELLSPACING – ROWSPAN, COLSPAN: trộn các dòng hoặc cột – : dòng, cột, : heading – : tiêu đề mô tả bảng 2. HTML – Cơ bản Bảng biểu - Ví dụ về bảng Dòng 1 Dòng 2 Dòng 1.1 Dòng 1.2 Dòng 2.1 Dòng 2.2 2. HTML – Cơ bản Bảng biểu - - ví dụ Ví dụ về bảng Dòng 1 Dòng 2 Dòng 1.1 Dòng 1.2 Dòng 2.1 Dòng 2.2 12 2. HTML – Cơ bản Bảng biểu - - ví dụ Ví dụ về bảng Dòng 1 Dòng 2 Dòng 1.1 Dòng 1.2 Dòng 2.1 Dòng 2.2 2. HTML – Cơ bản Bảng biểu - - ví dụ 2. HTML – Cơ bản Tạo danh sách 13 2. HTML – Cơ bản Tạo danh sách Những kiến thức căn bản về HTML Cấu trúc tập tin HTML Cấu trúc tập tin HTML Các Tag HTML Các Tag cơ bản Định dạng văn bản Định dạng hình ảnh Đỉnh dạng liên kết Ví dụ Code Minh họa 3.FRAME l Mỗi cửa sổ chứa 1 URL ứng với 1 trang web l Hiển thị độc lập nhau l Cửa sổ = FRAME 3.FRAME l : định nghĩa cách tổ chức các frame l : định nghĩa chi tiết từng frame l thuộc tính của – ROWS=“X,Y,Z,*”: phân các frame theo dòng – COLS=“X,Y,*”: phân các frame theo cột (X,Y,Z: kích thước xác định hay tỉ lệ %) – Frameborder=“Yes/No” 14 3.FRAME l thuộc tính của – NAME=“tên_frame”: đặt tên cho frame – SRC=“URL” : địa chỉ trang web được hiển thị – TARGET: xác định frame mặc định cho các hyperlink frame này – BORDER=“x” : xác định kích thước đường viền – SCROLLING=“yes/no/auto” : xác định thuộc tính hiển thị scrollbar – NORESIZE: không cho phép hiệu chỉnh kích thước frame window l Sử dụng các FRAMESET lồng nhau 3.FRAME A More Complex Framed Page This is what someone would see who does not have a web browser that can display frames 3.FRAME Bài tập: thiết kế các trang web có dạng FRAME sau 15 3.FRAME l Cấu trúc một trang WEB thông thường theo dạng FRAME BÀI TẬP THỰC HÀNH l Thiết kế trang WEB theo FRAME l Thiết kế các trang WEB theo mẫu l Thiết kế hoàn chỉnh trang web đăng ký và giới thiệu nhóm Một số trang web mẫu 16 Một số trang web mẫu Một số trang web mẫu Một số trang web mẫu 17 Một số trang web mẫu
File đính kèm:
WebCourse - Bài 3 Thiết kế trang Web.pdf
