BÀI BÁO CÁO-THIẾT KẾ WEB HTML

28 287 0
BÀI BÁO CÁO-THIẾT KẾ WEB HTML

Đ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

<HTML> Toàn b n i c a tài li u đ c đ t đâyộ ộ ủ ệ ượ ặ ở </HTML> <TITLE>Tiêu đ c a tài li u</ề ủ ệ TITLE> Giáo trình Thi t k Web ế ế Ph n Iầ Gi i thi u ngôn ng Htmlớ ệ ữ I. Các th đ nh c u trúc tài li uẻ ị ấ ệ 1.1 HTML C p th này đ c s d ng đ xác nh n m t tài li u là tài li u HTML, t c là nó có sặ ẻ ượ ử ụ ể ậ ộ ệ ệ ứ ử d ng các th HTML đ trình bày. Toàn b n i dung c a tài li u đ c đ t gi a c p thụ ẻ ể ộ ộ ủ ệ ượ ặ ữ ặ ẻ này. Cú pháp: Trình duy t s xem các tài li u không s d ng th ệ ẽ ệ ử ụ ẻ <HTML> nh nh ng t p tin văn b nư ữ ệ ả bình th ng.ườ 1.2 HEAD Th ẻ HEAD đ c dùng đ xác đ nh ph n m đ u cho tài li u.ượ ể ị ầ ở ầ ệ Cú pháp: 1.3 TITLE C p th này ch có th s d ng trong ph n m đ u c a tài li u, t c là nó ph i n mặ ẻ ỉ ể ử ụ ầ ở ầ ủ ệ ứ ả ằ trong th ph m vi gi i h n b i c p th ẻ ạ ớ ạ ở ặ ẻ <HEAD>. Cú pháp: 1.4 BODY Th này đ c s d ng đ xác đ nh ph n n i dung chính c a tài li u - ph n thân (body)ẻ ượ ử ụ ể ị ầ ộ ủ ệ ầ c a tài li u. Trong ph n thân có th ch a các thông tin đ nh d ng nh t đ nh đ đ t nhủ ệ ầ ể ứ ị ạ ấ ị ể ặ ả n n cho tài li u, màu n n, màu văn b n siêu liên k t, đ t l cho trang tài li u Nh ngề ệ ề ả ế ặ ề ệ ữ thông tin này đ c đ t ph n tham s c a th .ượ ặ ở ầ ố ủ ẻ Giáo trình thi t k Web ế ế 1 <HEAD> Ph n m đ u (ầ ở ầ HEADER) c a tài li u đ c đ t đâyủ ệ ượ ặ ở </HEAD> <BODY> ph n n i dung c a tài li u đ c đ t đâyầ ộ ủ ệ ượ ặ ở </BODY> <HTML> <HEAD> <TITLE>Tiêu đ c a tài li uề ủ ệ </TITLE> </HEAD> <BODY Các tham s n u có>ố ế N i dung c a tài li uộ ủ ệ </BODY> </HTML> Giáo trình Thi t k Web ế ế Cú pháp: Trên đây là cú pháp c b n c a th ơ ả ủ ẻ BODY, tuy nhiên b t đ u t HTML 3.2 thì có nhi uắ ầ ừ ề thu c tính đ c s d ng trong th ộ ượ ử ụ ẻ BODY. Sau đây là các thu c tính chính:ộ BACKGROUND= Đ t m t nh nào đó làm nh n n (background) choặ ộ ả ả ề văn b n. Giá tr c a tham s này (ph n sau d uả ị ủ ố ầ ấ b ng) là URL c a file nh. N u kích th c nh nhằ ủ ả ế ướ ả ỏ h n c a s trình duy t thì toàn b màn hình c a sơ ử ổ ệ ộ ử ổ trình duy t s đ c lát kín b ng nhi u nh.ệ ẽ ượ ằ ề ả BGCOLOR= Đ t m u n n cho trang khi hi n th . N u c hai thamặ ầ ề ể ị ế ả s ố BACKGROUND và BGCOLOR cùng có giá tr thìị trình duy t s hi n th m u n n tr c, sau đó m i t iệ ẽ ể ị ầ ề ướ ớ ả nh lên phía trên.ả TEXT= Xác đ nh màu ch c a văn b n, k c các đ m c.ị ữ ủ ả ể ả ề ụ ALINK=,VLINK=,LINK= Xác đ nh màu s c cho các siêu liên k t trong vănị ắ ế b n. T ng ng, alink (ả ươ ứ active link) là liên k t đangế đ c kích ho t - t c là khi đã đ c kích chu t lên;ượ ạ ứ ượ ộ vlink (visited link) ch liên k t đã t ng đ c kích ho t; ỉ ế ừ ượ ạ Nh v y m t tài li u HTML c b n có c u trúc nh sau:ư ậ ộ ệ ơ ả ấ ư II. Các th đ nh d ng kh iẻ ị ạ ố 2.1. th Pẻ Th ẻ <P> đ c s d ng đ đ nh d ng m t đo n văn b n. ượ ử ụ ể ị ạ ộ ạ ả Cú pháp: Giáo trình thi t k Web ế ế 2 <P>N i dung đo n văn b n</ộ ạ ả P> Giáo trình Thi t k Web ế ế 2.2. Các th đ nh d ng đ m c H1/H2/H3/H4/H5/H6ẻ ị ạ ề ụ HTML h tr 6 m c đ m c. Chú ý r ng đ m c ch là các ch d n đ nh d ng v m tỗ ợ ứ ề ụ ằ ề ụ ỉ ỉ ẫ ị ạ ề ặ logic, t c là m i trình duy t s th hi n đ m c d i m t khuôn d ng thích h p. Cóứ ỗ ệ ẽ ể ệ ề ụ ướ ộ ạ ợ th trình duy t này là font ch 14 point nh ng sang trình duy t khác là font ch 20ể ở ệ ữ ư ệ ữ point. Đ m c c p 1 là cao nh t và gi m d n đ n c p 6. Thông th ng văn b n đề ụ ấ ấ ả ầ ế ấ ườ ả ở ề m c c p 5 hay c p 6 th ng có kích th c nh h n văn b n thông th ng. ụ ấ ấ ườ ướ ỏ ơ ả ườ D i đây là các th dùng đ đ nh d ng văn b n d ng đ m c:ướ ẻ ể ị ạ ả ở ạ ề ụ <H1> </H1> Đ nh d ng đ m c c p 1ị ạ ề ụ ấ <H2> </H2> Đ nh d ng đ m c c p 2ị ạ ề ụ ấ <H3> </H3> Đ nh d ng đ m c c p 3ị ạ ề ụ ấ <H4> </H4> Đ nh d ng đ m c c p 4ị ạ ề ụ ấ <H5> </H5> Đ nh d ng đ m c c p 5ị ạ ề ụ ấ <H6> </H6> Đ nh d ng đ m c c p 6ị ạ ề ụ ấ 2.3 Th xu ng dòng BRẻ ố Th này không có th k t thúc t ng ng (ẻ ẻ ế ươ ứ </BR>), nó có tác d ng chuy n sang dòngụ ể m i. L u ý, n i dung văn b n trong tài li u HTML s đ c trình duy t Web th hi nớ ư ộ ả ệ ẽ ượ ệ ể ệ liên t c, các kho ng tr ng li n nhau, các ký t tab, ký t xu ng dòng đ u đ c coi nhụ ả ắ ề ự ự ố ề ượ ư m t kho ng tr ng. Đ xu ng dòng trong tài li u, b n ph i s d ng th ộ ả ắ ể ố ệ ạ ả ử ụ ẻ <BR> 2.4 Th PREẻ Đ gi i h n đo n văn b n đã đ c đ nh d ng s n b n có th s d ng th ể ớ ạ ạ ả ượ ị ạ ẵ ạ ể ử ụ ẻ <PRE>. Văn b n gi a hai th này s đ c th hi n gi ng h t nh khi chúng đ c đánh vào,ả ở ữ ẻ ẽ ượ ể ệ ố ệ ư ượ ví d d u xu ng dòng trong đo n văn b n gi i h n b i th ụ ấ ố ạ ả ớ ạ ở ẻ <PRE> s có ý nghĩaẽ chuy n sang dòng m i (trình duy t s không coi chúng nh d u cách)ể ớ ệ ẽ ư ấ Cú pháp: III. Các th đ nh d ng danh sáchẻ ị ạ 3.1. Danh sách thông th ngườ Cú pháp: Giáo trình thi t k Web ế ế 3 <PRE>Văn b n đã đ c đ nh d ngả ượ ị ạ </PRE> <UL> <LI> M c th nh tụ ứ ấ <LI> M c th haiụ ứ </UL> Giáo trình Thi t k Web ế ế Có 4 ki u danh sách:ể •` Danh sách không s p x p ( hay không đánh s ) <ắ ế ố UL> • Danh sách có s p x p (hay có đánh s ) <ắ ế ố OL>, m i m c trong da nhỗ ụ sách đ c s p x p th t .ượ ắ ế ứ ự • Danh sách th c đ n <ự ơ MENU> • Danh sách phân c p <ấ DIR> V i nhi u trình duy t, danh sách phân c p và danh sách th c đ n gi ng danh sách khôngớ ề ệ ấ ự ơ ố đánh s , có th dùng l n v i nhau. V i th OL ta có cú pháp sau:ố ể ẫ ớ ớ ẻ trong đó: TYPE =1 Các m c đ c s p x p theo th t 1, 2, 3 ụ ượ ắ ế ứ ự =a Các m c đ c s p x p theo th t a, b, c ụ ượ ắ ế ứ ự =A Các m c đ c s p x p theo th t A, B, C ụ ượ ắ ế ứ ự =i Các m c đ c s p x p theo th t i, ii, iii ụ ượ ắ ế ứ ự =I Các m c đ c s p x p theo th t I, II, III ụ ượ ắ ế ứ ự Ngoài ra còn thu c tính ộ START= xác đ nh giá tr kh i đ u cho danh sách.ị ị ở ầ Th < ẻ LI > có thu c tính ộ TYPE= xác đ nh ký hi u đ u dòng (bullet) đ ng tr c m iị ệ ầ ứ ướ ỗ m c trong danh sách. Thu c tính này có th nh n các giá tr : ụ ộ ể ậ ị disc (ch m tròn đ m);ấ ậ circle (vòng tròn); square (hình vuông). IV. Các th đ nh d ng ký tẻ ị ạ ự 4.1. Các th đ nh d ng in ký tẻ ị ạ ự Sau đây là các th đ c s d ng đ quy đ nh các thu c tính nh in nghiêng, in đ m,ẻ ượ ử ụ ể ị ộ ư ậ g ch chân cho các ký t , văn b n khi đ c th hi n trên trình duy t.ạ ự ả ượ ể ệ ệ <B> </B> <STRONG> </STRONG> In ch đ mữ ậ <I> </I> <EM> </EM> In ch nghiêngữ <U> </U> In ch g ch chânữ ạ <DFN> Đánh d u đo n văn b n gi a hai th này làấ ạ ả ữ ẻ đ nh nghĩa c a m t t . Chúng th ng đ c inị ủ ộ ừ ườ ượ Giáo trình thi t k Web ế ế 4 <OL TYPE=1/a/A/i/I> <LI>Muc thu nhat <LI>Muc thu hai <LI>Muc thu ba </OL> Giáo trình Thi t k Web ế ế nghiêng ho c th hi n qua m t ki u đ c bi tặ ể ệ ộ ể ặ ệ nào đó. <S> </S> <STRIKE> </STRIKE> In ch b g ch ngang.ữ ị ạ <BIG> </BIG> In ch l n h n bình th ng b ng cách tăngữ ớ ơ ườ ằ kích th c font hi n th i lên m t. Vi c s d ngướ ệ ờ ộ ệ ử ụ các th <ẻ BIG>l ng nhau t o ra hi u ng chồ ạ ệ ứ ữ tăng d n. Tuy nhiên đ i v i m i trình duy t cóầ ố ớ ỗ ệ gi i h n v kích th c đ i v i m i font ch ,ớ ạ ề ướ ố ớ ỗ ữ v t quá gi i h n này, các th <ượ ớ ạ ẻ BIG> s khôngẽ có ý nghĩa. <SMALL> </SMALL> In ch nh h n bình th ng b ng cách gi mữ ỏ ơ ườ ằ ả kích th c font hi n th i đi m t. Vi c s d ngướ ệ ờ ộ ệ ử ụ các th <ẻ SMALL>l ng nhau t o ra hi u ngồ ạ ệ ứ ch gi m d n. Tuy nhiên đ i v i m i trìnhữ ả ầ ố ớ ỗ duy t có gi i h n v kích th c đ i v i m iệ ớ ạ ề ướ ố ớ ỗ font ch , v t quá gi i h n này, các thữ ượ ớ ạ ẻ <SMALL> s không có ý nghĩa.ẽ <SUP> </SUP> Đ nh d ng ch s trên (SuperScript)ị ạ ỉ ố <SUB> </SUB> Đ nh d ng ch s d i (SubScript)ị ạ ỉ ố ướ <BASEFONT> Đ nh nghĩa kích th c font ch đ c s d ngị ướ ữ ượ ử ụ cho đ n h t văn b n. Th này ch có m t thamế ế ả ẻ ỉ ộ s size= xác đ nh c ch . Th <BASEFONT>ố ị ỡ ữ ẻ không có th k t thúcẻ ế . <FONT> </FONT> Ch n ki u ch hi n th . Trong th này có thọ ể ữ ể ị ẻ ể đ t hai tham s size= ho c color= xác đ nh cặ ố ặ ị ỡ ch và màu s c đo n văn b n n m gi a haiữ ắ ạ ả ằ ữ th . Kích th c có th là tuy t đ i (nh n giá trẻ ướ ể ệ ố ậ ị t 1 đ n 7) ho c t ng đ i (+2,-4 ) so v i fontừ ế ặ ươ ố ớ ch hi n t i.ữ ệ ạ 4.2. Căn l văn b n trong trang Webề ả Trong trình bày trang Web c a mình các b n luôn ph i chú ý đ n vi c căn l các vănủ ạ ả ế ệ ề b n đ trang Web có đ c m t b c c đ p. M t s các th đ nh d ng nh ả ể ượ ộ ố ụ ẹ ộ ố ẻ ị ạ ư P, Hn, IMG đ u có tham s ề ố ALIGN cho phép b n căn l các văn b n n m trong ph m vi gi iạ ề ả ằ ạ ớ h n b i c a các th đó.ạ ở ủ ẻ Các giá tr cho tham s ị ố ALIGN: LEFT Căn l tráiề CENTER Căn gi a trangữ RIGHT Căn l ph iề ả Ngoài ra, chúng ta có th s d ng th ể ử ụ ẻ CENTER đ căn gi a trang m t kh i văn b n. ể ữ ộ ố ả Cú pháp: Giáo trình thi t k Web ế ế 5 Giáo trình Thi t k Web ế ế 4.3. Các ký t đ c bi tự ặ ệ Ký t & đ c s d ng đ ch chu i ký t đi sau đ c xem là m t th c th duy nh t.ự ượ ử ụ ể ỉ ỗ ự ượ ộ ự ể ấ Ký t ; đ c s d ng đ tách các ký t trong m t t .ự ượ ử ụ ể ự ộ ừ Ký tự Mã ASCII Tên chu iỗ < &#060 &lt > &#062 &gt & &#038 &amp 4.4. S d ng màu s c trong thi t k các tử ụ ắ ế ế rang Web M t màu đ c t ng h p t ba thành ph n màu chính, đó là: Đ (Red), Xanh lá câyộ ượ ổ ợ ừ ầ ỏ (Green), Xanh n c bi n (Blue). Trong HTML m t giá tr màu là m t s nguyên d ngướ ể ộ ị ộ ố ạ hexa (h đ m c s 16) có đ nh d ng nh sau: ệ ế ơ ố ị ạ ư #RRGGBB trong đó: RR - là giá tr màu Đ .ị ỏ GG - là giá tr màu Xanh lá cây.ị BB - là giá tr màu Xanh n c bi n.ị ướ ể Màu s c có th đ c xác đ nh qua thu c tính bgcolor= hay color=. Sau d u b ng có thắ ể ượ ị ộ ấ ằ ể là giá tr RGB hay tên ti ng Anh c a màu. V i tên ti ng Anh, ta ch có th ch ra 16 màuị ế ủ ớ ế ỉ ể ỉ trong khi v i giá tr RGB ta có th ch t i 256 màu.ớ ị ể ỉ ớ Sau đây là m t s giá tr màu c b n:ộ ố ị ơ ả Màu s cắ Giá trị Tên ti ng Anhế Đỏ Đ s mỏ ẫ Xanh lá cây Xanh nh tạ Xanh n c bi nướ ể Vàng Vàng nh tạ Tr ngắ Đen Xám #FF0000 #8B0000 #00FF00 #90EE90 #0000FF #FFFF00 #FFFFE0 #FFFFFF #000000 #808080 RED DARKRED GREEN LIGHTGREEN BLUE YELLOW LIGHTYELLOW WHITE BLACK GRAY Giáo trình thi t k Web ế ế 6 <CENTER>Văn b n s đ c căn gi a trang</ả ẽ ượ ữ CENTER> Giáo trình Thi t k Web ế ế Nâu Tím Tím nh tạ H ngồ Da cam Màu đ ng ph c h iồ ụ ả quân #A52A2A #FF00FF #EE82EE #FFC0CB #FFA500 #000080 #4169E1 #7FFFD4 BROWN MAGENTA VIOLET PINK ORANGE NAVY ROYALBLUE AQUAMARINE Cú pháp: <BODY LINK = color ALINK = color VLINK = color BACKGROUND = url BGCOLOR = color TEXT = color TOPMARGIN = pixels RIGHTMARGIN = pixels LEFTMARGIN = pixels > ph n n i dung c a tài li u đ c đ t đâyầ ộ ủ ệ ượ ặ ở </BODY> Sau đây là ý nghĩa các tham s c a th BODY:ố ủ ẻ Các tham số ý nghĩa LINK Ch đ nh màu c a văn b n siêu liên k tỉ ị ủ ả ế ALINK Ch đ nh màu c a văn b n siêu liên k t đang đang ch nỉ ị ủ ả ế ọ VLINK Ch đ nh màu c a văn b n siêu liên k t đã t ng mỉ ị ủ ả ế ừ ở BACKGROUND Ch đ nh đ a ch c a nh dùng làm n nỉ ị ị ỉ ủ ả ề BGCOLOR Ch đ nh màu n nỉ ị ề TEXT Ch đ nh màu c a văn b n trong tài li uỉ ị ủ ả ệ SCROLL YES/NO - Xác đ nh có hay không thanh cu nị ộ TOPMARGIN L trênề RIGHTMARGIN L ph iề ả LEFTMARGIN L tráiề Giáo trình thi t k Web ế ế 7 Giáo trình Thi t k Web ế ế 4.5. Ch n ki u ch cho văn b nọ ể ữ ả Cú pháp: <FONT FACE = font-name COLOR = color SIZE = n > </FONT> 4.6. Khái ni m văn b n siêu liên k tệ ả ế Văn b n siêu liên k t hay còn g i là siêu văn b n là m t t , m t c m t hay m t câuả ế ọ ả ộ ừ ộ ụ ừ ộ trên trang Web đ c dùng đ liên k t t i m t trang Web khác. Siêu văn b n là môiượ ể ế ớ ộ ả tr ng trong đó ch a các liên k t (link) c a các thông tin. Do WWW c u thành t nhi uườ ứ ế ủ ấ ừ ề h th ng khác nhau, c n ph i có m t quy t c đ t tên th ng nh t cho t t c các văn b nệ ố ầ ả ộ ắ ặ ố ấ ấ ả ả trên Web. Quy t c đ t tên đó là URL (Universal Resource Locator).ắ ặ Các thành ph n c a URL đ c minh ho hình trên.ầ ủ ượ ạ ở • D ch vị ụ: Là thành ph n b t bu c c a URL. Nó xác đ nh cách th c trình duy t c aầ ắ ộ ủ ị ứ ệ ủ máy khách liên l c v i máy ph c v nh th nào đ nh n d li u. Có nhi u d ch vạ ớ ụ ụ ư ế ể ậ ữ ệ ề ị ụ nh ư http, wais, ftp, gopher, telnet. • Tên h th ngệ ố : Là thành ph n b t bu c c a URL. Có th là tên mi n đ y đ c aầ ắ ộ ủ ể ề ầ ủ ủ máy ph c v ho c ch là m t ph n tên đ y đ – tr ng h p này x y ra khi văn b nụ ụ ặ ỉ ộ ầ ầ ủ ườ ợ ả ả đ c yêu c u v n n m trên mi n c a b n. Tuy nhiên nên s d ng đ ng d n đ y đ .ượ ầ ẫ ằ ề ủ ạ ử ụ ườ ẫ ầ ủ • C ngổ : Không là thành ph n b t bu c c a URL. C ng là đ a ch socket c a m ngầ ắ ộ ủ ổ ị ỉ ủ ạ dành cho m t giao th c c th . Giao th c http ng m đ nh n i v i c ng 8080.ộ ứ ụ ể ứ ầ ị ố ớ ổ • Đ ng d n th m cườ ẫ ư ụ : Là thành ph n b t bu c c a URL. Ph i ch ra đ ng d n t iầ ắ ộ ủ ả ỉ ườ ẫ ớ file yêu c u khi k t n i v i b t kỳ h th ng nào. Có th đ ng d n trong URL khác v iầ ế ố ớ ấ ệ ố ể ườ ẫ ớ đ ng d n th c s trong h th ng máy ph c v . Tuy nhiên có th rút g n đ ng d nườ ẫ ự ự ệ ố ụ ụ ể ọ ườ ẫ b ng cách đ t bi t danh (alias). Các th m c trong đ ng d n cách nhau b i d u g chằ ặ ệ ư ụ ườ ẫ ở ấ ạ chéo (/). Giáo trình thi t k Web ế ế 8 http://selab.vnuh.edu.vn:8080 /~dir1/dir2/dir3/index.HTML#chapter001 D ch vị ụ Tên h ệ th ngố C ngổ Đ ng ườ d nẫ Tên file Ví d v URLụ ề Các tham s , ố bi n, truy ế v nấ Giáo trình Thi t k Web ế ế • Tên file : Không là thành ph n b t bu c c a URL. Thông th ng máy ph c v đ cầ ắ ộ ủ ườ ụ ụ ượ c u hình sao cho n u không ch ra tên file thì s tr v file ng m đ nh trên th m cấ ế ỉ ẽ ả ề ầ ị ư ụ đ c yêu c u. File này th ng có tên là index.html, index.htm, default.html hayượ ầ ườ default.htm. N u cũng không có các file này thì th ng k t qu tr v là danh sách li tế ườ ế ả ả ề ệ kê các file hay th m c con trong th m c đ c yêu c uư ụ ư ụ ượ ầ • Các tham số : Không là thành ph n b t bu c c a URL. N u URL là yêu c u tìmầ ắ ộ ủ ế ầ ki m trên m t c s d li u thì truy v n s g n vào URL, đó chính là đo n mã đ ng sauế ộ ơ ở ữ ệ ấ ẽ ắ ạ ằ d u ch m h i (?).URL cũng có th tr l i thông tin đ c thu th p t form. Trongấ ấ ỏ ể ả ạ ượ ậ ừ tr ng h p d u thăng (#) xu t hi n đo n mã đăng sau là tên c a m t v trí (location)ườ ợ ấ ấ ệ ạ ủ ộ ị trong file đ c ch ra.ượ ỉ Đ t o ra m t siêu văn b n chúng ta s d ng th <ể ạ ộ ả ử ụ ẻ A>. Cú pháp: <A HREF = url NAME = name TABINDEX = n TITLE = title TARGET = _blank / _self > siêu văn b nả </A> Ý nghĩa các tham s :ố HREF Đ a ch c a trang Web đ c liên k t, là m t URL nào đó.ị ỉ ủ ượ ế ộ NAME Đ t tên cho v trí đ t th .ặ ị ặ ẻ TABLEINDEX Th t di chuy n khi n phím Tabứ ự ể ấ TITLE Văn b n hi n th khi di chu t trên siêu liên k t.ả ể ị ộ ế TARGET M trang Web đ c liên trong m t c a s m i (ở ượ ộ ử ổ ớ _blank) ho cặ trong c a s hi n t i (ử ổ ệ ạ _self), trong m t frame (tên frame).ộ 4.7. Đ a ch t ng đ iị ỉ ươ ố URL đ c trình bày trên là URL tuy t đ i. Ngoài ra còn có URL t ng đ i hay cònượ ở ệ ố ươ ố g i là URL không đ y đ . Đ a ch t ng đ i s d ng s khác bi t t ng đ i gi a vănọ ầ ủ ị ỉ ươ ố ử ụ ự ệ ươ ố ữ b n hi n th i và văn b n c n tham chi u t i. Các thành ph n trong URL đ c ngănả ệ ờ ả ầ ế ớ ầ ượ cách b ng ký t ngăn cách (ký t g ch chéo /). Đ t o ra URL t ng đ i, đ u tiên ph iằ ự ự ạ ể ạ ươ ố ầ ả s d ng ký t ngăn cách. URL đ y đ hi n t i s đ c s d ng đ t o nên URL đ yử ụ ự ầ ủ ệ ạ ẽ ượ ử ụ ể ạ ầ đ m i. Nguyên t c là các thành ph n bên trái d u ngăn cách c a URL hi n t i đ củ ớ ắ ầ ấ ủ ệ ạ ượ gi nguyên, các thành ph n bên ph i đ c thay th b ng thành ph n URL t ng đ i.ữ ầ ả ượ ế ằ ầ ươ ố Chú ý r ng trình duy t không g i URL t ng đ i, nó b sung vào URL c s đã xácằ ệ ử ươ ố ổ ơ ở Giáo trình thi t k Web ế ế 9 Giáo trình Thi t k Web ế ế đ nh tr c thành ph n URL t ng đ i xác đ nh sau thu c tính href=. Ký t đ u tiên sauị ướ ầ ươ ố ị ộ ự ầ d u b ng s xác đ nh các thành ph n nào c a URL hi n t i s tham gia đ t o nên URLấ ằ ẽ ị ầ ủ ệ ạ ẽ ể ạ m i.ớ Ví d , n u URL đ y đ là: ụ ế ầ ủ http://it-department.vnuh.edu.vn/HTML/index.htm thì: • D u hai ch m (ấ ấ : ) ch d ch v gi nguyên nh ng thay đ i ph n còn l i. Ví d ỉ ị ụ ữ ư ổ ầ ạ ụ :// www.fpt.com/ s t i trang ch c a máy ph c v ẽ ả ủ ủ ụ ụ www.fpt.com v i cùng d ch vớ ị ụ http. • D u g ch chéo (ấ ạ / ) ch d ch v và máy ph c v gi nguyên nh ng toàn bỉ ị ụ ụ ụ ữ ư ộ đ ng d n thay đ i. Ví d ườ ẫ ổ ụ /Javascript/index.htm s t i file ẽ ả index.htm c a thủ ư m c ụ Javascript trên máy ph c v ụ ụ www.it-department.vnuh.edu.vn. • Không có d u phân cáchấ ch có tên file là thay đ i. Ví d ỉ ổ ụ index1.htm s t iẽ ả file index1.htm trong th m c HTML c a máy ph c v ở ư ụ ủ ụ ụ www.it- department.vnuh.edu.vn. • D u thăng (ấ # ): ch d ch v , máy phuc v , đ ng d n và c tên file gi nguyên,ỉ ị ụ ụ ườ ẫ ả ữ ch thay đ i v trí trong file.ỉ ổ ị Do đ ng d n đ c xem là đ n v đ c l p nên có th s d ng ph ng pháp đ ng d nườ ẫ ượ ơ ị ộ ậ ể ử ụ ươ ườ ẫ t ng đ i nh trong UNIX hay MS-DOS (t c là ươ ố ư ứ . ch th m c hi n t i còn ỉ ư ụ ệ ạ ch thỉ ư m c cha c a th m c hi n t i).ụ ủ ư ụ ệ ạ URL c s có th đ c xác đ nh b ng th <BASE>. ơ ở ể ượ ị ằ ẻ 4.8. K t n i mailtoế ố N u đ t thu c tính href= c a th <a> giá tr mailto:address@domain thì khi kích ho tế ặ ộ ủ ẻ ị ạ k t n i s kích ho t ch c năng th đi n t c a trình duy t.ế ố ẽ ạ ứ ư ệ ử ủ ệ <ADDRESS> Trang WEB này đ c ượ <A href=”mailto:webmaster@vnuh.edu.vn” > WEBMASTER <\A> b o trìả <\ADDRESS> 4.9. V m t đ ng th ng n m ngangẽ ộ ườ ẳ ằ Cú pháp: <HR ALIGN = LEFT / CENTER / RIGHT COLOR = color NOSHADE SIZE = n WIDTH = width > Ý nghĩa các tham s :ố Giáo trình thi t k Web ế ế 10 [...]... kế Web 3. Thiết kế website theo mẫu sau (http://shopping.yahoo.com) Giáo trình thiết kế Web 24 Giáo trình Thiết kế Web 4. Thiết kế website theo mẫu sau (http://www.is­edu.hcmuns.edu.vn) Giáo trình thiết kế Web 25 Giáo trình Thiết kế Web 5. Thiết kế website theo mẫu sau (http://vnexpress.net) 6. Thiết kế website theo mẫu sau (http://www.codeproject.com) Giáo trình thiết kế Web 26 Giáo trình Thiết kế Web. .. kế Web 21 Giáo trình Thiết kế Web 4. Nếu đăng kớ thành cụng, màn hỡnh sau sẽ hiện ra để cung cấp cho bạn một số lựa chọn khi xõy  dựng website của mỡnh Giáo trình thiết kế Web 22 Giáo trình Thiết kế Web IV.THIẾT KẾ MỘT SỐ WEBSITE MẪU   1. Thiết kế website theo mẫu sau (http://greetings.yahoo.com) 2. Thiết kế website theo mẫu sau (http://www.flowers.com) Giáo trình thiết kế Web 23 Giáo trình Thiết kế. .. Kết nối hai trang đó tạo vào HomePage K Upload lờn website và kiểm tra lại 8. Chọn chủ đề để thiết kế website 8 Website về dịch vụ việc làm W ) Website về dịch vụ nhà đất (http://www.nhadat.com)   Website trường học Website bỏo điện tử (http://vnexpress.net ) W Website bỏn hàng (cửa hàng, siờu thị ảo trờn Internet) W Website dịch vụ giải trớ như ECards, Điện hoa,  W Cỏc chủ đề khỏc III. ĐĂNG KÍ WEBSITE MIỄN PHÍ TRÊN INTERNET... đầu Giáo trình thiết kế Web 16 Giáo trình Thiết kế Web Phần II thiết kế web sử dụng ms frontpage I. CÁC THAO TÁC CƠ BẢN 1. Cỏc thao tỏc chớnh khi soạn thảo một trang web 1 Tạo mới một trang web:  Chọn chức năng File/New/Page /Normal Page hay chọn icon New  trờn Toolbar t Lưu trang web:  Chọn chức năng File/Save hay chọn icon Save trờn Toolbar. Để lưu trang  web dưới dạng một tờn khỏc chọn chức năng File/Save As…... trình Thiết kế Web Giáo trình thiết kế Web 27 Giáo trình Thiết kế Web 7. Thiết kế website theo mẫu sau (http://www.bttvn.com ) Để tham khảo cỏch thiết kế cỏc trang web trờn, hóy: - Tải về mỏy bằng cỏch chọn chức năng Save của IE - Dựng MS Front Page để mở tập tin đó lưu lờn - Chuyển qua lại giữa cỏc màn hỡnh Normal View và HMTL View để biết cỏch thiết kế Với mỗi trang web đó xem hóy chỳ ý cỏc vấn đề sau:... http://www.vietname­business.com/jobnld/   Giáo trình thiết kế Web 19 Giáo trình Thiết kế Web ế  http://www.jobsonline.saigonnet.vn/  6. Tạo trang web chứa các hyperlink dùng để truy cập nhanh 6 Tạo trang web đặt tờn là  Links.htm  chứa cỏc hyperlink đó đề cập ở trờn. Bổ sung thờm  cỏc hyperlink và cỏc phõn loại khỏc mà cỏc anh chị đó biết c Upload lờn website và kiểm tra lại 7. Tạo trang HomePage 7 Tạo trang web HomePage đặt tờn là Default.htm giới thiệu về nhúm và cỏc cụng việc mà ... Xem trước hiển thị của trang web đang thiết kế:  Chọn chức năng File/Preview in Browser.  Lỳc này cửa sổ trỡnh duyệt Internet Explorer (IE) sẽ hiển thị trang web mà chỳng ta đang  soạn thảo. Nờn lưu trang web trước khi chọn chức năng này s Cửa sổ màn hỡnh soạn thảo trang web cung cấp 3 cỏch “hiểu” (view) khỏc nhau về 1 trang  web.   o Nếu bạn chọn Normal view, bạn cú thể biờn tập trang web dưới dạng WYSIWYG. ... File Format Được Microsoft thiết kế để quét ảnh từ máy quét cũng như tạo các ấn phẩm Text /HTML HTML, htm PostScript eps, ps Được tạo ra để hiển thị và in các văn bản có chất lượng cao Adobe Acrobat pdf Viết tắt của Portable Document Format Acrobat cũng sử dụng các siêu liên kết ngay trong văn bản cũng giống như HTML Từ phiên bản 2.0, các sản phẩm của Acrobat cho phép liên kết giữa nhiều văn bản Ưu điểm... trong phần mở đầu (tức là nằm trong cặp thẻ HEAD) 5.3 Chèn một hình ảnh, một đoạn video vào tài liệu HTML Để chèn một file ảnh (.jpg, gif, bmp) hoặc video (.mpg, avi) vào tài liệu HTML, bạn có thể sử dụng thẻ IMG Cú pháp: . HomePage. K Upload lờn website và kiểm tra lại. 8. Chọn chủ đề để thiết kế website 8 Website về dịch vụ việc làm. W Website về dịch vụ nhà đất (http://www.nhadat.com). ) Website bỏo điện tử (http://vnexpress.net. thi t k Web ế ế 16 Giáo trình Thi t k Web ế ế Ph n IIầ thi t k web s d ng ms frontpage ế ế ử ụ I. CÁC THAO TÁC CƠ BẢN 1. Cỏc thao tỏc chớnh khi soạn thảo một trang web 1 Tạo mới một trang web: . trang web: Chọn chức năng File/Save hay chọn icon Save trờn Toolbar. Để lưu trang web dưới dạng một tờn khỏc chọn chức năng File/Save As… w Xem trước hiển thị của trang web đang thiết kế: Chọn

Ngày đăng: 18/05/2015, 17:19

Tài liệu cùng người dùng

Tài liệu liên quan