Bài giảng Thiết kế Website - Chương 2 giới thiệu về ngôn ngữ HTML. Chương này trình bày các nội dung cụ thể như: Cấu trúc của trang Web, cấu trúc thẻ HTML, các thẻ định dạng văn bản, tổ chức lưu trữ Website, chèn đối tượng đồ họa (hình, flash, video,…), thiết lập liên kết, thiết kế bảng biểu (Table), thiết kế biểu mẫu (Form). Mời tham khảo.
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 NGƠN NGỮ HTML © Dương Thành Phết Website: http://www.thayphet.net NỘI DUNG Cấu trúc trang Web Cấu trúc thẻ HTML Các thẻ định dạng văn Tổ chức lưu trữ Website Chèn đối tượng đồ họa (hình, flash, Video,…) Thiết lập liên kết Thiết kế bảng biểu (Table) Thiết kế biểu mẫu (Form) © Dương Thành Phết Website: http://www.thayphet.net CẤU TRÚC TỔNG QUÁT CỦA TẬP TIN HTML Nội dung tiêu đề Phần liệu trang web : Bắt đầu kết thúc tập tin HTML : Phần đầu trang web Nội dung: Nội dung tiêu đề Nội dung : Nội dung trang © Dương Thành Phết http://www.thayphet.net THẺ HTML 2.1 Khái niệm Tập tin HTML văn chứa thẻ(Tag)- để tạo thành phần tài liệu Cấu trúc tổng quát thẻ: Thành phần chịu tác động Thẻ mở Thẻ đóng Tên thẻ đặt cặp ngoặc nhọn: < > Có khơng có thuộc tính Ví dụ: Chào Các Bạn Nội dung in đậm Chúc bạn học tốt chữ cỡ Ghi chú: Cho phép thẻ lồng nhau, Cho viết thẻ dòng nhiều dòng Nên viết có cấu trúc © Dương Thành Phết http://www.thayphet.net THẺ HTML 2.2 Vấn đề ngắt dòng Khơng xuống dòng soạn thảo mà 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 cặp thẻ Để ngắt dòng khơng tạo đoạn mới: Chèn thẻ vị trí muốn ngắt dòng Để giữ phần tử dòng: Đặt văn cặp thẻ Văn bị che khuất chiều rộng cửa sổ trình duyệt khơng đủ cuộn ngang © Dương Thành Phết http://www.thayphet.net THẺ HTML 2.3 Tạo thích Đặt câu ghi vào cặp thẻ Nội dung câu thích khơng hiển thị trình duyệt Ví dụ: > BÀI THƠ CÔ HÁI MƠ
CƠ HÁI MƠ
Thơ thẩn đường chiều khách thơ Say nhìn xa rặng núi xanh lơ Khí trời lặng lẽ trẻo Thấp thống rừng mơ, hái mơ © Dương Thành Phết http://www.thayphet.net CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.1 Định dạng kiểu dáng - Style Nội dungvăn Nội dung in đậm Nội dung văn Nội dung in nghiêng Nội dung văn Nội dung gạch chân Nội dung văn Nội dung gạch ngang © Dương Thành Phết Website: http://www.thayphet.net 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, máy truy cập khơng có FontName1 lấy FontName2 lấy Font mặc định trình duyệt Xác định cỡ chữ cho trang giá trị n: Từ đến (8,10,12,14,16,24,36) mặc định Nội dung VB Xác định cỡ chữ cho nội dung văn © Dương Thành Phết Website: http://www.thayphet.net CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.2 Thay đổi Font, Size(tt) Ví dụ: BAI THO CO HAI MOCÔ HÁI MƠ
Thơ thẩn đường chiều khách thơ Say nhìn xa rặng núi xanh lơ Khí trời lặng lẽ trẻo Thấp thống rừng mơ, hái mơ © Dương Thành Phết Website: http://www.thayphet.net CÁC THẺ ĐỊNH DẠNG VĂN BẢN 3.3 Tao số trên/dƣới Văn Tạo số cho văn Văn Tạo số cho văn Ví dụ: Văn có số trên:AX2+BX+C=0 Văn có số : H2O 10 © Dương Thành Phết Website: http://www.thayphet.net 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 dạng tập tin Zip,Rar, pdf, doc sau tạo liên kết đến tập tin 38 © Dương Thành Phết Website: http://www.thayphet.net THIẾT KẾ BẢNG BIỂU (TABLE) 7.1 Thiết kế bảng biểu - Table - Table 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 thiết kế 39 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 dòng Nội dung dòng © Dương Thành Phết Website: http://www.thayphet.net 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 canh lề bảng n: Độ rộng tính 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 cuộn quanh bảng 40 © Dương Thành Phết Website: http://www.thayphet.net THIẾT KẾ BẢNG BIỂU (TABLE) 7.2 Định dạng Table(tt) Xác lập màu, ảnh cho bảng, hàng, Thuộc tính Ý nghĩa Màu cho toàn bảng Ảnh cho tòan bảng Màu cho tóan hàng Ảnh cho tòan hàng Màu cho ô Ảnh cho ô Màu cho ô tiêu đề Ảnh cho tiêu đề 41 © Dương Thành Phết Website: http://www.thayphet.net 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 ô hàng Canh theo chiều dọc ô hàng 42 CellSpacing=“n” Khoảng cách ô CellPadding=“n” Khỏang cách quanh nội dung ô Pixel © Dương Thành Phết Website: http://www.thayphet.net THIẾT KẾ BẢNG BIỂU (TABLE) 7.2 Định dạng Table Trộn ô: Dùng thuộc tính RowSpan 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: http://www.thayphet.net 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 liệu Các đối tượng Form Dạng 2: Thông tin từ Form chuyển cho địa Mail Các đối tượng Form Dạng 3: Thông tin từ Form chuyển lên Webserver Các đối tượng Form 44 © Dương Thành Phết Website: http://www.thayphet.net THIẾT KẾ BIỂU MẪU (FORM) 8.2 Thiết kế thành phần a Hộp văn – Text box n: chiều dài tính số ký tự, m: Số ký tự tối đa nhập b Hộp văn – Password n: chiều dài, m: Số ký tự tối đa nhập 45 © Dương Thành Phết Website: http://www.thayphet.net 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ế thành phần c Nút gửi liệu – Submit Button Hoặc d Nút hủy liệu vừa nhập - Reset Button 46 © Dương Thành Phết Website: http://www.thayphet.net 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ế 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: http://www.thayphet.net 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ế thành phần e Khung văn – TextArea Văn mặc định Wrap: Cuộn văn xuống dòng đến lề phải f Nút chọn – Radio Button g Hộp kiểm Checkbox Value=”Trị” : Giá trị On/ Off gửi lên Server 48 © Dương Thành Phết Website: http://www.thayphet.net 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ế thành phần Ví dụ: 49 PHIẾU THĂM DỊ Ý KIẾN Tên đăng nhập: Giới tính : Nam Tin tức Học tập