Các phần tử nhập của HTML - Giới thiệu biểu mẫu- 123docz.net

1. Giới thiệu biểu mẫu

1.3. Các phần tử nhập của HTML

Thẻ textarea

Thẻ <textarea> cho phép người dùng nhập nhiều dòng văn bản. Cú pháp: <textarea name = “” cols = “” rows= “” ></ textarea>

Trong đó:

Cols: Độ rộng Rows: độ cao của Name: Tên

Ví dụ: Lưu file Thẻ nhập nhiều dòng textarea.html

HTML Hiển thị Web

body>

THÔNG TIN KHÁC <br> <textarea name=""

id="" cols="30" rows="10" > </form>

</body>

Thông tin khác

Value Gán giá trị cho nút

Type Xác nhận loại nút. Các giá trị có thể là:

Submit: Tạo nút nhận biểu mẫu khi được bấm vào Button: Tạo nút kích hoạt môt script khi được kích vào. Reset: tạo nút thiết lập lại (reset) biểu mẫu và các giá trị của các điều khiển trong biểu mẫu

Ví dụ:

Thẻ lable, select

Thẻ label: làm rõ hơn nội dung cần phải nhập cho một input. Ngoài ra không muốn dùng thẻ label mà vẫn muốn làm rõ thuộc tính của thẻ thì ta có thuộc tính placeholder = “nội dung”. Ví dụ <input type = “text” name= “” placeholder = “your email” />.

Cú pháp: <label> Nội dung </label>

Thẻ chọn select

Là phần tử hiển thị một danh sách các mục chọn, cho phép người dùng có thể chọn một hoặc nhiều mục.

Cú pháp:<select name = “ sltype”> các thẻ option </select> Để chèn mỗi mục chọn ta dùng các thẻ <option>

Các thuộc tính:

+Name: tên của phần tử

+Size: Kích thước của phần tử.

+ Multiple: Cho phép người dùng có thể chọn nhiều mục hay không? Ví dụ: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chọn Select</title> </head> <body>

<label for="">Tỉnh thành</label> <form action="">

<option value="">TP Hồ Chí Minh</option> <option value="">Hải Phòng</option> <option value=""> Nha Trang</option> <option value="">Hải Dương</option> </select>

</form> </body> </html>

Code Kết quả Web

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chọn Select</title> </head> <body>

<label for="">Tỉnh thành</label> <form action="">

<option value="">Hải Phòng</option>

<option value=""> Nha Trang</option> <option value="">Hải Dương</option> </select> </form> </body> </html>

HTML 5 Một số thẻ trong html 5

Tag (thẻ) Mô tả

<article> Định nghĩa một bài viết, một nội dung riêng biệt.

<aside> Định nghĩa nội dung bên ngoài nội dung chính (thường là sidebar).

<audio> Định nghĩa âm thanh, như nhạc hay audio khác. <canvas> Được dùng để hiển thị đồ họa.

<header> Định nghĩa khu vực header (phần đầu) của trang. <footer> Định nghĩa khu vực footer (phần cuối) của trang. <main> Thẻ chứa nội dung chính.

<nav> Định nghĩa link danh mục (navigation) <section> Định nghĩa một khu vực (vùng bao).

<figure> Xác định các nội dung liên quan mạc lạc với nhau như hình ảnh, sơ đồ, code,.., nội dung liên quan tới nội dung chính.

Tất cả các thẻ html 5 trên đều có kiểu block tương đường với thẻ div. Nhưng vì sau này ta có những bố cục trang web cứ lặp đi lặp lại nên dùng các thẻ đó để người lập

2. Khung (Frame)

2.1. Tại sao sử dụng khung

Frame (hay Frame) trong HTML được sử dụng để phân chia cửa sổ trình duyệt của bạn thành các khu vực khác nhau mà mỗi khu vực tải một tài liệu HTML riêng. Một tập hợp các Frame trong cửa sổ trình duyệt được biết đến như là một Frameset. Cửa sổ được chia vào các Frame theo cách tương tự như các bảng: bên trong các hàng và cột.

2.2. Sử dụng khung

Để sử dụng các Frame trên trang web, chúng ta sử dụng thẻ <frameset> thay cho thẻ <body>. Thẻ <frameset> xác định cách chia cửa sổ thành các Frame. Thuộc tínhrows trong thẻ này xác định chiều ngang của Frame còn thuộc tínhcols xác định chiều dọc của Frame. Mỗi Frame được chỉ dẫn bởi một thẻ <frameset> và nó xác định tài liệu nào sẽ được mở trongFrame.

Các thuộc tính của thẻ <frameset> Thuộc tính Miêu tả

cols Xác định số cột được chứa trong frameset và kích cỡ của mỗi cột. Bạn có thể xác định độ rộng của mỗi cột theo một trong 4 cách sau: Theo giá trị tuyệt đối Pixels. Ví dụ để tạo ra 3 cột dọc, sử dụng cols="100, 500,100". Phần trăm của cửa sổ trình duyệt. Ví dụ để tạo ra thiết lập 3 Frame dọc: cols="10%, 80%,10%". Sử dụng biểu tượng gán giá trị (wildcard). Ví dụ để tạo 3 Frame dọc, bạn sử dụng cols="10%,,10%". Trong trường hợp này thì wildcard sẽ chiếm phần còn lại. Độ rộng quan hệ của cửa sổ trình duyệt. Ví dụ để tạo 3 Frame dọc, sử dụng cols="3,2,1". Đây là cách thay thế cho việc sử dụng phần trăm. Ở

Thuộc tính Miêu tả

sẽ chiếm một nửa màn hình, cột thứ hai chiếm 1/3 và cột thứ ba chiếm 1/6.

rows Thuộc tính này giống như thuộc tính cols và sử dụng các giá trị tương tự, nhưng nó được sử dụng để xác định các hàng của frameset. Ví dụ để tạo 2 Frame ngang, bạn sử dụng rows="10%, 90%". Bạn có thể xác định chiều cao của mỗi hàng theo cách tương tự như các cột. border Thuộc tính này xác định độ rộng của Border (đường viền) của mỗi

Frame theo Pixel. Ví dụ như border="5". Một giá trị bằng không có nghĩa là không có Border.

frameborder Thuộc tính này xác định có hay không Border được hiển thị giữa các Frame. Nó nhận giá trị 1 hoặc 0. Ví dụ frameborder="0" thì xác định là không có Border.

framespacing Xác định số lượng khoảng cách giữa các Frame trong frameset. Nó nhận giá trị nguyên. Ví dụ framespcing="10" nghĩa là có 10 pixel khoảng cách giữa các Frame.

Các thuộc tính của thẻ<frame>

Dưới đây là các thuộc tính của thẻ<frame>:

Thuộc tính Miêu tả

src Thuộc tính này được sử dụng để đặt tên của file sẽ được tải trong Frame. Giá trị là bất cứ địa chỉ URL. Ví dụ, src="../html/top- frame.html" sẽ tải một file HTML có trong danh mục HTML. name Thuộc tính này cho phép bạn đặt tên cho một Frame. Nó được sử

dụng để chỉ rõ Frame nào của tài liệu sẽ được tải trong đó. Nó đặc biệt quan trọng khi bạn muốn tạo các link trong một Frame mà tải các trang web trong một Frame khác, trong trường hợp đó, Frame thứ hai cần một tên để xác định chính nó như là đích tới của link.

frameborder Thuộc tính xác định có hay không Border trong Frame đã được chỉ; thuộc tính này được quyền ưu tiên trước giá trị được gán trong thuộc tính frameborder của thẻ <frameset>. Và nó nhận giá trị 1 (Yes) hoặc

Thuộc tính Miêu tả

dụ marginheight="10".

noresize Theo mặc định thì bạn có thể đặt lại kích thước cho Frame bằng cách nhấn chuột vào Border Frame và kéo. Thuộc tính noresize ngăn cản người sử dụng đặt lại kích cỡ. Ví dụ noresize="noresize".

scrolling Thuộc tính này điều khiển sự xuất hiện của thanh cuốn xuất hiện trên Frame. Nó nhận giá trị "yes", "no", hoặc "auto". Ví dụ scrolling="no" nghĩa là sẽ không có thanh cuốn (scrollbar).

longdesc Thuộc tính này cho phép bạn cung cấp một đường link tới trang web khác chứa một sự miêu tả dài trong nội dung của Frame. Ví dụ longdesc="framedescription.html".

Trình duyệt hỗ trợ cho các Frame

Nếu một người dùng đang sử dụng một trình duyệt cũ hoặc trình duyệt mà không hỗ trợ Frame thì khi đó phần tử <noframes> sẽ được hiển thị tới người dùng.

Vì thế bạn phải đặt một phần tử <body> bên trong phần tử <noframes> bởi vì phần tử <frameset> được hỗ trợ để đổi vị trí của phần tử <body>, nhưng nếu một trình duyệt không hiểu phần tử <frameset> thì nó sẽ hiểu những gì bên trong của phần

tử <body> mà có chứa trong phần tử <noframes>.

Bạn có thể đặt một vài thông báo lịch thiệp tới người dùng của bạn mà đang sử dụng các trình duyệt cũ. Ví dụSorry!! Trinh duyet cua ban khong ho tro Frame. như ví dụ

trên.

Các thuộc tính name và target của Frame

Một trong các cách phổ biến về sử dụng các Frame là để đặt ví trí các thanh điều hướng trong một Frame và sau đó là tải các trang chính trong một Frame riêng biệt.

2.3. Phần tử iframe – khung trên dòng (inline frame)

IFrame là thành phần hay thẻ tag của một HTML element giúp nhúng HTML, hình ảnh, video hay trang web khác vào website của mình. IFrame là viết tắt của cụm từ Inline Frame và tạm dịch là khung nội tuyến.IFrame có nhiều thuộc tính từ đơn giản nhất như trích xuất nguồn, chiều rộng, chiều cao đến phức tạp hơn như kẻ đường viềniFrame, canh lề trái phải… Tuy nhiên, ở bài viết này, chúng tôi sẽ giới thiệu đến bạn đọc những thuộc tính cơ bản nhất củaiFrame:

• src: Thuộc tính khai báo đường dẫn tới 1 trang web hoặc 1 file tài liệu nào đó. • width: Thuộc tính dùng để khai báo chiều rộng củaiFrame (đơn vị là px hoặc

• height: Thuộc tính dùng để khai báo chiều cao củaiFrame (đơn vị là px hoặc %)

• name: Thuộc tính này dùng để đặt tên cho frame. Nó hay được dùng khi muốn hiển thị 1 liên kết nào đó trong 1 frame có thuộc tính name

• frameborder: Thuộc tính dùng để thiết lập đường viền bao quanh frame. Thuộc tính này sẽ có 2 giá trị: 0 – ẩn đường viền, 1 – hiện đường viền. Nếu không khai báo thuộc tính này thì mặc định là đường viền được hiển thị

3. Một số weblayout thường dùng CẤU TẠO MỘT TRANG WEB

HEADER

BÀI TẬP CHƯƠNG 1 Bài 1:Lưu tệp tin Bài 1 ul html.html

• Dòng đầu cỡ tiêu đề H3, màu đỏ

• Các dòng nội dung dạng danh sách không đánh số thứ tự. Màu xanh.

• Dòng cuối có sử dụng văn bản dạng chú thích, có màu khác các màu còn lại, số điện thoại cho đậm.

Hướng dẫn code:

<!DOCTYPE html> <html lang="en"> <head>

HEADER MENU

FOOTER

<body>

<h3 style="color: red">CHƯƠNG TRÌNH ĐÀO TẠO THIẾT KẾ WEB</h3> <ul style="color:rgb(7, 124, 17)">

<li>Học html, css, javascript</li> <br>

<li>Học thiết kế web động PHP</li> <br>

<li>Học thiết kế web với C#</li> <br>

<li>Học thiết kế web python</li> <br>

<li>Học thiết kế web với Asp net</li> </ul>

<p>Mọi thông tin liên hệ văn phòng đào tạo tin học điện thoại: <b> 0978113529</b></p>

</body> </html>

b. Tương tự thiết kế theo mẫu

<head>

<li><a href="http://nhacso.net/">Nhạc số Online</a></li>

<li><a href="https://ngoisao.net/">Giới thiệu ngôi sao</a></li> </ul>

<p>Liên kết quảng cáo</p> </body>

</html>

Bài 2: Tạo mẫu form sau:

Hướng dẫn <!DOCTYPEhtml> <html> <body> <form> Họ:<br>

<inputtype="text"name="firstname"> <br>

Tên:<br>

<inputtype="text"name="lastname"> </form>

<p>Lưu ý: mặc định bản thân form không hiển thị ra bên ngoài, chỉ các thành phần tro ng form hiển thị.</p>

<p>Chiều dài khung nhập liệu kiểu text mặc định là 20 ký tự.</p> </body>

</html>

Bài 3: Tạo form đăng nhập theo mẫu. Lưu file: Đăng Nhập.html

Hướng dẫn code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form in html </title> </head> <body> <h3 >ĐĂNG NHẬP</h3> <form action=""> <table> <tr> <td>Username</td>

<tr>

<td>Email</td>

<tr>

<td>Password</td>

<tr>

<td>Password(again)</td>

Bài 4: Sử dụng bảng và thẻ input,textarea, thẻ tiêu đề h3, bảng căn ở giữa, bảng có đường viền theo mẫu: Hướng dẫn code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

<body>

<tr>

<tr>

</tr> </table> </body> </html>

Bài 5:Lưu file tênDangnhap.html

Thiết kế trang sử dụng form trình bày các đối tượng: text, password, submit, Reset. Kết hợp bảng table theo mẫu sau:

Hướng dẫn Code <!DOCTYPEhtml> <htmllang="en"> <head>

</head> <body>

<formaction="xuluform" method="post">

<tablewidth="500"height="200px"border="2"cellpadding="5"align="center"> <tr>

<thcolspan="2"> ĐĂNG NHẬP DIỄN ĐÀN</th> </tr>

<tr>

</tr> <tr>

</tr> <tr>

Trong đó :

- Thẻ <input> để chúng ta tạo một ô để nhập văn bản vào. Các type trong thẻ <input> phải nhập đúng giá trị.

- Tất cả các thẻ phải nằm trong cặp thẻ <form></form>.

- Thuộc tính action dùng để link đến một trang web khác khi người dùng nhập vào username + password và nhấp OK ở ví dụ trên là xulyform.html.

- Method = “post” là thuộc tính thông thường được sử dụng trong một form. Ngoài ra có thêm một số thuộc tính khác như Method=”get”.

- Placeholder là đoạn text sẽ hiện ra trong ô nhập user và password nhằm mục đích hướng dẫn người dùng.

- Button Reset có type là reset nhằm khôi phục lại giá trị ban đầu. - Button Ok có type là submit có ý nghĩa là gửi đi.

Bài 6: Lưu file gopy.html

Thiết kế trang sử dùng form tao các đối tượng bên trong theo mẫu: Sử dụng bảng table có 6 hàng 2 cột, bảng căn giữa trang web.

Hướng dẫn:

<!DOCTYPEhtml> <html>

<head>

<tr>

<tdcolspan="2"align="center"><h3> ĐÓNG GÓP Ý KIẾN</h3></td> </tr>

<tr>

</tr> <tr>

<tr>

<td>Số điện thoại</td>

<tr>

<td> Email</td>

<tr>

</table> </form> </body> </html>

Bài 7 Lưu file là: Thamdoykien.html

Thiết kế trang sử dụng form và kết hợp bảng table để thiết kế các đối tượng bên trong theo mẫu:

</head> <body>

<form>

<tableborder="1"width=""align="center"cellpadding="0"cellspacing="0"> <trbgcolor="gray">

<td>

<palign="center"> <b> PHIẾU THĂM DÒ Ý KIẾN</b></p> <label>Tên đăng nhập</label>

<inputtype="text"name=""> <label>Giới tính</label>

<inputtype="radio"name=""> Nam <inputtype="radio"name=""> Nữ <br />

</td> < /tr> <tr>

<td >

<p>Những mục ban đầu thường quan tâm trên Internet</p> <inputtype="checkbox"name=""> Tin tức

<br />

<inputtype="checkbox"name=""> Giải trí <br />

<inputtype="checkbox"name=""> Góc học tập <br />

<inputtype="checkbox"name=""> Game <br />

<inputtype="checkbox"name=""> Các mục khác <br />

<inputtype="submit"name=""value="Gửi"> <inputtype="Reset"name=""value="Phục hồi"> </td> </tr> </table> </form> </body> </html>

BÀI 5: CSS (Cascading Style Sheet) Giới thiệu

Mặc dù HTML cũng có những thuộc tính giúp chúng ta định dạng màu sắc, kích thước của một số thành phần trên web nhưng khi chúng ta muốn tùy chỉnh vị trí của một phần tử hoặc tạo hiệu ứng cho phần tử thì HTML không thể làm được. Lúc này chúng ta sẽ cần sử dụng đến CSS.

Vậy CSS là gì? CSS là viết tắt của từ viết tắt của từ Cascading Style Sheets. Với CSS chúng ta có thể thỏa sức sáng tạo trong thiết kế website bằng cách tùy chỉnh vị trí các phần tử, màu sắc, màu nền, font chữ, thứ tự sắp xếp của các phần tử, hiệu ứng (đổ bóng, bo góc, xoay...) những điều mà HTML gần như không thể làm được.

Mục tiêu

- Liệt kê được cấu trúc CSS, cách áp dụng, ứng dụng của CSS

- Tạo được tài liệu HTML có áp dụng được các CSS, tạo được các CSS theo yêu cầu

- Vận dụng cách tạo Css vào thiết kế layout cho 1 website cụ thể