Thông tin tài liệu
Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 1 B B à à i 1 i 1 Ngôn ng Ngôn ng đ đ á á nh d nh d u siêu vn b u siêu vn b n n (Highper Text Markup Language (Highper Text Markup Language – – HTML) HTML) Ths. Bùi V Anh B môn Tin hc Khoa Toán – C – Tin hc vuanh@vnu.edu.vn Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 2 Ni dung • Khái nim c bn •Cu trúc trang Web •Mt s th thông dng •Mt s th đc bit •Cu trúc th Script Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 3 Khái nim • Web (World Wide Web): Mng toàn cu, s dng ngôn ng đánh du siêu vn bn (HTML – Highper Text Markup Language) đ mô t ni dung. •Có2 loi trang Web: Tnh và đng • Thông tin đc khai báo bng cách dùng các th theo mt quy lut khai báo. •Ngi dùng s dng các trình duyt đ đc các thông tin BVA1 BVA5 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 4 Trình duyt và kch bn • Internet Explorer, Nescape, FireFox… •Kch bn (script): Có 2 loi, chy trên máy ch (server script) và máy khách – máy duyt web (client script). ólàdng lp trình dùng đ nâng cao hiu qu, tính nng ca trang web. •Các h CSDL gn vi trang web dùng đ lu thông tin: Access, SQL Server, MySQL, Oracle… Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 5 Trình ch và ngôn ng script • Trình ch (web server): Ni cung cp dch v web, đt và chy trên máy tính • Môi trng chy trình ch: – Windows: IIS (Internet Information Server), Apache – Linux: Apache, JRUN, Weblogic… • Ngôn ng script: ASP (Active Server Page), JSP (Java Server Page), Servlet, PHP, Perl, ASP.NET –Ph bin: VB Script và Java Script Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 6 Trình ch và ngôn ng script… • Client script không ph thuc vào Server script và Web server (tng đi) •Cóth dùng nhiu loi client script trong cùng mt trang Web nhng không đc khai báo ln ln Slide 3 BVA1 - Web tnh: Không kt ni CSDL, thông tin hin lên đc lu tr trên file text hay các file riêng bit. - Web đng: Có kt ni ti CSDL, khi trang web đc làm ti, d liu đc trình by đc đc t CSDL Bui Vu Anh, 7/23/2005 BVA5 Th: Tag, thng gm 2 th, th m đc đt trong < > và th đóng đt trong </ >. Chúng có cùng tên và phn nm trong 2 th s chu tác đng ca th Bui Vu Anh, 7/23/2005 Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 2 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 7 Cu trúc trang Web •Làmt file text có cu trúc • Tên file lu tr: .htm, .html, .jhtm, phtm… • Tên th không phân bit ch hoa/thng <html> <head> <title>Tiêu đ … </title> <meta…> <link …> … </link> <script> … </script> </head> <body> … </body> </html> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 8 Ý ngha các th • Head: Thông tin không xut hin trên trang web, mc đích cung cp thông tin… • Title: Tên trên thanh tiêu đ ca trình duyt •Body: Thông tin xut hin trên trang web, có th che du mt phn thông tin tu theo phng thc ca client script <BODY background=“file nn.gif" BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 9 Các th đnh dng • Div: Canh l đon vn bn <div align=“justify” | “center” | “left” | “right”> … </div> •P: nh dng câu, sau th kt thúc s sang mt dòng mi, tách nhau bng mt khong cách <p align=“justify” | “center” | “left” | “right”> … </p> • <blockquote> </blockquote> : Làm ni bt đon vn bn bng cách lùi vào phía trong trang web, gi nguyên đnh dng Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 10 Các th đnh dng… • Font: Quy đnh font cho đon vn bn – <font face=“tên font” color=“màu” size=“kích thc”> … </font> – Tên font s dng: font vit trc quy đnh s dùng nu máy đã cài đt, font th 2 đc dùng nu font th nht không cài đt… –H 16 màu chun thì có th dùng tên: red, blue…, h màu 24bit, dùng 6 s h hexa dng #FFFFFF (du # trc) –C ch 1, 2, 3…7 hoc dùng kích thc tng đi so vi trình duyt, dùng –n, +n size=+1, size=-2 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 11 Mã 16 màu aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 12 Các th đnh dng… • B, I, U: Quy đnh font ch đm, nghiêng, gch chân <b> … </b>, <i> … </i>, <u> … </u> Mt s th khác làm thay đi hình thc ca ch. • Heading: H1 đn H6, Typewriter: tt • <BIG> .</BIG>, <SMALL> .</SMALL> • <sup> .</sup> : superscript - ch s trên • <sub> .</sub> : subscript - ch s di • <strike> … </strike> : gch ngang qua • <basefont size=n> : Quy đnh ch trong trang, ch thay đi khi có mt basefont khác xut hin Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 3 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 13 Ngt dòng và đon •Du trng, du ngt đon trên trình duyt ch đc tính 1 ln • tách đon, dùng th p, div • Dùng th <pre> … </pre> nu mun trình duyt hin đúng vn bn nh đã trình by trong trang web. Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 14 Chèn bng • Table: nh dng bng –Tr: Khai báo hàng –Td: Khai báo ct <table border=n cellspacing=m cellpadding=k width=l> … </table> Thit k bng ch quan tâm chiu rng, th tr quan tâm chiu cao, th td quan tâm chiu rng. n v dùng tính theo đim BVA6 BVA7 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 15 Chèn bng… <td width=“n%” align=“left | right | center” valign=“top | bottom | mi ddle” rowspan=m colspan=k> … </td> : Khai báo ct <tr> … </tr> : Khai báo hàng • Dùng th <th>…</th> đ đnh dng tiêu đ ct ca bng • Dùng th <caption> … <caption> đ cn đu theo chiu rng mt dòng tiêu đ trong bng. Th này đt trong th <table> BVA8 BVA9 BVA10 BVA11 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 16 Danh sách • Không th t (unorder list) <ul type=circle | square | disc > <li type=circle | square | disc > Item 1 <li> Item 2 </ul> •Cóth t (order list) <ol type=“1 | A | a | I | i” start=y> <li type= “1 | A | a | I | i”> Item 1 <li> Item 2 </ol> • Danh sách s đánh s th t t y (y là s, type tu ý) • Danh sách có th lng nhau nhng không đc đan chéo Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 17 Danh sách mô t <dl> <dt> description title1 <dd> description description1 <dt> description title2 <dd> description description2 … <dt> description titleN <dd> description descriptionN </dl> Khi trình by, danh sách s lùi đu dòng theo s phân cp Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 18 Th chèn nh • <imag align=“top | bottom | middle | left | right” scr = “đng dn URL/UNC” border=n height=x width=y border=m alt=“x”> • Imag không có th đóng, align dùng đ dóng vn bn so vi nh, mc đnh là bottom. Nu dùng left | right, vn bn sau đócng b tác đng (tng quan text-image) • nh có th b bin dng nu cung cp chiu cao, rng sao t l => Không nên ch chiu cao và rng nu không cn thit. •Nu mun nh không có vin, chn border m=0 • Khi không np đc nh, xâu trong alt s hin thay th •Các loi nh h tr: .GIF, .JPG, .PNG Slide 14 BVA6 đm đng vin, 0 tc là không có vin. n v là đim Bui Vu Anh, 8/2/2005 BVA7 Khong cách gia các hàng và ct. n v là đim Bui Vu Anh, 8/2/2005 Slide 15 BVA8 rng ca ct so vi bng tính theo % Bui Vu Anh, 7/23/2005 BVA9 Dóng ni dung trong ô Bui Vu Anh, 7/23/2005 BVA10 Kt hp m hàng Bui Vu Anh, 7/23/2005 BVA11 Kt hp k ct Bui Vu Anh, 7/23/2005 Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 4 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 19 Các ký t đc bit •Du xung dòng: <br clear=“left | right | center”>. Clear dùng đ xoá vic cn dòng vn bn bao quanh hình nh do th imag to ra. • > (>), < (<), & (&), (du trng không b trình duyt hu - non breacking space), © (©), ® (®), & eacute; (é) • Dùng &xxxx; đ chèn các ký t ISO trong đó xxxx là mã. Tham kho ti: http://www.uni-passau.de/~ramsch/iso8859-1.html • ng k ngang (hard rules): <hr size=N width=X [noshade]> X có th dùng %, t l vi đ rng ca trang hin hành. N mc đnh là 2. noshade : không có bóng Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 20 Th chèn liên kt •Gn vi vn bn: <a href=“đa ch liên kt URL/UNC”> … </a> •Gn vi nh <a href=“đa ch liên kt URL/UNC”> <imag src=“đa ch URL/UNC ca nh” border=n height=x width=y> </a> • Dùng “mailto:đa ch email” đ liên kt đn đa ch gi th URL: Universal/Uniform Resource Locator BVA16 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 21 Th chèn liên kt… •Gi phng thc ca JavaScript: <a href=“javascript:window.external.AddFavorite (‘http://mim.hus.vn’)”> Bookmark this URL </a> • Khai báo nh mt Bookmark trong chính trang web” – Khai báo: <a name="NAME">Dòng thông báo v trí, có th không có</a> – Tham kho tr li: <a name=“NAME">Dòng thông báo đi đn v trí có tham kho n</a> Có th dùng bookmark trong mt trang khác: name=<đa ch trang>#tên tham kho BVA17 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 22 Các th input • Cho phép ngi dùng nhp d liu •Thc hin ch th hay hành đng •Gm: text, password, submit, button, reset, checkbox, radio, hidden, image BVA18 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 23 Th text và password •Nhp d liu dng text •Quy đnh chiu dài ln nht (maxlength) và kích thc (size) trên trang web •Phùhp (không ln hn) chiu dài ca điu khin/th cha nó •Cn cung cp tên đ tham chiu trên Client và Server Side • Cung cp giá tr mc đnh nu cn Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 24 Th text và password… <input type=“text” name=“txtUsername” value=“” size=20 maxlength=10> <input type=“ password” name=“txtPassword” value=“” size=20 maxlength=10> Slide 20 BVA16 URL: Universal Relate Link - đa ch internet, mail hay intranet UNC: a ch mng cc b Bui Vu Anh, 7/23/2005 Slide 21 BVA17 Máy cn h tr Java Virtual Machine Bui Vu Anh, 7/23/2005 Slide 22 BVA18 Các th này dùng đ khai báo d liu nhm kt ni đn kch bn chy trên trình ch Bui Vu Anh, 7/23/2005 Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 5 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 25 Th checkbox Dùng cho tu chn • Quan tâm đn thuc tính checked (true/false) khi s dng Client Script. • Server side tham chiu th di dng giá tr ca th thông qua tên nên cn đnh ngha giá tr trc. • Khi khai báo trùng tên, chui giá tr nhn đc cách nhau bi du phy (,) How can you know us: <input type=" checkbox" value="P" name="chkHow" checked>Newspaper <input type=" checkbox" value="T" name="chkTV" checked>Television Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 26 Th radio • Dùng cho chn 1 trong nhiu la chn • Các radio phi có cùng tên, khác nhau v giá tr •Ch mt mc đc checked, u tiên mc cui cùng nu c tình check nhiu mc • Khi tham chiu bng Server Script s nhn đc giá tr ca tu chn đc chn Gender: <input type=" radio" value="M" name="rdGender" checked>Male <input type=" radio" value="F" name="rdGender">Female Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 27 Th submit Ü Dùng chp nhn nhng d liu nhp trong input phía trình ch bng phng thc Post (trong th form) hay Get (trong QueryString) Ü Chuyn các giá tr lên QueryString, khai bo th form vi phng thc Get; mun Server Script ly d liu t th form, khai báo th form vi phng thc Post <input type="submit" value="Save" name= "Submit"> (value là giá tr caption trên nút) Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 28 Th button •Chp nhn nhng d liu nhp trong các th input lên trình khách (nu dùng phng thc submit(), nút s gi th form lên trình ch web). Mun tính toán trên trang web => dùng th này •Thc thi phng thc Client Script Ví d: Quay v trang trc <input type=“ button" value=“Back" name= “Back“ onClick=“window.history.go(-1);”> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 29 Th reset •Phc hi d liu nhp trong các th input, select, textarea • c khai báo trong th form dùng đ reset d liu trên trang web <input type=“ reset" value=“Cancel" name= “Reset”> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 30 Th hidden •Tng t th text nhng không hin th trên trang web, không cho phép ngi dùng nhp d liu mà cn đnh ngha trc giá tr cho nó, nhm thc hin mc đích tim n. <input type=“ hidden" value=“Y" name= “txtYN”> Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 6 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 31 Th image • Hình nh trên trang web gn vi mt chc nng (ví d gn kèm các nút submit, reset, button). <input type=“ image" name= “imgGo” scr=“đng dn đn file nh”> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 32 Th textarea •Nhp d liu trên nhiu dòng (không gii hn trc chiu dài ln nht) •Hn đnh s dòng (rows) và ct (cols) phc v vic hin th • Trình by trong bng đ cn hàng, ct Description: <textarea name="txtDesc" cols="20" rows="3"></textarea> Requirement: <textarea name="txtRequire" cols="20" rows="3">Please enter here .</textarea> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 33 Th select •Chn các phn t trong danh sách (ListBox, ComboBox) • Cho chn mt (ComboBox) hoc nhiu mc (ListBox) •Phn t đc chn thì thuc tính selected nhn đúng Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 34 Th select… <select name="city" > <option value="" selected>(Select a city)</option> <option value="HCM">Ho Chi Minh</option> <option value="HAN">Ha Noi</option> <option value="HUE">Hue</option> </select> <select name="industry" multiple > <option value="" selected>(Select Industry)</option> <option value="AUT">Auto</option> <option value="MED">Medical</option> <option value="ENG">Engineering</option> </select> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 35 Th form • Dùng đ gi d liu trong trang web t phía Client lên Server • Post: Gi d liu lên, Get: Gi yêu cu ly d liu v •Th form cn bao (cha) các th input cn đa d liu cho Server • Các th form không đc lng nhau vì chúng có hành đng (action) khai báo tng ng riêng ch đn mt trang web Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 36 Th form… •Nu không ch đnh đa ch (URL/UNC) cho action, trang web chuyn đn là trang hin ti. •Phng thc Get chuyn d liu trong th nhp lên chui QueryString (chui gm nhiu cp tham s cùng vi giá tr đi kèm nu có k t sau du ?, cách nhau bi du &, tham s và giá tr cách nhau bi du =) • Trong phng thc Post, d liu đc truyn trc tip t trang web đn trang Server Script • Get: submit d liu đn trang HTML hay Server Script; Post: submit d liu đn Server Script Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 7 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 37 Th form… <form name = "form1" action = " doaction.php doaction.php" method = "post" onsubmit = "alert('You are about submit');"> … Các input nm đây … <input type="text" name="txtKey" size=20 maxlenght=50> <input type = "image" src = "gogo.gif" name = "search"> hoc <input type = "submit" value = "Save" name = "Submit"> </form> Khi bm Enter trong hp Text, hành đng submit cng s đc thc hin và nó s gi hành đng tng ng (doaction) Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 38 Th form… Khai báo th form đ Upload lên Server t Client, dùng th form: <FORM ENCTYPE = “multipart/form-data” ACTION = “download.php” name = “form1” METHOD = POST onsubmit = “return doUpload();> ng dng trên Server Script mun Upload file t Client lên Server đu phi khai báo th này trong trang chn file. Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 39 Các th đc bit Meta: Khai báo trong th head dùng khai báo loi font s dng, tìm kim, xoá cache, chuyn trang… •Th meta vi font: <meta http-equiv = “Content-Type” content = “text/html; charset = UTF-8”> Nu mun hin ni dung ting Vit và cho phép nhp d liu trên th input bng ting Vit Unicode chun UTF-8 (dùng b gõ Unicode), khai báo th meta nh trên. Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 40 Các th đc bit… •Th meta tìm kim: Cung cp thông tin cho các Search Engine khi trang web đc đng ký s dng trên internet <meta http-equiv = “Content-Type” content = “text/html; charset = UTF-8”> <META NAME=“author” CONTENT = “t khoá”> <META NAME=“description” CONTENT = “Mô t”> <META NAME=“keywods” CONTENT=“…”> Trong CONTENT lit kê các t khoá phc v tìm kim Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 41 Các th đc bit… •T đng chuyn đn URL/UNC sau mt thi gian: <META http-equiv=refresh content="5; URL=http://mim.hus.vn”> Trang web s t đng làm ti sau 5 giây và đa ch đc khai báo nh trong URL: http://mim.hus.vn Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 42 Các th đc bit… • Xoá cache: –Trang web đc np vào cache đ truy nhp nhanh khi duyt –Khi có s thay đi cu trúc trang web => mng cc b dùng Proxy Server và ngi qun tr có th xoá cache hay IP cho máy duyt web –Mun ch đng xoá cache => cn khai báo: <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="cache-control" content="no-cache"> [...]... i 08-08-2005 Các th Bùi V Anh - Bài gi ng v HTML 43 c bi t… Hà N i 08-08-2005 Các th Khai báo nh ngh a chung Bùi V Anh - Bài gi ng v HTML 44 c bi t… Các th dùng l i S d ng: Khai báo trong th head và dùng gi ng nh trong trang web ã Bùi V Anh - Bài gi ng v HTML B môn Tin h c, Khoa Toán - C - Tin h c, Tr 46 Hà N i 08-08-2005 Bùi V Anh - Bài gi ng v HTML ng H Khoa h c T nhiên c bi t… 47 border-top,... Hà N i 08-08-2005 Bùi V Anh - Bài gi ng v HTML 51 T ng k t • • • • Gi i thi u v ngôn ng HTML Các th mô t c b n t o nên trang web t nh Các th ph c v vi c nh p d li u Các th c bi t dùng t ng tu ch n cho trang web • Th nhúng ph n l p trình trong trang web Bài t p: T o trang web cá nhân minh ho vi c s d ng các th ã h c Hà N i 08-08-2005 Bùi V Anh - Bài gi ng v HTML B môn Tin h c, Khoa Toán - C - Tin h... v HTML Các thu c tính: – Ghi thành file css – Chèn vào trang web mu n s d ng style text_normal { COLOR : #6666FF; FONT-SIZE : 12px; TEXT-DECORATION : none; } bg { COLOR : #000000; } Hà N i 08-08-2005 cursor: hand -> hình chu t filter: BlendTrans(Duration=2) -> l c clip: rect( ); … Tu theo các i t ng s có các thu c tính khác Hà N i 08-08-2005 Bùi V Anh - Bài gi ng v HTML 48 8 Bùi V Anh - Bài gi ng HTML. .. Bài gi ng v HTML ng th c dùng cú pháp l p trình c a • Khai báo ph ng th c dùng cú pháp l p trình c a Visual Basic for Application // khai báo bi n Function Tên(tham s ):ki u tr l i { // khai báo bi n // câu l nh // phát bi u i u ki n … } // code Các script có th VBScript 49 Hà N i 08-08-2005 Bùi V Anh - Bài gi ng v HTML . 08-08-2005 Bùi V Anh - Bài ging v HTML 3 Khái nim • Web (World Wide Web): Mng toàn cu, s dng ngôn ng đánh du siêu vn bn (HTML – Highper Text Markup Language). ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 1 B B à à i 1 i 1 Ngôn ng Ngôn ng đ đ á á nh d nh d u siêu
Ngày đăng: 26/10/2013, 19:15
Xem thêm: Ngôn ngữ đánh dấu siêu văn bản_ HTML, Ngôn ngữ đánh dấu siêu văn bản_ HTML
