Bài giảng lập trình PHP chương 2 dương khai phong

 HyperText – Văn bản có thể kết nối đến văn bản khác  Sử dụng các “thẻ” để “đánh dấu” văn bản, giúp trình duyệt xác định được cách biểu diễn trang web đến người sử dụng..  Một tập t

Trang 1

• GVHD: Dương Khai Phong

• Email: khaiphong@gmail.com

• Website: http://khaiphong.tk

Trang 2

1/ Giới thiệu tổng quan Web

2/ Ngôn ngữ HTML và JavaScript

3/ Ngôn ngữ PHP căn bản

4/ Các đối tượng trong PHP

5/ PHP và hướng đối tượng

6/ PHP và cơ sở dữ liệu MySQL

7/ PHP và AJAX

8/ PHP và các hệ thống mã nguồn mở 9/ Triển khai ứng dụng PHP

Trang 3

PHẦN 2:

Trang 5

a HTML là gì?

 HTML là viết tắt của HyperText Markup Language (Ngôn ngữ

đánh dấu siêu văn bản) do nhà khoa học Mỹ - Tim Berners Lee

định nghĩa ra năm 1989

 HyperText – Văn bản có thể kết nối đến văn bản khác

 Sử dụng các “thẻ” để “đánh dấu” văn bản, giúp trình duyệt

xác định được cách biểu diễn trang web đến người sử dụng

 Một tập tin HTML là một tập tin văn bản trong đó có chứa các

thẻ định dạng (các thẻ này sẽ giúp trình duyệt Web xác định cách trình bày trang Web)

 Một tập tin HTML phải có đuôi mở rộng là htm hoặc html

 Một tập tin HTML có thể được viết trên một trình soạn thảo văn

bản đơn giản

Trang 8

<html> <! Bắt đầu tài liệu HTML >

<body> <! Bắt đầu phần thân tài liệu >

… <!–- Thân tài liệu >

</body> <! Kết thúc phần thân tài liệu >

</html> <! Kết thúc tài liệu HTML >

Trang 9

Thẻ Mô tả

<html> Khai báo một tài liệu HTML

<body> Khai báo phần thân cho tài liệu

<h1 to h6> Khai báo header 1 đến header 6

<br> Chèn một ký tự kết thúc dòng

<! > Chú thích

Trang 11

 Các thuộc tính cơ bản của thẻ BODY:

background file_name Một hình ảnh dùng làm hình nền Thường

dùng style để thay thế

#xxxxxx colorname

Màu nền của tài liệu Thường dùng style để thay thế

#xxxxxx colorname

Màu chữ trong tài liệu Thường dùng style

để thay thế

Trang 12

• Mở notepad và lưu lại với tên hello.html (phần encoding: UTF-8)

• Đánh lại nội dung trên vào notepad

• Mở trình duyệt IE và chọn file hello.html để xem kết quả

Trang 13

 Ví dụ 2: thẻ body và thuộc tính màu nền:

Đây là nội dung website đầu

tiên của tôi…

<body>

</html>

Trang 14

Đây là nội dung website đầu

tiên của tôi…

<body>

</html>

Trang 15

c Thẻ Headings – các thẻ từ <h1> đến <h6>:

 Công dụng: dùng định dạng kích thước của chữ (thẻ này sẽ tự

động thêm một dòng trống trước và sau mỗi dòng có thẻ heading)

Trang 16

Đây là nội dung <br> website

đầu tiên của tôi…

</body>

</html>

Trang 17

e Thẻ <p>:

 Công dụng: dùng để xác định một đoạn văn trong tài liệu

(HTML sẽ tự động thêm một dòng trống trước và sau thẻ <p>

 Ví dụ:

<html>

<body>

website đầu tiên của tôi…

các bạn… </p>

</body>

</html>

Trang 18

Đây là nội dung website

đầu tiên của tôi… <br>

bạn…

</body>

</html>

Trang 19

Tạo một ô Tạo một tiêu đề cho bảng Tạo nhóm các cột

Khai báo các giá trị thuộc tính cho một hay nhiều cột trong bảng

Định nghĩa phần đầu bảng Định nghĩa phần thân của bảng Định nghĩa phần cuối của bảng

Trang 20

 Một ô dữ liệu có thể chứa văn bản, các hình ảnh, danh

sách, các đoạn, biểu mẫu, bảng,…

Trang 21

Canh lề trong bảng Thường dùng style để thay thế

#xxxxxx colorname

Định dạng màu nền cho bảng Thường dùng style để thay thế

Lưu ý: Thiết đặt border=“0” để hiển thị bảng không có đường viền!

Trang 22

Định dạng khoảng cách giữa các dòng trong

ô

bgcolor rgb(x,x,x)

Quy định màu nền của ô Thường dùng style

để thay thế

valign top

middle bottom baseline

Quy định khoảng cách cho văn bản trong ô theo chiều dọc

Trang 23

Quy định khoảng cách cho nội dung trong ô theo chiều dọc

Quy định màu nền của ô Thường dùng style để thay thế

middle bottom baseline

Quy định khoảng cách dọc cho nội dung trong ô

Trang 25

 Các lưu ý khi tạo bảng:

 Các ô trong bảng nếu không có nội dung thì sẽ hiển thị

không đúng trong hầu hết các trình duyệt như: mất đường viền (ngoại trừ Mozilla Firefox thì có hiển thị)

=> Khắc phục: thêm vào các ô dữ liệu rỗng  

Trang 26

<td align="right" valign="middle">Turtle</td>

</tr>

</table>

<body>

</html>

Trang 27

 Ví dụ 3: thẻ table và thuộc tính “colspan”:

Trang 28

 Ví dụ 4: thẻ table và thuộc tính “rowspan”:

Trang 29

Thẻ <Input type=“reset”>

Trang 30

a Các loại thẻ sử dụng với biểu mẫu (form):

<optgroup> Tạo một nhóm các tuỳ chọn

Trang 31

b Thẻ <form>:

 Công dụng: dùng để tạo ra một biểu mẫu cho phép người

dùng nhập vào dữ liệu

 Một biểu mẫu có thể chứa vùng văn bản (textfield), các

hộp kiểm (checkbox), các nút radio (radio-button) và

các thành phần khác

 Form được dùng để chuyển dữ liệu của người dùng đến

một URL xác định

Trang 32

post Phương thức HTTP để gởi dữ liệu đến địa chỉ URL xác định Mặc định là get

• method="get": phương thức này gởi nội dung của form theo địa chỉ URL: URL?name=value&name=value

• method="post": phương thức này gởi nội dung của form theo phần thân của yêu cầu

name form_name Khai báo một tên riêng cho form

target _blank

_self _parent _top

Vị trí sẽ mở URL đích URL

• _blank : URL đích sẽ mở trong một cửa sổ mới

• _self : URL đích sẽ mở trong chính frame mà tại đó ta kích chọn

• _parent : URL đích sẽ mở trong frame chính

• _top : URL đích sẽ mở trong toàn bộ phần thân của cửa

sổ

Trang 33

name="lname" value="Mouse" /> <br/> < input type="submit" value="Submit" />

Trang 34

c Thẻ <label>:

 Công dụng: dùng để khai báo một nhãn cho một điều khiển

 Công dụng: dùng để tạo một trường nhập dữ liệu mà người

dùng có thể đưa thông tin dữ liệu vào

 Nên sử dụng phần tử <label> để khai báo một nhãn cho

một điều khiển trong form

e Thẻ <textarea>:

 Công dụng: dùng để tạo một vùng văn bản (một điều khiển

nhập liệu trên nhiều dòng)

Trang 35

 Ví dụ: sử dụng các thẻ label, text, textarea

Trang 36

f Thẻ <input type=“radio" >:

dùng chỉ được phép chọn lựa một trong các tùy chọn sẵn có

 Cú pháp:

<input type="radio" name=" rbOption01 " id="id01" value="1">Chọn lựa 1

<input type="radio" name=" rbOption02 " id="id02" value="0" checked="checked" >Chọn lựa 2

…

 Lưu ý:

 Thuộc tính name trong các khai báo trên phải cùng tên

dùng được phép chọn lựa một hay nhiều các tùy chọn trong các tùy chọn sẵn có

Trang 37

 Ví dụ: sử dụng các thẻ Radio, Checkbox

<html>

<head> <title>My first page</title> </head>

<body>

< form action ="form_action.asp" method ="get">

<inputtype="radio" name="animal" id="dog"

Airplane: <input type="checkbox"

name="vehicle" value="Airplane" checked="check"

/>

</form>

<body>

</html>

Trang 38

i Thẻ <select> và <option>:

 Công dụng: dùng để tạo ra một danh sách đổ xuống,

thường dùng chung với thẻ <option>

 Công dụng: dùng để định nghĩa một mục chọn trong danh

sách đổ xuống (nên sử dụng chung với thuộc tính value)

k Thẻ <optgroup>:

 Công dụng: định nghĩa một nhóm các mục chọn trong danh

sách đổ xuống

Trang 39

<option value=“N80"> Nokia N80</ option>

<option value=“N6600"> Nokia 6600</ option>

<option value=“S8500"> Samsung 8500</ option>

</select>

</form>

<body>

</html>

Trang 40

 Ví dụ: sử dụng các thẻ Select, Option, Optgroup

<option value=“N80"> Nokia N80</ option>

</optgroup>

<optgroup label=“Samsung”>

Trang 41

m Thẻ <button>:

 Công dụng: dùng để tạo ra một nút bấm

 Cú pháp: có 3 dạng nút bấm

< input type="submit" name="bSubmit" id="bSubmit" value="Submit" />

< input type=“reset" name="bclear" id="bClear" value=“Clear" />

 Ý nghĩa:

một form

Trang 42

 Ví dụ: sử dụng các thẻ <button>

<html>

<head> <title>My first page</title> </head>

<body>

< form action ="form_action.asp" method ="get">

< label id="lInfor">Thông tin:

< input type="text" name=“txtInfor">

Trang 43

Thẻ Mô tả

<marquee> Thẻ tạo dòng chữ chạy trên màn hình

…

Trang 44

ĐH CÔNG NGHỆ THÔNG TIN http://sites.google.com/site/khaiphong

44

Định dạng
Số trang	45
Dung lượng	3,12 MB