Professional Documents
Culture Documents
HTML Full
HTML Full
Bi2.Mtsthcbn
5.Mtsthnhdngvnbn
a) Thnhdngonvnbn<p>
- Cphp:<p>onvnbn</p>
- Th<p>xcnhcho1onvnbnvtngxungdng
- Ccthuctnh
+align:Cnchnhonvn,gmccgitr:center(cngia),left(cntri),
right(cnphi),justify(cnu).
Vd:<palign=right>onvnbnnyscnphi</p>
b)Thnhdngkt
- <b></b>:Inm
- <i></i>:Innghing
- <u></u>:Gchchn
- <s></s>:Gchngang
- <sup></sup>:a1ktlntrn(m).AX
2
+BX+C=0
- <sub></sub>:a1ktxungdi.H
2
O
- <pre></pre>:Ginguynonvnbn(Nhkhicode)
Bi2.Mtsthcbn
Vd:http://jsbin.com/ejuwet/1/edit
c)Thnhdngfontch
- Cphp:<font>Nidungcnnhdng</font>
- Thuctnh:
+Color:Much.Vd:red,green,#FFFFFF(Hhex).
+Size:Kchthcch.
+Face:Quynhfontch.Nh:Arial,Tahoma,TimeNewRoman
Vd:<fontcolor=greensize=5face=Arial>Vdfontch</font>
Bi2.Mtsthcbn
6.Mtsthkhc
- Th<div>:
L1thquantrngtrongHTML,csdngphnchiacclptrongwebsite
thaychovicdngbng(table)nhtrcy(SnghincuthmphnCSS).
- Thxungdng<br>:
TrongHTMLxung1dngmitaphisdngthxungdng<br>hoc<br/>
(TheochunXHTML).C1sthmcnhnidungbntrongxungdngnh:
<p>,<div>,<h1>n<h6>,
Vd:http://jsbin.com/oruyab/1/edit
- Thkngang<hr/>tora1ngkngangtrnwebsitecabn
Bi2.Mtsthcbn
- Thuctnh:
+size:lncangk(dy).nvPixel
+width:lnchiungangcangk(Pixel)
+color:Mucangk
+align:Cnchnhvtrcangk.Center(giawebsite),left(tri),
right(phi)
Vd:http://jsbin.com/uyejuq/1/edit
Bi3.Hnhnh&Linkt
1.Thhnhnh<img/>
- Cphp:<imgsrc=ng_dn_nh/>
- Thuctnh
+src=url:ngdncanhcnhinth
+border=gi_tr:ngvincanh.Vdborder=0
+width=gi_tr:rngcanh,nvpixel.
+height=gi_tr:caocanh,nvpixel.
+alt=:Nidunghinththaythkhinhkhngchinth(Dosaingdn,
nhkhngctiv,).
+title=:Tiucanh(Khidichutquanhshinthtiu)
+vspace:Khongcchtnhnthnhphnkhcbnngoi(Theochiudc)
+hspace:Khongcchtnhnthnhphnkhcbnngoi(Theochiungang)
Ch:Khisdngth<img/>nntthuctnhaltvtitletrongmitrnghp.2
thuctnhnyctcdngSEOchowebsite,ngthichunwebmw3cara
yucuminhphic.
Vd:http://jsbin.com/ofedez/1/edit
<imgsrc="http://vietsource.net/banner.png"border="2"alt="Nidungkhinhkhng
hinth"title="Tiucanh"/>
Bi3.Hnhnh&Linkt
Bi3.Hnhnh&Linkt
2.Thlinkt
- Cphp:<ahref=ng_dn>Nidung</a>
- Thuctnh:
+href=url:ngdn
+target=gi_tr:Phngthckhimlinkt.Gmccgitr
_self(mlinkttabhinti),_blank(mvi1casmi),_parent(mvi
frame),_top(khcvi_parent,_topmvictrang)
+title:Tiucalinkt
Vd:
<ahref=http://vietsource.nettarget=_blanktitle=VSNet>Trangch</a>
- Linkthnhnh:Trongtrnghplinktl1hnhnh,chngtacththay
Nidungbngcphphnhnh
Vd:
<ahref=http://vietsource.nettarget=_blanktitle=Diendanlaptrinh,manguon>
<imgsrc=http://vietsource.net/banner.png/>
</a>
nhdunitrang
- Lphngphpnhdu1vtrbtktrnwebsite,chophpchngtalin
kttivtr.
- VdtrnkhichngtaclickvoutrangthscchuyntivtrTrang
ch.sdngchngtacntthuctnhnamechovtrcnlinktti,
linktth2chngtasdnghref=#name_valueviname_valuelgitr
cathuctnhname.
- http://jsbin.com/etirof/1/edit
nhdungoitrang
- Tngtnhdunitrang,nhdungoitranglphngphplinktti
1vtrnotiwebsitebnngoi.
Vd:<ahref=http://vietsource.net/forum/forum.php#danhdau>Home</a>
Linkttoemail
- Lchcnngtolinktemail.
Vd:<ahref=mailto:vucongtinh@gmail.com?subject=Chobn
Tnh&body=Mnhcchtthcmcmunhibn>Clickvoygi
Email</a>
- Ngoiracthgi1
lctinhiuemail,
miemailcngicch
nhaubi1duphy.
Bitp
Bi1:Thitk1websitenhhnh1(baitap/1-btap1.jpg)
Bi2:Thitk1websitenhhnh2(baitap/1-btap2.jpg)
(Linknhhttp://i.imgur.com/0iMLV.jpg)
Bi3:Thitk1websitenhhnh3(baitap/1-btap3.jpg)
Bi4.TobngtrongHTML
- Trcybng(table)csdngxydngbccwebsite
- biudinbngtrongHTMLchngtasdngcpth<table></table>.Bn
trongcpthnycha1sthkhccchcnngnhnghaccthuctnh
trongbng:dng,ct,
1. Th<table>
- Cpth<table></table>dngkhaibo1bng
- Ccthuctnh:
+width:rngcabng,thngsdnggitrkchthccnv%hocpx
+height:Chiucaobng
+bgcolor:nhmunncabng
+background:nhnhnncabng
+border:lnngvincabng
+bordercolor:Mucangvin
+align:Cnvtrcabngsovitonwebsite.Gitr:left,right,center
+cellspacing:nhdycakhung
+cellpadding:nhkhongcchtnidungnngbaocabng
- Vd:
<tablewidth=500border=3bordercolor=redcellspacing=0cellpadding=20>
</table>
2.Th<tr></tr>:tablerow
-Xcnhdngtrongbng,nmbntrongcpth<table></table>
Vd:
<table>
<tr></tr>
<tr></tr>
</table>
Baonhiucpth<tr>ngvitngdngtrong1bng
- Mtsthuctnhtrongth<tr>
+height:Khaibochiucaocadng(lndng)
+align:nhvtrnidungtrongdng(theochiungang):left(tri),right(phi),
center(gia)
+valign:nhvtrnidungtheochiudc:top(trn),middle(gia),bottom(di)
3.Th<td></td>:tabledata
- Thnhnghacttrongbng,chadliucabng(tabledata)
- Cpth<td></td>nmbntrongcpth<tr></tr>
Vd:http://jsbin.com/iqukih/1/edit
- Mtsthuctnh:
+width:rngcact
+height:Chiucaocact
+align:nhvtrnidungtrongct(theochiungang):left(tri),right(phi),
center(gia)
+valign:nhvtrnidungtheochiudc:top(trn),middle(gia),bottom(di)
4. Mtsthkhc
- <th></th>(tableheading)Tngtcpth<td></td>tuynhin<th>dngtrong
trnghpnuchatiucact.Nidungtrongcpthnycin
mvcngiatng.Vd:http://jsbin.com/iqukih/2/edit
- <tbbody>:Bntrongcpth<table>dngnhmccnhmdliuvinhau
Mtslu:
- Scpth<td>(sct)trongccdngphibngnhautrnhvkhungca
bng
- ivitrng(khngcnidung)nnsdngth<br>hoc thaycho
khongtrng
5. Gpct,dngtrongbng
- Lvictybinbng
bngvicgpccct
haydnglivinhau
-colspan=x:Gpxcttnhtctangtthuctnhcolspan
-rowspan=y:Gpyhngtnhthngangxt
Lu:Saukhigpphiloibsdng(hocct)cnibng
Xemvd:http://jsbin.com/iqukih/4/editloib1ctdngth2.Vdng1
c2dngcgp.
- Vd:http://jsbin.com/iqukih/7/edit
Videothamkho:http://bit.ly/vsnet-table
Bitp
-To1bngnhhnh1(baitap/2-btap1.jpg)
-To1websitenhhnh1v2(baitap/2-btap2-1.pngvbaitap/2-btap2-2.png)
-To1websitenhhnh1(baitap/2-btap3.png)
Mcdhinnaykhngsdngtabledngbcctrangnhngnvnl1thnh
phnquantrngvcngccbnthyckhkhnkhisdngtablennti
abitpdngbcctrangsdngtable
- TrongHTMLc3loidanhsch
+ol:orderedlist:Danhschcnhtrtt
+ul:unorderedlist:Danhschkhngnhtrtt
+dl:definitionlist:Danhschnhngha
- NgoitodanhschccthtrncnsdngxydnghthngMenu
cawebsite
- Bntrongcccpth<ol></ol>,<dl></dl>v<ul></ul>lcccpth
<li></li>hay<dd></dd>v<dt></dt>
1. Danhschctrtt<ol></ol>
-Tonndanhschcnhtht1,2,3,bntronglcccpthnhngha
danhsch<li></li>
- Cththayicchhinthkhisdng<ol>bngcchsdngthuctnh
type.
+a:Hinththeokiuktthnga,b,c
+A:HinththeodngkthoaA,B,C..
+i:HinthdngLaMthngi,ii,iii,iv,..
+I:HinthdangLaMI,II,III,IV,..
+square:Hnhvung
+circle:Hnhtrnmurng(mutrng)
+disc:Hnhtrnc(chmtrnmuen)
- btuvi1gitrkhc1chngtasdngthuctnhstart=nvinl
gitrbtucadanhsch
- Vd:http://jsbin.com/abulim/3/edit
2.Danhschkhngtrtt<ul></ul>
- Lkiudanhschnhthtcclistmcnhlcchnhtrnc(chmtrn
en)
- Cthtybinsangcckiukhc:nhtrtt,vung,hnhtrnrng,..
Tngtnhivi<ol></ol>
- loibcckiunhthtivi2loiolvulchngtasdngthuc
tnhtypevigitrlnone.
Vd:http://jsbin.com/abulim/6/edit
-NgoiracthsdngCSStybindanhschtrongHTML
(StmhiuphnCSS)
3.Danhschnhngha
- Khcviolvul,cpth<dl></dl>cdngnhngha1itngno
- Bntrongcpthdlchacccpth
+dd(DefinitionDescription):Thmtnhngha
+dt(Definitionterm):Thnhngha1thutngno.
Vd:Webmaster(chwebsite):Lnhngngicqunl1hoc1swebsite
no
BiTp:
-Thitkwebsitenh:Hnh1(baitap/3-btap1.jpg)
-Tomenudcnh:File1(baitap/3-btap2.html)
- Biumu(form)lmtthnhphnthnggpvquantrngtrongmiwebsite,
formtonntnhtngtcgiawebsitevngidngquanhngphnnhp,truy
xutdliucngnhgidliu.Nh:formngk,ngnhp,tmkim,giemail
linh,
1.HTMLForm
- Cphp:<form></form>
- Mtsthuctnh
+name:Tncaform,ttysaochodnh,cmitngquanviitngform
+action:Linkxldliu
+method:Phngthctruyndliu,c2gitrlGETvPOST
(StmhiuphnPHP)
Vd:http://jsbin.com/afoqir/1/edit
2.CcitngtrongForm
2.1.Thinput
a) Textbox
- Tonnitngchophpnhpdliuvnbn
- Cphp:<inputtype=textname=value=size=/>
+name:Tncatextbox,tty,ckthpviPHPhayJavascripttotnh
tngtctrnwebsite(Tmhiunhngphnsau)
+value:Gitrbanucatextbox,hinthnhdngNhptkha(Hnhv)
+size:rngcatextbox
Nuthinputkhngsdngthuctnhtype=textthtrnhduytthiudngTextbox
b)Password
- iviccformnhngnhpchngtadngloinynitngpassword
- Cphp:<inputtype=passwordvalue=name=size=/>
- Ccthuctnhvalue,name,sizetngtnhTextbox
http://jsbin.com/ofaboh/1/edit
c)Checkbox
- Cphp:<inputtype=checkboxname=value=/>
+name:Tncacheckbox,sdngkthpPHPhayJavascript(JS)
+value:Gitrcacheckbox,sdngkthpPHPhayJS,giktqulnserverv
ngcli
+Cthsdngthmthuctnhcheckedchnmcnhchoitng
Lu:iviccitngcngnhmthnamephitgingnhau
http://jsbin.com/ofaboh/3/edit
d)Radio
- TochcnngchndngnmRadio
- Cphp:<inputtype=radioname=value=/>
- Ccthuctnhname,valuevcheckedsdngtngtnhCheckbox
e)Upload
-Tochcnngduytfiletmytnh
-Cphp:<inputtype=filename=/>
+name:Tncaitngfile
http://jsbin.com/ofaboh/4/edit
f)Submit
- Tontgidliutifilexl(TilinkkhaibothuctnhAction)
- Cphp:<inputtype=submitname=tnsubmitvalue=gitrbanu,hinth
ntsubmit/>
g)Button
- TngtnhSubmittuynhinkhisdngButtondliuskhngcgiti
filexl(Khaibophnaction)mthngkthpviJStotngtc
- Cphp:<inputtype=buttonname=tnsubmitvalue=gitrbanu,hinth
ntsubmit/>
h)Reset
- Trligitrbanukhichanhpliuchottcccitngtrongform
- Cphp:<inputtype=resetname=tnresetvalue=gitrbanu,hinth
ntreset
To1formnhsau:
2.2.Selecttags
a) Todanhschsxung
- Cphp
<selectname=Tndanhsch>
<optionvalue=hn>HNi</option>
<optionvalue=hcm>TP.HCM</option>
<optionvalue=hp>HiPhng</option>
<optionvalue=tn>ThiNguyn</option>
</select>
+Cpth<select></select>khaibo1phinlmvicvikiudanhsch
+Cpth<option></option>bntrongcpth<option></option>
-Thuctnhvalue:Gitrcalachn(SdngkthpviJShocPHP)
-Ccthuctnhkhc:label,selected,disabled
b)Todanhschchn
- Tngtnhdanhschsxungtuynhindngny
Chophpngidngchnnhiulachnbng
VicsdngCtrl
- Cphptrongdanhschchntngtdngsxung,chvicthmthuctnh
multiplevothm<select>
- Vd:
http://jsbin.com/alipim/1/edit
2.3.Hpthoisontho
-to1hpthoichophpsontho(dngbnhlun)chngtasdngth
textarea
-Cphp:
<textareacols=sctrows=sdngmaxlength=skttiachophp>
Nidung
</textarea>
Tmhiuthmccthuctnhkhcti:
http://www.w3schools.com/tags/tag_textarea.asp
Videothamkho:http://bit.ly/vsnet-form
Bitp:Thitk1formbnhlunnhhnhbndi
1. Metatags
- Mithmetauttrongcpth<head></head>
- CungcpthngtinvwebsitechotrnhduytvccSearchEngine
a) Keyword
- Totkhachowebsite,cungcpchoccsearchengine
- Cphp:<metaname=keywordscontent=cctkhacchnhaubidu
phy/>
b)Description
- Thmtvwebsite,cungcpthngtinvweb
- Cphp<metaname=descriptioncontent=mtngngnvwebsite/>
Demo:
c)Refresh
- Tngtilitrangtrong1khongthigiancnhngha
- Cphp
<metahttp-equiv=refreshcontent=time/>
Vi:
+time:Lthigiantngreload,nvgiy
Vd:Codechuyntrang,khivovietsource.nettngchuynqua
vietsource.net/forum
<metahttp-equiv=refreshcontent=0;url=http://vietsource.net/forum/>
d)Author
- Cungcpthngtinvtcgiwebsite
- Vd:<metaname=authorcontent=VCngTnh,VietSource.Net,HCNTT
TTThiNguyn
e)Charset
- Xcnhkiucharsetmwebsitesdng
- Cphp:
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
- ChunHTML5:
<metacharset=utf-8/>
Thamkhoccthkhc:http://www.w3schools.com/tags/tag_meta.asp
2.Styletag
- Cpth<style></style>cttrongcpth<head></head>
- Xcnhthngtinnhdngwebsite.Trong1tiliuHTMLcthsdngnhiu
cpth<style></style>
- Vd:
<styletype=text/css>
p{
color:red
}
</style>
3.Scripttag
- Bntrongcpth<head></head>,chaccthngtinvmkchbnJavascript
- Vd:<scripttype=text/javascript>document.write(Xincho);</script>
4.!DOCTYPE
- Lthduynhtnmbnngoicpth<html></html>
- Thccht!doctypekhngphil1thmncungcpchotrnhduytbitphin
bnHTMLcsdngtrongwebsite
- Vd:1doctypetrongXHTML
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>VietSource.Net</title>
</head>
<body>
Nidungwebsite
</body>
</html>
-TrongHTML5: <!DOCTYPEhtml>
Thamkho:http://www.w3schools.com/tags/tag_doctype.asp