Thiết kế Web 1 - HTML cơ bản - Vũ Chí Hiếu

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ơ bản  Các tag danh sách  Tag liên kết  Tag kẻ bảng  Tag hình ảnh 2  HTML (HyperText Markup Language): Ngôn ngữ đánh dấu siêu văn bản  Là một ngôn ngữ để xây dựng trang web  Chứa các thành phần định dạng để báo cho trình duyệt biết cách hiển thị một trang web  Trang web có 2 thành phần chính ◦ 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 dữ liệu hiển thị trên trình duyệt  Phần mở rộng: .html, .htm 3 4  Cấu trúc Dữ liệu  Tên tag thường mang tính gợi nhớ  Đôi khi không cần tag đóng: ,  Cú pháp chung Dữ liệu 5  Lưu ý: ◦ Giá trị của thuộc tính nên đặt trong cặp dấu nháy đơn hoặc nháy kép ◦ Không phân biệt chữ HOA/thường ◦ Trình duyệt bỏ qua các khoảng trắng thừa, dấu ngắt dòng 6 7  : Định nghĩa phạm vi văn bản HTML  : Định nghĩa mô tả về trang HTML  : Tiêu đề trang  /body>: Vùng thân trang web, nơi chứa thông tin 8  Các tag xử lý văn bản  Tag hình ảnh  Tag âm thanh 9  Các tag định dạng khối văn bản ◦ Tiêu đề (Heading): , , , , , ◦ Đoạn văn bản (Paragraph): ◦ Danh sách (List Items): ◦ Đường kẻ ngang (Horizontal Ruler): ◦ Hiển thị đúng dạng văn bản:  Các tag định dạng chuỗi văn bản ◦ Định dạng ký tự: , , , ◦ Liên kết: ◦ Xuống dòng: 10  Làm sao hiển thị: “Khoa Tự Nhiên”  Dùng ký tự đặc biệt: "Khoa Tự Nhiên"   <CĐSP> 11  : Không có thẻ đóng  Các thuộc tính của tag : ◦ src: đường dẫn đến file hình ảnh ◦ alt: Chú thích cho hình ảnh ◦ position: vị trí (Top, Bottom, Middle) ◦ border: độ dày đường viền quanh ảnh (mặc định=0)  Đặt ảnh nền cho trang web ◦ Sử dụng thẻ 12  : Không có tag đóng  Thuộc tính của tag : ◦ src: Đường dẫn đến file âm thanh ◦ loop: số lần lặp phát lại (loop=-1: lặp vô hạn) ◦ thường đặt trong tag của trang web  Ví dụ: 13 Kiểu danh sách Thẻ Phần tử trong DS Danh sách có thứ tự Danh sách không có thứ tự Danh sách tự định nghĩa , 14 15 16 17  Cú pháp Nội dung ◦ href: Chỉ ra URL cần liên kết tới (tương đối/tuyệt đối) ◦ Các giá trị của target:  name: Tải trang web vào frame có tên là name  _blank: Tải trang web vào cửa sổ mới  _parent: Tải trang web vào cửa sổ cha  _self: Tải trang web vào chính cửa sổ hiện hành  _top: Tải trang web vào cửa sổ mức cao nhất  Ví dụ: 18 Tên tag Mô tả Khởi tạo bảng Tạo một dòng. Tag phải nằm trong tag Tạo một ô tiêu đề. Tag phải nằm trong tag Tạo một ô (chứa dữ liệu). Tag phải nằm trong tag 19 20 Thuộc tính Mô tả colspan Thiết lập ô có độ rộng bằng bao nhiêu cột rowspan Thiết lập ô có độ cao bằng bao nhiêu dòng background, bgcolor Thiết lập ảnh nền/màu nền cho thẻ , , cellpadding Khoảng cách từ đường viền đến văn bản trong ô cellspacing Khoảng cách giữa các ô trong bảng 21 22 23 24 Sử dụng các thẻ HTML đã học tạo bảng theo cấu trúc sau: số 5 & 7 25 26  Sử dụng để chuyển dữ liệu lên máy chủ  Các phần tử nhập liệu trong form ◦ Text Field ◦ Password Field ◦ Check 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 các thông tin sau: ◦ Họ và tên ◦ Địa chỉ liên lạc ◦ Điện thoại ◦ Email ◦ Hình cá nhân ◦ Môn học yêu thích ◦ Website yê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 về lớp mình, gồm các thông tin: ◦ Tên lớp, sĩ số ◦ Hình ảnh hoạt động của lớp ◦ Danh sách thành viên của lớp ◦ Địa chỉ website của 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ây 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 các môn thể thao, trò chơi dân gian,  41  Giới thiệu về nhóm thiết kế  Thông tin về chủ sở hữu website, mục đích website  Thông tin về sản phẩm/nội dung cần giới thiệu  Thông tin về các 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 1. Phân tích yêu cầu website: cả nhóm ◦ Mục đích? ◦ Cần bao nhiêu trang web? ◦ Màu sắc? 2. Phác thảo sơ bộ giao diện web: 1-2 người 3. Thu thập tài liệu, hình ảnh liên quan: 1-2 người 4. Thiết kế hình ảnh giao diện (Photoshop): 1 người 5. Thiết kế giao diện web (HTML, CSS, JavaScript): cả nhóm 6. Kiểm tra hiển thị trên các trình duyệt: cả nhóm 7. Đưa lên Internet (host) 44 45