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 />
Thêm vào BST
Báo xấu
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
