›
›

Bài giảng Thiết kế web bằng HTML

Download
THIẾT KẾ WEB  
BẰNG HTML  
Thiết kế web với HTML  
GiỚI THIỆU HTML  
1. HTML là gì?  
HyperText Markup Language (HTML) – Ngô n  
ngữ đánh dấu siêu văn bản. Bao gồm các  
đoạn mã chuẩn với các quy ước được thiết  
kế để tạo các trang Web và được hiển thị bởi  
các trình duyệt Web.  
Thiết kế web với HTML  
2. Những ứng dụng của HTML  
▪ HTML là nền tảng của World Wide Web,  
một dịch vụ toàn cầu của Internet.  
▪ HTML để thiết kế Web trên mạng  
Internet, tạo tài liệu, gửi cá o thị... cho cá c  
cô ng ty, cá nhâ n.  
Thiết kế web với HTML  
3. Trình soạn thảo trong quá trình học  
▪ Sử dụng trình soạn thảo NotePad có sẵn  
trong Windows.  
Start\Programs\Accessories\NotePad  
▪ Hoặc một trình soạn thảo bất kỳ trong  
windows.  
▪ FrontPage, DreamWare, Visual Studio...  
Thiết kế web với HTML  
4. Những vấn đề cần quan tâm khi  
thiết kế Web  
▪ Tổ chức tài liệu: tựa đề, tiêu đề, đoạn  
văn, đường kẻ ngang, danh sách, bảng.  
▪ Thu ngắn văn bản.  
▪ Bố trí hình ảnh nhỏ gọn, hợp lý.  
Thiết kế web với HTML  
Chương 1: Tạo chương trình đầu tiên  
1.1 Tạo một trang Web mới.  
- Mở môi trường mà bạn muốn soạn thảo tài liệu  
HTML..  
- Sử dụng chương trình soạn thảo NotePad: Start ->  
Program -> Accessories -> NotePad.  
•Chú ý:  
+ Khi ghi tài liệu HTML vào ổ đĩa nhớ ghi đầy đủ phần  
mở rộng  
+ Nếu sử dụng môi trường soạn thảo là NotePad trên  
Windows thì ghi ghi tài liệu HTML vào ổ đĩa fải chọn  
Encoding là UTF-8 để hiển thị tiếng việt.  
Thiết kế web với HTML  
1.2. Tag (thẻ) HTML là gì?  
Khi một Web browser hiển thị một trang Wed, Web  
Browser sẽ đọc từ một file văn bản đơn giản và tìm  
kiếm những đoạn mã đặc biệt hay những Tag được  
đánh dấu bởi ký hiệu < và >.  
* Tag mang thô ng tin  
<tag_name> String of text </tag_name>  
Trong đó:  
<tag_name>: tag bắt đầu.  
</tag_name>: tag kết thúc.  
* Tag rỗng: <tag_name>  
Thiết kế web với HTML  
* Web browser  
▪ Là trình duyệt Web, ví dụ: Microsoft  
Internet Explorer, FireFox, Opera,  
Netscape...  
Thiết kế web với HTML  
1.3. Cấu trúc cơ bản của một trang  
HTML  
<html>  
<head>  
<title>tiêu đề trang</title>  
</head>  
<body>  
Văn bản hiển thị.  
</body>  
</html>  
Thiết kế web với HTML  
1.4. Tag chú thích.  
<!—Nội dung chú thích-->.  
❖Thẻ <!DOCTYPE>  
▪ Thẻ này dùng để ghi thông tin về version  
HTML áp dụng trong tài liệu web.  
▪ Thường đây là dòng đầu tiên trong file  
HTML.  
▪ Ví dụ:  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML  
4.0 Transitional//EN">  
Thiết kế web với HTML  
1.5. Hiển thị tài liệu trong Web Browser  
1.6. Tạo trang Web đầu tiên  
▪ Mở chương trình soạn thảo NotePad.  
▪ Sử dụng phông đánh tiếng việt: Unicode  
▪ Soạn thảo đoạn mã sau:  
Thiết kế web với HTML  
<!--chương trình đầu tiên-->  
<html>  
<head>  
<title> Học tập HTML</title>  
</head>  
<body>  
Chúc mừng bạn đã tạo được trang web đầu  
tiên!  
</body>  
<html>  
Thiết kế web với HTML  
❖ Lưu lại với tên  
“MoDau.html” (vào  
trong thư mục của  
mình), với phần  
Encoding là UTF-8.  
❖ Lưu ý: phần mở  
rộng có thể là html  
hoặc htm đều được.  
❖ Vào thư mục của  
mình chạy tệp HTML  
mà ta vừa tạo, xem  
kết quả nhận được.  
Thiết kế web với HTML  
Thiết kế web với HTML  
6. Bài tập  
Thiết kế một trang HTML giới thiệu về bản  
thâ n.  
Thiết kế web với HTML  
Chương 2: Điều chỉnh 1 tài liệu HTML  
2.1. Nạp tài liệu trong Web browse  
2.1.1.Tạo sự thay đổi trong tài liệu HTML  
Vào thư mục làm việc, mở tệp html của  
mì nh.  
Mở trình soạn thảo NotePad.  
Từ thực đơn File, dùng Open để mở tệp  
mình đã làm.  
Từ đó thêm, bớt, sửa đổi... văn bản trong đó.  
Lưu trở lại.  
Thiết kế web với HTML  
2.1.2.Nạp lại tài liệu trong Web browser  
▪ Trở lại thư mục làm việc, mở lại tệp đã sửa,  
quan sát, so sánh với trang Web đã mở lúc  
đầu về sự thay đổi.  
Thiết kế web với HTML  
2.1.3. Thực hành  
Đều chỉnh lại tài liệu HTML của mình, tạo một một  
trang HTML giới thiệu về một vài thành viên của  
lớp.  
Thiết kế web với HTML  
2.2. 6 mức tiêu đề  
2.2.1. Những tiêu đề của HTML  
Tag tiêu đề:  
<hN>Nội dung hiển thị</hN>  
N là số nguyên từ 1 đến 6.  
Ví dụ:  
<h3>Tiêu đề thứ 3</h3>  
<h6> Tiêu đề nhỏ nhất</h6>  
Thiết kế web với HTML  
❖ Để tiêu đề ở giữa:  
<hN align=“center”>Tiêu đề</hN>  
❖Để tiêu đề bên phải:  
<hN align=“right”>Tiêu đề</hN>  
• Ví dụ  
Tải về để xem bản đầy đủ
pptx 140 trang baolam 29/04/2022 6440
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế web bằng HTML", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pptxbai_giang_thiet_ke_web_bang_html.pptx