Nhập môn lập trình Web với PHP - Bài 2_HTML cơ bản

 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
 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. 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
 2
 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
 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
 Bài 2: HTML cơ bản
Cấu trúc của trang HTML
 Đầu trang ... 
 Thân trang Nội dung của trang web
 5
 Bài 2: HTML cơ bản
Cấu trúc của trang HTML
  : xác định phần bắt đầu và 
 kết thúc của trang HTML (HTML 
 Document)
  : chứa các thông tin tổng 
 quát về trang web (meta-information).
  : 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
 Bài 2: HTML cơ bản
Cú pháp chung của tag
 Nội dung
  Tag không có nội dung gọi là tag rỗng 
 (empty tag) và có cú pháp như sau:
 7
 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
 Bài 2: HTML cơ bản
Cú pháp chung của tag
 Ví dụ:
 <div align="center" style="font-style:italic;
 background-color:#FFFFCC; color:#0000FF">
 Công cha như núi Thái sơn 
 Nghĩa mẹ như nước trong nguồn chảy ra 
 9
 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 – Horizontal rule
 10
 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
 Bài 2: HTML cơ bản
Các tag tiêu đề - Headings
 Ví dụ:
 Đâ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
 12
 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
 Bài 2: HTML cơ bản
Phân đoạn - Paragraphs
 Ví dụ:
 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ì. 
 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. 
 14
 Bài 2: HTML cơ bản
Phân đoạn - Paragraphs
 15
 Bài 2: HTML cơ bản
Ngắt dòng – Line Break
  Sử dụng tag để chuyển sang một 
 dòng mới nhưng không kết thúc đọan văn 
 bản
  Tag không cần tag đóng
 16
 Bài 2: HTML cơ bản
Ngắt dòng – Line Break
 Ví dụ:
 Ai ơi bưng bát cơm đầy
 Dẻo thơm một hạt đắng cay muôn phần
 Ăn quả nhớ kẻ trồng cây
 Ăn khoai nhớ kẻ cho dây mà trồng
 17
 Bài 2: HTML cơ bản
Tag - Horizontal 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ẻ
 18
 Bài 2: HTML cơ bản
Tag - Horizontal rule
 Ví dụ:
 Trung Tâm Tin Học
 Đại Học Khoa Học Tự Nhiên Tp.HCM
 19
 Bài 2: HTML cơ bản
4. Đị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
 20
 Bài 2: HTML cơ bản
Các tag định dạng
  - bold : in đậm
  - italic : in nghiêng
  - underline : gạch dưới
 Ví dụ:
 Dòng in đậm 
 Dòng in nghiêng 
 Dòng gạch dưới 
 21
 Bài 2: HTML cơ bản
Thuộ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
 22
 Bài 2: HTML cơ bản
Thẻ 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.
 23
 Bài 2: HTML cơ bản
Thẻ div và span
  Ví dụ:
 24
 Bài 2: HTML cơ bản
 Thẻ div và span
  Ví dụ:
 MẸ !
 Mẹ là cả một trời thương 
 Mẹ là cả một thiên đường trần gian
 Công ơn cha mẹ 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.
 25
 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
 Bài 2: HTML cơ bản
Chèn hình ảnh vào trang web
  Dùng tag 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ụ:
 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.
 27
 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ụ:
<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.
 28
 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
 Bài 2: HTML cơ bản
Tạo danh sách có thứ tự - tag ol
  Dùng tag kết hợp với tag , cú 
 pháp như sau:
 Ví dụ: 
 ..... 
 Thực đơn ..... giải khát 
 ...
 Cafe đá 
 Coca cola 
 Chanh muối 
 30
 Bài 2: HTML cơ bản
Tạo danh sách không có thứ tự - tag ul
  Dùng tag kết hợp với tag , cú 
 pháp như sau:
 Ví dụ:
 ..... 
 Thực đơn giải khát 
 ..... 
 ... Cafe đá 
 Coca cola 
 Chanh muối 
 31
 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 và , 
 bảng giá trị như sau:
 32
 Bài 2: HTML cơ bản
VíBài dụ 2: :Ngôn ngữ HTML
Danh sách - Lists
Thực đơn 
  
 Tạo cácBuổi lồng sáng vào nhau
 Bánh canh cua
 Bún bò Huế
 Hủ tíếu Nam vang
 Buổi trưa
 Cá lóc kho
 Thịt kho trứng
 Mục xào sa tế
 Chiều tối
 Mì gói
 Bánh ướt
 33
 Bài 2: HTML cơ bản
7. Liên kết – tag a
  tag kết hợp với thuộc tính href
 Nội dung tag 
 Ví dụ:
 Click vào đây để chuyển đến trang
 Tự học web 
 34
 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
 Bài 2: HTML cơ bản
Tạo Table
  Bộ tag , (table row) và 
 (table data)
 nội dung nội dung 
 nội dung nội dung 
 … … … …
 36
 Bài 2: HTML cơ bản
Tạo Table
 Ví dụ:
 Dòng 1, cột 1 
 Dòng 1, cột 2
 Dòng 2, cột 1
 Dòng 2, cột 2
 37
 Bài 2: HTML cơ bản
Tạo Table
 Ví dụ:
 Dòng 1, cột 1
 Dòng 1, cột 2
 Dòng 2, cột 1Dòng 2, cột 2
 38
 Bài 2: HTML cơ bản
Trộn dòng, cột trong Table
  colspan: kết hợp nhiều cột thành một cột
  rowspan: kết hợp nhiều dòng thành một 
 dòng
  width : độ rộng của dòng, cột
  height : chiều cao của dòng, cột
 39
 Bài 2: HTML cơ bản
Trộn dòng, cột trong Table
 Ví dụ: trộn cột
 Tên
 Phạm Ngọc Thiên Thanh
 … 
 40
 Bài 2: HTML cơ bản
Trộn dòng, cột trong Table
 Ví dụ: trộn dòng
 Tên Điện thoại 
 Phạm Ngọc Thiên Thanh 
 8351056 0909039999 
 41
 Bài 2: HTML cơ bản
Định dạng Table
  Tạo khoảng cách giữa các cell
 – 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
 42
 Bài 2: HTML cơ bản
Định dạng Table
  Tạo khoảng cách giữa các cell
Cellpadding Dòng 1, cột 1 Dòng 1, cột 2 Dòng 1, cột 3
 … … …
 Cellspacing
 43
 Bài 2: HTML cơ bản
Định dạng Table
  Tạo tiêu đề, canh lề và tô màu nền 
 cho table
 – Tag : tạo tiêu đề, phải đặt 
 ngay sau tag 
 – align : canh lề cho table
 – bgcolor : tô màu nền
 – background : hình làm nền
 44
 Bài 2: HTML cơ bản
Định dạng Table
  Tạo đường viền
 Ví dụ:– border : độ rộng của đường viền
 –<tablebordercolor align="center" cellspacing: màu="5" đường cellpadding viền="15" border="5" 
width="500" bgcolor="#DFFDC4" bordercolor="#0E721F">
 Thông tin cá 
nhân
 Tên
 Điện thoại
 Phạm Ngọc Thiên Thanh
 8351056
 0909039999
 45
Bài 2: HTML cơ bản
 46