Học thiết kế WEBSITE cơ bản

?
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, hãy m? 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. Nh?ng ?ó ch? là cách dung cho nh?ng ai m?i th? ngh? Design Web thôi ch? n?u ai b??c vào ngh? mà dung cái này thì ch?c chit weeee………..heeeeeeeee……..Hi?n nay các cao th? trong ngành Design Web dung các tool nh? DreamWeaver, FrontPages, A GoLive…………………

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 th??ng 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:

Ghi chú

Nh? v?y m?t trang web vi?t b?ng html s? có c?u trúc nh? sau:

M?t trang tr?ng, có n?i dung là (Basic about HTML), v?i n?n màu da cam s? ???c vi?t nh? sau:

Basic about HTML

T?t nhiên, m?t trang WEB f?i có n?i dung không ch? là c?m t? trên mà còn l?i v?n, âm nh?c và hình ?nh:

?ây là dòng text ???c th? hi?n b?ng font Arial, màu ?en, màu n?n trang web màu tr?ng, kích th??c ch? là 2 pixel ?ây là dòng v?n b?n th? hi?n b?ng font Verdana,kích th??c 3 pixel, màu xám Dòng này th? hi?n b?ng font Tahoma kích c? 4 pixel, màu ??

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. (L?u ý : #FFFFFF ?ây là giá tr? màu ???c ??nh ngh?a trong HTML d?a trên b?ng s? th?p l?c phân Hexadecimal )
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 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:

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 .v.v…. nh? th? th? này là basic nh?t v? HTML rùi heeeeeeeee…………….

Cách ??a hình ?nh vào m?t trang web

? bài trên, chúng ta ?ã ?? c?p ??n cách trình bày ch?, màu n?n 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 (?ây là hai ??nh d?ng ?nh ch? l?c c?a Internet)
• 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?: ghecuafoxphoto.jpg ch? không ???c ??t là Ghecuafoxphot.jpg. b?n c?ng tránh dùng d?u cách (Space) mà f?i dùng b?ng d?u n?i ! VD: hinh_ghe_cua_fox.jpg ch? không dùng hinh ghe cua fox.jpg ( Nguyên t?t ??t tên này c?ng dùng cho các t?p tin khác trong trang Web c?a b?n ! )
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 hình ?nh làm n?n cho trang web

Trên bài trên, 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 ?nh .gif bé xíu . Cái ?ó r?t ??n gi?n. HTML Code s? nh? sau:



Các pác th? coi, ? ?â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. ( Nh?ng khi dùng ??n cái này thì h?i gây khó kh?n cho ng??i xem trang web c?a b?n, nh?t là khi ???ng truy?n m?ng wá ch?m nên dùng nh?ng ?nh n?n 1x1 pixel, b?n nên cân nh?c k? khi dùng ?nh trong trang web c?a mình)

Cách t?o liên k?t (hyper link) t?i các trang web khác

Sau khi có hình ?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 ho?c nh?ng trang có n?i dung khác cùng n?mtrên site 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 [trang tr??c] m?t chút. Click vào m?t b?c ?nh , hay dòng ch? ………….bên b?n c?ng ???c k?t qu? t??ng t?…..

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 back và hai ch? "trangtr??c" làm liên k?t (links). Ch? c?n nh?n 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 lovelymoon

Ví d? trang web c?a [Dien dan lovelymoon

? 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. [url=mailto:// mr_phuongngoc@yahoo.com?subject=Test&body=This is a test][/url]

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 m?t s? trang web này, b?n th?y liên k?t nào c?ng màu xanh (vàng, tím……….), rê chu?t vào thì thành màu tr?ng, sau khi nh?n 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

Vào m?t s? trang Web ví d? trang c?a Ford, Creative………trên trang web c?a h? , b?n th?y m?t b?n ?? phân chia khu v?c VD: Châu á, Châu âu, Châu M?, Châu phi……… mà khi tr? chu?t vào m?i khu v?c có th? t?i m?t trang m?i riêng cho khu v?c b?n ?ang ?. Ð? ??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 ?ó. 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="#World", 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

Cách trang trí ch?, b? c?c m?t trang web

Trong bài trên, 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 heeeeeeeeeeeeee…………. Không h? có th? này

Mu?n có m?t trang mà hình ? 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

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 - N?u c?a hàng b?n gi?m giá t? € 20000 xu?ng € 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 ?ó: Em v?n ch?a bi?t hack f?i làm seo ?ây - Ch? dành cho Netscape Browser: Ch? nh?p nháy Nhin tui ne

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 [tr][/tr]t?o ra m?t dòng, trong dòng ?y b?n có th? s? d?ng nhi?u c?p TAG [td][/td]?? có nhi?u ô. C?ng nh?
, [tr]và [td]th?c ra là m?t TAG ??n, không c?n ??n [/tr]và [/td]nh?ng n?u c?n th?n, ta v?n nên dùng nó nh? m?t c?p TAG.

HTML Code c?a b?ng Ví d? ???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

B?n hãy copy cái này xem th? cái b?ng nhe
-
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 pixelsTrong m?t s? trang Web b?n s? 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 sau) 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.Khi c?n m?t dòng k? ngang qua trang web ?? phân chia, 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 h?ng ??u ?óFrames - "Windows Explorer" trong trang web (Website c?a tôi ?ang s? d?ng FRAMES)1. Frameset – ColsFrames 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 - RowsT??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 MenuNh? 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. 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 webB?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?:Còn n?a không h?n trình duy?t c?a ng??i xem ?i?u h? tr? các plug-in mà b?n mu?n dùng vì th? b?n c?n báo cho ng??i dùng là b?n ?ã dùng nh?ng plug-in gì trong trang Web ! ?? ng??i ta tìm mà dùng !JavascriptJavascript không ??n gi?n nh? HTML, . ?? 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. B?n s? ng?c nhiên h?i, Trùi 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. Ðây là dòng html code b?n ph?i vi?t function sayhello() { alert('Chào tãt c? các pác là member c?a lovelymoon'); } Ðó ch? là l?i gi?i thi?u v? Javascript, b?n s? tìm th?y ? ?ây nhi?u ?i?u thú v? h?n v? ?? tài này. Java script in actionVà 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 hrockvn 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!"); } } L?u ý trong ?o?n mã trên thì dòng password == "bimat" ?ây chính là m?t kh?u cu? b?n ??t cho trang Web Ð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 hrockvn 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"; } } 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: // Làm bi?ng vi?t quá copy c?a ng??i ta paste vàofunction show_time(){var dat, hour, min, sec, data;dat = new Date();hour = dat.getHours(); if(hour

Jimdo.com – Dịch vụ tạo website nhiều tính năng hấp dẫn

Với Jimdo.com, bạn có thể tạo ngay một website chia sẻ hình ảnh cũng như một blog cá nhân nhiều tiện ích!

Vì sao bạn chọn Jimdo?

- Hoàn toàn miễn phí
- Tạo trang trưng bày ảnh độc đáo.
- Dung lượng lưu trữ 500 MB.
- Cho phép upload file, kích thước tối đa 5 MB.
- Nhiều giao diện đẹp mắt.
- Tạo blog với những chức năng hấp dẫn, dễ sử dụng.
- Tạo guestbook, cho phép comment và kết nối nhiều bạn bè…

1.Tạo tài khoản:

Truy cập vào website ], điền username và email vào phần Create a free website with Jimdo! rồi nhấn create my page! để đăng ký. Địa chỉ truy cập vào trang web của bạn sẽ có dạng username.jimdo.com.

Ngay sau đó, sẽ có một email kèm theo password gửi đến bạn. Truy cập vào website của bạn vừa đăng ký (username.jimdo.com), nhấn Login rồi nhập password Jimdo cung cấp trong mail vào khung your password > Login.



2. Giao diện thiết kế:

Giao diện thiết kế website của Jimdo rất đơn giản, giống với trang web thật, chỉ khác ở chỗ bạn có thể chỉnh sửa bất cứ thành phần nào của trang web. Nhìn sang bên phải, bạn sẽ thấy một thanh dọc với nhiều tùy chọn như sau:

a. Layout: Cho phép thay đổi giao diện trang web, gồm 4 thẻ:
- Layouts: Các giao diện có sẵn. Nhấp chọn mẫu yêu thích rồi nhấn Yes để thay đổi.
- Personal Layout: Tạo giao diện theo ý thích, bằng cách tự upload các ảnh làm banner và background, có thể chỉnh sửa giao diện theo ngôn ngữ HTML hoặc CSS tùy ý.
- Special-Layouts: Những mẫu với thiết kế lạ, độc đáo.
- Settings: Chỉnh lại vị trí của phần nội dung (Alignment).



b. Style: Chọn font, background, với 3 thẻ:


- Font Settings: tùy chọn kiểu hiển thị cho bái viết trong phần Presets, chỉnh font chữ trong Text, và các tùy chọn khác…









- Background Pattern: chọn một màu sắc làm nền, hoặc các hình nền dạng kẻ sọc, hoa văn cho trang web.



- Background Image: chọn một hình có sẵn làm hình nền, các hình trong mục này có nhiều sắc màu hơn trong Background Pattern (chỉ có 2 màu).



c. Blog: blog cá nhân cho web


Nhấn Set up a blog for my website để tạo blog, sau đó nhấn Write your first Blog Post để viết bài. Có khá nhiều mục hấp dẫn mà bạn có thể chèn vào bài viết, tiêu biểu là:












- Photo Gallery: phòng trưng bày ảnh, khi người đọc nhấp vào một bức ảnh, sẽ có hiệu ứng như đoạn javascript HighSlide được sử dụng phổ biến trong Wordpress, Bo-Blog,…



- Music Player: trình chơi nhạc cho blog.


- YouTube etc.: phát video clip từ YouTube, công việc của bạn chỉ là copy đường link trong YouTube vào.


- File Download: upload file (tối đa 5 MB).


- Comments: tùy chọn về comment cho bài viết.



- Flickr: trình diễn ảnh từ Flickr, hỗ trợ chèn ảnh từ một tài khoản Flickr, hoặc theo tags, group.


- Widget/HTML: chèn một đoạn HTML, nhấn recommended widgets, trang web sẽ cung cấp cho bạn một vài dịch vụ cho blog, bạn chỉ cần copy đoạn mã HTML mà các dịch vụ đó cung cấp vào blog.



Lưu ý: Giả sử bạn chọn mục Flickr, và muốn thêm một thành phần khác bên dưới nữa, thì bạn bấm dấu cộng (Add new element).



d. Friends: mời bạn bè gia nhập Jimdo.com



- Nhấn invite friends để mời thêm bạn bè, nhập địa chỉ email và password của bạn vào, Jimdo sẽ gửi thư mời đến những người bạn có trong Address book.









- Để tìm kiếm, nhấn Search friends rồi nhấp email của người cần tìm kiếm vào.




e. Messages: gửi tin nhắn cho bạn bè trên Jimdo.com.


f. Upgrade: nâng cấp từ miễn phí lên Jimdo Pro để có thể sử dụng tên miền riêng, dung lượng lưu trữ lên đến 5 GB, giá 5$/tháng.


g. Settings: thiếp lập lại ngôn ngữ, xem dung lượng đã sử dụng, thông tin đăng nhập,…









Đặc biệt, ta có thể đặt password cho một vài khu vực trong website thông qua mục Password-Protected Areas, bằng cách nhấn chọn Add new password protected area, chọn trang cần đặt password rồi nhấn Save.



h. Statistics: thống kê về số lượt xem, số người truy cập web…



3. Thêm một trang mới:



Để thay đổi thanh điều hướng bên trên cũng như thêm một trang mới, nhấn chọn Edit navigation.









Tại đây, bạn có thể sửa lại tên và vị trí của các đề mục, chọn Add a new page để thêm trang mới, nhấn vào biểu tượng con mắt để không hiển thị lên thanh điều hướng.










Với những chức năng thú vị trên, Jimdo có thể sẽ là sự lựa chọn tốt dành cho bạn, chỉ tiếc là dịch vụ miễn phí không thể dùng tên miền riêng!

cám ơn thui