Bài giảng Nhập môn HTML và thiết kế Web - Các thể HTML cơ bản - Chu Thị Hường

NHẬP MÔN HTML VÀ THIẾT KẾ WEB Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT CÁC THẺ HTML CƠ BẢN 1
Các thẻ HTML cơ bản và
Các thẻ siêu liên kết.
Tổ chức giao bài tập lớn môn học cho các nhóm. NỘI DUNG Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Thẻ Headings: Sử dụng để cung cấp tiêu đề cho các nội dung trong trang web. Các thẻ tiêu đề bắt đầu từ kết bằng thẻ . Ta có thể sử dụng các thẻ tiêu đề từ H1 đến H6 CÁC THẺ HTML CƠ BẢN Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Thẻ tiêu đề Thẻ h1 Thẻ h2 Thẻ h3 Thẻ h4 Thẻ h5 Thẻ h6
Các thẻ mức đoạn:
Thẻ : Được dùng để hiển thị thông tin như tác giả, địa chỉ, chữ ký trong tài liệu HTML. Thường dùng ở cuối trang với việc liên kết trang chủ, thông tin bản quyền, CÁC THẺ HTML CƠ BẢN Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Thẻ tiêu đề <a href="mta.edu.vn" > HVKTQS - 100 Hoàng Quốc Việt
Các thẻ mức đoạn:
Thẻ : Dùng để hiển thị theo các định dạng xác định trước trong mã nguồn HTML. CÁC THẺ HTML CƠ BẢN Thẻ HTML cơ bản Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Trang HTML có tên mở rộng là .htm, .html, .jhtm. phtm.v.v nhưng tên mở rộng chuẩn trong HTML là .htm, html.
Thẻ đoạn và ngắt:
Thẻ đoạn : dùng để đánh dấu sự bắt đầu của một đoạn mới (Thẻ có thể không cần thẻ đóng) Thẻ ngắt : Bổ sung một ký tự xuống dòng CÁC THẺ HTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
 Thuộc tính canh lề: Thuộc tính align được sử dụng để canh lề cho các phần tử HTML: văn bản, đối tượng, hình ảnh, đoạn, Thuộc tính align nhận các giá trị: Left: Canh trái Right:Canh phải Center: Canh giữa Justify: Canh đều hai bên.
Thẻ đoạn và ngắt: CÁC THẺ HTML Wellcome to HTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Mục đích là nhóm ý tưởng logic lại với nhau và áp dụng một số định dạng nội dung
Thẻ khối: Thẻ và được sử dụng để nhóm nội dung với nhau:
: Dùng để định nghĩa nội dung mức khối, chia tài liệu thành các thành phần có liên quan với nhau. CÁC THẺ HTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Phần : Định nghĩa nội dung trong dòng (một khoảng các ký tự)
Thẻ khối: CÁC THẺ HTML Wellcome to HTML Division 1 DIV được dùng để nhóm các phần tử DIV thường dùng cho khối Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT các phần tử Division2 DIV 2 canh lề phải. Định dạng chung cho tất cả các phần tử trong thẻ DIV này
Các thẻ định dạng ký tự thường dùng:
: In đậm,
: In nghiêng,
: Gạch chân,
: Chỉ số trên CÁC THẺ HTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
: Chỉ số dưới
: Nhấn mạnh văn bản
: S/dụng trong trích dẫn mã chương trình.
: S/dụng trong trích dẫn biến chương trình
: S/dụng cho trích dẫn và tham chiếu.
Danh sách: Danh sách dùng để nhóm dữ liệu có logic với nhau, thường có
Danh sách không có thứ tự
Danh sách có thứ tự Danh sách định nghĩa CÁC THẺ HTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

Danh sách:
Danh sách không có thứ tự (bulleted list): Danh sách được nằm trong cặp thẻ , mỗi phần tử trong danh sách được đánh dấu bằng thẻ (thẻ không bắt buộc> CÁC THẺ HTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Thứ hai Thứ ba Thứ tư Thứ năm Thứ sáu
Danh sách:
Danh sách không có thứ tự (bulleted list): Thuộc tính Type dùng để định dạng các bullets. CÁC THẺ HTML Thứ hai Đọc tài liệu Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Thực hành Thứ ba Coding Testing Thứ tư Thứ năm Thứ sáu
Danh sách:
Danh sách không có thứ tự (bulleted list): Ta có thể sử dụng các danh sách lồng nhau CÁC THẺ HTML Thứ hai Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Đọc tài liệu Thực hành Thứ ba Coding Testing Thứ tư Thứ năm Thứ sáu
Danh sách:
Danh sách có thứ tự: Nằm trong cặp CÁC THẺ HTML Thứ hai Đọc tài liệu Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Thực hành Thứ ba Coding Testing Thứ tư Thứ năm Thứ sáu
Danh sách:
Danh sách có thứ tự: Dùng thuộc tính Type để định dạng kiểu thứ tự, Start để xác định số khởi đầu danh sách. CÁC THẺ HTML Thứ hai Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Đọc tài liệu Thực hành Thứ ba Coding Testing Thứ tư Thứ năm Thứ sáu
Danh sách:
Danh sách: Có thể lồng hai loại danh sách với nhau. CÁC THẺ HTML Thứ hai Đọc tài liệu Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Thực hành Thứ ba Coding Testing Thứ tư Thứ năm Thứ sáu
Danh sách:
Danh sách định nghĩa: Danh sách định nghĩa được bao trong cặp và các phần tử được định nghĩa trong cặp CÁC THẺ HTML Thứ hai Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Đọc tài liệu Thực hành Thứ ba Coding Testing Thứ tư Thứ năm Thứ sáu
Thẻ : Dùng để định dạng font chữ, sử dụng các thuộc tính sau:
Color: Màu chữ
Size: Kích thước font (từ 1 đến 7) Face: Kiểu font chữ CÁC THẺ HTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT

Thẻ : Vẽ đường thẳng nằm ngang.
align: Canh lề đường thẳng
width: Độ dài đường thẳng
size: Độ dày đường thẳng
Noshade:Không đổ bóng.
và : CÁC THẺ HTML h1>Tiêu đề <hr Width="50%" size="5“ Align="Left" color="red"> Định dạng một <font color="#AB2308" Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT face="Time New romans" size="4"> chuỗi ký tự với một kiểu chữ nhất định, cỡ chữ và màu chữ
Sử dụng màu sắc:
Tên màu: sử dụng các tên màu chuẩn nhe red, blue, green, black,
Mã thập lục phân: Được phối từ 3 màu cơ bản #RRGGBB. Mẫu màu được xem như bộ hai số của CÁC THẺ HTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT màu. 00 chỉ 0% của màu và FF chỉ 100% của màu.
#FF0000: Red
#00FF00: Green
#0000FF: Blue
#000000: Black
#FFFFFF: White
Sử dụng ảnh:
Ảnh GIF (Graphics Interchange Format - .gif): Định dạng không phụ thuộc vào định dạng nền và hỗ trợ 256 màu. Ưu điểm file khá dễ truyền tải, ngày cả khi kết nối với Modem tốc đôk thấp. CÁC THẺ HTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Ảnh JPEG (Joint Photographic Expert Group): Ảnh JPEG nén mất thông tin, ảnh sau khi bị nén sẽ không giống ảnh gốc, nhưng quá trình phát lại ảnh gần giống ảnh gốc. Hỗ trợ 16 triệu màu và sử dụng đối với ảnh thực.
PNG (Portble Network Graphics): Nén không bỏ qua các chi tiết và không mất thông tin. Hỗ trợ ảnh màu thực và dải màu xám.
: Chèn ảnh vào trang web
Src: Chỉ đường dẫn ảnh
Alt: Chuỗi text thay thế khi không có ảnh
Align: Canh lề của ảnh với văn bản xung quanh CÁC THẺ HTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Height: Chiều cao của ảnh
Width: Chiều rộng của ảnh
: Chèn ảnh vào trang web CÁC THẺ HTML <img align="bottom" src="Images/yahoo.png" alt="Yahoo"/> Canh lề dưới <img align="left" src="Images/yahoo.png" Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT alt="Yahoo"/> Canh lề trái <img align="middle" src="Images/yahoo.png" alt="Yahoo"/> Canh lề giữa
Thẻ marque: cho phép khai báo một chuỗi chuyển động theo nhiều hướng khác nhau trên trang Web. Có 4 chiều di chuyển chuỗi tuỳ thuộc vào tham số hướng là UP, DOWN, BACK, RIGHT. CÁC THẺ HTML Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT Ashley- Ana -Chanthaly - Kathleen- Lena <MARQUEE DIRECTION=UP SCROLLDELAY=2 SCROLLAMOUNT=1 STYLE="filter:wave(add=5, phase=1, freq=5, strength=20);"> AshleyAnaChanthalyKathleenLena THẢO LUẬN – CÂU HỎI Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT
Thực hành các ví dụ trong TL[1] và tìm hiểu mở rộng về HTML5.
Nên ý tưởng thiết kế các chức năng cho bài tập lớn BÀI TẬP Biên soạn: Chu Thị Hường – Bộ môn HTTT – Khoa CNTT