Giới thiệu ngôn ngữ HTMLmộ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 d
Trang 1NHẬP MÔN LẬP TRÌNH
WEB VỚI PHP
Trang 31 Giới thiệu ngôn ngữ HTML
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ì
Trang 42 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ụ
Trang 5Cấu trúc của trang HTML
Trang 6Cấ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
Trang 7Cú 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:
Nội dung
</Tên tag>
Trang 8Cú pháp chung của tag
Các đặc điểm:
Trang 9Cú 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>
Trang 103 Các tag cơ bản
Định nghĩa cấu trúc trang HTML
Các tag tiêu đề – Headings
Ngắt dòng – Line Break
Tag <hr> – Horizontal rule
Trang 13Phân đoạn
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
Trang 14<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>
Trang 15Phân đoạn
Trang 16Ngắt dòng
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
Trang 17Ngắt dòng
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>
Trang 18Tag <hr> Horizontal rule Horizontal rule
Thuộc tính size và width dùng để thay đổi
độ rộng và chiều dài đường kẻ
Trang 19Tag <hr> Horizontal rule Horizontal rule
Ví dụ:
<body>
<div align="center" style="color:red">
<h3> Trung Tâm Tin Học</h3>
Trang 204 Đị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
Trang 21Cá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>
Trang 22Thuộ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
Trang 23Thẻ 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
văn.
Trang 24Thẻ div và span
Ví dụ:
Trang 25Thẻ 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>
Trang 265 Hình ảnh
Chèn hình ảnh vào trang web
Định dạng hình ảnh
Trang 27Chè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>
<p><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
Trang 28Định dạng hình ả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>
<p><img src="tomcang.jpg" alt="Hình con tôm càng“align="right" width="100"
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>
Trang 296 Danh sách
6 Danh sách – – tag ul, ol tag ul, ol
Trang 30Tạo danh sách có thứ tự
Dùng tag <li> kết hợp với tag <ol>, cú
<li> Cafe đá </li>
<li> Coca cola </li>
<li> Chanh muối </li>
</ol>
</body>
Trang 31Tạo danh sách không có thứ tự
Tạo danh sách không có thứ tự tag ul tag ul
Dùng tag <li> kết hợp với tag <ul>, cú
<li> Cafe đá </li>
<li> Coca cola </li>
<li> Chanh muối </li>
</ul>
Trang 32Thay đổ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:
Trang 33 Tạo các danh sách lồng vào nhau
<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>
Trang 347 Liên kết
7 Liên kết – – tag a 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 ="http://www.w3schools.com">Tự học web </a>
</body>
Trang 36Tạ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>
Trang 41Trộn dòng, cột trong Table
Ví dụ: trộn dòng
<body>
<table border="1" width="500">
<tr> <td width="50%" >Tên </td> <td> Điện thoại </td> </tr>
<tr> <td rowspan="2"> Phạm Ngọc Thiên Thanh </td>
<td> 8351056 </td> </tr> <tr> <td> 0909039999 </td> </tr>
</table>
</body>
Trang 42Định dạng Table
– cellpadding : khoảng cách từ biên của
cell tới nội dung trong cell
– cellspacing : khoảng cách giữa các cell
Trang 44Định dạng Table
cho table
– Tag <caption>: tạo tiêu đề, phải đặt
ngay sau tag <table>
– align : canh lề cho table
– bgcolor : tô màu nền
– background : hình làm nền
Trang 45Định dạng Table
– border : độ rộng của đường viền
– bordercolor : màu đường viền
