Bài giảng - Giáo án: Bài giảng học lập trình html như thế nào là hiệu quả?
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.3 MB, 68 trang )
1
Giảng viên: Hoàng Văn Hiệp
Bộ môn: Kỹ Thuật máy tính
Viện CNTT-TT – ĐH Bách Khoa Hà Nội
Email:
Ngôn ngữ HTML
Đại học Bách khoa Hà nội
NGÔN NGỮ HTML
HTML là gì?
Các thẻ trong HTML.
2
Đại học Bách khoa Hà nội
HTML LÀ GÌ?
Hyper Text Markup Language – Ngôn ngữ
đánh dấu siêu văn bản
Đƣợc sử dụng để tạo nên các trang web
Trình duyệt đọc file HTML để hiển thị nội
dung
Là một file văn bản có chứa các thẻ (tag) và
nội dung trang web
3
Đại học Bách khoa Hà nội
HTML LÀ GÌ?
Các thẻ đƣợc sử dụng để định dạng dữ liệu,
quy định cách thức hiển thị nội dung trang
web
HTML không phân biệt chữ hoa hay chữ
thƣờng
HTML không báo lỗi cú pháp, nếu sai cú pháp
kết quả hiển thị không đúng.
4
Đại học Bách khoa Hà nội
HTML LÀ GÌ?
Một file HTML phải có phần mở rộng là htm
hoặc html
File HTML có thể đƣợc tạo bởi bất kỳ chƣơng
trình soạn thảo nào (word, notepad, …)
5
Đại học Bách khoa Hà nội
CÁC THẺ TRONG HTML
Đƣợc sử dụng để đánh dấu các thành phần của
HTML
Có nhiều kiểu thẻ, mỗi kiểu thẻ có tác dụng
khác nhau
Có 2 loại: thẻ đóng và thẻ mở
6
Đại học Bách khoa Hà nội
CÚ PHÁP THẺ
Thẻ mở
<tên_thẻ>
Bắt đầu một lệnh HTML
Ví dụ <html>, <head>, <body>
Thẻ đóng
</tên_thẻ>
Kết thúc một lệnh HTML
Ví dụ </html>, </head>, </body>
7
Đại học Bách khoa Hà nội
CÚ PHÁP THẺ
Thẻ đóng và thẻ mở thƣờng đi liền với nhau
<tên_thẻ>…</tên_thẻ>
Tác động đến dữ liệu bên trong cặp thẻ
Một số thẻ chỉ có thẻ mở
<img>, <br>, <hr>
8
Đại học Bách khoa Hà nội
THUỘC TÍNH CỦA THẺ
Mỗi thẻ có thể có 1 hoặc nhiều thuộc tính
Mỗi thuộc tính có tên thuộc tính và giá trị, giá
trị đƣợc đặt trong dấu “”
Cú pháp
<tên_thẻ tên_TT1=“giá_trị1” tên_TT2=“giá_trị2”
…>
9
Đại học Bách khoa Hà nội
THUỘC TÍNH CỦA THẺ
Thuộc tính đƣợc viết trong thẻ mở
<h1 align=“center”>Hello world</h1>
Các thuộc tính có thể đổi vị trí cho nhau
<image align=“center” src=“hello.png”>
<image src=“hello.png” align=“center”>
10
Đại học Bách khoa Hà nội
TRANG WEB ĐẦU TIÊN
11
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>
Đại học Bách khoa Hà nội
HIỂN THỊ TRÊN TRÌNH DUYỆT
12
Đại học Bách khoa Hà nội
HIỂN THỊ TRÊN TRÌNH DUYỆT
13
Đại học Bách khoa Hà nội
GIẢI THÍCH
Thành phần <b>This text is bold</b>
<b> là thẻ mở
</b> là thẻ đóng tƣơng ứng
Nội dung của thành phần nằm giữa 2 thẻ
Tác dụng: làm đậm nội dung khi hiển thị trên trình
duyệt
14
Đại học Bách khoa Hà nội
CÁC THẺ HTML CƠ BẢN
<html> … </html>
Đánh dấu một file HTML
<head> … </head>
Đánh dấu phần đầu của file HTML
<body> … </body>
Đánh dấu phần nội dung đƣợc hiển thị
Thuộc tính bgcolor xác định màu nền của trang web
Thuộc tính background xác định ảnh nền trang web
15
Đại học Bách khoa Hà nội
ẢNH NỀN TRANG WEB
16
<html>
<head>
<title>Background Image</title>
</head>
<body background=“globe.png”>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>
Đại học Bách khoa Hà nội
MÀU NỀN TRANG WEB
17
<html>
<head>
<title>Background Image</title>
</head>
<body bgcolor=“green”>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>
Đại học Bách khoa Hà nội
ĐỀ MỤC
Đƣợc sử dụng với các thẻ từ <h1> đến <h6>
<h1> có kích thƣớc lớn nhất
<h6> có kích thƣớc nhỏ nhất
Tự động thêm một dòng trống trƣớc và sau đề
mục
Thuộc tính
align=“left”, “right”, “center”, “justify” căn chỉnh
lề
18
Đại học Bách khoa Hà nội
ĐỀ MỤC
19
<h1> Đề mục mức 1 </h1>
<h2> Đề mục mức 2 </h2>
<h3> Đề mục mức 3 </h3>
<h4> Đề mục mức 4 </h4>
<h5> Đề mục mức 5 </h5>
<h6> Đề mục mức 6 </h6>
Đại học Bách khoa Hà nội
ĐOẠN VĂN, NGẮT DÒNG
<p> … </p>
Đánh dấu một đoạn văn bản
Tự động thêm một dòng trống trƣớc và sau đoạn
Thuộc tính align căn lề cho đoạn văn bản, giá trị mặc
định là “left”
<br>
Chèn ký tự xuống dòng
<hr>
Chèn đƣờng kẻ ngang
20
Đại học Bách khoa Hà nội
ĐOẠN VĂN, NGẮT DÒNG
21
<html>
<head>
<title>Paragraph</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
</head>
<body>
<p>Đây là paragraph 1. Căn trái.</p>
<p align="center">Đây là paragraph 2. Căn
giữa.</p>
<p align="right">Đây là paragraph 3. Căn phải.</p>
<hr>
Dòng 1<br>
Dòng 2<br>
</body>
</html>
Đại học Bách khoa Hà nội
ĐOẠN VĂN, NGẮT DÒNG
22
Đại học Bách khoa Hà nội
ĐỊNH DẠNG VĂN BẢN
<b>…</b> chữ đậm
<i>…</i> chữ nghiêng
<u>…</u> chữ gạch chân
<big>…</big> chữ to
<small>…</small> chữ nhỏ
<sup>…</sup> chỉ số trên
<sub>…</sub> chỉ số dưới
23
Đại học Bách khoa Hà nội
ĐỊNH DẠNG VĂN BẢN
<font>…</font>
Chọn font chữ cho văn bản
Thuộc tính face xác định kiểu font
Thuộc tính size xác định kích thƣớc
Thuộc tính color xác định màu sắc
24
Đại học Bách khoa Hà nội
ĐỊNH DẠNG VĂN BẢN
25
<html>
<head>
<title>Formating</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<b>Chữ đậm.</b> <i>Chữ nghiêng.</i> <u>Chữ gạch chân.</u>
<br>
<big>Chữ to.</big> <small>Chữ nhỏ.</small>
<br>
<sup>Chỉ số trên.</sup> <sub>Chỉ số dưới.</sub>
<br>
<font size="1" color="blue">Font chữ kích thước 1</font><br>
<font size="5" color="red">Font chữ kích thước 5</font><br>
<font face="Arial" color="green">Font chữ Arial</font><br>
</body>
</html>
Đại học Bách khoa Hà nội
