intTypePromotion=1
ADSENSE

Bài giảng môn Thiết kế web - Phần 1: Ngôn ngữ thiết kế Web HTML

Chia sẻ: Lavie Lavie | Ngày: | Loại File: PDF | Số trang:30

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

Bài giảng môn Thiết kế web - Phần 1: Ngôn ngữ thiết kế Web HTML trình bày tổng quan về thiết kế website, các thẻ định dạng văn bản, tổ chức website, sử dụng hình ảnh, thiết lập liên kết, thiết kế bảng biểu, biểu mẫu khung.

Chủ đề:
Lưu

Nội dung Text: Bài giảng môn Thiết kế web - Phần 1: Ngôn ngữ thiết kế Web HTML

Bài Gi ng Môn Thi t K Web<br /> <br /> Ph n 1: Ngôn Ng Thi t K Web HTML<br /> <br /> Chương 01<br /> <br /> T NG QUAN V THI T K WEBSITE<br /> Các khái ni m<br /> So n th o trang web<br /> Các th c a t p tin HTML<br /> Làm tươi và xem mã ngu n<br /> <br /> I. CÁC KHÁI NI M<br /> 1. Khái ni m WebTĩnh, Web<br /> <br /> ng<br /> <br /> WEB TĨNH: ư c xây d ng b ng các ngôn ng HTML, DHTML dùng<br /> thi t k các<br /> trang web có n i dung ít c n thay i và c p nh t. Thích h p v i cá nhân, t ch c,<br /> doanh nghi p v a và nh m i làm quen v i môi trư ng Internet.<br /> o Ưu i m:<br /> -<br /> <br /> Thi t k<br /> ho<br /> p: Trình bày n tư ng vì v ph n m thu t chúng ta có<br /> th hoàn toàn t do trình bày các ý tư ng trên toàn di n tích trang.<br /> <br /> -<br /> <br /> T c<br /> truy c p nhanh vì không m t th i gian trong vi c truy v n cơ s d<br /> li u như các trang web ng.<br /> <br /> -<br /> <br /> Chi phí u tư th p: Chi phí xây d ng website tĩnh th p vì không ph i xây<br /> d ng các cơ s d li u, l p trình và chi phí cho vi c thuê Hosting. . .<br /> <br /> o Như c i m cơ b n:<br /> -<br /> <br /> Khó khăn trong vi c thay i và c p nh t thông tin: Mu n thay i và c p<br /> nh t n i dung thông tin ph i bi t v ngôn ng html, s d ng ư c các<br /> chương trình thi t k<br /> ho , thi t k web, c p nh t file lên server.<br /> <br /> -<br /> <br /> Thông tin không có tính linh ho t: Do n i dung ư c thi t k c<br /> nhu c u v thông tin tăng cao thì s không áp ng ư c.<br /> <br /> -<br /> <br /> Khó tích h p, nâng c p, m r ng: Khi mu n m<br /> website tĩnh h u như là ph i làm m i l i website.<br /> <br /> nh nên khi<br /> <br /> r ng, nâng c p m t<br /> <br /> Web<br /> ng: Web ng là thu t ng<br /> ư c dùng<br /> ch nh ng website có cơ s<br /> li u và ư c h tr b i các ph n m m phát tri n web.<br /> <br /> d<br /> <br /> o V i web ng, thông tin hi n th ư c g i ra t 1 cơ s d li u khi ngư i dùng<br /> truy v n t i m t trang web. Ch ng h n ng d ng thương m i i n t (m t c a<br /> hàng tr c tuy n) trưng bày catalogue s n ph m trên website hay theo dõi kho<br /> hàng, khi m t m t hàng ư c giao, ngay l p t c nh ng trang có liên quan n<br /> s n ph m ó ph n ánh s thay i này.<br /> o Web ng thư ng ư c phát tri n b ng các ngôn ng l p trình tiên ti n như<br /> PHP, ASP, ASP.NET, Java, CGI, Perl, và s d ng các cơ s d li u quan h<br /> m nh như Access, My SQL, MS SQL, Oracle…<br /> o Thông tin trên web ng luôn m i vì nó d dàng ư c thư ng xuyên c p nh t<br /> thông qua vi c s d ng các công c c p nh t c a các ph n m m qu n tr web .<br /> o Vì v y website ư c h tr b i cơ s d li u là phương ti n trao i thông tin<br /> nhanh nh t v i ngư i dùng Internet. i u d nh n th y là nh ng website<br /> thư ng xuyên ư c c p nh t s thu hút nhi u khách hàng t i thăm hơn.<br /> o T t c các website Thương m i i n t , các m ng thông tin l n, các website<br /> c a các t ch c, doanh nghi p ho t ng chuyên nghi p trên Net u s d ng<br /> công ngh web ng. Có th nói web ng là website c a gi i chuyên nghi p<br /> ho t ng trên môi trư ng Internet.<br /> Biên so n: Dương Thành Ph t<br /> <br /> Trang 1<br /> <br /> Bài Gi ng Môn Thi t K Web<br /> <br /> Ph n 1: Ngôn Ng Thi t K Web HTML<br /> <br /> 2. M ng Internet:<br /> M ng máy tính toàn c u – H th ng m ng c a các m ng. Ti n thân ban u là m ng<br /> ARPANET(T ch c Advanced Research Projects Agency) c a M sáng l p 1969. Ph c v<br /> trao i d li u gi a các trư ng i h c & B qu c phòng.<br /> 3. Các d ch v cơ b n trên Internet<br /> •<br /> <br /> WWW-Wold Wide Web: D ch v trao i,tìm ki m truy c p thông tin trên m ng theo<br /> giao th c HTTP. ư c s d ng thông qua trình duy t Web<br /> <br /> •<br /> <br /> Email – Eletronic Mail-Thư i n t : D ch v trao<br /> i các thông i p cho nhau<br /> SMTP(Simple Mail Tranfer Protocol) Pop3(Post office protocol 3) ư c qu n lý b i<br /> các Mail server như:phetitc@yahoo.com,webmaster@clbtinhoc.net,phetit@hcm.fpt.vn<br /> <br /> •<br /> <br /> FTP – File Transfer Protocol – Truy n t i t p tin : D ch v trao i t p tin gi a các<br /> máy trên Internet thư ng ư c dùng<br /> Download & Upload các trang web t ngư i<br /> thi t k<br /> n các máy ch thông qua các chương trình FTP như FTP Explorer,<br /> FlashFXP.<br /> <br /> •<br /> <br /> Chat –Tán g u: D ch v cho phép ngư i dùng trao i tr c tuy n v i nhau qua m ng<br /> internet b ng văn b n, âm thanh, hình nh Như : AOL, Yahoo messenger<br /> <br /> 4. HTTP-Hyper Text Tranfer Protocol: Giao th c dùng<br /> giao ti p v i các trang Web.5.<br /> HTML-Hyper Text Makeup Language: Ngôn ng<br /> ánh d u siêu văn b n dùng<br /> thi t k<br /> trang Web.<br /> 6. WebPage-Trang Web: Là m t t p tin văn b n so n th o theo ngôn ng<br /> m r ng là HTML ho c HTM.<br /> <br /> HTML có ph n<br /> <br /> 7. Web Site: Chuyên khu Web t p h p các trang web thu c 1 ch th .<br /> 8. Home Page: Trang<br /> <br /> u tiên-Trang ch c a 1 Website(Index.htm, Default.htm . . .)<br /> <br /> 9. WebServer: Máy ch web-Máy tính c u hình m nh, lưu tr các trang Web k t n i thư ng<br /> xuyên v i m ng Internet cho phép các máy khác truy c p thông tin.<br /> 10. Tên mi n-Domain Name-Web Server Name:<br /> phân bi t m i Web Server có m t a<br /> ch IP và ư c ánh x b i 1 tên (VD:www.vietnamnet.vn). ư c xem như tên giao d ch c a<br /> công ty, t ch c trên Internet.Bao g m mã qu c gia như :Vi t Nam: .VN, Anh: .UK, M : .US,<br /> Nh t:.JP...) và 1 s lĩnh v c.<br /> .Com : Thương m i<br /> .Edu : T ch c giáo d c<br /> .Net : Các m ng thông tin<br /> .Info : Các m ng thông tin<br /> <br /> .Int : T ch c qu c t<br /> .Org : Các t ch c khác<br /> .Gov : T ch c chính ph<br /> .Mil : T ch c quân s<br /> <br /> s h u 1 tên<br /> Có th k t h p lĩnh v c v i mã qu c gia như www.tuoitre.com.vn .<br /> mi n ph i tr chi phí hàng năm thông qua các công ty y quy n bán tên mi n.<br /> 11. Hosting: Khi hoàn t t website ph i ư c ghi lưu vào 1 webserver nào ó thì m i truy<br /> c p ư c thông thư ng là các server c a ISP (Nhà cung c p d ch v Internet hay ơn v<br /> chuyên d ng). Tùy theo dung lư ng, băng thông và m t s h tr mà chi phí khác nhau.<br /> 12. URL-Uniform Resource Location:<br /> Website<br /> <br /> a ch truy c p c a trang Web - 1 t p tin trong<br /> <br /> http://Webservername/……/File.html<br /> Trang ch m c<br /> <br /> nh không c n khai báo khi truy c p<br /> <br /> VD:http://www.thoitrangtre.com.vn T c là: http://www.thoitrangtre.com.vn/Index.htm<br /> <br /> Biên so n: Dương Thành Ph t<br /> <br /> Trang 2<br /> <br /> Bài Gi ng Môn Thi t K Web<br /> <br /> Ph n 1: Ngôn Ng Thi t K Web HTML<br /> <br /> 13. Browser: Trình duy t Web dùng<br /> InternetExplorer, Netscape,FireFox.<br /> <br /> c và hi n th các trang Web. Ph bi n hi n nay là:<br /> <br /> II.SO N TH O TRANG WEB<br /> 1. Chương trình so n th o:Trang web là 1 t p tin văn b n không nh d ng, ch a các<br /> th (Tag). Vi t b ng mã ngu n HTML trên chương trình so n th o văn b n không nh d ng<br /> như: NotePad.<br /> Kh i<br /> <br /> ng : Start/Program/Accessories/NotePad<br /> <br /> Ghi chú: N u s d ng ch có d u, thì ph i<br /> •<br /> •<br /> <br /> 2.<br /> <br /> Thi t l p b ng mã Unicode cho trình gõ VietKey, Unikey,<br /> Ch n Font Unicode trong trình so n th o (Format / Font<br /> <br /> Arial , Tahoma, . . .)<br /> <br /> t tên, Lưu & M t p tin:T p tin lưu tr có ph n m r ng là: .htm ho c .html<br /> <br /> a. Lưu t p tin: T i c a s so n th o: File/SaveFilename: Tên.html (VD: VD01.html)<br /> Save as type: AllFilesEncoding: UTF-8 (N u n i dung có d u)<br /> <br /> Save<br /> <br /> b. Lưu l i v i tên khác: T i c a s so n th o File/Save As<br /> c. M t p tin ã so n th o: T i c a s so n th o: File/Open<br /> Open<br /> <br /> Ch n t p tin c n m<br /> <br /> 3. Xem trang Web sau khi so n th o:Cách 1: M thư m c ã lưu tr<br /> tin .htm<br /> Cách 2: Kh i<br /> <br /> ng trình duy t<br /> <br /> File/Open<br /> <br /> Ch n Browser<br /> <br /> Double Click t p<br /> <br /> tìm t p tin c n m<br /> <br /> Ok<br /> <br /> K t qu hi n th<br /> <br /> Biên so n: Dương Thành Ph t<br /> <br /> Trang 3<br /> <br /> Bài Gi ng Môn Thi t K Web<br /> <br /> Ph n 1: Ngôn Ng Thi t K Web HTML<br /> <br /> III.CÁC TH C A T P TIN HTML<br /> 1. Khái Ni m:<br /> T p tin HTML là 1 văn b n ch a các th (Tag)-<br /> <br /> t o các thành ph n c a tài li u.<br /> <br /> C u Trúc T ng Quát C a Th :Thành ph n ch u tác<br /> Th<br /> <br /> Th m<br /> <br /> Tên c a th<br /> <br /> ng<br /> <br /> óng<br /> <br /> t trong c p ngo c nh n: < . . . > Có ho c không có các thu c tính<br /> <br /> Ví d 1:<br /> <br /> Chào Các B n <br /> <br /> N i dung s in<br /> <br /> m<br /> <br /> Ví d :<br /> Chúc các b n h c t t N i dung ch có c<br /> 4Ghi chú: Cho phép các th l ng nhau, Cho vi t các th trên cùng 1 dòng ho c nhi u<br /> dòng. Nên vi t có c u trúc<br /> 2. C u Trúc T ng Quát C a T p Tin HTML:<br /> <br /> N i dung tiêu<br /> <br /> <br /> <br /> Ph n d li u c a trang web<br /> <br /> <br /> <br /> . . . : B t<br /> . . . : Ph n<br /> N i dung tiêu<br /> <br /> u và k t thúc t p tin HTML<br /> u trang web<br /> <br /> : Hi n th n i dung trên thanh tiêu<br /> <br /> N i dung trên trang : Hi n th n i dung trên trang.<br /> 3. Ví D Minh H a<br /> T o t p tin v i n i dung như sau<br /> <br /> <br /> GI I THI U <br /> <br /> <br /> Chào m ng các b n n v i HTML<br /> <br /> <br /> <br /> Biên so n: Dương Thành Ph t<br /> <br /> Trang 4<br /> <br /> Bài Gi ng Môn Thi t K Web<br /> <br /> 4. V n<br /> <br /> Ph n 1: Ngôn Ng Thi t K Web HTML<br /> <br /> Ng t Dòng<br /> T o t p tin v i n i dung như sau:<br /> <br /> <br /> > BAI THO CO HAI MO <br /> <br /> <br /> CÔ HÁI MƠ<br /> Thơ th n ư ng chi u m t khách thơ<br /> Say nhìn xa r ng núi xanh lơ<br /> Khí tr i l ng l và trong tr o<br /> Th p thoang r ng mơ, cô hái mơ<br /> <br /> <br /> <br /> Không xu ng dòng như so n th o mà ch t mà r t dòng tùy theo kích thư c c a s<br /> trình duy t.<br /> t văn b n trong c p th ...<br /> <br /> •<br /> <br /> ng t dòng t o o n m i, t o dòng tr ng:<br /> <br /> •<br /> <br /> ng t dòng không t o o n m i: Chèn th t i v trí mu n ng t dòng<br /> <br /> •<br /> <br /> gi các ph n t<br /> <br /> trên cùng 1 dòng:<br /> <br /> t văn b n trong c p th ...<br /> <br /> Văn b n s b che khu t khi chi u r ng c a s trình duy t không<br /> cu n ngang.<br /> <br /> và s hi n thanh<br /> <br /> VD: T o t p tin v i n i dung như sau<br /> <br /> > BÀI THƠ CÔ HÁI MƠ<br /> <br /> <br /> CÔ HÁI MƠ<br /> <br /> Thơ th n ư ng chi u m t khách thơ<br /> Say nhìn xa r ng núi xanh lơ<br /> Khí tr i l ng l và trong tr o<br /> Th p thoáng r ng mơ, cô hái mơ<br /> <br /> <br /> <br /> <br /> Biên so n: Dương Thành Ph t<br /> <br /> Trang 5<br /> <br />
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2