Nhập môn lập trình web với PHP
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.54 MB, 46 trang )
TRUNG TÂM TIN HỌC
ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM
NHẬP MÔN LẬP TRÌNH
WEB VỚI PHP
1
CuuDuongThanCong.com
/>
TRUNG TÂM TIN HỌC
ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM
Bài 2: HTML cơ bản
1.
2.
3.
4.
5.
6.
7.
8.
Giới thiệu ngôn ngữ HTML
Các thành phần trong trang HTML
Các tag cơ bản
Định dạng văn bản
Hình ảnh - Image
Danh sách - List
Liên kết - Link
Bảng - Table
2
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
1. 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ì
3
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
2. 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ụ
4
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Cấu trúc của trang HTML
<html>
<head>
Đầu trang
<title> ...
</title>
</head>
<body>
Nội dung của trang web
Thân trang
</body>
</html>
5
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Cấ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
6
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Cú pháp chung của tag
<Tên tag Thuộctính1=”giá trị” Thuộctính2=”giá trị” ... >
Nội dung
</Tên 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ị” ... />
7
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Cú 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
8
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Cú pháp chung của tag
Ví dụ:
<body>
Công cha như núi Thái sơn
Nghĩa mẹ như nước trong nguồn chảy ra </div>
</body>
9
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
3. 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
10
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Các tag tiêu đề - Headings
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
, , , ,
và
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
11
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Các tag tiêu đề - Headings
Ví dụ:
<body>
Đây là dòng heading 1
Đây là dòng heading 2
Đây là dòng heading 3
Đây là dòng heading 4
Đây là dòng heading 5
Đây là dòng heading 6
</body>
12
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Phân đoạn - Paragraphs
Sử dụng tag
, ,
và
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
11
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Các tag tiêu đề - Headings
Ví dụ:
<body>
Đây là dòng heading 1
Đây là dòng heading 2
Đây là dòng heading 3
Đây là dòng heading 4
Đây là dòng heading 5
Đây là dòng heading 6
</body>
12
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Phân đoạn - Paragraphs
Sử dụng tag
và
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
11
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Các tag tiêu đề - Headings
Ví dụ:
<body>
Đây là dòng heading 1
Đây là dòng heading 2
Đây là dòng heading 3
Đây là dòng heading 4
Đây là dòng heading 5
Đây là dòng heading 6
</body>
12
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Phân đoạn - Paragraphs
Sử dụng tag
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
11
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Các tag tiêu đề - Headings
Ví dụ:
<body>
Đây là dòng heading 1
Đây là dòng heading 2
Đây là dòng heading 3
Đây là dòng heading 4
Đây là dòng heading 5
Đây là dòng heading 6
</body>
12
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Phân đoạn - Paragraphs
Sử dụng tag
để 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
13
CuuDuongThanCong.com
ơn cha <span style="color:#F00">mẹ</span> tựa biển trời
Làm sao báo hiếu hỡi người ơi?
Nếu chưa báo hiếu đừng bất hiếu
Bất hiếu làm ta khổ muôn đời.
</div>
25
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
5. Hình ảnh – tag img
Chèn hình ảnh vào trang web
Định dạng hình ảnh
26
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Chèn hình ảnh vào trang web
Dùng tag <img> và thuộc tính src để khai
báo URL chứa tập tin hình ảnh
Thuộc tính alt : xuất câu thông báo nếu
tập tin hình không tồn tại
Ví dụ:
<body>
<img src="tomcang.jpg" alt="Hình con tôm càng">Tôm là món hải sản
có vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cần mươi phút là có thể chế
biến xong món tôm rất ngon này.
</body>
27
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Định dạng hình ảnh
width, height: độ rộng và chiều cao hình, tính
bằng pixel (mặc định) hoặc %.
align: định vị trí xuất hiện của hình so với đọan
văn bản một cách tương đối (left, right, … )
Ví dụ:
<body>
height="60" >Tôm là món hải sản có vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cần
mươi phút là có thể chế biến xong món tôm rất ngon này.
</body>
28
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
6. Danh sách – tag ul, ol
Tạo danh sách có thứ tự - tag ol
Tạo danh sách không có thứ tự - tag ul
Thay đổi ký hiệu đầu dòng trong danh sách
29
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Tạo danh sách có thứ tự - tag ol
Dùng tag <li> kết hợp với tag <ol>, cú
pháp như sau:
Ví dụ:
<ol>
<body>
<li> ..... </li>
<li>
Thực
đơn.....
giải</li>
khát
<ol>
...
<li> Cafe đá </li>
</ol>
<li> Coca cola </li>
<li> Chanh muối </li>
</ol>
</body>
30
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Tạo danh sách không có thứ tự - tag ul
Dùng tag <li> kết hợp với tag <ul>, cú
pháp như sau:
Ví dụ:
<body> <ul>
<li> ..... </li>
Thực đơn giải khát
<li> ..... </li>
<ul>
<li>...
Cafe đá </li>
<li> Coca cola </li>
</ul>
<li> Chanh muối </li>
</ul>
</body>
31
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Thay đổi ký hiệu đầu dòng trong danh sách
Thuộc tính type của tag <ul> và <ol>,
bảng giá trị như sau:
32
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Bàidụ:
2: Ngôn ngữ HTML
Ví
Danh sách - Lists
<body>
Thực đơn
<ul type="square">
<li style="color:#3300FF">Buổi sáng</li>
<ol style="color:#000000">
<li>Bánh canh cua</li>
<li>Bún bò Huế</li>
<li>Hủ tíếu Nam vang</li>
</ol>
<li style="color:#3300FF">Buổi trưa</li>
<ol style="color:#000000">
<li>Cá lóc kho</li>
<li>Thịt kho trứng</li>
<li>Mục xào sa tế</li>
</ol>
<li style="color:#3300FF">Chiều tối</li>
<ol style="color:#000000">
<li>Mì gói</li>
<li>Bánh ướt</li>
</ol>
</ul>
Tạo các danh sách lồng vào nhau
33
</body>
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
7. Liên kết – tag a
tag <a> kết hợp với thuộc tính href
<a href = "địa chỉ URL" > Nội dung tag </a>
Ví dụ:
<body>
Click vào đây để chuyển đến trang
<a href="">Tự học web </a>
</body>
34
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
8. Bảng - Table
Tạo Table
Trộn dòng, cột trong Table
Định dạng Table
35
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Tạo Table
Bộ tag <table>, <tr>(table row) và <td>
(table data)
<table>
<tr>
<td> nội dung </td>
<td> nội dung </td>
</tr>
<tr>
<td> nội dung </td>
<td> nội dung </td>
</tr>
…
…
…
…
</table>
36
CuuDuongThanCong.com
/>
Bài 2: HTML cơ bản
Tạo Table
Ví dụ:
<body>
<table border="1">
<tr>
<td>Dòng 1, cột 1</td>
<td>Dòng 1, cột 2</td>
</tr>
<tr>
<td>Dòng 2, cột 1</td>
<td>Dòng 2, cột 2</td>
</tr>
</table>
</body>
37
CuuDuongThanCong.com
/>
