Thiết kế web với HTML

TRƯỜNG ĐẠI HỌC NGUYỄN TẤT THÀNH KHOA CÔNG NGHỆ THÔNG TIN THIẾT KẾ WEB Bài giảng Thiết kế Web Trang Chương 2: Ngôn ngữ HTML Bài 1: Tổng quan HTML - Khái niệm - Cấu trúc thẻ lệnh - Thuộc tính Bài 2: Các thẻ định dạng văn - Chèn hình ảnh - Liên kết - Định dạng văn Bài 3: Table Form Bài giảng Thiết kế Web Trang Bài 1: Tổng quan HTML I Khái niệm II Cấu trúc thẻ lệnh III Thuộc tính Bài giảng Thiết kế Web Khái niệm HTML gì? • HyperText Markup Language (HTML) - Ngơn ngữ đánh dấu siêu văn • Bao gồm đoạn mã chuẩn với quy ước thiết kế để tạo trang Web hiển thị trình duyệt Web • Ngơn ngữ HTML có phần đuôi html htm Bài giảng Thiết kế Web Khái niệm Những ứng dụng HTML o HTML tảng World Wide Web, dịch vụ toàn cầu Internet o HTML để thiết kế Web mạng Internet, tạo tài liệu, gửi cáo thị cho công ty, cá nhân Bài giảng Thiết kế Web Khái niệm Trình soạn thảo o Sử dụng trình soạn thảo windows như: • Notepad, Notepad++, Dreamweaver, Visual studio… o Nên sử dụng Notepad NotePad++ học để làm quen với thẻ lệnh HTML Bài giảng Thiết kế Web Khái niệm Trình duyệt o Chuyển đổi mã html thành dạng văn bản, hình ảnh,… hiển thị hình o trang html chạy trình duyệt web (web browser) nào, ví dụ: Firefox, IE, google chrome, Opera, Safari,… Bài giảng Thiết kế Web Cấu trúc thẻ lệnh Thẻ lệnh (tag) HTML • Khi Web browser hiển thị trang Web, Web Browser đọc từ file văn đơn giản tìm kiếm đoạn mã đặc biệt hay tag đánh dấu ký hiệu < > • Tag mang thơng tin Chuỗi ký tự Trong đó: : tag bắt đầu : tag kết thúc • Tag rỗng: Bài giảng Thiết kế Web Cấu trúc thẻ lệnh Cấu trúc trang HTML tiêu đề trang Văn hiển thị Bài giảng Thiết kế Web Thuộc tính • Các phần tử HTML có thuộc tính • Các thuộc tính cung cấp thêm thơng tin cho phần tử HTML • Các thuộc tính ln ln định thẻ bắt đầu • Các thuộc tính với thành cặp tên/giá trị, ví dụ: align=“center" Bài giảng Thiết kế Web 10 Table Form Table (bảng) o • colspan = N: Tạo ô N ô liền kề theo dòng • rowspan = M: Tạo M liền theo cột • ngồi có thuộc tính: o bgcolor = #xxyyzz o bordercolor = #xxyyzz o bordercolorlight = #xxyyzz o bordercolordark = #xxyyzz o background = " image " Bài giảng Thiết kế Web 61 Table Form Table (bảng) o • giống tag thường dùng cho tiêu đề bảng, dòng text viết chữ đậm • có thuộc tính sau: o align = left | center | right: để chỉnh lề trái/giữa/phải liệu ô Bài giảng Thiết kế Web 62 Table Form Table (bảng) o • valign = top | middle | bottom: để chỉnh lề trên/giữa/dưới liệu • width = n | n%: đặc tả độ rộng • hight = n | n%: đặc tả chiều cao • nowrap: thiết lập cho khơng muốn có dòng bị gãy để liệu vừa khít với tiêu đề • colspan = n: đặc tả số cột bảng mà ô trộn lại thành (mặc định = 1) Bài giảng Thiết kế Web 63 Table Form Table (bảng) o • rowspan: đặc tả số hàng bảng mà ô trộn lại thành (mặc định=1) • bgcolor = #xxyyzz • bordercolor = #xxyyzz • bordercolorlight = #xxyyzz • bordercolordark = #xxyyzz • background = " image " Bài giảng Thiết kế Web 64 Table Form FORM Form cho phép bạn nhận thông tin hay phản hồi từ người dùng • Tạo Form: yêu cầu thông tin nhiều cách khác : nhận giá trị trị Post Get Bài giảng Thiết kế Web 65 Table Form FORM • Trường văn thuộc tính Text… < /TextArea> • Cho phép người dùng nhập nhiều dòng văn vào Form với số dòng số cột cần hiển thị • Text: Hướng dẫn người sử dụng nhập liệu • Value: OFF (giá trị mặc định) khơng dùng Wrap Bài giảng Thiết kế Web 66 Table Form FORM • Textbox Size =number Cho phép người dùng nhập đoạn văn có chiều dài Size chiều dài tối đa cho đoạn văn MaxLength (Size < MaxLength) Bài giảng Thiết kế Web 67 Table Form FORM • Password • Khi nhập liệu vào ký tự dấu thay vào ký tự “*” hay “x” tuỳ thuộc vào trình duyệt Bài giảng Thiết kế Web 68 Table Form FORM • Check Box String • Tuỳ chọn dùng có nhiều giá trị cho tuỳ chọn • Muốn xác định trạng thái mặc định checkBox đánh dấu khơng đánh dấu thêm hai giá trị: Checked UnChecked • String: Là chuỗi thơng báo lựa chọn Bài giảng Thiết kế Web 69 Table Form FORM • Radio Button String • Cho phép người dùng lựa chọn tuỳ chọn định trước • Thuộc tính Name phải giống thuộc tính Value phải khác Bài giảng Thiết kế Web 70 Table Form FORM • Trường Hidden • Được thiết kế để truyền (ngầm) giá trị đến Web Server Script Giá trị truyền thường từ khoá, giá trị kiểm tra hay chuỗi Bài giảng Thiết kế Web 71 Table Form FORM • Submit Button • Dùng để chuyển liệu Form mà người sử dụng nhập sang trang • String: Là dòng chữ ghi nút, khơng có Value mặt định Submit ghi nút Bài giảng Thiết kế Web 72 Table Form FORM • Reset Button • Dùng để xoá liệu Form mà người sử dụng nhập, khởi động lại cho phần tử Form • String: Là dòng chữ ghi nút, khơng có Value mặt định Reset ghi nút Bài giảng Thiết kế Web 73 Table Form FORM • ComboBox ListBox < Select Name = “name” Size = Multiple > String String String ………… • : Định nghĩa phần tử danh sách • Multiple: Cho phép người dùng chọn lúc nhiều giá trị Bài giảng Thiết kế Web 74  Thảo luận Bài giảng Thiết kế Web Trang 75 ... chuẩn với quy ước thiết kế để tạo trang Web hiển thị trình duyệt Web • Ngơn ngữ HTML có phần đuôi html htm Bài giảng Thiết kế Web Khái niệm Những ứng dụng HTML o HTML tảng World Wide Web, dịch vụ... học để làm quen với thẻ lệnh HTML Bài giảng Thiết kế Web Khái niệm Trình duyệt o Chuyển đổi mã html thành dạng văn bản, hình ảnh,… hiển thị hình o trang html chạy trình duyệt web (web browser) nào,... kết thúc • Tag rỗng: Bài giảng Thiết kế Web Cấu trúc thẻ lệnh Cấu trúc trang HTML tiêu đề trang Văn hiển thị < /html> Bài giảng Thiết