Công nghệ web - Bài 2: Thiết kế web với HTML

Bài2: Thiết kế web với HTML Lê Quang Lợi Email: [email protected] [email protected] Lê Quang Lợi: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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: [email protected] 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