Công nghệ web - Bài 2: Thiết kế web với HTML
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ạn đang xem nội dung tài liệu Công nghệ web - Bài 2: Thiết kế web với HTML, để tải tài liệu về máy bạn click vào nút DOWNLOAD ở trên
Bài2: Thiết kế web với HTML
Lê Quang Lợi
Email: loilequang@gmail.com
loilq@utehy.edu.vn
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» HTML: Hyper Text Markup Language
» 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
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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
Đầu khối
Giữa khối
Kết thúc
HTML
Đầu khối
Giữa khối
Kết thúc
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
2.2.1 cấu trúc tài liệu HTML
Trang
- 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
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
2.2.1 Cấu trúc tài liệu HTML
Chào các bạn
Chào các bạn
Chào các bạn
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
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
2.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ể
=> Thể hiện điểm neo
Trang dantri
» Img: Thể hiện hình ảnh với vị trí trong SRC
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
2.2.2 Thẻ HTML
» Thẻ (Tag): Quy định nội dung hiển thị trong tài liệu HTML
Nội dung
» Thẻ nằm trong cặp: “”
Thẻ mở: , thẻ đóng “”
Thẻ mở: ”
» 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
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
2.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 (): mô tả thẻ, không hiển thị
» Thẻ: nên viết bằng ký tự thường
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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
#value,name, RGB(%,%,%); RGB(val, val,val)
Ví dụ: #669966; Red, RGB(30%,15%,0%); RGB(12,34,45)
» Ký tự đặc biệt: #value; &name;
Ví dụ: Ký tự anpha: α
2.3 Quy định trong HTML
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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ụ:
2.4.1 Thẻ cơ bản
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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ụ:
» Thuộc tính
» Name: thể hiện tên của thẻ
» Value: giá trị nhập (dạng văn bản)
» Checked: giá trị lựa chọn (true/false)
2.4.2 Thẻ nhập dữ liệu
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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
» 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
Name: tên của form
2.4.2 Thẻ nhập dữ liệu
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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
Ô 1 Ô 2
Ô 3 Ô 4
Ô 5 Ô 6
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» Thẻ A: thể hiện đường link trong ứng dụng
Nhãn hiển thị
href: thể hiện vị trí cần chuyển (vị trí đích)
Ví dụ: Dantri
Nhãn hiển thị: thể hiện văn bản thực cho phép chuyển
» Một số ví dụ:
chuyển đến trang dân trí
về trang chủ
» Ứng dụng: cho phép chuyển trang, làm menu trang web
» Chú ý: Website không thể có đường link chết (không tồn tại)
2.5 Chuyển trang trong Website
Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY
» 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
Thư mục con: /tencon
2.5 Chuyển trang trong Website