Download
1 / 35
350 likes | 551 Views
HTML cơ bản. Vũ Chí Hiếu hieuvc@gmail.com. Nội dung. 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. Giới thiệu HTML. 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
E N D
HTML cơ bản Vũ Chí Hiếu hieuvc@gmail.com
Nội dung • 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
Giới thiệu HTML • 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
Thẻ HTML (Tag) • Cấu trúc <tag mở>Dữ liệu<tag đóng> • Tên tag thường mang tính gợi nhớ • Đôi khi không cần tag đóng: <br>, <hr> • Cú pháp chung <tagtên_thuộc_tính=“…”>Dữ liệu</tag>
Thẻ HTML (Tag) • 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
Cấu trúc tài liệu HTML • <html></html>: Định nghĩa phạm vi văn bản HTML • <head></head>: Định nghĩa mô tả về trang HTML • <title></title>: Tiêu đề trang • <body>/body>: Vùng thân trang web, nơi chứa thông tin
Các tag cơ bản • Các tag xử lý văn bản • Tag hình ảnh • Tag âm thanh
Các tag xử lý văn bản • Các tag định dạng khối văn bản • Tiêu đề (Heading): <h1>, <h2>, <h3>, <h4>, <h5>, <h6> • Đoạn văn bản (Paragraph): <p> • Danh sách (List Items): <li> • Đường kẻ ngang (Horizontal Ruler): <hr> • Hiển thị đúng dạng văn bản: <pre> • Các tag định dạng chuỗi văn bản • Định dạng ký tự: <i>, <em>, <b>, <font> • Liên kết: <a> • Xuống dòng: <br>
Các ký tự đặc biệt • Làm sao hiển thị: “Khoa Tự Nhiên” <CĐSP> • Dùng ký tự đặc biệt: "Khoa Tự Nhiên" <CĐSP>
Tag hình ảnh • <img>: Không có thẻ đóng • Các thuộc tính của tag <img>: • 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ẻ <body background=“đường dẫn ảnh”>
Tag âm thanh • <bgsound>: Không có tag đóng • Thuộc tính của tag <bgsound>: • 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) • <bgsound> thường đặt trong tag <head> của trang web • Ví dụ: <bgsoundsrc=“ngoilaibennhau.mp3” loop=“1”>
Tag liên kết • Cú pháp <a href=“…” target=“”>Nội dung</a> • 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ụ:
Bài tập 1 • 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
Bài tập 2 • 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
Các chủ đề • 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,… • …
Yêu cầu về chức năng • 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
Yêu cầu về kỹ thuật • HTML • Sử dụng liên kết, hình ảnh, danh sách • Sử dụng table tạo layout • CSS • JavaScript
Quy trình làm việc • 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? • Phác thảo sơ bộ 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): 1 người • Thiết kế giao diện web (HTML, CSS, JavaScript): cả nhóm • Kiểm tra hiển thị trên các trình duyệt: cả nhóm • Đưa lên Internet (host)
