2.7. Làm việc với biểu mẫu trên trang web
2.7.1. Khái quát về Form
Form dùng để nhận thông tin từ người dùng hoặc phản hồi thông tin đến người dùng.
Qua form người dùng có thể có các yêu cầu như:
- Nhập vào câu trả lời, ý kiến
- Chọn câu trả lời từ danh sách
- Chọn câu trả lời từ một hoặc một số tùy chọn
Dữ liệu thu thập được có thể xử lý tại máy khách hoặc có máy chủ. Sau đó trả kết quả về cho người dùng.
Một form trong HTML bao gồm nhiều phần tử khác nhau gọi là các điều khiển. Các điều khiển có thể là hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn…
Hình 2.18. Ví dụ form 2.7.2. Thẻ <form>
- Thẻ <form> dùng tạo ra một form trong tài liệu HTML.
- Các phần tử của form: hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn…phải nằm trong cặp thẻ form.
- Thẻ <form> có thể chứa các thành phần điều khiển như: <input>, <select>, <textarea>, <fieldset>, <legend>, <label>,… và cũng có thể chứa các thẻ khác.
- Cú pháp:
<form [thuộc tính] >
Các thành phần điều khiển của form </form>
Bảng 2.8. Các thuộc tính thẻ <form>
Thuộc tính Giá trị Ví dụ Mơ tả
Action URL action="confirm.php"
Địa chỉ sẽ gửi dữ liệu tới khi form được
submit (bấm nút submit) Thông thường là địa chỉ một trang web nằm ở phía máy chủ. accept- charset charset accept-charset="ISO- 8859-1" Chỉ định cụ thể bộ dữ liệu (character-sets) mà máy chủ có thể xử lý cho form dữ liệu.
enctype application/ x-www- form- urlencoded multipart/ form-data text/plain enctype="text/plain" Chỉ định cụ thể dạng dữ liệu gì trước khi gửi lên máy chủ.
method get
post method="post"
Chỉ định phương thức gửi dữ liệu
method =get: truyền các dữ liệu đơn giản, không cần bảo mật và nhỏ. Các thông tin khơng được mã hóa nên nhanh hơn post
method =post: truyền các dữ liệu có kích thước lớn, phức tạp. Các thông tin được mã hóa trước khi gởi.
Mặc định là method =get
name name name="login" Chỉ định tên cho form. target _blank _self _parent _top target="_blank" Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến máy chủ.
2.7.3. Thẻ <input>
Thẻ <input > được dùng tạo các thành phần điều khiển nhập thông tin. Các dạng điều khiển nhập: text, checkbox, password, radio button, button,...
- Cú pháp:
<input [thuộc tính]>
- Thuộc tính:
Bảng 2.9. Các thuộc tính thẻ <input>
Thuộc tính Giá trị Ví dụ Mơ tả
alt Text alt="Đây là alt"
Xác định nhãn cho hình của của điều khiển (chỉ cho type="image") maxlength n maxlength="50" xác định số ký tự tối đa có thể nhập vào thành phần điều khiển (sử dụng cho type="text", type="password")
name name name="inputName"
Xác định tên cho thành phần điều khiển (với type="radio" thuộc tính name phải có cùng giá trị ở tất cả
các thẻ input trong cùng nhóm điều khiển) size n size="30" Xác định chiều dài thành phần điều khiển. Đối với type="text",
type="password" kích thước tính theo số ký tự, đối với các loại khác tính bằng px src URL src="img/ btn_name.gif" Hiển thị đường dẫn của hình dùng như nút submit. type
button type="button" Điều khiển là nút nhấn
checkbox type="checkbox"
Điều khiển là hộp lựa chọn cho phép chọn cùng lúc nhiều giá trị file type="file" Điều khiển là hộp
chọn file
hidden type="hidden" Điều khiển dạng ẩn.
image type="image" Điều khiển là nút nhấn dạng hình. password type="password" Điều khiển là hộp
nhập mật khẩu
radio type="radio"
Điều khiển là hộp lựa chọn chỉ cho phép chọn một trong nhiều giá trị reset type="reset" Điều khiển là nút nhấn để trả về giá trị mặc định của các
trường trên form submit type="submit" Điều khiển là nút nhấn để gửi dữ liệu lên Server text type="text" Điều khiển là hộp nhập văn bản trên một dòng
color type="color" Điều khiển là một bảng màu
date type="date" Điều khiển là một bảng ngày tháng email type="email" Điều khiển là hộp
nhập định dạng email tel type="tel"
Điều khiển là hộp nhập định dạng số điện thoại
search type="search" Điều khiển là hộp nhập dạng tìm kiếm value giá trị value="nam" Giá trị của điều khiển
placeholder text placeholder= “dòng gợi ý”
Thêm dòng gợi ý cho điều khiển nhập
width pixels
% width="100px"
Xác định chiều rộng của điều khiển
height pixels
% height="50px"
Xác định chiều cao của điều khiển (chỉ sử dụng cho
type="image")
checked checked checked
Xác định một trường nhậpđang được chọn (sử dụng cho
type="checkbox" hay type="radio")
readonly readonly readonly
Xác định trường nhập chỉ được đọc (sử dụng cho type="text", type="password")
disabled disabled disabled
Xác định trường nhập không hiển thị trước khi tải trang.
pattern Giá trị
định dạng pattern="[a-z]"
Xác định giá trị đầu
vào của trường nhập
(một pattern hay một định dạng) (sử dụng cho type là text, date, search, url, tel, email, password)
required required required
Xác định giá trị bắt buộc cho một trường nhập
autofocus autofocus autofocus
Xác định một trường nhập được "focus" khi tải trang. autocomplete on off autocomplete="on" Xác định một trường nhập có kích hoạt tự động hay khơng. Ví dụ 26: tạo hộp nhập liệu text và nút submit
Hiển thị trên trình duyệt:
Hình 2.19. Kết quả ví dụ 26 2.7.4. Thẻ <select>
Thẻ <select> dùng tạo một danh sách lựa chọn cho người dùng. Mỗi một mục chọn trong danh sách được tạo bởi thẻ <option>.
- Cú pháp:
<select [thuộc tính]>
<option [thuộc tính] > tên mục chọn thứ nhất </option>
<option [thuộc tính] > tên mục chọn thứ hai</option>
<!-- danh sách các mục chọn --> </select>
- Thuộc tính:
Bảng 2.10. Các thuộc tính thẻ <select>
Thuộc tính Giá trị Ví dụ Mô tả
multiple multiple multiple="multiple" Cho phép chọn nhiều mục lựa chọn cùng lúc. name name name="quequan" Xác định tên cho danh
sách lựa chọn. size Số size="5"
Xác định số dòng trong danh sách lựa chọn được hiển thị.
Bảng 2.11. Các thuộc tính thẻ <option>
Thuộc tính Giá trị Ví dụ Mơ tả
selected selected selected Xác định một mục
được chọn mặc định. value Text value="optValue" Xác định giá trị của
mục chọn. Ví dụ 27:
Hiển thị trên trình duyệt:
Hình 2.20. Kết quả ví dụ 27 2.7.5. Thẻ <textarea>
Thẻ <textarea> dùng tạo một hộp nhập văn bản gồm nhiều dịng.
Kích thước của hộp văn bản có thể xác định bằng các thuộc tính rows và cols.
<textarea [thuộc tính] >
văn bản ban đầu </textarea>
- Thuộc tính:
Bảng 2.12. Các thuộc tính thẻ <textarea>
Thuộc tính Giá trị Ví dụ Mơ tả
name name name="gopy" Xác định tên cho hộp văn bản.
readonly readonly readonly="readonly" Xác định hộp văn bản chỉ được đọc.
cols n cols="20"
Xác định chiều rộng hiển thị của hộp văn bản (tính bằng số ký tự) rows Số rows="20"
Xác định số dòng trong hộp văn bản được hiển thị.
Ví dụ 28:
Hình 2.21. Kết quả ví dụ 28 2.7.6. Thẻ <label>
Thẻ <label> dùng định nghĩa nhãn cho thành phần điều khiển đi kèm. - Cú pháp:
<label for=“idname” >nội dung nhãn
Giá trị thuộc tính for của <label> phải trùng giá trị thuộc tính id của các thẻ tạo điều khiển được gán nhãn (<input>, <select>, <textarea>).
Ví dụ 29:
Hiển thị trên trình duyệt:
2.7.7. Thẻ <fieldset>
Thẻ <fieldset> dùng để nhóm các thành phần bên trong <form> với nhau. Thẻ <fieldset> tạo đường bao ngoài bao quanh các thành phần trong nhóm.
Thẻ <fieldset> đi kèm với thẻ <legend> dùng để tạo nhãn cho nhóm. - Cú pháp:
<fieldset >
<legend>nội dung nhãncủa nhóm </legend>
Các thành phần điều khiển
</fieldset>
Ví dụ 30:
Hiển thị trên trình duyệt:
Hình 2.23. Kết quả ví dụ 30
Hiển thị trên trình duyệt:
Hình 2.24. Kết quả ví dụ 31
2.8. TẠO BỐ CỤC TRANG
Hình 2.25. Bố cục trang
Các thẻ tạo bố cục trang được sử dụng kết hợp với CSS để định dạng trang web.
2.8.1. Thẻ <header>
Thẻ <header> được sử dụng để định nghĩa phần đầu (header) của trang. Thường được dùng cho phần giới thiệu hay chứa các thành phần điều hướng (navigation)
- Cú pháp:
Ví dụ 32:
2.8.2. Thẻ <footer>
Thẻ <footer> được sử dụng để định nghĩa phần cuối (footer) của trang. - Cú pháp:
2.8.3. Thẻ <main>
Thẻ <main> được sử dụng để định nghĩa phần nội dung chính hoặc quan trọng của tài liệu. Thẻ <main> chỉ được sử dụng một lần trên mỗi trang và không thể được sử dụng như là phần tử con của các phần tử <article>, <aside>, <footer>, <header>, <nav>.
- Cú pháp:
2.8.4. Thẻ <nav>
Thẻ <nav> được sử dụng để định nghĩa phần điều hướng (navigation) của trang.
- Cú pháp:
<header> Nội dung phần đầu trang </header >
<nav> Nội dung phần điều hướng </nav> <footer> Nội dung phần đầu trang </footer >
Ví dụ 33:
2.8.5. Thẻ <section>
Thẻ <section> được sử dụng để định nghĩa một khối cho trang web. - Cú pháp:
2.8.6. Thẻ <article>
Thẻ <article> được sử dụng để định nghĩa nội dung bài viết độc lập của trang.
- Cú pháp:
2.8.7. Thẻ <aside>
Thẻ <aside> được sử dụng để định nghĩa phần bên cạnh nội dung (như sidebar) của trang.
- Cú pháp:
2.8.8. Thẻ <div>
Thẻ <div> dùng định nghĩa một khu vực trong tài liệu HTML. Thường được dùng để nhóm các thành phần nội dung thành một khối để định dạng bằng css.
Cú pháp:
< section> Nội dung khối </section>
<article> Nội dung bài viết </article>
<aside> Nội dung aside </aside>
Ví dụ 34:
<div>
<h3> Đây là tiêu đề</h3> <p> Đây là đoạn văn.</p> </div>
2.8.9. Thẻ <span>
Tag <span> dùng định nghĩa một khu vực trong tài liệu HTML. Thường được dùng để nhóm các thành phần nội dung inline thành một khối để định dạng bằng css.
- Cú pháp:
Ví dụ 35:
<h3>
Đây là đoạn text <span style="color:red;"> có
sử dụng thẻ span</span> để định dạng
</h3>
2.9. BÀI TẬP ÁP DỤNG
1. Thiết kế trang web có nội dung như mẫu sau:
2. Thiết kế trang web có nội dung như mẫu sau:
3. Tạo trang web có form như mẫu sau:
BÀI 3 - THIẾT KẾ TRANG WEB VỚI DREAMWEAVER Giới thiệu:
Trong bài học này sẽ giới thiệu cho người học một trình soạn thảo ngơn ngữ đánh dấu siêu văn bản (HTML) chuyên nghiệp Adobe Dreamweaver. Nó cung cấp sẵn một bộ công cụ cho phép thiết kế, viết mã, và phát triển các website, các trang web và các ứng dụng web mạnh mẽ.
Mục tiêu:
- Vận dụng được Dreamweaver để tạo và định dạng các đối tượng trên trang web
- Tạo và quản lý được website bằng Dreamweaver
3.1. TẠO VÀ QUẢN LÝ WEBSITE
3.1.1. Tạo một website
- Chọn menu Site New Site chọn thẻ Site
Hình 3.1. Hộp thoại Site setup –thẻ Site
+ Site Name: nhập tên site
+ Local Site Folder: chọn thư mục lưu các tập tin trong Site Save
Tạo thƣ mục con trong site: bấm chuột phải lên tên site muốn tạo thư
mục con New folder
Tạo tập tin trong site: bấm chuột phải lên tên thư mục muốn tạo tập tin New file
Hình 3.2. Cửa sổ Files
- Chọn thƣ mục mặcđịnh chứa hình ảnh trong site:
Chọn thẻ Site chọn thẻ Advanced Settings chọn thư mục mặc định chứa hình ảnh trong mục Default Images folder
Hình 3.3. Hộp thoại Site setup –thẻ Advanced
Hình 3.4. Hộp thoại Site setup –thẻ Server
Chọn nút (+) để thêm một server mới
+ Thẻ Basic
Server Name: nhập tên server
Connect using: chọn phương thức kết nối Address: địa chỉ server
Username: tên đăng nhập Password: mật khẩu
Root Directory: thư mục gốc Web URL: địa chỉ trang web
+ Thẻ Advanced
Automatically upload files to server: tự động upload các file lên web server mỗi khi trang được lưu.
Save
Đƣa Website đã tạo sẵn vào Dreamweaver quản lý:
+ Chọn menu Site New Site chọn Site + Site Name: nhập tên site
+ Local Site Folder: chọn thư mục chứa Website đã tạo Save
3.1.2. Quản lý website
- Chọn menu Site Manage Sites
- Chọn tên website muốn quản lý chọn nút Edit Site chọn Site
3.1.3. Đƣa website lên internet
Hình 3.7. Hộp thoại Files
- Đưa file lên server từ xa: chọn Put file(s) to “Remote Server” - Lấy file về từ server từ xa: chọn Get file(s) from “Remote Server” - Đồng bộ các file trên server từ xa và server cục bộ: chọn Sychronize
3.1.4. Kiểm tra và sửa lỗi trang web
Kiểm tra và sửa lỗi các liên kết trong trang web
- Mở trang web muốn kiểm tra các liên kết
- Chọn menu Window Results Link Checker - Chọn nút Check Link chọn lệnh kiểm tra liên kết
- Sửa lỗi các liên kết: chọn 1 liên kết bị hỏng trong cửa sổ Broken Link chọn nút Browse for file chọn lại file liên kết
Hình 3.9. Lệnh sửa lỗi liên kết
Hiệu lực hóa các trang web
Validator cho phép định vị nhanh các lỗi thẻ hoặc cú pháp trong mã lệnh. - Mở trang web muốn kiểm tra các liên kết
- Chọn menu Window Results Validation - Chọn nút Validate chọn lệnh kiểm tra
- Chọn nút More info để xem thêm thơng tin dịng lỗi chọn
Hình 3.10. Cửa sổ Validation
Kiểm tra khả năng tương thích trình duyệt
- Mở trang web muốn kiểm tra
- Chọn menu File Check Page Browser Compatibility
- Trong cửa sổ Browser Compatibility chọn dịng lỗi để xem thơng tin lỗi
* Quy trình xuất bản một website:
- Thiết kế website - Đăng ký Hosting - Đăng ký tên miền - Đưa website lên Hosting - Kiểm tra và kết thúc
3.2. TẠO VÀ ĐỊNH DẠNG CÁC ĐỐI TƢỢNG TRÊN TRANG WEB 3.2.1. Môi trƣờng làm việc của Dreamweaver
Các thành phần chính trong cửa sổ Dreamweaver
Hình 3.12. Cửa sổ Dreamweaver
- Document Window: hiển thị các tài liệu Dreamweaver
- Document Toolbar: hiển thị các công cụ cho tài liệu hiện hành - Docking Channel: chứa nhóm các panel
- Property Inspector : hiển thị các thuộc tính của đối tượng đang được chọn Các chế độ làm việc
Với một trang web, Dreamweaver cung cấp cho người dùng 3 giao diện hiển thị.
Docking Channel Document Window Document Toolbar
- Chế độ Code: mã lệnh HTML, CSS, Javascript, …..
- Chế độ Design: hiển thịtrang web trực quan, phù hợp với việc thiết kế giao diện.
- Chế độ Split: Chia màn hình thiết kế thành 2 phần, phần bên trái hiển thị mã lệnh, phần bên phải hiển thị kết quả thiết kế dưới dạng Design.
3.2.2. Các thao tác cơ bản
Tạo một trang web mới
- Từ menu File New Blank Page Chọn HTML Create Lưu trang web
- Từ menu File Save Save in: chọn vị trí lưu File name: nhập tên file
save as type: chọn loại tập tin Save
Mở trang web
- Từ menu File Open Look in: chọn vị trí chứa file mở chọn tên file mở Open
Đóng trang web đang soạn
- Từ menu File Close
- Đóng tất cả các file đang mở: File Close All Kiểm tra kết quả thiết kế trên trình duyệt
- Trên thanh công cụ chọn nút Preview/Debug in Browser Chọn trình duyệt để kiểm tra trang web
3.2.3. Làm việc với văn bản
Hình 3.14. Cửa sổ Properties
Tạo tiêu đề
- Trong khung cửa sổ Design chọn văn bản cần định dạng
- Chọn menu lệnh Format Paragraph Format chọn kiểu định dạng tiêu đề có sẵn Heading1, Heading2,… (hoặc chọn nút lệnh Format trên cửa sổ Properties)
Hình 3.15. Lệnh tạo tiêu đề
Canh lề đoạn
- Trong khung cửa sổ Design chọn văn bản cần định dạng
- Chọn menu lệnh Format Align chọn cách canh lề: Left, Center, Right, Justify
Kiểu trình bày đoạn: Headingl, Heading2,...
sử dụng class Tạo hoa thị
Tạo số thứ tự
Tạo liên kết
Giảm/ tăng khoảng cách với lề