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.
Bài2: Thiết kế web với HTML Lê Quang Lợi Email: loilequang@gmail.com loilq@utehy.edu.vn Bài2: 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 liệu Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 2.1 Giới thiệu HTML » HTML: Hyper Text Markup Language » Dựa thẻ(tag): 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, lề, màu sắc » Sản phẩm đầu WebServer, hiển thị Brower » Thiết kế web: HTML + Javascript + CSS » Phiên bản: 1,2,3,4.0,5.0 (mới) Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 2.2 Tài liệu HTML » Chứa tập thẻ viết theo định dạng Đầu khối Giữa khối Kết thúc HTML Đầu khối Giữa khối Kết thúc » Tài liệu trình duyệt phân tích 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 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 - Thẻ mô tả cấu trúc tài liệu HTML - HTML: Thẻ tài liệu html, toàn thẻ HTML - Là thẻ file HTML Trang Lê Quang Lợi: loilequang@gmail.com - Thẻ Title: Tiêu đề trang web Chỉ có 01 hiển thị 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ó chứa thẻ HTML, thể giao diện web 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 bạn Chào bạn Chào bạn Chú ý: - Trong tài liệu HTML có 01 thẻ: HTML, BODY, Head, Title - Có thể có nhiều thẻ khác thẻ lồng 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ể nhúng mã ClientScript » Thẻ A: liên kết với tài nguyên web theo URL cụ thể => Thể điểm neo Trang dantri » Img: Thể hình ảnh với vị trí 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ị tài liệu HTML Nội dung » Thẻ nằm 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 lề cho nội dung Width, height: độ dài/rộng đối tượng thẻ ID, Class, Name: ID, lớp tên thẻ (CSS) Style: kiểu dáng thẻ (CSS) » OnClick …: thuộc tính thể kiện thẻ » Thẻ: Các thẻ bao nhau, thẻ mở phải có thẻ đóng » Thẻ thích (): mơ tả thẻ, không hiển thị » Thẻ: nên viết 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 2.3 Quy định HTML » 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: α Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 2.4 Một số thẻ HTML » Thẻ 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…) Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 2.4.1 Thẻ » Div: Thẻ chia trang web thành nhiều phần » P: chia văn thành nhiều đoạn » Hr: kẻ dòng văn » Br: ngắt dịng văn Ví dụ: Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 2.4.2 Thẻ nhập liệu » Thẻ Input type: trường nhập liệu đơn giản nhập 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ể tên thẻ » Value: giá trị nhập (dạng văn bản) » Checked: giá trị lựa chọn (true/false) Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 2.4.2 Thẻ nhập liệu » Form: giao diện tương tác người dùng phía Client » Form cho phép đóng gói liệu gửi phía server » Cú pháp » Phương thức Post: Dữ liệu mảng (name/value) Get : liệu gắn sau URL » Thuộc tính Action: URL thể trang xử lý liệu Name: tên form Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 2.4.3 Thẻ hiển thị bảng liệu » Table: Thể liệu dạng hàng cột » Tr: thể dòng » Td thể Cột » Thuộc tính Cột 01 Cột 02 Ơ1 Ơ2 Ô3 Ô4 Ô5 Ô6 Border: thể đường viền Rowspan: hịa nhập theo hàng Ví dụ: rowspan=“3” colspan : hịa nhập theo cột Ví dụ: colspan=“2” Lê Quang Lợi: loilequang@gmail.com Mơn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 2.5 Chuyển trang Website » Thẻ A: thể đường link ứng dụng Nhãn hiển thị href: thể vị trí cần chuyển (vị trí đích) Ví dụ: Dantri Nhãn hiển thị: thể văn thực cho phép chuyển » Một số ví dụ: chuyển đến trang dân trí trang chủ » Ứng dụng: cho phép chuyển trang, làm menu trang web » Chú ý: Website có đường link chết (khơng tồn tại) Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 2.5 Chuyển trang Website » Thực thao tác chuyển từ trang sang trang đích (tài nguyên sang tài nguyên (đích)) » Cấu trúc đường dẫn theo URL: vị trí Internet (path) Đường dẫn tuyệt đối: thể đầy đủ thành phần Đường dẫn tương đối: vị trí tương đối web Dấu: “/” phân biệt thành phần URL Dấu: ” /” thư mục cha Dấu: “/” thư mục gốc Thư mục cấp: ten Thư mục con: /tencon Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY ... đầu WebServer, hiển thị Brower » Thiết kế web: HTML + Javascript + CSS » Phiên bản: 1 ,2, 3,4.0,5.0 (mới) Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 2. 2... html, html 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 - Thẻ mô tả cấu trúc tài liệu HTML - HTML: Thẻ... ý: - Trong tài liệu HTML có 01 thẻ: HTML, BODY, Head, Title - Có thể có nhiều thẻ khác thẻ lồng Lê Quang Lợi: loilequang@gmail.com Môn học : Công nghệ WEB (ASP.NET) CNPM-CNTT-ĐHSPKT HY 2. 2.3