Ngôn ngữ đánh dấu siêu văn bản_ HTML

THÔNG TIN TÀI LIỆU

Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 1 B B à à i 1 i 1 Ngôn ng Ngôn ng   đ đ á á nh d nh d   u siêu vn b u siêu vn b   n n (Highper Text Markup Language (Highper Text Markup Language – – HTML) HTML) Ths. Bùi V Anh B môn Tin hc Khoa Toán – C – Tin hc vuanh@vnu.edu.vn Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 2 Ni dung • Khái nim c bn •Cu trúc trang Web •Mt s th thông dng •Mt s th đc bit •Cu trúc th Script Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 3 Khái nim • Web (World Wide Web): Mng toàn cu, s dng ngôn ng đánh du siêu vn bn (HTML – Highper Text Markup Language) đ mô t ni dung. •Có2 loi trang Web: Tnh và đng • Thông tin đc khai báo bng cách dùng các th theo mt quy lut khai báo. •Ngi dùng s dng các trình duyt đ đc các thông tin BVA1 BVA5 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 4 Trình duyt và kch bn • Internet Explorer, Nescape, FireFox… •Kch bn (script): Có 2 loi, chy trên máy ch (server script) và máy khách – máy duyt web (client script). ólàdng lp trình dùng đ nâng cao hiu qu, tính nng ca trang web. •Các h CSDL gn vi trang web dùng đ lu thông tin: Access, SQL Server, MySQL, Oracle… Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 5 Trình ch và ngôn ng script • Trình ch (web server): Ni cung cp dch v web, đt và chy trên máy tính • Môi trng chy 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 bin: VB Script và Java Script Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 6 Trình ch và ngôn ng script… • Client script không ph thuc vào Server script và Web server (tng đi) •Cóth dùng nhiu loi client script trong cùng mt trang Web nhng không đc khai báo ln ln Slide 3 BVA1 - Web tnh: Không kt ni CSDL, thông tin hin lên đc lu tr trên file text hay các file riêng bit. - Web đng: Có kt ni ti CSDL, khi trang web đc làm ti, d liu đc trình by đc đc t CSDL Bui Vu Anh, 7/23/2005 BVA5 Th: Tag, thng gm 2 th, th m đc đt trong < > và th đóng đt trong </ >. Chúng có cùng tên và phn nm trong 2 th s chu tác đng ca th Bui Vu Anh, 7/23/2005 Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 2 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 7 Cu trúc trang Web •Làmt file text có cu trúc • Tên file lu tr: .htm, .html, .jhtm, phtm… • Tên th không phân bit ch hoa/thng <html> <head> <title>Tiêu đ … </title> <meta…> <link …> … </link> <script> … </script> </head> <body> … </body> </html> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 8 Ý ngha các th • Head: Thông tin không xut hin trên trang web, mc đích cung cp thông tin… • Title: Tên trên thanh tiêu đ ca trình duyt •Body: Thông tin xut hin trên trang web, có th che du mt phn thông tin tu theo phng thc ca client script <BODY background=“file nn.gif" BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 9 Các th đnh dng • Div: Canh l đon vn bn <div align=“justify” | “center” | “left” | “right”> … </div> •P: nh dng câu, sau th kt thúc s sang mt dòng mi, tách nhau bng mt khong cách <p align=“justify” | “center” | “left” | “right”> … </p> • <blockquote> </blockquote> : Làm ni bt đon vn bn bng cách lùi vào phía trong trang web, gi nguyên đnh dng Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 10 Các th đnh dng… • Font: Quy đnh font cho đon vn bn – <font face=“tên font” color=“màu” size=“kích thc”> … </font> – Tên font s dng: font vit trc quy đnh s dùng nu máy đã cài đt, font th 2 đc dùng nu font th nht không cài đt… –H 16 màu chun thì có th dùng tên: red, blue…, h màu 24bit, dùng 6 s h hexa dng #FFFFFF (du #  trc) –C ch 1, 2, 3…7 hoc dùng kích thc tng đi so vi trình duyt, dùng –n, +n size=+1, size=-2 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 11 Mã 16 màu aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 12 Các th đnh dng… • B, I, U: Quy đnh font ch đm, nghiêng, gch chân <b> … </b>, <i> … </i>, <u> … </u> Mt s th khác làm thay đi hình thc ca ch. • Heading: H1 đn H6, Typewriter: tt • <BIG> .</BIG>, <SMALL> .</SMALL> • <sup> .</sup> : superscript - ch s trên • <sub> .</sub> : subscript - ch s di • <strike> … </strike> : gch ngang qua • <basefont size=n> : Quy đnh ch trong trang, ch thay đi khi có mt basefont khác xut hin Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 3 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 13 Ngt dòng và đon •Du trng, du ngt đon trên trình duyt ch đc tính 1 ln •  tách đon, dùng th p, div • Dùng th <pre> … </pre> nu mun trình duyt hin đúng vn bn nh đã trình by trong trang web. Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 14 Chèn bng • Table: nh dng bng –Tr: Khai báo hàng –Td: Khai báo ct <table border=n cellspacing=m cellpadding=k width=l> … </table> Thit k bng ch quan tâm chiu rng, th tr quan tâm chiu cao, th td quan tâm chiu rng. n v dùng tính theo đim BVA6 BVA7 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 15 Chèn bng… <td width=“n%” align=“left | right | center” valign=“top | bottom | mi ddle” rowspan=m colspan=k> … </td> : Khai báo ct <tr> … </tr> : Khai báo hàng • Dùng th <th>…</th> đ đnh dng tiêu đ ct ca bng • Dùng th <caption> … <caption> đ cn đu theo chiu rng mt dòng tiêu đ trong bng. Th này đt trong th <table> BVA8 BVA9 BVA10 BVA11 Hà Ni 08-08-2005 Bùi V Anh - Bài ging 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 lng nhau nhng không đc đan chéo Hà Ni 08-08-2005 Bùi V Anh - Bài ging 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 by, danh sách s lùi đu dòng theo s phân cp Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 18 Th chèn nh • <imag align=“top | bottom | middle | left | right” scr = “đng dn URL/UNC” border=n height=x width=y border=m alt=“x”> • Imag không có th đóng, align dùng đ dóng vn bn so vi nh, mc đnh là bottom. Nu dùng left | right, vn bn sau đócng b tác đng (tng quan text-image) • nh có th b bin dng nu cung cp chiu cao, rng sao t l => Không nên ch chiu cao và rng nu không cn thit. •Nu mun nh không có vin, chn border m=0 • Khi không np đc nh, xâu trong alt s hin thay th •Các loi nh h tr: .GIF, .JPG, .PNG Slide 14 BVA6  đm đng vin, 0 tc là không có vin. n v là đim Bui Vu Anh, 8/2/2005 BVA7 Khong cách gia các hàng và ct. n v là đim Bui Vu Anh, 8/2/2005 Slide 15 BVA8  rng ca ct so vi bng tính theo % Bui Vu Anh, 7/23/2005 BVA9 Dóng ni dung trong ô Bui Vu Anh, 7/23/2005 BVA10 Kt hp m hàng Bui Vu Anh, 7/23/2005 BVA11 Kt hp k ct Bui Vu Anh, 7/23/2005 Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 4 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 19 Các ký t đc bit •Du xung dòng: <br clear=“left | right | center”>. Clear dùng đ xoá vic cn dòng vn bn bao quanh hình nh do th imag to ra. • &gt (>), &lt (<), &amp (&),   (du trng không b trình duyt hu - non breacking space), © (©), ® (®), & eacute; (é) • Dùng &xxxx; đ chèn các ký t ISO trong đó xxxx là mã. Tham kho ti: 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 vi đ rng ca trang hin hành. N mc đnh là 2. noshade : không có bóng Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 20 Th chèn liên kt •Gn vi vn bn: <a href=“đa ch liên kt URL/UNC”> … </a> •Gn vi nh <a href=“đa ch liên kt URL/UNC”> <imag src=“đa ch URL/UNC ca nh” border=n height=x width=y> </a> • Dùng “mailto:đa ch email” đ liên kt đn đa ch gi th URL: Universal/Uniform Resource Locator BVA16 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 21 Th chèn liên kt… •Gi phng thc ca JavaScript: <a href=“javascript:window.external.AddFavorite (‘http://mim.hus.vn’)”> Bookmark this URL </a> • Khai báo nh mt 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 kho tr li: <a name=“NAME">Dòng thông báo đi đn v trí có tham kho n</a> Có th dùng bookmark trong mt trang khác: name=<đa ch trang>#tên tham kho BVA17 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 22 Các th input • Cho phép ngi dùng nhp d liu •Thc hin ch th hay hành đng •Gm: text, password, submit, button, reset, checkbox, radio, hidden, image BVA18 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 23 Th text và password •Nhp d liu dng text •Quy đnh chiu dài ln nht (maxlength) và kích thc (size) trên trang web •Phùhp (không ln hn) chiu dài ca điu khin/th cha nó •Cn cung cp tên đ tham chiu trên Client và Server Side • Cung cp giá tr mc đnh nu cn Hà Ni 08-08-2005 Bùi V Anh - Bài ging 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 mng cc b Bui Vu Anh, 7/23/2005 Slide 21 BVA17 Máy cn 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 liu nhm kt ni đn kch bn chy trên trình ch Bui Vu Anh, 7/23/2005 Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 5 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 25 Th checkbox Dùng cho tu chn • Quan tâm đn thuc tính checked (true/false) khi s dng Client Script. • Server side tham chiu th di dng giá tr ca th thông qua tên nên cn đnh ngha giá tr trc. • Khi khai báo trùng tên, chui giá tr nhn đc cách nhau bi du phy (,) How can you know us: <input type=" checkbox" value="P" name="chkHow" checked>Newspaper <input type=" checkbox" value="T" name="chkTV" checked>Television Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 26 Th radio • Dùng cho chn 1 trong nhiu la chn • Các radio phi có cùng tên, khác nhau v giá tr •Ch mt mc đc checked, u tiên mc cui cùng nu c tình check nhiu mc • Khi tham chiu bng Server Script s nhn đc giá tr ca tu chn đc chn Gender: <input type=" radio" value="M" name="rdGender" checked>Male <input type=" radio" value="F" name="rdGender">Female Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 27 Th submit Ü Dùng chp nhn nhng d liu nhp trong input phía trình ch bng phng thc Post (trong th form) hay Get (trong QueryString) Ü Chuyn các giá tr lên QueryString, khai bo th form vi phng thc Get; mun Server Script ly d liu t th form, khai báo th form vi phng thc Post <input type="submit" value="Save" name= "Submit"> (value là giá tr caption trên nút) Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 28 Th button •Chp nhn nhng d liu nhp trong các th input lên trình khách (nu dùng phng thc submit(), nút s gi th form lên trình ch web). Mun tính toán trên trang web => dùng th này •Thc thi phng thc Client Script Ví d: Quay v trang trc <input type=“ button" value=“Back" name= “Back“ onClick=“window.history.go(-1);”> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 29 Th reset •Phc hi d liu nhp trong các th input, select, textarea • c khai báo trong th form dùng đ reset d liu trên trang web <input type=“ reset" value=“Cancel" name= “Reset”> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 30 Th hidden •Tng t th text nhng không hin th trên trang web, không cho phép ngi dùng nhp d liu mà cn đnh ngha trc giá tr cho nó, nhm thc hin mc đích tim n. <input type=“ hidden" value=“Y" name= “txtYN”> Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 6 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 31 Th image • Hình nh trên trang web gn vi mt chc nng (ví d gn kèm các nút submit, reset, button). <input type=“ image" name= “imgGo” scr=“đng dn đn file nh”> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 32 Th textarea •Nhp d liu trên nhiu dòng (không gii hn trc chiu dài ln nht) •Hn đnh s dòng (rows) và ct (cols) phc v vic hin th • Trình by trong bng đ cn hàng, ct Description: <textarea name="txtDesc" cols="20" rows="3"></textarea> Requirement: <textarea name="txtRequire" cols="20" rows="3">Please enter here .</textarea> Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 33 Th select •Chn các phn t trong danh sách (ListBox, ComboBox) • Cho chn mt (ComboBox) hoc nhiu mc (ListBox) •Phn t đc chn thì thuc tính selected nhn đúng Hà Ni 08-08-2005 Bùi V Anh - Bài ging 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à Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 35 Th form • Dùng đ gi d liu trong trang web t phía Client lên Server • Post: Gi d liu lên, Get: Gi yêu cu ly d liu v •Th form cn bao (cha) các th input cn đa d liu cho Server • Các th form không đc lng nhau vì chúng có hành đng (action) khai báo tng ng riêng ch đn mt trang web Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 36 Th form… •Nu không ch đnh đa ch (URL/UNC) cho action, trang web chuyn đn là trang hin ti. •Phng thc Get chuyn d liu trong th nhp lên chui QueryString (chui gm nhiu cp tham s cùng vi giá tr đi kèm nu có k t sau du ?, cách nhau bi du &, tham s và giá tr cách nhau bi du =) • Trong phng thc Post, d liu đc truyn trc tip t trang web đn trang Server Script • Get: submit d liu đn trang HTML hay Server Script; Post: submit d liu đn Server Script Bùi V Anh - Bài ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc T nhiên 7 Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 37 Th form… <form name = "form1" action = " doaction.php doaction.php" method = "post" onsubmit = "alert('You are about submit');"> … Các input nm  đây … <input type="text" name="txtKey" size=20 maxlenght=50> <input type = "image" src = "gogo.gif" name = "search"> hoc <input type = "submit" value = "Save" name = "Submit"> </form> Khi bm Enter trong hp Text, hành đng submit cng s đc thc hin và nó s gi hành đng tng ng (doaction) Hà Ni 08-08-2005 Bùi V Anh - Bài ging 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 dng trên Server Script mun Upload file t Client lên Server đu phi khai báo th này trong trang chn file. Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 39 Các th đc bit Meta: Khai báo trong th head dùng khai báo loi font s dng, tìm kim, xoá cache, chuyn trang… •Th meta vi font: <meta http-equiv = “Content-Type” content = “text/html; charset = UTF-8”> Nu mun hin ni dung ting Vit và cho phép nhp d liu trên th input bng ting Vit Unicode chun UTF-8 (dùng b gõ Unicode), khai báo th meta nh  trên. Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 40 Các th đc bit… •Th meta tìm kim: Cung cp thông tin cho các Search Engine khi trang web đc đng ký s dng 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 lit kê các t khoá phc v tìm kim Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 41 Các th đc bit… •T đng chuyn đn URL/UNC sau mt thi gian: <META http-equiv=refresh content="5; URL=http://mim.hus.vn”> Trang web s t đng làm ti sau 5 giây và đa ch đc khai báo nh trong URL: http://mim.hus.vn Hà Ni 08-08-2005 Bùi V Anh - Bài ging v HTML 42 Các th đc bit… • Xoá cache: –Trang web đc np vào cache đ truy nhp nhanh khi duyt –Khi có s thay đi cu trúc trang web => mng cc b dùng Proxy Server và ngi qun tr có th xoá cache hay IP cho máy duyt web –Mun ch đng xoá cache => cn 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 ging v HTML 3 Khái nim • Web (World Wide Web): Mng toàn cu, s dng ngôn ng đánh du siêu vn bn (HTML – Highper Text Markup Language). ging HTML 08-08-2005 B môn Tin hc, Khoa Toán - C -Tin hc, Trng H Khoa hc 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