Sử dụng HTML và CSS tạo giao diện

2.1. Cú pháp CSS

Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau.

Ví dụ:Để định màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng code sau: + Trong HTML: <body bgcolor=”#00BFF3”>

+ Trong CSS: body { background-color:#00BFF3; }

Nhìn qua ví dụ trên ít nhiều chúng ta cũng thấy đƣợc mối tƣơng đồng giữa các thuộc tính trong HTML và CSS cho nên nếu đã học qua HTML thì cũng sẽ rất dễ dàng tiếp thu CSS.

Cú pháp CSS cơ bản: Selector{ property:value; }

Trong đó:

+ Selector: Các đối tƣợng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó là các tag HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở bài học sau).

Ví dụ: body, h2, p, img, #title, #content, .username,…

Trong CSS ngoài viết tên selector theo tên tag, class, id. Chúng ta còn có thể viết tên selector theo phân cấp nhƣ để chỉ các ảnh ở trong #entry, chúng ta viết selector là #entry img, nhƣ vậy thì các thuộc tính chỉ định sẽ chỉ áp dụng riêng cho các ảnh nằm trong #entry.

Khi viết tên cho class, đôi khi sẽ có nhiều thành phần có cùng class đó, ví dụ nhƣ thẻ img và thẻ a cùng có class tên visitors nhƣng đây lại là hai đối tƣợng khác nhau, 1 cái là ảnh của ngƣời thăm, 1 cái là liên kết tới trang ngƣời thăm. Nên nếu khi viết CSS ta ghi là .visitors { width:50 } thì sẽ ảnh hƣởng tới cả hai thành phần.

Nên trong trƣờng hợp này, nếu có ý dùng CSS đó chỉ riêng phần ảnh thì chỉ nên ghi là img .visitors thôi.

Một lối viết tên selector nữa đó là dựa trên tên các thuộc tính có trong HTML. Ví dụ trong HTML ta có đoạn mã nhƣ vầy: <input name=”Search” type=”Text” value=”Key Word”>. Để áp dụng thuộc tính CSS cho riêng ô tìm kiếm này chúng ta sẽ dùng selector input[name=”Search”].

Ngoài việc viết tên selector cụ thể, chúng ta cũng có thể dùng một selector đại diện nhƣ * { color:red } sẽ tác động đến tất cả các thành phần có trên trang web làm cho chúng có text màu đỏ.

+ Property: Chính là các thuộc tính quy định cách trình bày. Ví dụ: background- color, font-family, color, padding, margin,…

Mỗi thuộc tính CSS phải đƣợc gán một giá trị. Nếu có nhiều hơn một thuộc tính cho một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân cách các thuộc tính. Tất cả các thuộc tính trong một selector sẽ đƣợc đặt trong một cặp ngoặc nhọn sau selector.

Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt }

lƣợng lƣu trữ CSS.

Ví dụ: body {

background:#FFF; bolor:#FF0000; font-size:14pt }

Đối với một trang web có nhiều thành phần có cùng một số thuộc tính, chúng ta có thể thực hiện gom gọn lại nhƣ sau:

h1 { color:#0000FF; text-transform:uppercase } h2 { color:#0000FF; text-transform:uppercase; } h3 { color:#0000FF; text-transform:uppercase; }  h1, h2, h3 { color:#0000FF; text-transform:uppercase; }

+ Value: Giá trị của thuộc tính. Ví dụ: nhƣ ví dụ trên value chính là #FFF dùng để định màu trắng cho nền trang.

Đối với một giá trị có khoảng trắng, nên đặt tất cả trong một dấu ngoặc kép. Ví dụ: font- family:”Times New Roman”

Đối với các giá trị là đơn vị đo, không nên đặt một khoảng cách giữa số đo với đơn vị của nó. Ví dụ: width:100 px. Nó sẽ làm CSS bị vô hiệu trên Mozilla/Firefox hay Netscape.

Chú thích trong CSS:

Cũng nhƣ nhiều ngôn ngữ web khác. Trong CSS, chúng ta cũng có thể viết chú thích cho các đoạn code để dễ dàng tìm, sửa chữa trong những lần cập nhật sau. Chú thích trong CSS đƣợc viết nhƣ sau /* Nội dung chú thích */

Ví dụ:

/* Màu chữ cho trang web */ body {

color:red }

2.2. Đơn vị CSS

Trong CSS2 hỗ trợ các loại đơn vị là đơn vị đo chiều dài và đơn vị đo góc, thời gian, cƣờng độ âm thanh và màu sắc. Tuy nhiên, sử dụng phổ biến nhất vẫn là đơn vị đo chiều dài và màu sắc. Sau đây là bảng liệt kê các đơn vị chiều dài và màu sắc dùng trong CSS:

Đơn vị Mô tả Đơn vị Mô tả

% Phần trăm ex 1 ex bằng chiều cao của chữ x

in thƣờng của font hiện hành. Do đó, đơn vị này không những phụ thuộc trên kích cỡ font chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14px nhƣng chiều cao chữ x của font Times và font Tohama là khác nhau.

in Inch (1 inch = 2.54 cm)

cm Centimeter

mm Millimeter

em 1 em tƣơng đƣơng kích thƣớc font hiện hành, nếu font hiện hành có kích cỡ 14px thì 1 em = 14 px. Đây là một đơn vị rất hữu ích trong việc hiển thị trang web.

pt Point (1 pt = 1/72 inch) pc Pica (1 pc = 12 pt)

px Pixels (điểm ảnh trên màn hình máy tính)

Đơn vị màu sắc

Đơn vị Mô tả

Color-name Tên màu tiếng Anh. Ví dụ: black, white, red, green, blue, cyan, magenta,…

RGB (r,g,b) Màu RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với nhau tạo ra vô số màu.

RGB

(%r,%g,%b)

Màu RGB với 3 giá trị R, G, B có trị từ 0 – 100% kết hợp.

Hexadecimal RGB Mã màu RGB dạng hệ thập lục. Ví dụ: #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ tƣơi. 2.3. Phân loại CSS 2.3.1. Inline Style

Khai báo ở đâu sử dụng ở đấy.

Cách sử dụng : Dùng thuộc tính Style cho các thẻ nhƣ là : <h1>, <p>, <div>, ... Cách khai báo : Style="tên: giá_trị; tên: giá_trị; ..."

Ví dụ: Khai báo Style cho thẻ tạo đoạn văn bản <p>

<p align="center" style="margin-top: 0; margin-bottom: 0; color:blue"> Ví dụ về sử dụng Inline Style cho thẻ tạo đoạn p </p>

2.3.2. Header Style

Khai báo:

</header> của trang web. Cách viết :

+ Định dạng chung cho một thẻ nào đó (Mọi dữ liệu trong trang web thuộc thẻ này thì đều có định dạng đã đƣợc khai báo) : Tên_thẻ { Thuộc tính 1: giá trị 1; Thuộc tính 2: giá trị 2; ... }

+ Đặt tên một class để khi nào thích dùng thì đƣa vào (Lƣu ý có dấu chấm ở đầu tên của class) : .Tên_class{ Thuộc tính 1: giá trị 1; Thuộc tính 2: giá trị 2; … }

Sử dụng : Sau khi khai báo thì có thể sử dụng ở mọi chỗ trong trang web với khai báo:

<Tên_thẻ class=Tên_class>

Dữ liệu trong </Tên_thẻ> sẽ có định dạng do class là Tên_class quy định Ví dụ về khai báo và sử dụng header style :

<STYLE TYPE="TEXT/CSS"> .class_font14{ font-family:tahoma; font-size:10 } UL { font-family:tahoma; font-size:12; text-align:justify; }

</STYLE> </head> <body>

<p align="center"><b><font color="#008000">SỬ DỤNG INLINE STYLE</font></b></p> <p align="center" style="margin-top: 0; margin-bottom: 0; color:blue">Ví dụ về sử dụng Inline Style cho thẻ tạo đoạn p </p>

<p align="center"><b><font color="#008000">SỬ DỤNG HEADER STYLE</font></b></p>

<p class=class_font14 align="center" style="margin-top: 0; margin-bottom: 0;">Ví dụ về sử dụng Header Style cho thẻ tạo đoạn p </p>

</body> </html>

2.3.3. External Style

Để tiện cho việc sửa chữa, quản lý ... các định dạng Style thì các mã lệnh định dạng sẽ đƣợc gộp vào một file gọi là file *.CSS và sử dụng khai báo LINK để đƣa vào trang web.

Cách khai báo file :

<link href="tên_file.css" rel="stylesheet" type="text/css">

Ví dụ :

Tạo một file định dạng CSS tên là style_sheet.css. Trong đó định dạng một class tên là class_li_file_css bao gồm các thuộc tính nhƣ sau :

.class_li_file_css {

font-family:tahoma; font-size:10;

text-align:center; }

Khai báo file style_sheet.css và sử dụng định dạng class_li_file_css cho thẻ LI trong trang web nhƣ sau :

<b><font color="#008000">SỬ DỤNG EXTERNAL STYLE CHO THẺ LI</font></b> <ul>

</p> </body> </html>

2.4. Thuộc tính và giá trị thuộc tính

Thuộc tính Mô

tả Giá trị

Backgro und

background Thuộc tính rút gọn cho tất cả

các thuộc tính nền. background-color background-image background-repeat background-attachment background-position

background-color Thiết lập màu nền cho đối

tƣợng. <color> transparent

background-image Thiết lập ảnh nền cho đối

tƣợng. url none

background-repeat Thiết lập chế độ lặp ảnh nền. repeat

repeat-x repeat-y no-repeat

background-

attachment Thiết lập ảnh nền cuộn/cố

định. scrollfixed

background-position Thiết lập vị trí thể hiện ảnh

nền. top lefttop center top right center left center center center right bottom left bottom center bottom right x% y% x y F o

n t

font Thuộc tính ngắn cho tất cả

các thiết lập về font. font-style font-variant font-weight font-size font-family

font-style Thiết lập chế độ in nghiêng,

xiên hay bình thƣờng. normalitalic oblique

font-variant Thiết lập font bình thƣờng hay small-caps

normal

small-caps

font-weight Thiết lập in đậm, thƣờng. normal

bold bolder lighter 100 – 900

font-size Thiết lập kích cỡ font. xx-small

x-small small medium large x-large xx-large smaller larger <length> %

font-family Thiết lập loại font hiển thị

trang web/ đối tƣợng web. family-name generic-family

T e x t

color Thiết lập màu chữ. <color>

text-indent Thiết lập khoảng thụt đầu

dòng. <length> %

text-align Thiết lập chế độ canh văn

bản. leftright

center justify

letter-spacing Thiết lập khoảng cách giữa

các ký tự. normal<length>

text-decoration Thêm hiệu ứng đặc biệt cho

overline

line-through blink

text-transform Change case văn bản. none

upper lower capitalize Pseudo-

classes

:link Liên kết chƣa thăm.

:hover Mouse over 1 thành phần.

:visited Liên kết đã thăm.

:active Kích hoạt 1 thành phần

Ma rgi n

margin Thuộc tính ngắn cho các thiết

lập margin. margin-top margin-right margin-bottom margin-left

margin-top Thiết lập canh lề trên cho một

thành phần. auto<length> %

margin-right Thiết lập canh lề phải cho

một thành phần. auto<length> %

margin-bottom Thiết lập canh lề dƣới cho

một thành phần. auto<length> %

margin-left Thiết lập canh lề trái cho một

thành phần. auto<length> %

Pad ding

padding Thuộc tính ngắn cho các thiết

lập padding. padding-top padding -right padding -bottom padding -left

padding-top Thiết lập đệm trên cho một

thành phần. <length> %

padding-right Thiết lập đệm phải cho một

thành phần. <length> %

padding-bottom Thiết lập đệm dƣới cho một

thành phần. <length> %

padding-left Thiết lập đệm trái cho một

Bo rd er

border Thuộc tính ngắn cho tất cả

các thiết lập border cho một thành phần.

border-width border-color border-style

border-width Thiết lập độ rộng đƣờng viền. thin

medium thick <length>

border-color Thiết lập màu cho đƣờng

viền. <color>

border-style Thiết lập kiểu đƣờng viền. none

hidden solid dotted dashed double groove ridge inset outset

border-top-width Thiết lập độ rộng viền phía

trên. <border-width>

border-top-color Thiết lập màu viền phía trên. <border-color>

border-top-style Thiết lập kiểu viền phía trên. <border-style>

border-right-width Thiết lập độ rộng viền phải. <border-width>

border-right-color Thiết lập màu viền phải. <border-color>

border-right-style Thiết lập kiểu viền phải. <border-style>

border-bottom-width Thiết lập độ rộng viền bên

dƣới. <border-width>

border-bottom-color Thiết lập màu viền bên dƣới. <border-color>

border-bottom-style Thiết lập kiểu viền bên dƣới. <border-style>

border-left-width Thiết lập độ rộng viền trái. <border-width>

border-left-color Thiết lập màu viền trái. <border-color>

border-left-style Thiết lập kiểu viền trái. <border-style>

W id th

width Thiết lập chiều rộng đối

tƣợng. auto<length> %

max-width Thiết lập chiều rộng tối đa

cho đối tƣợng. none<length> %

min-width Thiết lập chiều rộng tối thiểu

cho một đối tƣợng. <length> %

He igh t

height Thiết lập chiều cao cho một

đối tƣợng. auto<length> %

max-height Thiết lập chiều cao tối đa cho

một đối tƣợng. none<length> %

min-height Thiết lập chiều cao tối thiểu

cho một đối tƣợng. <length> %

Layout Position

float Cố định đối tƣợng. left

right none

clear Cách thức xử sự của một đối

tƣợng liên quan với đối tƣợng floated. left righ t bot h

position định vị đối tƣợng relative

absolute

top Thiết lập tọa độ đỉnh đối

tƣợng. auto <length> %

right Thiết lập tọa độ bên phải đối

tƣợng. auto <length> %

bottom Thiết lập tọa độ đáy đối

tƣợng. auto <length> %

left Thiết lập tọa độ bên trái đối

tƣợng. auto <length>

z-index Định lớp đối tƣợng. auto

CHƢƠNG IV: NGÔN NGỮ LẬP TRÌNH PHP 1. PHP là gì?

PHP viết tắt bởi cụm từ Personal Home Page do Rasmus Lerdorf phát minh ra, đƣợc công bố và phát triển từ năm 1994. Lúc đầu chỉ là một bộ đặc tả Perl. Đƣợc sử dụng để lƣu dấu vết của ngƣời dùng trên các trang web. Sau đó, Rasmus Lerdorf đã phát triển PHP nhƣ là một máy đặc tả (Scripting engine). Vào giữa năm 1997, PHP đã đƣợc phát triển nhanh chóng trong sự yêu thích của nhiều ngƣời. PHP đã không còn là một dự án cá nhân của Rasmus Lerdorf và đã trở thành một công nghệ web quan trọng. Zeev Suraski và Andi Gutmans đã hoàn thiện việc phân tích cú pháp cho ngôn ngữ để PHP3 ra đời vào tháng 6 năm 1998 (phiên bản này có phần mở rộng là *.PHP3). Ngay sau đó PHP4 ra đời (phiên bản này không phải có phần mở rộng *.PHP4 mà là *.PHP). PHP bây giờ đƣợc gọi là PHP HyperText PreProcesor. PHP là ngôn ngữ đặc tả chạy ở phía Server để tạo lập các trang web động

Cú pháp của PHP tƣơng tự nhƣ ngôn ngữ Perl và C. PHP chạy trên các phần mềm Web Server nhƣ Apacche, Microsoft’ IIS

PHP là ngôn ngữ đặc tả chạy ở phía Server (Server-side), giống nhƣ ASP PHP thực hiện ở phía Server

PHP hỗ trợ kết nối với nhiều cơ sở dữ liệu nhƣ MySQL, SQL Server, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc,..

PHP là phần mềm nguồn mở

PHP có thể sử dụng download tự do

2. FILE PHP

Các file PHP là các file văn bản chứa các thẻ HTML và các đặc tả (script) Các file PHP trả lại cho trình duyệt duới dạng HTML

File PHP có phần mở rộng *.PHP

3. Tại sao phải dùng PHP?

PHP chạy trên nền các hệ điều hành nhƣ Windows, Linux, Unix,..

PHP chạy và đƣợc dịch trên hầu hết các phần mềm Web server nhƣ Apache, IIS, .. PHP có thể download miễn phí từ địa chỉ: www.php.net

PHP dễ học, dễ dùng và chạy hiệu quả trên phía Server

Download PHP http://w3schools.com/php

http://www.php.net/downloads.php

Download MySQL Database http://www.mysql.com/downloads/index.html

Download Apache Server http://httpd.apache.org/download.cgi

4. Cú pháp căn bản của PHP

Cú pháp chính trong PHP tƣơng tự nhƣ cú pháp trong ngôn ngữ lập trình C

Một đoạn chƣơng trình PHP có thể viết độc lập trên một trang hoặc nhúng vào tài liệu, nó đƣợc bắt đầu bởi <?PHP và kết thúc bởi ?>

Cụ thể:

<?php

Các lệnh PHP; ?>

Khi lập trình PHP phải chú ý các qui tắc nhƣ sau:  Cuối câu lệnh phải có dấu ;

 Biến trong PHP có tiền tố là $

 Mỗi phƣơng thức đều bắt đầu bởi { và kết thúc bởi }  Khi khai báo biến thì không có kiểu dữ liệu

 Sử dụng dấu // hoặc # ở đầu dòng của mỗi câu chú thích  Sử dụng /* và */ cho mỗi đoạn ghi chú

 Khai báo biến có phân biệt chữ hoa và chữ thƣờng

Ví dụ: Đoạn chƣơng trang in ra dòng thông báo “Hello World !!! “

<HTML> <BODY> <?php

// Đây là đoạn chương trình in ra thông báo “Hello World !!!” echo “Hello World !!!”; /* in ra trình duyệt Hello World !!!” */

</BODY> </HTML>

<?php

echo “Hello World !!!”; ?>

5. Khai báo biến trong PHP

Các biến trong PHP không cần phải khai báo trƣớc, các biến khai báo không cần phải định nghĩa kiểu dữ liệu, các biến phải có tiền tố $ trƣớc tên biến, đƣợc khai báo nhƣ sau:

$<tên biến>[=<giá trị của biến>];

Ví dụ: <?php $txt=”Hello Worrld !!!”; $number=6; ?> 6. Các phép toán trong PHP

Khai báo biến trong PHP

Kiểu dữ liệu trong PHP