tài liệu thực hành lập trình web

A piece of computer code Sample output from a computer program Keyboard input Variable... Pseudo-element x c nh ki u cho ký tự u tiên first-letter hay n u tiên first-line trong m t

Trang 1

 Trang ch liệt k c c ch m i nh t c W sit th n tin tìm nh n vi n

th n tin tìm việc làm

 Tr n c nh n liệt k th n tin c nh n c n i n liệt k c c tin t c o

n i n t o r liệt k c c th n tin m i c w site

 Tr n so n th o tin t c cho n i n t o tin t c và n

Trang 2

c th n o s c ph n chi th o c c l nh vực c th thực hiện ch c

n n ph n lo i tin t c c l nh vực s c qu n l i n i qu n tr hệ th n

Trang 3

– Page 3

I.5 Wire frame – layout

Home – main layout

Login –Logout layout

Banner – ti u đề ch nh

in t c do qu n trị đăng

in t c do người dùng hi n tại đăng

in t c do người khác đăng

in nhắn ri ng 1

Trang 4

– Page 4

Profile – main layout

Manager Topic Layout

Banner – ti u đề ch nh

Trang 5

– Page 5

Chương II g n ng

II.1 - Tag

Trang n i un T c trình ày th n qu c c th n i un Tag) t

n i un tron html c th là v n n hình nh phim m th nh c c n i un kh c trình ày m t n i un t ph i n m t th n i un nh u v tr n i un hiệu n c nh h ng c th l ng nhau: n u công việc gi n nh u thì th nào

rong đ th a c thu c t nh href, giá trị l “http://www.w3schools.com”

<html>

<head>

<title>Trang WEB đầu tiên của tôi</title>

Trang 6

y là th trình ày c c th n tin chun v tr n W th n tin s kh n hi n

th trực ti p tr n màn hình c w sit tìm ki m s c n c vào n i un c th

h ph n lo i và tìm ki m th n tin

Tron th h c th ch c c th <title>, <meta>, <style>, <script>,

n i un m t th h

<head>

<title>Vi du lap trinh Web</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="keywords" content="computer, hardware, student" />

<link rel="icon" type="image/png" href="myicon.png" />

<link rel="stylesheet" type="text/css" href="default.css" />

<script src="/script/somescript.js" type="text/javascript"></script>

Trang 7

– Page 7

c <body>

Th o y n x c nh n i un c trình ày tron W p n

c t u s u khi k t th c h và k t th c tr c html Tron m t tr n n i

un ch c uy nh t m t th o y

c thu c t nh c n c o y

alink color àu c li n k t khi c k ch ho t

background URL X c nh nh n n c tr n W

bgcolor color c nh màu n n c tr n W

link color àu c li n k t khi ch vào l n nào

text color c nh màu c v n n tron tr n

vlink color àu c li n k t s u khi vào m t l n

Trang 8

<code>A piece of computer code</code><br>

<samp>Sample output from a computer program</samp><br>

<kbd>Keyboard input</kbd><br>

<var>Variable</var>

</body>

</html>

Trang 9

o p r nt top tron tr n h p tr n W p c nhi u khun

r m tr n li n k t s hiện r trình uyệt ch nh

o r m n m tron tr n h p tr n W p c nhi u khun

r m tr n li n k t s hiện r khun c t n t n n framename

II.5

n th im và k t h p v i c c thu c t nh trình ày

bottom middle left right

nh l hình nh

Trang 10

– Page 10

II.6

Trình ày n i un c m t n t l t l

a ác thu c t nh c b n của th table

Attribute Value Description

center right

nh l c c v n n n tron c n

bgcolor rgb(x,x,x)

#xxxxxx colorname

align Right, left,centerjustify, char nh l n i un tr n m t n

bgcolor rgb(x,x,x)

#xxxxxx colorname

àu s c tr n m t n

valign Top, middle, bottom, baseline nh l v n n th o chi u c o

Trang 11

align Left, right, center,

Trang 13

– Page 13

II.7 :

Sinh viên thi t k tập tin c t n là userprofile.html, c n i un nh

hình s u

sinh vi n thi t k tập tin c t n topic.html, c n i un nh hình s u

sinh viên sun n i un cho tập tin c t n userprofile.html, v i c c

o c l p h c n hiệp v kh c ập trình WEB

- Kinh n hiệm n h n hiệp ch c v ph n c n ty n m làm việc

Trang 14

– Page 14

sinh vi n thi t k c c l yout c tài c m t

ch n

Bài i i

T i tập tin main.htmlc n i un nh s u

ch n n t l vào tron ph n o y tron c này sinh vi n

c n l u c c k ch th c chi u n n chi u c sinh vi n s n valign="top|middle|bottom" i u ch nh v tr c nh l tr n i tron m t

Trang 16

– Page 16

Chương III g n ng i

a h cript

Th script n ch n vào tr n w nh n o n ch n trình x l c

h i n n n c h tr ch nh là j v scipt v script

t n n n script là m t phi n n n i n c m t n n n lập trình c

n v cript là m t n n n lập trình th n n tron ti n trình k WEB n c

th c vào tron m t tr n html JavaScript c h tr i h u h t trình uyệt và r àn cho việc tìm hi u n

Trang 17

– Page 17

c

 u t liệu vào tr n html

 ập trình cho c c sự kiện

 i m tr liệu nhập vào

var name="Doe", age=30, job="carpenter";

d i u d li u trong ava cript

c i n liệu tron v cript c ki u liệu n h là cun m t

i n kh i o c th n cho nhi u ki u liệu kh c nh u i u liệu c m t i n

ch c x c nh khi t i t i tr c n Tuy nhi n tron j v cript c c c ki u liệu c n nh s u String, Number, Boolean, Array, Object, Null, Undefined

1 i u trin c nh u n c p u ho c

var carname1="Volvo XC60";

var carname2='Volvo XC60';

var answer1="It's alright";

var answer2="He is called 'Johnny'";

var answer3='He is called "Johnny"';

Trang 18

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.indexOf("Apple");// ket qua bang 2

fruits.indexOf("Kiwi");// ket qua bang -1

id : 5566 };

T t c c c ki u liệu tron j v script u là ki u liệu i t n i m t

i n liệu t n n v i i t n i i t n c thành ph n ch nh – liệu thành ph n hàm thành ph n ch c n n tr n i t n

var s= “Chao ban”; ki u d li u String

s.toUpperCase(); h m th nh vi n i ch hoa

var len=s length; d li u th nh vi n d i length

tìm hi u chi ti t v t n l p i t n tron j v script sinh vi n vào tr n

n i n http://www.w3schools.com/jsref/default.asp

Trang 19

– Page 19

e u l nh trong ava cript

Tron v cript c u lệnh n y u c u trình uyệt thực hiện c c c n việc

p id=”demo” hao Dolly /p

<script>

document.getElementById("demo").innerHTML="Hello Dolly";

</script>

u lệnh tron script n y u c u trình uyệt ocum nt th y i n i

un c ph n t c t n i là mo v i n i un m i inn r T llo olly

u ; n ph n c ch c u lệnh j v script

JavaScript codelà m t tập h p c c c u lệnh j v script

JavaScript Code Blocks– kh i lệnh c c u lệnh c th nh m thành m t kh i

v cript là m t phi n n thu n c n n n c v o n c t t c c c

c u tr c lập trình c n n n v n th i c c c u tr c này c n c t nh t n

Trang 20

g ập tr nh h m trong ava cript

t hàm tron v cript c c u tr c nh s u

Trang 23

setAttributeNode() t m t thu c t nh cho m t no

III.3 trong javascript :

Tron j v script ch n t c th lập trình sự kiện v nt cho c c th n i un

v i c c sự kiện nh s u

T n sự kiện i n i i

onload ự kiện khi i t n c hi n th

onunload ự kiện khi i t n c n

onchange ự kiện khi i t n i i tr

onmouseover ự kiện khi i chuy n chu t tron iện

t ch i t n onmouseout ự kiện khi i chuy n chu t r kh i iện

t ch i t n onmousedown ự kiện khi n chu t tron iện t ch i

t n onmouseup ự kiện khi u n chu t tron iện t ch

i t n onclick ự kiện khi nh p chu t tr i chu t tron

iện t ch i t n

Trang 24

alert("Chao " + name + ", lam " + job);

//hien thi thong bao

Trang 25

+bx+c=0

Bài 5 inh vi n t o m t orm nhập n ày th n n m tron m t w p n

j v script ki m tr t nh h p lệ c 3 i tr n ày th n n m Bài 6 inh vi n s n c c i t n ocum nt l m nt ttr t o m inl yout

ài tập cu i ch n

Trang 26

n v i m c ch

- Th y i màu s c n n nh n n

- ont ch trình ày

- iện t ch trình ày

- hon c ch trình ày th n i un

- c hiệu n trình ày kh c

c l i ch khi s n

- Ti t kiệm th i i n thi t k

- T c trình ày n i un nh nh

- àn cho việc o trì

- àn th y i hình th c trình ày

- T o sự n nh t v hình th c tron m t w sit

- c h tr i nhi u trình uyệt và thi t

- p n c chu n trình ày v W

t quy inh c hi u nh là t i tr cho c c thu c t nh c m t lo i

th n i un c tr n WEB c ph p nh n h c x c nh nh s u

Tron :

 l ctor x c nh thành ph n n i un c n trình ày t c th x c

nh thành ph n này th n qu tagName, id, className, attributeName T c th nh m nhi u lự ch n l i tron m t quy

nh v

o Selector1,selector 2, s l ctor 3

<style>

Selector { attributeName1 : attributeValue1;

Trang 27

In our CSS tutorial you will learn how to use CSS </p>

center text with class name = "myClass"</center>

</body>

a Descendent selector context :

t s l ctor c ch nhi u ph n c p ph n c p th o th tự t tr i s n ph i

Trang 28

– Page 28

b Style for children

uy nh cho c c s l ctor con trực ti p c m t s l ctor

c Style for sibling

uy nh cho c c s l ctor li n k ph s u c m t s l ctor

o Link :tr ng thái khi liên k tch ckíchho t

o Visited :tr ng thái khi liên k t ckíchho t

o Hover :tr ng thái khi ng i dùng di chuy nchu t qua

o Active :tr ng thái khi ng i dùng click chu tvào

ph p a:pseudo-class{… … …}

Trang 29

<a href = “www ctu edu vn”> i n k t website i h c c n th < a>

ii Dynamic pseudo-class x c nh ki u cho m t thành ph n httml ph thu c vào c ch n i n t n t c v i nó

c t n t c c n i n hover, active, focus

iii Pseudo-element x c nh ki u cho ký tự u tiên (first-letter) hay

n u tiên (first-line ) trong m t kh i v n n

B n liệt k c c Pseudo Classes/Elements

Selector Example Example description

:link a:link Selects all unvisited links :visited a:visited Selects all visited links :active a:active Selects the active link :hover a:hover Selects links on mouse over :focus input:focus Selects the input element which has focus :first-letter p:first-

letter

Selects the first letter of every <p> element

:first-line p:first-line Selects the first line of every <p> element :first-child p:first-

child

Selects every <p> elements that is the first child of its parent

Trang 30

– Page 30

:before p:before Insert content before every <p> element :after p:after Insert content after every <p> element

:lang(language) p:lang(it) Selects every <p> element with a lang

attribute value starting with "it"

b Internal style sheet (embedded):

Các luật css c t trong th styl nh d ng cho trang hiện hành

th c th <style> trong th h h y o y n t trong th h và tr c các

o n mã javascript

c External style sheet:

Các luật css c t trong các file riêng biệt (.css) có th c truy c p b i

b t k trang web nào b ng cách dùng th <link> hay lệnh @import

Tron il html n th

<link href="default.css" type="text/css" media="all" />

Tron tập tin n th

@import url(URL)

@import url(default.css);

Trang 31

Bài inh vi n thực hiện ài tập c cun c p k m th o tài liệu

Bài inh vi n trình ày l i n h t t c c c thu c t nh c tron ài thực tập

k m th o Bài 3 T o main l yout n m hình Box mo l

Trang 32

– Page 32

Chương V g n ng PHP

V.1

t o n ch n trình PHP ph i c t tron th PHP

a = “chao b n”; ki u chu i

$a=10; s nguy n

$a=10.5 s th c

Trang 33

Ta c m ng chi u

1 2

3 4

5 6 a[“a”][ ]=1; a[“a”]= ;

a[“b”][ ]=1; a[“b”]= ;

$a = array(

"a"=>array(1,2), "b"=>array(3,4));

Ch s k t h p a[“a”][1]= ?

ch truy xu t n m t ph n t tron m n

Trang 36

– Page 36

V.5

ph p lập trình hàm

function <t n h m>( tham so) {

public function write(){

echo “Tieu de : ” this->title “<br>”;

echo “ oi dung : ” this->content “<br>”;

} }

Trang 37

o m n cho tr c c 3 ph n t topic hi n th l n l t t n topic Bài 4 h i o m t l p i t n th hiện c c thành ph n c m t

Webtemplate

Trang 38

Tron c c thu c tính quan tr n nh s u

 A = “UR ” là thu c t nh xác định n i nhận d li u được nhập trong

Form

 Metho = “ | ” là thu c t nh xác đinh phư ng th c g i d li u (chỉ

sử dụng 01 trong 02 giá trị post ho c get)

 = “ ” có các giá trị như sau

o _blank : trang web th hai s m trên m t tab m i (trình duyệt m i)

o _self : trang web th hai s m t i v tr n x m

 = “ ” tên của orm dung đ phân bi t trên m t trang có nhiều

- Th input typ t xt cho ph p nhập liệu tr n n

- Th t xt r rows cols t xt r cho ph p nhập v n n

?>

GET

POST

Trang 39

</div>

input typ su mit v lu i liệu

t lệnh su mit cho ph p ch n t y u c u i liệu n tr n W th h i

f Cancel

<input typ c nc l v lu xo liệu

t lệnh c nc l cho ph p ch n t y u c u xo liệu nhập

g D li u n

n th input typ hi n i p t n u m t th n tin kh n hiện r

tr n tr n w i Tron tr n w nhận v n c th truy xu t th n tin

Định dạng
Số trang	48
Dung lượng	1,4 MB