Thiet Ke Web voi HTML

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (314.02 KB, 37 trang )

(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 của 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 bản.. . . Nội dung + Định dạng =. Kết quả hiển thị. . Một file HTML phải có phần mở rộng là .htm hoặc .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ở một trình soạn thảo Gõ nội dung Lưu file với đuôi .htm hoặc html.

(6) II. Các tag cơ bản trong HTML . 1. Giới thiệu các mã màu phổ biến.

(7) 2. Giới thiệu các thẻ  . . 2.1. ThÎ Body Quy định sự bắt đầu và kết thúc nội dung của mét trang web. Cú pháp: <Body C¸c tham sè nÕu cã> Nội dung của 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 nền cho trang Web Bgcolor =”màu”: Chỉ định màu nền cho trang Web Text =”màu”: Chỉ định màu văn bản cho trang Web Bgproperties =”pixed” : Chỉ định ảnh nền trang Web không cuén khi cuén thanh Scrollbar Leftmargin = n: Chỉ định lề trái cho trang Web, với n là 1 số nguyªn d¬ng tÝnh theo pixed Topmargin = n: Chỉ định lề trên cho trang Web, với n là 1 số nguyªn d¬ng tÝnh theo pixed. Link =”màu”: Chỉ định màu cho các Hyperlink khi cha đợc duyÖt trong trang Web. Vlink =”màu”: Chỉ định màu cho các Hyperlink khi đã đợc duyÖt trong trang Web. Alink =”màu”: Chỉ định màu cho các Hyperlink khi đang đợc duyÖt trong trang Web..

(9) 2.2. Thẻ định dạng kiểu chữ a. Thẻ tạo chữ đậm - ý nghĩa: Cho phép tạo chữ đậm - Cú pháp: … b. Thẻ tạo chữ xiên - ý nghĩa: Cho phép tạo chữ xiên - Cú pháp: … c. Thẻ tạo chữ gạch chân ý nghĩa: Cho phép tạo chữ gạch chân Cú pháp: ….

(10) 2.3 .Thẻ xuống dòng - ý nghĩa: Dùng để xuống dòng trên trang Web - Cú pháp: 2.4. Thẻ định dạng phông chữ - ý nghĩa: Dùng để định dạng phông chữ trên trang Web - Cú pháp : … Các thuộc tính của thẻ Font - Face = "phông chữ" : Chỉ định tên phông chữ được áp dụng - Size= "cỡ chữ": Chỉ định kích thước cho phông chữ - Color = "màu chữ": chỉ định màu cho phông chữ Ví dụ:.

(11) 2.5. Thẻ tạo đoạn văn bản - ý nghĩa: Cho phép tạo 1 đoạn văn bản và căn lề cho đoạn văn bản đó. - Cú pháp:… Align =”căn lề”: Dùng để căn lề cho đoạn văn bản Left: Căn bằng bên trái Right: Căn bằng bên phải Center: Căn bằng ở giữa 2.6. Thẻ tạo chỉ số trên - ý nghĩa: Cho phép tạo các chỉ số trên cho chữ - Cú pháp : ….. 2.7. Thẻ tạo chỉ số dưới - ý nghĩa: Cho phép tạo các chỉ số dưới cho chữ - Cú pháp : …...

(12) 2.8. Thẻ tạo chủ đề - ý nghĩa: Dùng để mô tả ngắn gọn chủ đề của phần đứng sau nó, Có 6 cấp độ heading có sẵn, từ cấp độ 1(Cấp độ cao nhất) đến cấp độ 6 (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 1 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 1 trong danh sách <Li> Mục 2 trong danh sách <Li> Mục 3 trong danh sách ... </UL> - Thuộc tính của thẻ <UL> Type = ”Disc”: mặc định, đĩa tròn đen quen thuộc “Square” : Một hình vuông nhỏ được tô đầy “Circle” : Một hình tròn không được tô đầy..

(14) b. Danh sách có đánh số thứ tự <OL> <Li> Mục 1 trong danh sách <Li> Mục 2 trong danh sách <Li> Mục 3 trong danh sách ... </OL> Các thuộc tính của thẻ <OL> Type =”1” : Kiểu đánh danh sách là: 1, 2, 3... ”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 của thẻ này không xuất hiện trên trình duyệt - Cú pháp: <Comment>…</Comment>  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 trong trang Web - Cú pháp: <HR> Các thuộc tính của thẻ HR - Align =”căn lề”: Dùng để căn lề cho đường gạch ngang Left: Căn bên trái Right: Căn bên phải Center: Căn ở giữa - 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: chỉ đị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: &nbsp.

(19) 2.13. Thẻ chèn ảnh vào trang Web - ý nghĩa: Cho phép chèn 1 ảnh bất kỳ vào trang Web - Cú pháp: <IMG src="địa chỉ"> Các thuộc tính của thẻ IMG - Src ="địa chỉ" : Chỉ ra nơi chứa ảnh cần chèn vào trang Web (lưu ý: Tên ảnh phải có 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 = căn lề: Lề cho ảnh hay văn bản bao quanh ảnh (Top, middle, Bottom. left, right) - Hspace =n: Chỉ định khoảng cách từ ảnh đến văn bản bao quanh nó theo chiều dọc. - Vspace =n: Chỉ định khoảng cách từ ảnh đến văn bả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 trong file HTML, dòng văn bản, hay một đối tượng bất kỳ nằm giữa thẻ này sẽ chạy theo kiểu đã quy định trước. Thẻ này chỉ dành riêng cho trình duyệt Internet Explore. - Cú pháp: <Marquee>….</Marquee> Các thuộc tính của thẻ Marquee - Align =căn lề: Căn hàng văn bản so với khung chứa văn bả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 của thẻ Marquee - Bgcolor =màu: Chỉ định màu nền cho khung chứa văn bản. - Direction="hướng chạy": Chỉ định hướng chạy của dòng văn bả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 trong 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 một trang Web. Nó có ý nghĩa khi nội dung của một 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 tại vị trí cần liên kết tới bằng lệnh; <A name ="tenneo"></A>. b2: Tạo 1 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 một tệp tin, thư mục được chỉ ra tại mục địa chỉ. - Cú pháp: <A href ="diachi"> nội dung hiển thị </A>.

(25) 2.17. Thẻ tạo nhạc nền .   . . - ý 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 chỉ nơi lấy bản nh¹c (.mp3, .wav, .midi) loop =n: Chỉ định số lần lặp cho bản nhạc, nếu không chọn, sẽ lặp cho đến khi tắt trang Web.

(26) 3. Thẻ tạo Form, Tạo bảng . 3.1. ThÎ t¹o Form. . HTML cung cấp một tag tạo form, giúp trang web có thể nhận dữ liệu từ người dùng nhưng không có khả năng xử lý các điều khiển trên form. . Một trang web có thể có 1 hay nhiều form. name giúp phân biệt các form khác nhau trên trang web. . <form name=”…”> các điều khiển trong form </form>.

(27) Các điều khiển trên form ✘ CheckBox. OptionButton Command Button. TextBox. Submit Reset. Muc chon 1.

(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ó 5 loại điều khiển TextBox – “text”  • CheckBox – “checkbox”  • OptionBox – “radio”  • Button – “button”  • Submit/Reset – “submit”/”reset” Các thuộc tính của thẻ Form  - Action ="điạ chỉ" : Chỉ đỉnh địa chỉ cần gửi dữ liệu trên Form đến.  - Method ="Post /Get": Quy định phương thức gửi và nhận dữ liệu .

(30) Menu. . Về. Submit/Reset là hai nút đặc biệt trong form đối với web browser. . . . Submit. gửi dữ liệu nhập vào form tới Web server. khởi tạo lại trạng thái ban đầu của 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 một vùng nhập liệu văn bản Thuộc tính cols, rows dùng để xác định kích thước của textbox Nội dung của đoạn văn bản nằm trong 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 1. . . . . <select> dùng để tạo một 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 : một cột trải rộng trên nhiều cột rowspan : một cột nằm trên nhiều dòng.

(36) 3.4. Hiển thị nhiều trang trên WebBrowse.

(37)

(38)

Thiet Ke Web voi HTML

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về