Bài 2 cung cấp những kiến thức về thiết kế web với HTML. Bài này gồm có những nội dung chính sau: Giới thiệu HTML, tài liệu HTML (Cú pháp HTML), quy định HTML, thẻ HTML, thẻ nhập dữ liệu. Mời các bạn tham khảo.
Trang 1Bài2: Thiết kế web với HTML
Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn
Trang 2» Giới thiệu HTML
» Tài liệu HTML (Cú pháp HTML)
» Quy định HTML
» Thẻ HTML
» Thẻ nhập dữ liệu
Bài2: Thiết kế web với HTML
Trang 3» HTML : H yper T ext M arkup L anguage
» Dựa trên thẻ ( tag ): thuần Text
» Trình bày nội dung trang web (web page):
Nội dung : Văn bản , âm thanh , hình ảnh, video Multimedia
Trình bày nội dung: Vị trí , kích thước, căn lề , màu sắc
» Sản phẩm đầu ra của WebServer , hiển thị trên Brower
» Thiết kế web : HTML + Javascript + CSS
» Phiên bản: 1,2,3, 4.0 , 5.0 (mới)
2.1 Giới thiệu về HTML
Trang 4» Chứa tập các thẻ được viết theo đúng định dạng
» Tài liệu được trình duyệt phân tích và chuyển thành giao
diện ứng dụng
» File tài liệu ghi với đuôi mở rộng: html, html
2.2 Tài liệu HTML
<! Khối >
<div>
<div> Đầu khối </div>
<div> Giữa khối </div>
<div> Kết thúc </div>
</div>
<!– Kết thúc khối >
<html>
<head><title> HTML </title></head>
<body>
<div> Đầu khối </div>
<div> Giữa khối </div>
<div> Kết thúc </div>
</body>
</htm>
Trang 52.2.1 cấu trúc tài liệu HTML
<! DOCTYPE html>
<html>
<head>
<title> Trang </title>
</head>
<body>
<! Nội dung >
</body>
</html>
- Thẻ mô tả cấu trúc tài liệu HTML
- HTML: Thẻ tài liệu html, toàn bộ thẻ
HTML
- Là thẻ duy nhất trong file HTML
- Thẻ Title: Tiêu đề trang web
- Chỉ có 01 và
- hiển thị trên thanh tiêu đề
- Thẻ Head: Quy định phần đầu tài liệu
- Thẻ Body: nội dung tài liệu HTML
- Chỉ có duy nhất và chứa các thẻ HTML,
thể hiện giao diện web
Trang 62.2.1 Cấu trúc tài liệu HTML
<H1> Chào các bạn </H1>
<body>
<H1> Chào các bạn </H1>
</body>
<html>
<body>
<H1> Chào các bạn </H1>
</body>
</html>
Chú ý:
- Trong tài liệu HTML chỉ có 01 thẻ: HTML , BODY , Head , Title
- Có thể có nhiều các thẻ khác và các thẻ có thể lồng nhau
Trang 72.2.3 Một số thẻ cần lưu ý
» Thẻ tài liệu : HTML, Body, Head, Title
» Thẻ Style : định dạng kiểu
» Thẻ Script: thể hiện nhúng mã ClientScript
» Thẻ A : liên kết với tài nguyên web theo URL cụ thể
<a name =“ ten ” /> => Thể hiện điểm neo
<a href =“ http://dantri.vn ” > Trang dantri </a>
» Img : Thể hiện hình ảnh với vị trí trong SRC
<img src =“ /pic/bg.jpg ” >
Trang 82.2.2 Thẻ HTML
» Thẻ (Tag): Quy định nội dung hiển thị trong tài liệu HTML
<ten thuoctinh =‘giatri’ onclick=“ham();” > Nội dung </ten>
» Thẻ nằm trong cặp: “<“ và “>”
Thẻ mở: <tên thẻ …>, thẻ đóng “</tên thẻ>”
Thẻ mở: <tên thẻ … , Thẻ đóng “/>”
» Nội dung: văn bản, âm thanh, hình ảnh, thẻ
» Thuộc tính( quy định hiển thị nội dung)
» Thuộc tính: Witdh , height, Float , Algin, color …
Trang 92.2.2 Thẻ HTML
» Một số thuộc tính cần lưu ý
Align, Valign: thuộc tính căn lề cho nội dung
Width, height: độ dài/rộng của đối tượng thẻ
ID, Class, Name: ID, lớp và tên của thẻ (CSS)
Style: kiểu dáng của thẻ (CSS)
» OnClick …: các thuộc tính thể hiện sự kiện của thẻ
» Thẻ: Các thẻ có thể bao nhau, thẻ mở phải có thẻ đóng
» Thẻ chú thích ( <! ND > ): mô tả thẻ, không hiển thị
» Thẻ: nên viết bằng ký tự thường
Trang 10» Căn lề cho nội dung thẻ:
align =“ left / right / center /justify”
Valign =“ top / bottom /middle”
» Kích thước :PX, PC , MM , CM , IN, PT
» Quy định màu sắc (24 bit): Red , Green , Blue
Ví dụ: #669966; Red, RGB(30%,15%,0%); RGB (12,34,45 )
» Ký tự đặc biệt: #value ; &name ;
2.3 Quy định trong HTML
Trang 11» Thẻ cơ bản : div, br, span, lable, dt
» Thẻ văn bản: H(1-6), P, U,B,I, strong,sup,sub, UL, OL …
» Thẻ Form : form, input type =“ button,text,radio , checkbox,
submit, reset, hidle, password”, Select, Texteare
» Thẻ bảng : Table, tr,td,thead, tfoot,tbody …
» Thẻ Link : style, script, link …
» Một số thẻ khác:img, ddr, base …
» HTML5 : Audio, video , Input( email, number …)
2.4 Một số thẻ HTML
Trang 12» Div: Thẻ hiện chia trang web thành nhiều phần
» P: chia văn bản thành nhiều đoạn
» Hr : kẻ dòng trong văn bản
» Br : ngắt dòng trong văn bản
Ví dụ: <hr size =“5” /> <br />
2.4.1 Thẻ cơ bản
Trang 13» Thẻ Input type: trường nhập dữ liệu đơn giản
nhập dữ liệu: text , checkeBox , radio, password, file, hidde
HTML 5: number, email, date , time, Range, URL, color …
» nút lệnh điều khiển form: button , reset , submit
Ví dụ: < input type =“text” name =“txtname” value =“”/>
< input type =“button” name =“btn” value =“Click”/>
» Thuộc tính
» Name : thể hiện tên của thẻ
» Value : giá trị nhập (dạng văn bản)
2.4.2 Thẻ nhập dữ liệu
Trang 14» Form : giao diện tương tác người dùng phía Client
» Form cho phép đóng gói dữ liệu và gửi về phía server
» Cú pháp
<form action =“URL” method =“post/get” name =“”>
<! trình bày giao diện >
</form>
» Phương thức
Post : Dữ liệu mảng (name/value)
Get : dữ liệu gắn ngay sau URL
» Thuộc tính
Action : là URL thể hiện trang xử lý dữ liệu
2.4.2 Thẻ nhập dữ liệu
Trang 15» Table : Thể hiện dữ liệu dạng hàng và cột
» Tr: thể hiện dòng
» Td thể hiện Cột
» Thuộc tính
Border : thể hiện đường viền
Rowspan: hòa nhập các ô theo hàng
Ví dụ: rowspan=“3”
colspan : hòa nhập các ô theo cột
Ví dụ: colspan=“2”
2.4.3 Thẻ hiển thị bảng dữ liệu
Cột 01 Cột 02
Trang 16» Thẻ A: thể hiện đường link trong ứng dụng
<a href =“URL” > Nhãn hiển thị </a>
href: thể hiện vị trí cần chuyển (vị trí đích)
Ví dụ: <a href =“http://www.dantri.vn ” > Dantri</a>
Nhãn hiển thị: thể hiện văn bản thực cho phép chuyển
» Một số ví dụ:
<a href =“ httl://dantri.vn ” > chuyển đến trang dân trí </a>
<a href=“/” > về trang chủ </a>
» Ứng dụng: cho phép chuyển trang, làm menu trang web
2.5 Chuyển trang trong Website
Trang 17» Thực hiện thao tác chuyển từ trang hiện tại sang trang
đích (tài nguyên hiện tại sang tài nguyên (đích))
» Cấu trúc đường dẫn theo URL : vị trí trên Internet ( path )
Đường dẫn tuyệt đối: thể hiện đầy đủ các thành phần
Đường dẫn tương đối: vị trí tương đối trong web
Dấu: “/” phân biệt các thành phần trong URL
Dấu: ” / ” thư mục cha
Dấu: “ / ” thư mục gốc
Thư mục cùng cấp: ten
2.5 Chuyển trang trong Website