Bài giảng - giáo án: Nhập môn lập trình web với php bài 2 HTML cơ bản
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 (1.49 MB, 46 trang )
TRUNG TÂM TIN HỌC
ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM
1
NHẬP MÔN LẬP TRÌNH
WEB VỚI PHP
TRUNG TÂM TIN HỌC
ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM
2
Bài 2: HTML cơ bản
1. Giới thiệu ngôn ngữ HTML
2. Các thành phần trong trang HTML
3. Các tag cơ bản
4. Định dạng văn bản
5. Hình ảnh - Image
6. Danh sách - List
7. Liên kết - Link
8. Bảng - Table
Bài 2: HTML cơ bản
3
1. Giới thiệu ngôn ngữ HTML1. Giới thiệu ngôn ngữ HTML
HTML (HyperText Markup Language) là
một ngôn ngữ đánh dấu siêu văn bản
Sử dụng tập ký hiệu đánh dấu gọi là tag
để thiết kế trang web, các tag này còn
được gọi là Element
Là một chuẩn Internet do tổ chức W3C
(World Wide Web Consortium) duy trì
Bài 2: HTML cơ bản
4
2. Các thành phần trong trang HTML2. Các thành phần trong trang HTML
Cấu trúc của trang HTML
Cú pháp chung của tag
Ví dụ
Bài 2: HTML cơ bản
5
Cấu trúc của trang HTMLCấu trúc của trang HTML
<html>
<head>
<title> </title>
</head>
<body>
Nội dung của trang web
</body>
</html>
Đầu trangĐầu trang
Thân trangThân trang
Bài 2: HTML cơ bản
6
Cấu trúc của trang HTMLCấu trúc của trang HTML
<html></html>: xác định phần bắt đầu và
kết thúc của trang HTML (HTML
Document)
<head></head>: chứa các thông tin tổng
quát về trang web (meta-information).
<body></body>: nội dung chính của trang
web, được thể hiện trong màn hình của
trình duyệt
Bài 2: HTML cơ bản
7
Cú pháp chung của tagCú pháp chung của tag
Tag không có nội dung gọi là tag rỗng
(empty tag) và có cú pháp như sau:
<Tên tag Thuộctính1=”giá trị” Thuộctính2=”giá trị” >
Nội dung
</Tên tag>
<Tên tag Thuộctính1=”giá trị” Thuộctính2=”giá trị” />
Bài 2: HTML cơ bản
8
Cú pháp chung của tagCú pháp chung của tag
Các đặc điểm:
– Tên tag không phân biệt chữ HOA/thường
– Trình duyệt chỉ nhận 1 khoảng trắng trong Nội
dung và bỏ qua dấu ngắt xuống dòng
Bài 2: HTML cơ bản
9
Cú pháp chung của tagCú pháp chung của tag
Ví dụ:
<body>
<div align="center" style="font-style:italic;
background-color:#FFFFCC; color:#0000FF">
Công cha như núi Thái sơn <br>
Nghĩa mẹ như nước trong nguồn chảy ra </div>
</body>
Bài 2: HTML cơ bản
10
3. Các tag cơ bản3. Các tag cơ bản
Định nghĩa cấu trúc trang HTML
Các tag tiêu đề – Headings
Phân đoạn – Paragraphs
Ngắt dòng – Line Break
Tag <hr> – Horizontal rule
Bài 2: HTML cơ bản
11
Các tag tiêu đề Các tag tiêu đề HeadingsHeadings
Dùng để định dạng khổ chữ có dạng tiêu
đề (giống chức năng Style của MS Word)
Gồm các tag <h1>, <h2>, <h3>, <h4>,
<h5> và <h6>
HTML sẽ tự động thêm một dòng trống
vào trước và sau dòng định dạng là
heading
Bài 2: HTML cơ bản
12
Các tag tiêu đề Các tag tiêu đề HeadingsHeadings
Ví dụ:
<body>
<h1>Đây là dòng heading 1</h1>
<h2>Đây là dòng heading 2</h2>
<h3>Đây là dòng heading 3</h3>
<h4>Đây là dòng heading 4</h4>
<h5>Đây là dòng heading 5</h5>
<h6>Đây là dòng heading 6</h6>
</body>
Bài 2: HTML cơ bản
13
Phân đoạn Phân đoạn ParagraphsParagraphs
Sử dụng tag <p> để phân biệt các đoạn
văn bản
HTML sẽ tự động thêm một dòng trắng
trước và sau đoạn văn bản
Bài 2: HTML cơ bản
14
Phân đoạn Phân đoạn ParagraphsParagraphs
Ví dụ:
<body>
<p>Một nhóm các nhà khoa học Australia tin rằng quá ít axit béo
omega-3, có trong cá và hải sản, và quá nhiều axit béo omega-6, có trong dầu
chế biến và quả hạch, sẽ gia tăng nguy cơ bị trầm cảm ở lứa tuổi dậy thì. </p>
<p>Gần 1.000 dân Sydney tuổi từ 14 đến 17 sẽ được chiêu mộ để
tham gia cuộc nghiên cứu tìm hiểu tác động của thức ăn đối với tâm trạng. Việc
ăn ít hải sản cũng đã được xác định có liên quan tới sự gia tăng khả năng trầm
cảm ở người lớn. Nghiên cứu sẽ nhằm khẳng định nó tác động tới thiếu niên
theo cách tương tự hay không. </p>
</body>
Bài 2: HTML cơ bản
15
Phân đoạn Phân đoạn ParagraphsParagraphs
Bài 2: HTML cơ bản
16
Ngắt dòng Ngắt dòng –– Line BreakLine Break
Sử dụng tag <br /> để chuyển sang một
dòng mới nhưng không kết thúc đọan văn
bản
Tag <br /> không cần tag đóng
Bài 2: HTML cơ bản
17
Ngắt dòng Ngắt dòng –– Line BreakLine Break
Ví dụ:
<body>
<p align="center">Ai ơi bưng bát cơm đầy
<br />Dẻo thơm một hạt đắng cay muôn phần</p>
<p align="center">Ăn quả nhớ kẻ trồng cây
<br /> Ăn khoai nhớ kẻ cho dây mà trồng</p>
</body>
Bài 2: HTML cơ bản
18
Tag Tag <hr><hr> Horizontal ruleHorizontal rule
Dùng để tạo ra một đường kẻ ngang
Thuộc tính size và width dùng để thay đổi
độ rộng và chiều dài đường kẻ
Bài 2: HTML cơ bản
19
Tag Tag <hr><hr> Horizontal ruleHorizontal rule
Ví dụ:
<body>
<div align="center" style="color:red">
<h3> Trung Tâm Tin Học</h3>
<h2 style="font-size:16px">
Đại Học Khoa Học Tự Nhiên Tp.HCM
</h2>
<hr width="200px" size="5px" color="red">
</div>
</body>
Bài 2: HTML cơ bản
20
4. Định dạng văn bản4. Định dạng văn bản
Các tag định dạng
Thuộc tính style của tag
Thẻ div và span
Bài 2: HTML cơ bản
21
Các tag định dạngCác tag định dạng
<b></b> - bold : in đậm
<i></i> - italic : in nghiêng
<u></u> - underline : gạch dưới
Ví dụ:
<body >
<b>Dòng in đậm </b> <br>
<i> Dòng in nghiêng </i> <br>
<u>Dòng gạch dưới </u>
</body>
Bài 2: HTML cơ bản
22
Thuộc tính style của tagThuộc tính style của tag
Dùng để định dạng hiển thị cho nội dung nằm
trong tag
– font-size : khổ chữ
– font-style : kiểu chữ (nghiêng hoặc thường)
– font-weight : nét chữ(đậm hoặc chọn kích thước)
– color : màu chữ
– background-color : màu nền
– border : đường viền
– text-decoration : gạch dưới, gạch trên, gạch bỏ hoặc bỏ hết
các định dạng
– text-align : canh lề trái, giữa hoặc phải.
– width : chiều rộng
– height : chiều cao
Bài 2: HTML cơ bản
23
Thẻ div và spanThẻ div và span
Ta thường các dùng thẻ div và span kết
hợp với thuộc tính style để định dạng văn
bản
– div dùng để định dạng cả đoạn văn.
– span dùng để định dạng các từ trong đoạn
văn.
Bài 2: HTML cơ bản
24
Thẻ div và spanThẻ div và span
Ví dụ:
Bài 2: HTML cơ bản
25
Thẻ div và spanThẻ div và span
Ví dụ:
<div style="text-align:center;">
MẸ !
<br /><span style="color:#F00">Mẹ</span> là cả một trời thương
<br /><span style="color:#F00">Mẹ</span> là cả một thiên đường trần gian
<br />Công ơn cha <span style="color:#F00">mẹ</span> tựa biển trời
<br />
<br />Làm sao báo hiếu hỡi người ơi?
<br />Nếu chưa báo hiếu đừng bất hiếu
<br />Bất hiếu làm ta khổ muôn đời.
</div>
