Thẻ tạo đường gạch ngang - ý nghĩa: Dùng để tạo các đường gạch ngang phân cách các đoạn trong trang Web - Cú pháp: Các thuộc tính của thẻ HR - Align =”căn lề”: Dùng để căn lề cho đường[r]
(1)Chươngư2:ưư ThiÕtkÕtrangWebvíiHTML (2) I.Kh¸iniÖmng«nngỮHTML,trÌnhso¹nth¶o, cÊutrócchungcñaméttrangWeb,xem trangHTMLb»ngtrÌnhduyÖtWeb -GiíithiÖung«nngỮ HTML HTML là chữ viết tắt Hyper Text Markup Language Sử dụng các ký hiệu quy định sẵn (được gọi là tag/thẻ) để trình bày nội dung văn Nội dung + Định dạng = Kết hiển thị Một file HTML phải có phần mở rộng là htm html (3) I.Kh¸iniÖmng«nngỮHTML,trÌnhso¹nth¶o, cÊutrócchungcñaméttrangWeb,xem trangHTMLb»ngtrÌnhduyÖtWeb trÌnhso¹nth¶o NotePad WordPad FrontPage 2003 Macromedia Dreamwawer (4) I.Kh¸iniÖmng«nngỮHTML,trÌnhso¹nth¶o, cÊutrócchungcñaméttrangWeb,xem trangHTMLb»ngtrÌnhduyÖtWeb cÊutrócchungcñaméttrangWeb (5) I.Kh¸iniÖmng«nngỮHTML,trÌnhso¹nth¶o, cÊutrócchungcñaméttrangWeb,xem trangHTMLb»ngtrÌnhduyÖtWeb xemtrangHTMLb»ngtrÌnhduyÖtWeb Mở trình soạn thảo Gõ nội dung Lưu file với đuôi htm html (6) II Các tag HTML Giới thiệu các mã màu phổ biến (7) Giới thiệu các thẻ 2.1 ThÎ Body Quy định bắt đầu và kết thúc nội dung mét trang web Cú pháp: <Body C¸c tham sè nÕu cã> Nội dung tài liệu đợc đặt đây </Body> VD: (8) C¸c thuéc tÝnh cña thÎ Body: Background =”địa chỉ”: Chỉ định ảnh cho trang Web Bgcolor =”màu”: Chỉ định màu cho trang Web Text =”màu”: Chỉ định màu văn cho trang Web Bgproperties =”pixed” : Chỉ định ảnh trang Web không cuén cuén Scrollbar Leftmargin = n: Chỉ định lề trái cho trang Web, với n là số nguyªn d¬ng tÝnh theo pixed Topmargin = n: Chỉ định lề trên cho trang Web, với n là số nguyªn d¬ng tÝnh theo pixed Link =”màu”: Chỉ định màu cho các Hyperlink cha đợc duyÖt trang Web Vlink =”màu”: Chỉ định màu cho các Hyperlink đã đợc duyÖt trang Web Alink =”màu”: Chỉ định màu cho các Hyperlink đợc duyÖt trang Web (9) 2.2 Thẻ định dạng kiểu chữ a Thẻ tạo chữ đậm <B> - ý nghĩa: Cho phép tạo chữ đậm - Cú pháp: <B>…</B> b Thẻ tạo chữ xiên <I> - ý nghĩa: Cho phép tạo chữ xiên - Cú pháp: <I>…</I> c Thẻ tạo chữ gạch chân <U> ý nghĩa: Cho phép tạo chữ gạch chân Cú pháp: <U>…</U> (10) 2.3 Thẻ xuống dòng <Br> - ý nghĩa: Dùng để xuống dòng trên trang Web - Cú pháp: <br> 2.4 Thẻ định dạng phông chữ <Font> - ý nghĩa: Dùng để định dạng phông chữ trên trang Web - Cú pháp : <Font>…</Font> Các thuộc tính thẻ Font - Face = "phông chữ" : Chỉ định tên phông chữ áp dụng - Size= "cỡ chữ": Chỉ định kích thước cho phông chữ - Color = "màu chữ": định màu cho phông chữ Ví dụ: (11) 2.5 Thẻ tạo đoạn văn <P> - ý nghĩa: Cho phép tạo đoạn văn và lề cho đoạn văn đó - Cú pháp:<P align ="Căn lề" >…</P> Align =”căn lề”: Dùng để lề cho đoạn văn Left: Căn bên trái Right: Căn bên phải Center: Căn 2.6 Thẻ tạo số trên - ý nghĩa: Cho phép tạo các số trên cho chữ - Cú pháp : <Sup>… </Sup> 2.7 Thẻ tạo số - ý nghĩa: Cho phép tạo các số cho chữ - Cú pháp : <Sub>… </Sub> (12) 2.8 Thẻ tạo chủ đề - ý nghĩa: Dùng để mô tả ngắn gọn chủ đề phần đứng sau nó, Có cấp độ heading có sẵn, từ cấp độ 1(Cấp độ cao nhất) đến cấp độ (cấp độ thấp nhât) - Cú pháp: <H1> nội dung </H1> <H6> nội dung </H6> (13) 2.9 Thẻ tạo danh sách - ý nghĩa: Cho phép tạo danh sách có đánh số thứ tự, không đánh số thứ tự trên trang web với nhiều mục - Cú pháp: a Danh sách không đánh số thứ tự <UL> <Li> Mục danh sách <Li> Mục danh sách <Li> Mục danh sách </UL> - Thuộc tính thẻ <UL> Type = ”Disc”: mặc định, đĩa tròn đen quen thuộc “Square” : Một hình vuông nhỏ tô đầy “Circle” : Một hình tròn không tô đầy (14) b Danh sách có đánh số thứ tự <OL> <Li> Mục danh sách <Li> Mục danh sách <Li> Mục danh sách </OL> Các thuộc tính thẻ <OL> Type =”1” : Kiểu đánh danh sách là: 1, 2, ”a” : Kiểu đánh danh sách là: a,b,c ”A” : Kiểu đánh danh sách là: A, B, C ”i” : Kiểu đánh danh sách là: i, ii, iii ”I” : Kiểu đánh danh sách là: I, II, III Start =”giá trị” : Xác định giá trị khởi đầu cho danh sách (15) Bài tập: Tạo trang web với nội dung (16) 2.10 Thẻ tạo chú thích - ý nghĩa: thẻ này dùng để tạo chú thích cho trang HTML, nội dung thẻ này không xuất trên trình duyệt - Cú pháp: <Comment>…</Comment> <! lời chú thích > Ví dụ: (17) 2.11 Thẻ tạo đường gạch ngang <HR> - ý nghĩa: Dùng để tạo các đường gạch ngang phân cách các đoạn trang Web - Cú pháp: <HR> Các thuộc tính thẻ HR - Align =”căn lề”: Dùng để lề cho đường gạch ngang Left: Căn bên trái Right: Căn bên phải Center: Căn - Color =”màu”: Chỉ định màu cho đường gạch ngang - Size =n: Chỉ định kích thước cho đường gạch ngang - Noshade: định độ bóng cho đường gạch ngang - Width =n: Chỉ định độ rộng cho đường gạch ngang (18) 2.12 Thẻ tạo ký tự trắng - ý nghĩa: Cho phép tạo các ký tự trắng trên Web - Cú pháp:   (19) 2.13 Thẻ chèn ảnh vào trang Web - ý nghĩa: Cho phép chèn ảnh vào trang Web - Cú pháp: <IMG src="địa chỉ"> Các thuộc tính thẻ IMG - Src ="địa chỉ" : Chỉ nơi chứa ảnh cần chèn vào trang Web (lưu ý: Tên ảnh phải có đuôi vd: a1.jpg hay a1.bmp) - Alt ="text": Cho phép tạo dòng chữ thay cho hình - Border =n: Chỉ định đường viền cho ảnh - Height =n: Chỉ định độ cao cho ảnh - Width =n : Chỉ định độ rộng cho ảnh - Ailgn = lề: Lề cho ảnh hay văn bao quanh ảnh (Top, middle, Bottom left, right) - Hspace =n: Chỉ định khoảng cách từ ảnh đến văn bao quanh nó theo chiều dọc - Vspace =n: Chỉ định khoảng cách từ ảnh đến văn bao quanh nó theo chiều ngang (20) Ví dụ: trang ảnh (21) 2.14 Thẻ tạo chữ chạy: - ý nghĩa: Tạo hiệu ứng chữ chạy file HTML, dòng văn bản, hay đối tượng nằm thẻ này chạy theo kiểu đã quy định trước Thẻ này dành riêng cho trình duyệt Internet Explore - Cú pháp: <Marquee>….</Marquee> Các thuộc tính thẻ Marquee - Align =căn lề: Căn hàng văn so với khung chứa văn đó (left, right, middle, bottom) - Behavior = hướng chạy: Chỉ định kiểu chạy chữ (Scroll,Slide, Alternate) (22) 2.14 Thẻ tạo chữ chạy: Các thuộc tính thẻ Marquee - Bgcolor =màu: Chỉ định màu cho khung chứa văn - Direction="hướng chạy": Chỉ định hướng chạy dòng văn Mặc định chạy từ phải qua trái (Left, right, Up, Down) (23) 2.15.Thẻ tạo liên kết trang - ý nghĩa: Dùng để tạo liên kết từ vị trí này tới vị trí khác trên cùng trang Web Nó có ý nghĩa nội dung trang web dài với nhiều trang màn hình - Cú pháp: Các bước thực hiện: b1: Tạo điểm neo vị trí cần liên kết tới lệnh; <A name ="tenneo"></A> b2: Tạo lên kết tới điểm neo <A href ="#tenneo">noi dung hiển thị</A> (24) 2.16 Thẻ tạo liên kết ngoài trang - ý nghĩa: Dùng để tạo liên kết từ trang web này tới trang web khác, hay tới tệp tin, thư mục mục địa - Cú pháp: <A href ="diachi"> nội dung hiển thị </A> (25) 2.17 Thẻ tạo nhạc - ý nghÜa: Cho phÐp chÌn mét b¶n nh¹c lªn trang Web - Có ph¸p : <Bgsound src ="®i¹ chØ" loop =n> Src ="địa chỉ": Chỉ định địa nơi lấy nh¹c (.mp3, wav, midi) loop =n: Chỉ định số lần lặp cho nhạc, không chọn, lặp tắt trang Web (26) Thẻ tạo Form, Tạo bảng 3.1 ThÎ t¹o Form HTML cung cấp tag tạo form, giúp trang web có thể nhận liệu từ người dùng không có khả xử lý các điều khiển trên form Một trang web có thể có hay nhiều form name giúp phân biệt các form khác trên trang web <form name=”…”> các điều khiển form </form> (27) Các điều khiển trên form ✘ CheckBox OptionButton Command Button TextBox Submit Reset Muc chon (28) Menu Tiếp <input type=”loại_điều_khiển” name=”…” value=”…”> ✘ CheckBox OptionButton Command Button TextBox type dùng để xác định loại điều khiển value là giá trị hiển thị trên điều khiển (29) Có loại điều khiển TextBox – “text” • CheckBox – “checkbox” • OptionBox – “radio” • Button – “button” • Submit/Reset – “submit”/”reset” Các thuộc tính thẻ Form - Action ="điạ chỉ" : Chỉ đỉnh địa cần gửi liệu trên Form đến - Method ="Post /Get": Quy định phương thức gửi và nhận liệu (30) Menu Về Submit/Reset là hai nút đặc biệt form web browser Submit gửi liệu nhập vào form tới Web server khởi tạo lại trạng thái ban đầu các điều khiển trên form Ví dụ:textbox (31) Menu <textarea rows=“10” cols=“50”>Abc</textarea> Abc <textarea> dùng để tạo vùng nhập liệu văn Thuộc tính cols, rows dùng để xác định kích thước textbox Nội dung đoạn văn nằm tag <textarea> và </textarea> (32) Menu <select size=”…” name=”…”> <option>mục chọn 1</option> <option selected>mục chọn 2</option> </select> Muc chon <select> dùng để tạo ComboBox hay ListBox Thuộc tính size xác định loại điều khiển là ComboBox hay ListBox Với ListBox, thuộc tính multiple cho phép chọn nhiều mục Ví dụ: (33) 3.3 Tạo bảng (34) (35) colspan : cột trải rộng trên nhiều cột rowspan : cột nằm trên nhiều dòng (36) 3.4 Hiển thị nhiều trang trên WebBrowse (37) (38)