Bài giảng Thiết kế Web: Chương 3 - HTML cơ bản

Bài giảng Thiết kế Web: Chương 3 - HTML cơ bản giới thiệu HTML, cấu trúc tài liệu HTML, các tag cơ bản, các tag danh sách, tag liên kết, tag kẻ bảng, tag hình ảnh. Mời các bạn tham khảo bài giảng để bổ sung thêm kiến thức về lĩnh vực này.

Vũ Chí Hiếu hieuvc@gmail.com        Giới thiệu HTML Cấu trúc tài liệu HTML Các tag Các tag danh sách Tag liên kết Tag kẻ bảng Tag hình ảnh     HTML (HyperText Markup Language): Ngôn ngữ đánh dấu siêu văn Là ngôn ngữ để xây dựng trang web Chứa thành phần định dạng để báo cho trình duyệt biết cách hiển thị trang web Trang web có thành phần ◦ Dữ liệu trang web (văn bản, âm thanh, hình ảnh,…) ◦ Các thẻ HTML (tag) đùng để mô tả cách thức liệu hiển thị trình duyệt  Phần mở rộng: html, htm  Cấu trúc Dữ liệu    Tên tag thường mang tính gợi nhớ Đơi khơng cần tag đóng: , Cú pháp chung Dữ liệu  Lưu ý: ◦ Giá trị thuộc tính nên đặt cặp dấu nháy đơn nháy kép ◦ Không phân biệt chữ HOA/thường ◦ Trình duyệt bỏ qua khoảng trắng thừa, dấu ngắt dòng     : Định nghĩa phạm vi văn HTML : Định nghĩa mô tả trang HTML : Tiêu đề trang /body>: Vùng thân trang web, nơi chứa thông tin    Các tag xử lý văn Tag hình ảnh Tag âm  Các tag định dạng khối văn ◦ ◦ ◦ ◦ ◦  Tiêu đề (Heading): , , , , , Đoạn văn (Paragraph):

Danh sách (List Items):

Đường kẻ ngang (Horizontal Ruler): Hiển thị dạng văn bản: Các tag định dạng chuỗi văn ◦ Định dạng ký tự: , , , ◦ Liên kết: ◦ Xuống dòng: 10 31 32 33 34 35 36 37  Sử dụng NotePad để thiết kế trang web cá nhân, trình bày thơng tin sau: ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ Họ tên Địa liên lạc Điện thoại Email Hình cá nhân Mơn học u thích Website u thích Thời khóa biểu học tập 38  Sử dụng NotePad thiết kế trang web giới thiệu lớp mình, gồm thơng tin: ◦ ◦ ◦ ◦ Tên lớp, sĩ số Hình ảnh hoạt động lớp Danh sách thành viên lớp Địa website lớp 39 40        Website trường học, khoa Website nhà hàng, quán cafe, tiệm bán hoa,… Website công ty nhà đất, cảnh, nhà sách,… Website tổ chức, câu lạc bộ, nhóm làm việc,… Website hỗ trợ học tập, học online,… Website giới thiệu mơn thể thao, trị chơi dân gian,… … 41      Giới thiệu nhóm thiết kế Thơng tin chủ sở hữu website, mục đích website Thơng tin sản phẩm/nội dung cần giới thiệu Thông tin website tương tự Đưa hình ảnh liên quan 42  HTML ◦ Sử dụng liên kết, hình ảnh, danh sách ◦ Sử dụng table tạo layout   CSS JavaScript 43 Phân tích u cầu website: nhóm ◦ ◦ ◦ Mục đích? Cần trang web? Màu sắc? Phác thảo sơ giao diện web: 1-2 người Thu thập tài liệu, hình ảnh liên quan: 1-2 người Thiết kế hình ảnh giao diện (Photoshop): người Thiết kế giao diện web (HTML, CSS, JavaScript): nhóm Kiểm tra hiển thị trình duyệt: nhóm Đưa lên Internet (host) 44 45 ... Box Radio Button Select List TextArea FieldSet, Legend Label 27 28 29 30 31 32 33 34 35 36 37  Sử dụng NotePad để thiết kế trang web cá nhân, trình bày thông tin sau: ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ Họ tên... JavaScript 43 Phân tích yêu cầu website: nhóm ◦ ◦ ◦ Mục đích? Cần trang web? Màu sắc? Phác thảo sơ giao diện web: 1-2 người Thu thập tài liệu, hình ảnh liên quan: 1-2 người Thiết kế hình ảnh...       Giới thiệu HTML Cấu trúc tài liệu HTML Các tag Các tag danh sách Tag liên kết Tag kẻ bảng Tag hình ảnh     HTML (HyperText Markup Language): Ngôn ngữ đánh