tài liệu HTML

Lập trình Web CuuDuongThanCong.com https://fb.com/tailieudientucntt Mục tiêu mơn học Cung cấp kiến thức thiết kế web   HTML, CSS, JavaScript Tìm hiểu thành phần trang web Các bước xây dựng trang web tĩnh Xây dựng & triển khai trang web tĩnh Sử dụng công cụ thiết kế web phổ biến Dreamweaver, công cụ hỗ trợ khác photoshop, flash…     CuuDuongThanCong.com https://fb.com/tailieudientucntt Nội dung môn học Phần 1: kiến thức     HTML (HyperText Markup Language) CSS (Cascading Style Sheets) Ngôn ngữ JavaScript Phần 2: công cụ thiết kế web      Dreamweaver Photoshop Flash Một số công cụ hỗ trợ thiết kế web khác CuuDuongThanCong.com https://fb.com/tailieudientucntt Giới thiệu môn học Giảng viên:    ThS Nguyễn Hà Giang Các môn dạy:   Hướng nghiên cứu:    Kỹ thuật lập trình, CTDL & GT, OOP, Lập trình Visual C++ & MFC, Lập trình C# Desktop Application, LT Web Application ASP.NET, Mã nguồn mở (PHP & MySQL), CC&MT PTPM Data Mining, Fuzzy Data Mining, Fuzzy Association Rule Mining Semantic Web Mining, Email: nguyenha.giang@yahoo.com CuuDuongThanCong.com https://fb.com/tailieudientucntt Chương Các kiến thức CuuDuongThanCong.com https://fb.com/tailieudientucntt Mục tiêu Giới thiệu mơ hình lớp thiết kế web Các khái niệm thuật ngữ mạng môi trường web Cấu trúc cú pháp ngôn ngữ HTML Cú pháp thuộc tính CSS (chuẩn định dạng cách trình bày trang web) Tổng quan ngôn ngữ script, cú pháp, cách xử lý kiện thao tác đối tượng HTML ngôn ngữ JavaScript      CuuDuongThanCong.com https://fb.com/tailieudientucntt Mơ hình lớp TK Web Lớp nội dung     Cung cấp nội dung thông tin cho người truy cập Bao gồm văn bản, hình ảnh, liên kết… Nội dung tổ chức theo cấu trúc ngôn ngữ đánh dấu siêu văn HTML, XHTML… CuuDuongThanCong.com https://fb.com/tailieudientucntt Mơ hình lớp TK Web Lớp trình bày    Quy định cách trình bày trang web Lớp định nghĩa định dạng hay kiểu mẫu cho thành phần trang web Các định nghĩa lưu file riêng theo cú pháp chuẩn định dạng CSS Lớp hành vi   Cho phép thực số hành vi/thao tác thành phần trang web thông qua ngôn ngữ script (JavaScript, VBScript) CuuDuongThanCong.com https://fb.com/tailieudientucntt Mơ hình lớp TK Web Một số ưu điểm mơ hình   Share resources    Faster downloads   Dùng chung toàn file CSS hay JS cho toàn trang web website Khi thay đổi tập tin tồn site đổi Khi user truy cập trang web, CSS JS tải lần truy cập đầu tiên, trình duyệt cache lại cho lần sau Multi-person teams   Thuận tiện cho việc phân chia cơng việc Các thành viên nhóm phân cơng theo lớp mơ hình Do cơng việc lớp làm đồng thời CuuDuongThanCong.com https://fb.com/tailieudientucntt Các khái niệm & thuật ngữ   WWW (World Wide Web): mạng toàn cầu máy tính sử dụng Internet để trao đổi tài liệu web Protocol: tập hợp quy tắc thống hai máy tính nhằm thực trao đổi liệu xác    Các giao thức thông dụng: TCP, HTTP, FTP, SMTP… Web page: tài liệu (thường HTML) thiết kế để phân phối môi trường web Web site: tập hợp web page có liên quan đến cơng ty hay cá nhân 10 CuuDuongThanCong.com https://fb.com/tailieudientucntt Form  Textbox, passwordBox, Reset, Submit Button  FileField 89 CuuDuongThanCong.com https://fb.com/tailieudientucntt Form  RadioButton  CheckBox 90 CuuDuongThanCong.com https://fb.com/tailieudientucntt Form  ComboBox  ListBox 91 CuuDuongThanCong.com https://fb.com/tailieudientucntt Form  FieldSet: nhóm đối tượng giống vào phần logic Chú thích Các thành phần nhóm   Tag legend: tạo thích nhóm Cho phép canh lề thích 92 CuuDuongThanCong.com https://fb.com/tailieudientucntt Form Position Application for the post of: Educational Qualifications Graduate Postgraduate 93 CuuDuongThanCong.com https://fb.com/tailieudientucntt Form  Kết 94 CuuDuongThanCong.com https://fb.com/tailieudientucntt Form  Tạo form có dạng sau  Form cho phép user nhập vào thông tin hiển thị lại thông tin user nhập 95 CuuDuongThanCong.com https://fb.com/tailieudientucntt Form  Nhập liệu 96 CuuDuongThanCong.com https://fb.com/tailieudientucntt XHTML    XHTML = EXtensible HyperText Markup Language XHTML kết hợp HTML XML XHTML gồm tất phần tử (element) HTML 4.1 kết hợp theo cú pháp XML 97 CuuDuongThanCong.com https://fb.com/tailieudientucntt Tại sử dụng XHTML  Vì XHTML kết hợp HTML XML, tài liệu XHTML tài liệu HTML bổ sung thêm chặt chẽ cú pháp XML   (đảm bảo cấu trúc trang web ln thoả điều kiện “wellformed”) Trình duyệt hiển thị trang XHTML nhanh trang HTML (vì khơng thời gian để kiểm tra sửa lỗi “well-formed”) 98 CuuDuongThanCong.com https://fb.com/tailieudientucntt Well-formed element      Đối với phần tử có chứa nội dung, phải có đầy đủ thẻ mở thẻ đóng Đối với phần tử rỗng, phải thêm vào ký tự kết thúc “/” Các thẻ lồng phải trật tự, không chồng lấp lên Thỏa well-formed element Không thỏa well-formed element wrong 99 CuuDuongThanCong.com https://fb.com/tailieudientucntt Well-formed document   Các phần tử phải well-formed Tồn phần tử đơn, xem phần tử gốc, chứa tất phần tử khác

Normal emphasized strong emphasized strong

Normal emphasized strong emphasized strong

Alternatively emphasized strong emphasized strong

100 CuuDuongThanCong.com https://fb.com/tailieudientucntt So sánh HTML vs XHTML  XHTML     Các thẻ lồng phải trật tự Các thẻ thuộc tính phần tử cần phải viết chữ thường Các thuộc tính phần tử phải đóng nháy kép Ví dụ: Khơng cho phép giản lược thuộc tính  Ví dụ HTML viết XHTML cần phải viết lại phải đóng thẻ 101 CuuDuongThanCong.com https://fb.com/tailieudientucntt So sánh HTML vs XHTML     Các thẻ gọi noempty cần phải đóng thẻ đóng Những thẻ khơng gọi noempty đóng thẻ khơng phải viết Thuộc tính name thay thuộc tính id Phải có khai báo DOCTYPE trước thẻ 102 CuuDuongThanCong.com https://fb.com/tailieudientucntt Cấu trúc tối thiểu tập tin XHTML  Title goes here Body text goes here 103 CuuDuongThanCong.com https://fb.com/tailieudientucntt ... để trao đổi tài liệu web Protocol: tập hợp quy tắc thống hai máy tính nhằm thực trao đổi liệu xác    Các giao thức thông dụng: TCP, HTTP, FTP, SMTP… Web page: tài liệu (thường HTML) thiết... https://fb.com/tailieudientucntt Chương Ngôn ngữ HTML 20 CuuDuongThanCong.com https://fb.com/tailieudientucntt Nội dung        Giới thiệu ngôn ngữ HTML Cấu trúc tổng quát trang HTML Các thẻ HTML Các ký tự đặc biệt... https://fb.com/tailieudientucntt HTML - tảng web     HTML: HyperText Markup Language – ngôn ngữ đánh dấu siêu văn Do Tim Berner-Lee phát minh trở thành ngôn ngữ chuẩn để tạo trang web HTML dùng thẻ (tags) để định dạng liệu