1. Trang chủ
  2. » Công Nghệ Thông Tin

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

12 531 1
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 12
Dung lượng 262,22 KB

Nội dung

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 (&), &nbsp; (du trng không b trình duyt hu - non breacking space), &copy; (©), &reg; (®), & 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

TỪ KHÓA LIÊN QUAN

w