Bài giảng Thiết kế Website - Chương 2: Ngôn ngữ HTML - Dương Thành Phết
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế Website - Chương 2: Ngôn ngữ HTML - Dương Thành Phết", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên
Tài liệu đính kèm:
- bai_giang_thiet_ke_website_chuong_2_ngon_ngu_html_duong_than.pdf
Nội dung text: Bài giảng Thiết kế Website - Chương 2: Ngôn ngữ HTML - Dương Thành Phết
- KHOA CAO ĐẲNG THỰC HÀNH THIẾT KẾ WEBSITE (Chuyờn ngành: Quản trị mạng mỏy tớnh) CHƢƠNG 2 NGễN NGỮ HTML 1 â Dương Thành Phết Website:
- NỘI DUNG 1. Cấu trỳc của trang Web 2. Cấu trỳc thẻ HTML 3. Cỏc thẻ định dạng văn bản 4. Tổ chức lưu trữ Website 5. Chốn đối tượng đồ họa (hỡnh, flash, Video, ) 6. Thiết lập liờn kết 7. Thiết kế bảng biểu (Table) 8. Thiết kế biểu mẫu (Form) 2 â Dương Thành Phết Website:
- 1. CẤU TRÚC TỔNG QUÁT CỦA TẬP TIN HTML Nội dung tiờu đề Phần dữ liệu của trang web . . . : Bắt đầu và kết thỳc tập tin HTML . . . : Phần đầu trang web Nội dung : Nội dung trờn thanh tiờu đề Nội dung : Nội dung trờn trang 3 â Dương Thành Phết
- 2. THẺ HTML 2.1. Khỏi niệm Tập tin HTML là 1 văn bản chứa cỏc thẻ(Tag)- để tạo cỏc thành phần của tài liệu. Cấu trỳc tổng quỏt của thẻ: Thành phần chịu tỏc động Thẻ mở Thẻ đúng Tờn của thẻ đặt trong cặp ngoặc nhọn: Cú hoặc khụng cú cỏc thuộc tớnh. Vớ dụ: Chào Cỏc Bạn Nội dung sẽ in đậm Chỳc cỏc bạn học tốt chữ cỡ 4 Ghi chỳ: Cho phộp cỏc thẻ lồng nhau, Cho viết cỏc thẻ trờn cựng 1 dũng hoặc nhiều dũng. Nờn viết cú cấu trỳc 4 â Dương Thành Phết
- 2. THẺ HTML 2.2. Vấn đề ngắt dũng Khụng xuống dũng như soạn thảo mà chỉ tự mà rớt dũng tựy theo kớch thước cửa sổ trỡnh duyệt. Để ngắt dũng tạo đoạn mới: Đặt văn bản trong cặp thẻ Để ngắt dũng khụng tạo đoạn mới: Chốn thẻ tại vị trớ muốn ngắt dũng. Để giữ cỏc phần tử trờn cựng 1 dũng: Đặt văn bản trong cặp thẻ Văn bản sẽ bị che khuất khi chiều rộng cửa sổ trỡnh duyệt khụng đủ và sẽ hiện thanh cuộn ngang. 5 â Dương Thành Phết
- 2. THẺ HTML 2.3. Tạo chỳ thớch Đặt cõu ghi chỳ vào cặp thẻ Nội dung cõu chỳ thớch khụng hiển thị trờn trỡnh duyệt Vớ dụ: > BÀI THƠ Cễ HÁI MƠ Cễ HÁI MƠ Thơ thẩn đường chiều một khỏch thơ Say nhỡn xa rặng nỳi xanh lơ Khớ trời lặng lẽ và trong trẻo Thấp thoỏng rừng mơ, cụ hỏi mơ 6 â Dương Thành Phết
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.1. Định dạng kiểu dỏng - Style Nội dungvăn bản . . . Nội dung được in đậm Nội dung văn bản Nội dung được in nghiờng Nội dung văn bản Nội dung được gạch chõn Nội dung văn bản Nội dung được gạch ngang 7 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.2. Thay đổi Font, Size Nội dung Xỏc định Font cho Nội dung văn bản, nếu mỏy truy cập khụng cú FontName1 sẽ lấy FontName2 . . . sẽ lấy Font mặc định của trỡnh duyệt. Xỏc định cỡ chữ cho cả trang giỏ trị n: Từ 1 đến 7 (8,10,12,14,16,24,36) mặc định là 3. Nội dung VB Xỏc định cỡ chữ cho nội dung văn bản 8 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.2. Thay đổi Font, Size(tt) Vớ dụ: BAI THO CO HAI MO Cễ HÁI MƠ Thơ thẩn đường chiều một khỏch thơ Say nhỡn xa rặng nỳi xanh lơ Khớ trời lặng lẽ và trong trẻo Thấp thoỏng rừng mơ, cụ hỏi mơ 9 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.3. Tao chỉ số trờn/dƣới Văn bản Tạo chỉ số trờn cho văn bản Văn bản Tạo chỉ số dưới cho văn bản Vớ dụ: Văn bản cú chỉ số trờn:AX 2 +BX+C=0 Văn bản cú chỉ số dưới : H 2 O 10 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.4. Thiết lập lề trang . . . . . . . . Thiết lập lề trỏi trang (LeftMargin), lề trờn trang (TopMargin)Theo giỏ trị n1,n2 đơn vị tớnh là Pixcel 11 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.5. Canh lề đoạn văn bản Đoạn văn bản Hướng: Left Canh trỏi đoạn văn bản Right Canh phải đoạn văn bản Center Canh giữa đoạn văn bản Justify Canh đều văn bản Cỏc thành phần cần canh giữa 12 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.6. Tạo văn bản đề mục - Đề mục là dũng văn bản định dạng khỏc cỏc dũng văn bản trong nội dung dựng để tạo đề mục phần, chương. - Mỗi thẻ cú chức năng phõn đoạn, cấp 1 lớn nhất, cấp 6 nhỏ nhất, cú thể kết hợp thuộc tớnh canh lề. Nội dung văn bản đề mục cấp 1 Nội dung văn bản đề mục cấp 2 . . . . . Nội dung văn bản đề mục cấp 6 Vớ dụ: Đề mục cấp, 3 canh lề giữa 13 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.7. Sử dụng màu Cỏc mó màu Để xỏc lập màu cú thể dựng tờn màu hay trị màu tương ứng 14 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.7. Sử dụng màu(tt) Xỏc lập màu chung cho trang Web . . . . . Nội dung trang Web. . . . . BgColor: Màu nền trang Text: Màu văn bản 15 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.7. Sử dụng màu(tt) Xỏc lập màu cho văn bản Nội dung văn bản Vớ dụ: Cụng nghệ thụng tin 16 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.8. Đƣờng kẽ ngang : Tạo đường kẽ ngang dài = chiều rộng cửa sổ Size: Độ dày Width: Độ rộng (Pixcel hoặc %) Align: canh lề Left(Trỏi), Center(Giữa),Right(Phải) Color: Màu NoShade: Khụng cú búng Vớ dụ: 17 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.9. Ký tự đặc biệt Nhập Mó tờn hay Mó số của ký tự tương ứng Ký tự Mó tờn Mó số Ký tự Mó tờn Mó số â © © “ "e; " TM ™ Khoảng trắng đ ® ® 18 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.10. Hiệu ứng chuyển động Chuỗi ký tự Hiệu ứng: +Scroll:Bắt đầu từ 1 cạnh biến mất ở cạnh kia +Slide:Bắt đầu từ 1 cạnh dừng lại ở cạnh kia +Alternate:Bắt đầu từ 1 cạnh chuyển ngược lại Huớng: Left, Right, Up, Down Hướng bắt đầu n1: Số lần lặp n2: Khoảng cỏch(Pixel) giữa mỗi lần lặp 19 n3: Thời gian chờ giữa mỗi lần lặp. â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.11 Văn bản danh sỏch Danh sỏch khụng đỏnh số thứ tự Mục 1 của danh sỏch Mục 2 của danh sỏch . . . . . . . Mục n của danh sỏch Thay đổi kiểu dỏng cho chỉ mục : Ap dụng cho tất cả cỏc mục : Ap dụng cho 1 mục chỉ định Cỏc trị thuộc tớnh: Disc: Dấu trũn đen (Mặc định) square: Hỡnh vuụng đen đặc Circle: Hỡnh trũn rỗng 20 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.11 Văn bản danh sỏch(tt) Danh sỏch cú đỏnh số thứ tự Mục 1 của danh sỏch Mục 2 của danh sỏch . . . . . . . Mục n của danh sỏch Thay đổi cỏch đỏnh số thứ tự Kiểu STT cho toàn văn bản danh sỏch Mục của danh sỏch Kiểu STT cho 1 mục Trị Kiểu hiển thị 1 1,2,3 . . . a a,b,c . . . A A,B,C. . . i i,ii,iii . . . 21 I I,II,III . . . â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.11 Văn bản danh sỏch(tt) Danh sỏch cú đỏnh số thứ tự (tt) Chỉ định giỏ trị khởi đầu Tỏc động tất cả cỏc mục trong danh sỏch trừ khi mục trong dỏnh sỏch chỉ định khỏc. Mục của danh sỏch Tỏc động mục chỉ định và cỏc mục sau đú nếu cỏc mục này khụng chỉ định khỏc. 22 â Dương Thành Phết Website:
- 3. CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.11 Văn bản danh sỏch(tt) Danh sỏch cú đỏnh số thứ tự (tt) CHƯƠNG TRèNH ĐÀO TẠO NGÀNH WEBSITE THIẾT KẾ WEBSITE Ngụn ngữ HTML & ForntPage Ngụn ngữ kịch bản JavaScript Media Flash MX Thiết kế giao diện PhotoShop Thiết kế WebSite Dreamweaver MX LẬP TRèNH WEBSITE Phõn tớch & Thiết kế CSDL Lập trỡnh CSDL ASP.NET & SQL Sever Quản trị Website Đề tài tốt nghiệp 23 â Dương Thành Phết Website:
- 4. TỔ CHỨC LƢU TRỮ WEBSITE Cỏc tập tin HTML của 1 Website - 1 Website bao gồm rất nhiều trang Web –webpage (tập tin HTML). - Khi lưu trữ phải tổ chức cú cấu trỳc để thuận tiện trong quản lý, điều chỉnh về sau. - Khi đưa Website lờn WebServer được cấp 1 địa chỉ (Domain Name) và 1 thư mục. 24 â Dương Thành Phết Website:
- 4. TỔ CHỨC LƢU TRỮ WEBSITE Trang chủ của 1 Website - Trang chủ (Home page) là được mặc định truy cập khi truy cập Website. Thường qui định là: index.htm ,default.htm, home.htm VD: Truy cập: Nghĩa là: 25 â Dương Thành Phết Website:
- 4. TỔ CHỨC LƢU TRỮ WEBSITE Tổ chức Site 1 thƣ mục Tất cả cỏc tập tin HTML và cỏc tập tin khỏc đều đặt trong cựng 1 thư mục. Thuận lợi cho Website nhỏ, ớt tập tin. Tổ chức Site thƣ mục theo chức năng Bờn trong thư mục chớnh, tổ chức cỏc thư mục con chứa cỏc tập tin cú nội dung liờn quan với nhau. 26 â Dương Thành Phết Website:
- 4. TỔ CHỨC LƢU TRỮ WEBSITE Tổ chức Site thƣ mục theo kiểu tập tin Bờn trong thư mục chớnh, tổ chức cỏc thư mục con chứa cỏc tập tin cựng kiểu. + Thư mục chớnh chứa trang chủ và cỏc thư mục con + 1 thư mục con chứa cỏc trang HTML, + 1 thư mục con chứa cỏc tập tin hỡnh ảnh. . . . . Thuận lợi sử dụng chung tập tin, dễ thay thế bổ sung. Tổ chức Site hỗn hợp Kết hợp cỏch tổ chức theo chức năng và theo kiểu tập tin 27 â Dương Thành Phết Website:
- 4. TỔ CHỨC LƢU TRỮ WEBSITE Địa chỉ tuyệt đối Khi tham chiếu đến 1 tập tin phải ghi đầy đủ địa chỉ URL. Đƣờng dẫn/ Tờn tập tin VD: Địa chỉ tƣơng đối. Khi tham chiếu đến 1 tập tin cựng thư mục tập tin chớnh: Tờn tập tin Khi tham chiếu đến 1 tập tin khỏc thư mục tập tin chớnh: Đƣờng dẫn/Tờn tập tin Ghi chỳ: Sử dụng / để chỉ thư mục cấp trờn thư mục chứa tập tin chớnh: 28 â Dương Thành Phết Website:
- 5. CHẩN ĐỐI TƢỢNG ĐỒ HỌA 5.1. Sử dụng hỡnh ảnh Cỏc tập tin hỡnh ảnh cho phộp: .jpg,gif,.png,.bmp . . . Sử dụng hỡnh ảnh cần cõn nhắc: SL ảnh/1trang, kớch thước và độ phõn giải, nhằm cải thiện tốc độ truy cập. Phải lưu hỡnh ảnh ở vị trớ nào đú trong thư mục của Website 29 â Dương Thành Phết Website:
- 5. CHẩN ĐỐI TƢỢNG ĐỒ HỌA 5.2. Thiết lập ảnh nền cho trang Tờn tập tin: Là địa chỉ tuyệt đối hoặc tương đối Bgproperties =Fixed : Hỡnh ảnh mờ bất động VD: 30 â Dương Thành Phết Website:
- 5. CHẩN ĐỐI TƢỢNG ĐỒ HỌA 5.3. Chốn hỡnh ảnh vào trang Web Src: Là địa chỉ tuyệt đối or tương đối của ảnh Alt: Nội dung hiển thị trờn trỡnh duyệt khi trỏ vào hỡnh n1, n2: Là tỷ lệ % hoặc kớch thước tớnh theo pixel. n: Độ dày đường viền Align: Canh lề Top, Middle, Bottom, Left, Right (mặc định là thuộc tớnh Bottom) 31 â Dương Thành Phết Website:
- 5. CHẩN ĐỐI TƢỢNG ĐỒ HỌA 5.4. Nhỳng tập tin Media Cỏc dạng tập tin Media thụng dụng trờn Internet: .wav, .mp3, .wmv, .wma,.mpeg, .Ra, .Rm . . . hay cỏc tập tin Flash : .swf 32 â Dương Thành Phết Website:
- 6. THIẾT LẬP LIấN KẾT 6.1. Khỏi quỏt - Cỏc siờu liờn kết (Hyper Link) là cốt lừi của tập tin HTML cho phộp truy cập đến cỏc trang khỏc trờn cựng mỏy tớnh hay ở mỏy tớnh khỏc. - Tài liệu liờn kết cú thể là cỏc tập tin: Hỡnh ảnh, õm thanh, Multimedia, HTML . . . - Khi Click vào liờn kết sự truy cập tại địa chỉ truy cập sẽ thực hiện tự động 33 â Dương Thành Phết Website:
- 6. THIẾT LẬP LIấN KẾT 6.2. Liờn kết cục bộ (Local Link) Là liờn kết đến cỏc tài liệu Trờn cựng mỏy. VD: Đến 1 vị trớ trờn cựng trang Web Khai bỏo đớch đến: Ghi chỳ: Tờn đớch ở bất cứ vị trớ nào trờn cựng tập tin. 34 â Dương Thành Phết Website:
- 6. THIẾT LẬP LIấN KẾT 6.3. Liờn kết từ xa(Remote Link) Là liờn kết đến tài liệu lưu trữ trờn mỏy khỏc. VD: Liờn kết đến 1 địa chỉ Email VD: Mở chương trỡnh mail mặc định để soạn và gửi thư. 35 â Dương Thành Phết Website:
- 6. THIẾT LẬP LIấN KẾT 6.4. Dựng hỡnh ảnh làm nhón liờn kết. Mở liờn kết trong 1 cửa sổ riờng. 36 â Dương Thành Phết Website:
- 6. THIẾT LẬP LIấN KẾT 6.5. Tạo liờn kết cho tập tin Media Nhón liờn kết: là văn bản hoặc hỡnh ảnh Target=_blank: Mở cửa sổ riờng. 37 â Dương Thành Phết Website:
- 6. THIẾT LẬP LIấN KẾT 6.6. Liờn kết DownLoad Để tạo liờn kết Download tài liệu: Chuyển tài liệu thành cỏc dạng tập tin Zip,Rar, pdf, .doc . . . sau đú tạo liờn kết đến cỏc tập tin này. 38 â Dương Thành Phết Website:
- 7. THIẾT KẾ BẢNG BIỂU (TABLE) 7.1. Thiết kế bảng biểu - Table - Table là một cấu trỳc gồm nhiều hàng giao với nhiều cột (kỹ thuật thiết kế bố cục trang). Cần phỏt thảo cấu trỳc bảng trước khi thiết kế. Nội dung tiờu đề bảng Nội dung tiờu đề cột 1 Nội dung tiờu đề cột 2 . . . . Nội dung ụ 1 dũng 1 Nội dung ụ 2 dũng 1 . . . . . . . . . . . 39 â Dương Thành Phết Website:
- 7. THIẾT KẾ BẢNG BIỂU (TABLE) 7.2. Định dạng Table Tạo đƣờng viền. . . . . . . . Thiết lập độ rộng và canh lề bảng . . . . . . . n: Độ rộng tớnh bằng pixel Hoặc % kớch thước cửa sổ . “Center” / ”Left”/ ”Right”: Canh giữa/trỏi/phải cửa sổ trỡnh duyệt, văn bản sẽ cuộn quanh bảng. 40 â Dương Thành Phết Website:
- 7. THIẾT KẾ BẢNG BIỂU (TABLE) 7.2. Định dạng Table(tt) Xỏc lập màu, ảnh nền cho bảng, hàng, ụ. Thuộc tớnh í nghĩa Màu nền cho toàn bảng Ảnh nền cho tũan bảng Màu nền cho túan hàng Ảnh nền cho tũan hàng Màu nền cho ụ Ảnh nền cho ụ Màu nền cho ụ tiờu đề Ảnh nền cho ụ tiờu đề 41 â Dương Thành Phết Website:
- 7. THIẾT KẾ BẢNG BIỂU (TABLE) 7.2. Định dạng Table (tt) Định dạng ụ. Thuộc tớnh í nghĩa Canh theo chiều ngang: Left, Right, Center Canh theo chiều dọc: Top, Bottom, Middle Canh hàng tiờu đề theo chiều ngang Canh hàng tiờu đề theo chiều dọc Canh theo chiều ngang cỏc ụ trong hàng Canh theo chiều dọc cỏc ụ trong hàng CellSpacing=“n” Khoảng cỏch giữa cỏc ụ. 42 CellPadding=“n” Khỏang cỏch quanh nội dung ụ Pixel. â Dương Thành Phết Website:
- 7. THIẾT KẾ BẢNG BIỂU (TABLE) 7.2. Định dạng Table Trộn ụ: Dựng thuộc tớnh RowSpan và ColSpan cho thẻ TD/TH. Thuộc tớnh í nghĩa Tạo ụ cú độ cao n hàng Tạo ụ cú độ rộng n cột Tạo ụ tiờu đề cú độ cao n hàng Tạo ụ tiờu đề cú độ rộng n cột 43 â Dương Thành Phết Website:
- 8. THIẾT KẾ BIỂU MẪU (FORM) 8.1. Định nghĩa form Dạng 1: Chỉ trỡnh bày khụng gửi dữ liệu Cỏc đối tượng trong Form Dạng 2: Thụng tin từ Form chuyển cho địa chỉ Mail Cỏc đối tượng trong Form Dạng 3: Thụng tin từ Form chuyển lờn Webserver Cỏc đối tượng trong Form 44 â Dương Thành Phết Website:
- 8. THIẾT KẾ BIỂU MẪU (FORM) 8.2. Thiết kế cỏc thành phần a. Hộp văn bản – Text box n: chiều dài tớnh bằng số ký tự, m: Số ký tự tối đa cú thể nhập b. Hộp văn bản – Password n: chiều dài, m: Số ký tự tối đa cú thể nhập 45 â Dương Thành Phết Website:
- 2.3. THIẾT KẾ BIỂU MẪU (FORM) 2.3.2. Thiết kế Biểu mẫu – Form(tt) Thiết kế cỏc thành phần c. Nỳt gửi dữ liệu – Submit Button Hoặc d. Nỳt hủy dữ liệu vừa nhập - Reset Button 46 â Dương Thành Phết Website:
- 2.3. THIẾT KẾ BIỂU MẪU (FORM) 2.3.2. Thiết kế Biểu mẫu – Form(tt) Thiết kế cỏc thành phần Vớ dụ: ĐĂNG NHẬP DIỄN ĐÀN Tờn đăng nhập: Mật khẩu: 47 â Dương Thành Phết Website:
- 2.3. THIẾT KẾ BIỂU MẪU (FORM) 2.3.2. Thiết kế Biểu mẫu – Form(tt) Thiết kế cỏc thành phần e. Khung văn bản – TextArea Văn bản mặc định Wrap: Cuộn văn bản xuống dũng khi đến lề phải f. Nỳt chọn – Radio Button g. Hộp kiểm Checkbox Value=”Trị” : Giỏ trị On/ Off khi gửi lờn Server 48 â Dương Thành Phết Website:
- 2.3. THIẾT KẾ BIỂU MẪU (FORM) 2.3.2. Thiết kế Biểu mẫu – Form(tt) Thiết kế cỏc thành phần Vớ dụ: PHIẾU THĂM DỊ í KIẾN Tờn đăng nhập: Giới tớnh : Nam Nữ Những mục bạn thường quan tõm trờn Internet : Tin tức Giải trớ Học tập Mục khỏc 49 â Dương Thành Phết Website:
- 2.3. THIẾT KẾ BIỂU MẪU (FORM) 2.3.2. Thiết kế Biểu mẫu – Form(tt) Thiết kế cỏc thành phần h. Hộp danh sỏch chọn – Combobox Chuỗi ký tự . . . . . Value=”Trị” : Giỏ trị gửi lờn Server Ghi chỳ: Để thực hiện liờn kết khi người dựng chọn 1 giỏ trị từ ComboBox. Thờm thuộc tớnh sau vào thẻ onchange="window.open(this.options[this.selectedIndex].value,'_blank')" 50 â Dương Thành Phết Website:
- 2.3. THIẾT KẾ BIỂU MẪU (FORM) 2.3.2. Thiết kế Biểu mẫu – Form(tt) Thiết kế cỏc thành phần Vớ dụ: Liờn kết website Tin tuc Bỏo lao động Tin Việt Nam Bỏo Tuổi Trẻ 51 â Dương Thành Phết Website:
- KHOA CAO ĐẲNG THỰC HÀNH Chƣơng 1 TỔNG QUAN VỀ WEBSITE VÀ NGễN NGỮ HTML THE END. 52 â Dương Thành Phết Website: