Web Design Basic

Chia sẻ: Đường Anh Tuấn | Ngày: | Loại File: PDF | Số trang:42

Thêm vào BST

Báo xấu

152
lượt xem 59
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Ðe viêt HTML cho trang Web, bạn hãy start chương trình NotePad của Microsoft có đi kèm theo với Windows. Ðó là mot ASCII Editor. Viêt xong, bạn hãy save nó vào một folder nào đó dễ nhớ. Tên của file này bắt buộc phải có tận cùng là .htm hoặc .htm.l Ví dụ: start.htm. Ðể thưổng thức thành quả của mình, bạn hãy open file đó bằng một Browser.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Web Design Basic

M ñu HTML là gì, c u t o m t trang web dư i d ng HTML, màu ch , màu n n... Ð vi t HTML cho trang Web, b n hãy start chương trình NotePad c a Microsoft có ñi kèm theo v i Windows. Ðó là m t ASCII Editor. Vi t xong, b n hãy save nó vào m t folder nào ñó d nh . Tên c a file này b t bu c ph i có t n cùng là .htm ho c .html Ví d : start.htm. Ð thư ng th c thành qu c a mình, b n hãy open file ñó b ng m t Browser. C u trúc cơ b n M t document HTML luôn b t ñ u b ng và k t thúc b ng (trong ñó b n cũng có th vi t nh ho c vi t hoa và ). Nh có c p TAG này mà Browser bi t ñư c ñó là HTML - document ñ trình duy t. Nh ng ch ñó ch ñ dành riêng cho Browser, ngư i ñ c ch nh n ñư c nh ng gì vi t gi a c p TAG và . Trong m t document html, chú thích ñư c dùng như sau: Như v y m t trang web vi t b ng html s có c u trúc như sau:
Dòng này lại là font Bodoni, màu đỏ, cỡ 4 face th hi n cho m u ch , size th hi n cho c ch (s càng l n thì ch càng to) và color th hi n cho màu s c c a ch , #000000 là màu ñen, #FF0000 là màu ñ , #FFFF00 là màu vàng. TAG cho phép b n chuy n sang dòng m i. B n có th dùng nhi u như b n mu n. C m i l n có là m t l n xu ng dòng. B n có th dùng mouse ph i gõ vào n n c a m t trang web nào ñó r i ch n source code ñ tham kh o xem nó ñư c vi t như th nào. Ð y là cách t t nh t ñ khám phá ra nh ng ñi u "bí m t" c a các website ñ p. Như v y là b n ñã có th vi t ñư c m t trang web ñơn gi n r i ñó. M t trang web bao gi cũng có hai ph n cơ b n là tiêu ñ và ph n thân. Tiêu ñ luôn ñư c vi t to. B n có th dùng size l n hơn và cũng có th dùng nh ng TAG ñã ñư c ñ nh s n cho tiêu ñ . Tiêu ñ c a trang web Welcome to my Homepage! Tiêu ñ c a trang web Tiêu ñ c a trang web Tiêu ñ c a trang web Tiêu ñ c a trang web là to nh t và là nh nh t. Tiêu ñ luôn n m trung tâm c a trang, vì v y ta ph i dùng thêm m t c p TAG n a : T t c nh ng gì n m gi a c p TAG này ñ u ñư c ñ nh hư ng vào phía gi a c a trang. Trong ví d này, n n c a trang là xanh nư c bi n (#000080) ch màu tr ng. B sung: Trong m t HTML Document, ngoài ph n body còn có ph n head, ñư c vi t b i c p tag . N u b n s d ng c p tag này, b n b t bu c ph i vi t thêm m t c p
tag n a, ñó là Gi a và là tên c a trang web ñư c browser trình bày phía trên cùng c a menubar. Như v y m t trang web v i "ñ u" s có c u trúc như sau: Trang web dau tien cua toi Ph n b n c n trình bày. Ví d m t b c nh hay l i văn. Trong "head" ta còn có th ñưa r t nhi u thông tin vào cho browser, search engine... Cái ñó s ñư c ñ c p ñ n trong m t m c riêng Cách ñưa tranh nh vào m t trang web Trong trang trư c, chúng ta ñã ñ c p ñ n cách trình bày ch trong trang web. Ð làm cho trang web sinh ñ ng hơn, h p d n hơn, b n có th ñưa thêm tranh nh vào. Có nh ng trang web liên quan ñ n s li u, ñ th và ñ th cũng là m t d ng nh (images). Sau ñây là cách ñưa m t b c nh vào trong trang web. nh cho vào trang web nên save dư i d ng .GIF ho c .JPG • Không nên to quá, ñây không nói ñ n kích thư c (cm) mà nói ñ n kính c file • (s KB). Khi scan, b n hãy ch n 72 dpi (dots per inch) b i vì ña ph n các màn hình • máy tính làm vi c v i ñ phân gi i này. Khi upload trang web, nh upload c nh. • Tên c a các file nên s d ng ch thư ng, không nên s d ng ch hoa. Ví d : • myphoto.jpg ch không Myphoto.jpg. Sau ñây là HTML Code ñ ñưa hình nh vào trang web: B n th y không, ñi u ñó r t ñơn gi n. Ch riêng ñã ñ ñ ñưa m t b c nh vào trang web. img là image và src là source. T t c nh ng cái ñi ñ ng sau ch ñ trình bày b c nh ñó ñ p hơn thôi. width là chi u r ng c a b c nh mà b n mu n, nó không ph thu c vào kích thư c g c c a b c nh. height là chi u cao.
T t c ñ u ño b ng pixel. border="0" báo cho Browser bi t là nh này s ñư c trình bày không có khung. alt có ích khi nh chưa ho c không ñư c n p (nhi u ngư i surf không nh ñ ñ t n th i gian) Khi ñó ngư i xem bi t ñư c mình s ñư c xem cái gì. Dùng tranh nh làm n n cho trang web Trong trang trư c, chúng ta ñã nói ñ n màu s c c a n n trang web. B ng cách thay ñ i thông s c a bgcolor, b n s t o ñư c màu n n khác tuỳ theo s thích c a mình. Như b n ch c cũng ñã th y trong các website ñã ñ n thăm, m t trang web còn có th có n n r t ñ p, t o ra t nh ng b c tranh nh . Cái ñó r t ñơn gi n. HTML Code s như sau: B n th y ñó, ñây ch có m t s khác bi t r t nh : ta thêm background vào và nh n ñư c n n là back.jpg. Tuỳ theo kích c c a back.jpg mà n n trông khác nhau. back.jpg s ñư c ghép vào v i nhau n u như c c a nó nh hơn window c a Browser. bgcolor có cũng ñư c mà không có cũng v n ñư c, nó ch có tác d ng khi back.jpg vì lý do gì ñó không ñư c n p. Cách t o liên k t (hyper link) t i các trang web khác Sau khi có tranh nh và bài vi t, ch c b n cũng mu n có m t vài links t i các trang khác. Trang c a b n và nh ng trang mà b n thích. R i cũng ph i có m t ch mà ngư i ñ n thăm ch c n click vào ñó là có th vi t thư cho b n. Ch ñó có th là m t t , m t câu hay m t b c nh. Trang này b n ñang xem d nhưng b n v n có th ngó qua m t chút. Gõ vào b c nh bên b n cũng ñư c k t qu tương t . Sau ñây là html code c a 2 liên k t trên. Trang này b n ñang xem d nhưng b n v n có th ngó qua [trang trư c] m t chút. Dùng c p TAG , b n có th bi n nhi u objects thành links. Trong ví d này, b n có b c nh c a Hillary Clinton và hai ch "trangtrư c" làm liên k t (links). Ch c n gõ vào ñó là b n ñã bư c sang trang khác. Links không ch gi i h n trong website c a b n, nó có th ñưa b n ñi kh p nơi trên internet. Sau ñây là code c a m t trang v i links t i các trang khác, ví d trang web [Thương Hi u Vi t] nơi tui ñang làm vi c.
Ví d trang web c a [Thương Hi u Vi t t i Bochum, CHLB Ð c ví d trên, b n th y m t ño n code m i, ñó là target="_new". N u bi t ti ng Anh, ch c b n cũng suy ra ñư c ý nghĩa c a ño n code ñó. Nó có tác d ng ch cho trình duy t (browser) bi t s ph i m trang web ñó trong m t c a s m i (target = ñích, new = m i). Target còn có th mang nh ng giá tr sau: "_blank" (như "_new"), "_top", "_parent", "_self" (3 giá tr này ch dùng cho nh ng trang web có ch a frame - s ñ c p ñ n sau). Và ñây là cách t o m t email-link: Ch c b n cũng th y trên nhi u trang web có nh ng link mà ch càn gõ vào nó là chương trình e-mail t ñ ng m ra cho b n vi t thư t i m t ñ a ch ñã ñư c ñ nh s n, nhi u khi tiêu ñ (subject) c a e-mail cũng ñã có s n. Gõ [vào ñây] ho c vào bi u tư ng bên ñ g i e-mail cho tôi. Gõ [vào ñây] ho c vào bi u tư ng bên ñ g i e-mail cho tôi. Thay vì ñ a ch m t trang web, b n ch c n ñưa mailto: và ñ a ch e-mail, mu n có subject và text s n, ch c n thêm ?subject=tiêu ñ &body=text Màu c a liên k t: Trong trang web này, b n th y liên k t nào cũng màu xanh, gõ vào thì thành màu tr ng, sau khi gõ thì màu xám. Ði u ñó ñư c th c hi n b i các ño n code sau (trong body tag): (alink= active link, vlink= visited link) ImageMap - tho t nhìn thì ph c t p nhưng l i r t ñơn gi n Trên m t s trang web, b n th y m t b c tranh mà khi gõ chu t vào m i góc có th t i m t trang m i. ñó ngư i ta s d ng m t b c tranh, m t t m nh ñ làm liên k t. Ð ñ nh v t ng khu v c trên b c nh, ngư i ta s d ng t a ñ c a t ng khu v c ñó. B n th gõ vào trán, mi ng, mũi, c c a Hillary Clinton ñ xem ví d . Cái ñó g i là ImageMap, s d ng Code sau:
Trong ñó b n ñ t m t b c nh là MAP b ng USERMAP: usemap="#Hillary", chia ph n trên map b ng AREA, quy ñ nh t a ñ c a t ng ph n trên map b ng COORDS: coords="29,24,82,52", quy ñ nh liên k t c a t ng ph n b ng TAG quen thu c HREF, ñ nh hình cho t ng ph n b ng SHAPE: shape="rect". SHAP còn có th mang giá tr circle (tròn) , poly (polygon = ña giác). B n có th s d ng COORDS như sau: N u shape = "rect": coords="x1,y1,x2,y2", trong ñó x1,y1 là t a ñ góc trên bên trái • và x2,y2 là t a ñ c a góc dư i bên ph i c a hình ch nh t tính t góc trên bên trái c a b c nh. N u shape = "circle": coords="x,y,r", trong ñó x,y là t a ñ c a tâm hình tròn • tính t góc trên bên trái c a b c nh và r là bán kính hình tròn. N u shape = "poly": coords="x1,y1,x2,y2,...,xn,yn", trong ñó xn,yn là t a ñ c a t ng • góc c a ña giác tính t góc trên bên trái c a b c nh. Ð tính ñư c t a ñ c a t ng AREA, b n dùng m t ph n m m x lý nh như Corel PhotoPaint 10, PaintShop Pro 7... ho c ph i ñoán và th d a vào kích c c a b c nh. Hãy gõ vào minh h a bên ñ xem chi ti t. Cách trang trí ch , b c c m t trang web Trong trang trư c, chúng ta ñã ñ c p ñ n cách ñ nh hư ng m t object trong document b ng c p TAG: Nh ng gì n m gi a c p TAG này ñ u ñư c Browser ñưa vào gi a c a window. N u b n không ñ nh hư ng thì browser s t ñ ng theo th t t trái sang ph i. Nhưng ñ ng v i th v i hay vì hai c p TAG này không t n t i ;-) Mu n có m t trang mà tranh bên ph i còn ch bên trái b n ph i dùng ñ n TABLE. Cái ñó s ñư c nh c ñ n trong ph n sau. B n có th dùng c p TAG ñ t o ra t ng kh c a bài vi t. Th c ra ñây ch là m t TAG ñơn. Ph n ñ ng sau có th b ñi cũng ñư c. Tuy v y ña ph n các Webeditor v n ñ t nó cu i m t kh . B n có th ñ nh hư ng kh ch v phía ph i, trái hay vào trung tâm. Ai ñã t ng s d ng Word ñ u bi t ñ n ñi u ñó, m i cái là không ph i dùng ñ n TAG thôi. B n cũng có th áp d ng TAG này cho b t kỳ m t object nào khác như picture, video... Toàn b kh ch này s hư ng v phía trái Toàn b kh ch này s hư ng vào trung tâm Toàn b kh ch này s hư ng v bên ph i
Cũng có th vi t như sau (không có ): Toàn b kh ch này s hư ng v phía trái Toàn b kh ch này s hư ng vào trung tâm Toàn b kh ch này s hư ng v bên ph i T t nh t b n hãy [xem ví d ] Và sau ñây là các kh năng trang trí ch , có th s còn nhi u th thu t khác n a nhưng cho m t trang bình thư ng như c a chúng ta thì có th g i là t m ñ : Dòng ch này ñ m • Dòng này cũng ñ m • Dòng ch này nghiêng • Dòng ch này to hơn • Dòng này v a to, v a nghiêng, • v a ñ m, v a g ch chân Dòng ch này bé hơn • Dòng này l i g ch chân • € 20000 xu ng N u c a hàng b n gi m giá t • € 15000 T ng bình phương hai c nh góc vuông b ng bình phương • c nh huy n: a2+b2=c2 (a2+b2=c2) Công th c hóa h c c a nư c là: H2O (H2O) • N u b n mu n nh n m nh ñi u gì • Machine code: 100 Basic 150 • if....then...go to Tên phím c a Keyboard: Enter; Del; • Contrl... Ðưa ví d vào bài: Sample • Tên các Variables trong lĩnh v c Programming: • window.open("mywindow.html");
Các trích d n t nh ng câu nói c a ai ñó: H c, h c n a • h c mãi - Lê nin Ch dành cho Netscape Browser: Ch nh p nháy Look • at me now, i am blinking Ch dành cho Internet explorer: Ch ch y • o Khi c n m t dòng k ngang qua trang web như dư i, b n có th dùng tag ñ "k ": có th mang nh ng giá tr sau: "noshade" (không có bóng), width="x" (trong ñó width là chi u r ng và x có th là % ví d width="80%" ho c pixel ví d width="600"), color="blue" (màu c a dòng k ), size="1" (ñ ñ m c a dòng k ). Dòng trên ñư c vi t như sau: Thôi v y, có l th là ñ r i, nhi u quá l i loãng m t ;-) Table - b c c m t trang web s d ng b ng Table - m t y u t r t quan trong trong các Website ñ p. Table cho phép b n có m t
s chính xác ñ n t ng pixel trong b c c c a Homepage. V i Table b n có th trang trí và b c c trang web c a mình như m t t báo v i nhi u c t khác nhau. Table làm cho trang web c a b n có m t layout sinh ñ ng hơn. Trang này ch ñ c p t i nh ng cái cơ b n nh t c a Table. C p TAG t o ra m t Table. Như b n bi t, m t Table ñư c t o ta t nhi u dòng và m i dòng l i có th ch a nhi u ô. M i c p TAG t o ra m t dòng, trong dòng y b n có th s d ng nhi u c p TAG ñ có nhi u ô. Cũng như , và th c ra là m t TAG ñơn, không c n ñ n và nhưng n u c n th n, ta v n nên dùng nó như m t c p TAG. Table - m t y u t r t Table - m t y u t r t Table - m t y u t r t quan quan trong trong các quan trong trong các trong trong các Website Website ñ p. Table cho Website ñ p. Table cho ñ p. Table cho phép b n có phép b n có m t s chính phép b n có m t s chính m t s chính xác ñ n t ng xác ñ n t ng pixel trong xác ñ n t ng pixel trong pixel trong b c c c a b c c c a Homepage. V i b c c c a Homepage. V i Homepage. V i Table b n Table b n có th trang trí Table b n có th trang trí có th trang trí và b c c và b c c trang web c a và b c c trang web c a trang web c a mình như mình như m t t báo v i mình như m t t báo v i m t t báo v i nhi u c t nhi u c t khác nhau. nhi u c t khác nhau. khác nhau. V i Table b n có th trang V i Table b n có th trang V i Table b n có th trang trí và b c c trang web trí và b c c trang web trí và b c c trang web c a c a mình như m t t báo c a mình như m t t báo mình như m t t báo v i v i nhi u c t khác nhau. v i nhi u c t khác nhau. nhi u c t khác nhau. Table Table làm cho trang web Table làm cho trang web làm cho trang web c a b n c a b n có m t layout sinh c a b n có m t layout sinh có m t layout sinh ñ ng ñ ng hơn. ñ ng hơn. hơn. HTML Code c a b ng trên ñư c vi t như sau: Dòng 1 - ô 1 Dòng 1 - ô 2 Dòng 1 - ô 3 Dòng 2 - ô 1 Dòng 2 - ô 2 Dòng 2 - ô 3 cho bi t chi u r ng c a table này là 100%, con s này • không có m t giá tr c ñ nh, nó s thay ñ i theo m c r ng c a màn nh c a ngư i ñ n xem, như v y ngư i xem không ph i scroll ngang. Nhưng khi b n dùng m t giá tr c ñ nh, ch ng h n: width="800", Table này s luôn luôn r ng ch ng y pixel, b t k màn nh là 800 hay 1024 pixels. cho bi t, ô ñó chi m 33% chi u r ng c a dòng. •
hư ng b ng vào trung tâm c a trang web, • ñ nh hư ng toàn b n i dung c a m t ô. align có th mang các giá tr sau: "left" (gía tr m c ñ nh - không c n vi t cũng ñư c), "center" (trung tâm), "right" (ph i) bgcolor có th s d ng cho trang web (), toàn b table () ho c • t ng ô () border="1" bordercolor="red" có nghĩa: b ng có khung v i ñ dày 1, màu ñ • B n có th ñ nh kho ng cách gi a n i dung và khung trong m t ô b ng • cellpadding, cellpadding="10" có nghĩa là text cách khung 10 pixels. Tương t như v y v i kho ng cách gi a các ô trong b ng (cellpadding): cellspacing="5" có nghĩa là các ô c a table cách nhau 5 pixels Table - m t y u t r t Table - m t y u t r t Table - m t V i Table quan trong trong các quan trong trong các y ut r t b n có th Website ñ p. Table cho Website ñ p. Table cho quan trong trang trí và phép b n có m t s chính phép b n có m t s chính trong các b cc xác ñ n t ng pixel trong xác ñ n t ng pixel trong Website trang web b c c c a Homepage. V i b c c c a Homepage. V i ñ p. Table c a mình Table b n có th trang trí Table b n có th trang trí cho phép như m t t và b c c trang web c a và b c c trang web c a b n có m t báo v i mình như m t t báo v i mình như m t t báo v i s chính nhi u c t nhi u c t khác nhau. nhi u c t khác nhau. xác ñ n khác nhau. t ng pixel Table làm trong b cho trang Table - m t y u t r t quan trong trong các Website ñ p. c cc a web c a Table cho phép b n có m t s chính xác ñ n t ng pixel Homepage. b n có trong b c c c a Homepage. V i Table b n có th trang m t.... trí và b c c trang web c a mình như m t t báo v i nhi u c t khác nhau. Table làm cho trang web c a b n có Table - m t Table - m t m t layout sinh ñ ng hơn. y ut r t y ut r t quan trong quan trong trong các trong các Website Website ñ p. ñ p. Trong table trên, b n th y các ô có chi u cao và chi u r ng khác nhau, chính xác hơn là ô bên trái, phía dư i r ng b ng 2 ô trên, ô bên ph i l i cao b ng hai ô bên trái nó. Ði u ñó ñư c th c hi n b i colspan và rowspan (xem HTML Code) Dòng 1 - ô 1 Dòng 1 - ô 2 Text Text
Text Text Dòng 2 - 1 ô Và ñ c bi t n a là trong ô bên ph i, b n l i th y m t table n a có hai dòng, m i dòng hai ô. Như v y, b n có th l ng m t table trong m t table khác. Cũng còn r t nhi u th thu t trình bày n a nhưng tôi nghĩ, n u s d ng nh ng k thu t trên cùng v i m t chút sáng t o, b n cũng ñã ñ t ñư c r t nhi u r i. Có m t ñi u c n lưu ý là Netscape Version 2 không th hi n ñư c m t table n n t i v i ch sáng. Nhưng b n không c n ng i b i ngày nay ch c ch ng ai dùng NS 2 n a. Frames - "Windows Explorer" trong trang web 1. Frameset - Cols Frames là sáng ki n c a [Netscape] b t ñ u t Navigator version 2.0. [Microsoft] Internet Explorer (version 3.0 tr lên) cũng ñ c ñư c Frames. Dùng Frames, b n có th chia m t window ra làm nhi u ph n riêng bi t, không ph thu c vào nhau và có th ch a nh ng n i dung khác nhau. T Frame này có th thay ñ i n i dung c a Frame kia. Như v y website c a b n s ñư c b c c rõ ràng hơn, ti n l i hơn và ngư i xem có th tìm ñư c cái mình tìm nhanh chóng hơn. Ai hay s d ng Windows Explorer s th y ñư c tác d ng tương t c a Frames. Khi chia window, b n s có ít nh t 2 Frames. Nh ng Frames này ñư c g i là m t Frame-Set. M t trang s d ng Frames có c u trúc cơ b n như sau: Ð chia m t window ra làm hai ph n theo chi u d c, ph n bên trái chi m 30%, ph n bên ph i 70% chi u r ng c a window ta làm như sau:
2. Frameset - Rows Tương t như v y ta chia theo chi u ngang, nhưng l n này chia làm 3 ph n (30%, 50% và * là ph n còn l i c a màn hình): 3. Frameset - Gi i thích cols (columns) chia window theo chi u d c. Các giá tr 30% , 70% có th ñư c • thay b ng s pixels như 150 , 500 rows cho phép chia theo chi u ngang. 30%, 50% là chi u cao c a hai Frames • ñ u. D u * cho bi t chi u cao c a Frame th 3 là ph n còn l i c a window. tên và n i dung c a frame bên trái. B n c • tư ng tư ng, b n t o ñư c m t khung nh có hai ngăn (tương t như m t frameset), m i ngăn ch a m t b c nh (ñây là m t trang web). Frame bên trái tên là "trai" và ch a trang "trai.htm". Tương t như v y v i "ben phai", "phai.htm", "tren", "tren.htm", "duoi", "duoi.htm", "con_lai", "conlai.htm" 4. Frames - Navigation Menu Như v y ta ñã có ñư c nh ng b c nh trong khung. Nhưng m c ñích chính c a Frames không ph i là làm th nào ñ có nhi u trang trong m t window mà là làm th nào ñ dùng link c a Frame này thay ñ i n i dung c a Frame kia. Bây gi ta hãy th dùng trang "trai.htm" làm navigation ñ thay ñ i n i dung Frame "phai". Khi ñó ta ph i dùng thêm m t dòng code n a trong trang "trai.htm".
B n hãy click "xem vi du" sau ñó dùng chu t ph i click vào trang "trai.htm" trong frame "trai" ñ xem html-code. 4. Frameset in Frameset Và m t ví d n a s cho th y kh năng c a Frames. Trong ví d này, ñ u tiên ta chia window ra làm 2 ph n sau ñó l i chia ph n th 2 ra làm ñôi. Code c a nó như sau: This page uses frames but your browser doesn't support them. Please download a higher version and visit me again. Thanks anyway! B n th y ñ y, ta ñã chia window ra làm 4 Frames nhưng ch th y có 3. Ðó là tác d ng c a tag Hi n nay s lư ng browser không bi t Frames h u như không còn n a, nhưng ñ ch c ch n, ta hãy vi t thêm m t ph n và chú thích r ng browser c a ngư i ñ c không bi t frames, n u không ngư i ñó s ch ng ñ c ñư c m t ch gì khi ñ n thăm homepage c a b n. Ngoài ra còn m t s ñ c tính khác c a Frames như: scrolling="no" (n u b n vi t như v y trong tag , ngư i ñ c s không • th scroll ñ ñ c ti p n u như trang html có c to hơn Frame ch a nó). frameborder="0" (frame không có khung) • framespacing="0" (tương t như trong table) • noresize (không cho phép ngư i ñ c thay ñ i kích c c a window) •
Âm nh c, phim nh trong trang web B n còn có th làm cho trang web c a mình sinh ñ ng hơn b ng âm nh c, video... Trang này s giúp b n th c hi n ñi u ñó. Nhưng hãy ñ ng quên là internet còn ñang tương ñ i ch m và s d ng quá nhi u nh ng th ñó s mang l i ph n tác d ng. Video, sounds thư ng là nh ng files l n và c n r t nhi u th i gian d load. Có r t nhi u d ng audio (*.au, *.wav, *.mid....) và video (*.mpeg, *.avi...). Nhưng có l ch có d ng midi (*.mid) là c nh nh t. M t b n nh c 5 phút chi m kho ng 30KB trong khi ñó 5 phút dư i d ng wav lên t i 5MB. Ð ñưa chúng vào m t trang web, b n c n vi t dòng html-code sau: Trong ñó "music.mid" là tên c a file nh c, autostart="true" ch y b n nh c t ñ ng, loop="true" t ñ ng quay l i ñ u b n nh c khi và ch y ti p, n u b n ch mu n b n nh c ch y m t s l n nh t ñ nh l n r i d ng, hãy thay "true" b ng "1", "2"... Riêng Internet Explorer còn cho phép b n t o nh c n n v i tag ñơn Dòng code s ñư c vi t như sau: loop="infinite" cho phép browser ch y b n nh c không ng ng. Ngoài ra còn m t cách ñưa video vào trang web (ch dùng cho Internet Explorer) như m t b c nh: N u ñã t ng s d ng RealPlayer ch c b n s h i, làm th nào ñ nó t ñ ng ch y m t bài hát dư i d ng *.rm Ði u ñó không ph c t p l m nhưng ñòi h i ngư i ñ n thăm trang web c a b n ph i có RealPlayer cài trong máy, ñó l i là ñi u ít x y ra. Như v y b n ph i t o m t link ñ ngư i ñ c có th download ph n m m này t RealNetwork server. Sau ñây là dòng code b n c n ñ ñưa RealPlayer vào m t trang web:
Có m t ñi u b n c n chú ý là t t c các files nh c, video... ñ u ph i ñư c upload cùng v i trang web và cùng n m trong m t ñ a ch như trang web. N u s d ng m t file c a trang web khác, b n ph i ñưa ñ a ch ñ y ñ c a file ñó vào html-code. Ví d: JavaScript - gia v cho homepage Java và JavaScript không ñơn gi n như HTML, ít ra là ñ i v i tôi. Tôi nghĩ r ng, ñ t o d ng m t homepage thông thư ng, chúng ta cũng không c n thi t ph i ñi sâu vào chuyên ñ này. V l i n u có mu n, tôi cũng không ñ kh năng vì tôi không ph i là ngư i trong ngành IT. Trong ph n này tôi ch mu n gi i thi u v i b n v các JavaScripts, JavaApplets và cách ñưa chúng vào homepage cho h p lý và h u ích mà không ñi sâu vào t ng chi ti t c a program code. Xin l i vì l i gi i thích dài dòng, nhưng theo tôi, ñi u ñó là c n thi t. Ch c b n cũng ñã có l n t h i, hey cái tay ch homepage này làm th nào mà bi t ñư c mình ñã t ng ñ n thăm trang c a h n và l i còn nh ñư c c tên mình ñưa vào, làm th nào h n bi t mình dùng browser gì. R i ch c b n cũng có l n vò ñ u suy nghĩ, làm th nào mà khi ñưa mouse lên trên m t graphic l i hi n lên m t graphic khác... T t c nh ng ñi u làm b n ng c nhiên ñó ñư c th c hi n b i cái g i là JavaScript. JavaScript code ñư c vi t tr c ti p vào HTML code, JavaScripts không c n ph i biên d ch (compile) và b n có th b t chư c ñư c b ng cách nghiên c u HTML code c a các trang b n thích. Như ñã nói trong nh ng trang ñ u, trên th trư ng Internet t n t i nhi u lo i trình duy t khác nhau (ch y u là Microsoft Internet Explorer và Netscape Navigator, Communicator) và không ph i t t c các trình duy t ñ u có tính năng như nhau. Dùng JavaScript, b n có th làm cho trang web c a mình v a v n v i trình duy t c a ngư i ñ n thăm... Và tôi bi t ch c r ng b n ñang s d ng Microsoft Internet Explorer ;-) T t c nh ng ví d nêu trên ch là m t ph n vô cùng nh bé so v i nh ng gì JavaScript có th th c hi n ñư c. B n th click vào t m hình c a Hillary Clinton xem sao! Ðây là dòng html code b n ph i vi t (dòng code màu xanh ph i vi t li n, không xu ng dòng): function sayhello() {
alert('Hello, i am the ex-first lady of the USA.\nNice to meet you on Beanys homepage!'); } Ðó ch là l i gi i thi u v JavaScript, trong th i gian t i, b n s tìm th y ñây nhi u ñi u thú v hơn v ñ tài này. Ð xem các ph n khác c a Instant HTML Java Script in action [see more] Và m t ño n Java Script ng n như dư i cũng ñ giúp b n b o v trang web c a mình không cho ngư i khác link vào frame c a h . // anti-steal-page-script by www.tridung.de if (top.location != self.location) {top.location = self.location} Ðo n Script sau có th dùng ñ ki m tra password, n u ñúng thì m trang web ñư c b o v , n u sai, có thông báo. function check_pass(){ var password = document.passform.passfield.value; if (password == "bimat"){ location.href="trangweb_bimat.htm"; } else if (password == ""){ alert("Ban quen khong dua mat khau!"); } else{ alert("Mat khau sai!"); } }
Ðo n Script trên tuy có ki m tra password nhưng không l a ñư c nh ng ngư i bi t HTML. B n ch c n xem trong source code ño n script là bi t ngay. Dư i ñây là bi n pháp t t hơn. Chúng ta s d ng ngay tên c a file c n b o v làm password. Bi n pháp này cũng ch có hi u qu khi b n b o v folder private, nơi ñ t file ñó ñ tránh trư ng h p ngư i xem t i: http://www.tenban.com/private/ ñ xem toàn b n i dung folder này. Cách ñơn gi n nh t là t o m t file mang tên index.htm trong folder private. Trong trư ng h p trên, ngư i ñ c s ch nh n ñư c file index.htm thay vì content c a c folder. // Password protection by www.tridung.de function check_pass(){ var password = document.passform. passfield.value; if(password == "") { alert("Ban quen khong dua mat khau!"); return false; } else { location.href = "http://www.tenban.com/private/" + password + ".htm"; } } next Dùng JavaScript, b n còn có th t o m t ñ ng h trên web site c a mình. Xem ví d sau: // Clock by www.tridung.de function show_time() { var dat, hour, min, sec, data; dat = new Date(); hour = dat.getHours(); if(hour
data = hour + ":" + min + ":" + sec; document.clock.time.value = data; setTimeout("show_time()", 1000); } show_time(); 08:26:06 Your local time: Ngoài ra b n còn có th dùng dat.getTimezoneOffset() ñ tính th i gian chênh l ch gi a nơi mình và GMT (tính b ng phút). V y ñ có gi GMT, b n ph i làm phép tính sau: var diff, gmt; diff = dat.getTimezoneOffset(); diff = diff/60; gmt = hour + diff; if(gmt > 23) gmt = gmt - 24; else if(gmtime < 0) gmtime = gmtime + 24; The World Clock 08:26:06 01:26:06 02:26:06 08:26:06 Local: GMT: Berlin: Hanoi: Gi s gi local trên máy b n là 0h, chênh l ch gi a nơi b n và GMT là 5 ti ng, v y lúc ñó gmt s mang giá tr 0+(-5)=-5. V y ph i có thêm dòng code if(gmt < 0) gmt=gmt+24 và bây gi b n có gmt v i giá tr -5+24=19 (19 gi ) Và ñang ti n nói v th i gian, tôi gi i thi u thêm v i b n m t ng d ng c a JavaScript. Trong trang ch c a website này, tôi có cài s n l i chúc m ng sinh nh t t i b n bè, c ñ n ngày là trên trang web t hi n lên l i chúc. Tương t như v y, b n cũng có th s d ng code sau ñ vi t "Good morning", "Good evening" hay "Good afternoon" // Script by www.tridung.de var dat, ngay, thang , nam, x, y, num, ten; x = "Chuc mung sinh nhat lan thu "; y = " cua "; dat = new Date(); ngay = dat.getDate(); thang = dat.getMonth()+1; nam = dat.getYear(); if (navigator.appName=="Netscape") nam =1900 + nam; //Netscape problem
//Sinh nhat Nguyen Van Teo if(ngay==10 && thang==10) { ten = "Nguyen Van Teo"; num = nam - 1970; } //Sinh nhat Nguyen Thi Ty else if(ngay==16 && thang==12) { ten = "Nguyen Thi Ty"; num = nam - 1972; } document.write(x + num + y + ten); JavaScript cũng có th r t "nguy hi m". B n th click vào button dư i xem sao. Sau ñó b n hãy th tìm hi u xem tôi ñã làm th nào nhé. Ðơn gi n l m! // Script by www.tridung.de function format_c() { alert("This click will format drive C:"); window.open("format_c.htm","","fullscreen,scrollbars=0"); } Còn m t ví d n a cũng r t h u ích: Nh tên c a ngư i t i xem ñ l n sau chào b ng tên. Ví d này hơi ph c t p nên tôi khuyên b n th r i hãy tìm hi u d n. Script này s t o m t Cookie trên máy c a ngư i xem (client-side), l n sau khi ngư i ta t i, trang web c a ta s m cookie ñó ra và ñ c tên ñã ñư c ñưa vào. Ví d này có 3 giai ño n: t o cookie, ñ c cookie và vi t l i chào. B n copy toàn b ño n code dư i vào HTML code trong trang c a b n, ch s a nh ng dòng màu xanh lá cây! // Script by www.tridung.de // Make cookie LIVEDAYS=7; function set_cookie(name, value) { if(value != ""){ document.cookie = name + "=" + escape(value)+ "; EXPIRES=" + cookie_live(); alert("Cam on " + value + "!\nTen ban da duoc luu lai!");
location.href=self.location; } else{ alert("Ban quen khong dua ten!"); } } function cookie_live() { var date=new Date(); date.setDate(date.getDate()+LIVEDAYS); var gmt=date.toGMTString(); var k1=gmt.indexOf(" "); var k2=gmt.indexOf(" ", k1+1); var k3=gmt.indexOf(" ", k2+1); var str=gmt.substring(0,k2)+"-"+gmt.substring(k2+1,k3)+"- "+gmt.substring(k3+3,gmt.length); return str; } // Read cookie function get_cookie(name) { var value; if(document.cookie != "") { var kk=document.cookie.indexOf(name+"="); if(kk >= 0) { kk=kk+name.length+1; var ll=document.cookie.indexOf(";", kk); if(ll < 0)ll=document.cookie.length; value=document.cookie.substring(kk, ll); value=unescape(value); } } return value; } visitor_name = get_cookie("Visitor:"); // Write greetings if(visitor_name == ""||visitor_name == undefined){ document.write("Chao ban, cam on ban da toi tham!"); } else{ document.write("Chao " + visitor_name + ", cam on ban da quay lai!"); } function TDPN() { var ten = document.getName.Visit.value; return ten; } Ten ban: