DIỄN ĐÀN TRƯỜNG THPT KHÁNH SƠN
 
Trang ChínhCalendarTrợ giúpTìm kiếmThành viênNhómĐăng kýĐăng Nhập
News & Announcements
  • Gallery & Others

Share | 
 

 thiết kế wed cho người mới học

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down 
Tác giảThông điệp
Lynh

avatar

Tổng số bài gửi : 726
Join date : 13/11/2009
Age : 23
Đến từ : 11A pro_ai chống

Bài gửiTiêu đề: thiết kế wed cho người mới học   Thu Aug 19, 2010 8:19 pm

Bài 1 : Hosting and Domain :

+ Hosting : Một trang web khi muốn hiển thị trên mạng thì buộc phải có nơi đặt nó chứ ! Và nơi đặt trang web của mình phải được đặt trên một máy mà thời gian chạy là 24/24h . Điều này có nghĩa là khi bạn muốn đặt trang web trên mạng thì phải tìm một nơi để "kí gởi" trang web của mình chứ không thể đặt trên máy của bạn và cho cái máy ấy chạy 24/24h được . Tất nhiên là khi kí gởi bạn phải tốn tiền rồi, nhưng mà Internet là một nơi đầy những thứ Free, bởi thế bạn có thể tìm được những nơi để đặt trang web của bạn miễn phí . Thường thì được cái này thì mất cái kia, nghĩa là nếu trang đó miễn phí thì có thể bạn phải bị popup quảng cáo,host không hổ trợ nhiều thứ như php,asp,mysql,....

Tóm lại : host là nơi đặt trang web của bạn 24/24h . Bạn muốn có host tốt thì phải tốn tiền .
Nhưng nếu bạn nào muốn thử test những bài thực hành sau khi tôi post những bài tiếp về web thì tôi sẽ cuung cấp cho các bạn vài MB host trên mạng để thử .

+ Domain : dịch tiếng Việt có nghĩa là tên miền . Tên miền là một tên gọi dể nhớ đến nơi lưu trữ trang web . Một host lưu trữ trang web có một địa chỉ cụ thể và nhất định trên mạng, ta gọi địa chỉ đó là địa chỉ IP (Internet Protocol) . Ta vẫn có thể gọi chính xác đến trang web mà ta lưu trữ, địa chỉ IP thường rất khó nhớ(ví dụ:khi muốn connect đến một trang web có địa chỉ IP là 69.93.209.71 thì thông thường ta gọi [Chỉ có thành viên mới có thể nhìn thấy links. Bạn hãy nhấn vào đây để đăng ký...] ). Như thế thì rất là khó nhớ, thay vì gọi địa chỉ IP đó ta gọi là [Chỉ có thành viên mới có thể nhìn thấy links. Bạn hãy nhấn vào đây để đăng ký...] thì dễ nhớ hơn nhiều .
Tóm tại : domain là một ánh xạ để có thể gọi đến nơi lưu trữ trang web một cách dễ dàng và dễ nhớ .

Bài 2 : FTP

- FTP được hiểu nghĩa tiếng Việt là giao thức truyền tải tập tin . Như vậy là khi ta muốn gởi một hay nhiều file đi đến một máy ở xa thì ta phải sử dụng phương thức FTP . Có rất nhiều cách để gởi file đi, upload một tấm ảnh, một bài hát, một file bất kì là một trang những cách truyền file . Nhưng khi bạn muốn gởi một lượng file lớn đến một máy nào đó, rất nhiều file được truyền đi . Nếu như dùng những cách tôi nói ở trên thì có thể bạn phải tốn vài giờ, hoặc vài ngày để làm công việc đó.
- Muốn làm công việc truyền file đi nhanh và hàng loạt thì ta phải dùng các chương trình truyền file . Có rất nhiều chương trình giúp đở ta trong việc này như là leapFTP, cuteFTP, flashFTP, .... (ThangBin có Post bài về LeafFTP ở Box này luôn rồi đó)
- Để có thể truyền file đến chính xác một máy nào đó thì buộc ta phải biết 3 thứ :
+ Địa chỉ máy mà là nơi cần gởi dữ liệu đến trên mạng .
+ Tên đăng nhập cho phép vào máy đó .
+ mật khẩu đăng nhập vào máy đó .
- Sau khi tải những chương trình FTP từ trên mạng về ta bắt đầu cài đặt sau đó chạy chương trình FTP . Ta điền vào các khung sau
+ FTP server : tên server hay địa chỉ server . Thường thì được ánh xạ thành một domain
+ User : Tên đăng nhập vào FTP của server .
+ Pass : Mật khẩu đăng nhập vào FTP của server .

- Nếu như bạn điền đúng 3 thứ trên vào thì bạn có thể vào được FTP để gởi file đi . Khi bạn vào được đó thì bạn sẽ thấy nó giống như một chương trình Windows Commander bạn chỉ cần rê(kéo) file từ bên trái qua bên phải là UPLOAD, còn rê từ bên phải qua bên trái là DOWNLOAD .
* Tại sao phải upload file ??? Và file đó được sử dụng như thế nào ???
- Ta phải Upload file để có thể đặt các trang web, hệ thống web của ta lên nơi mà ta kí gởi website .
- Khi ta sử dụng trình duyệt web để xem các file ta upload lên mạng thì ta buộc phải biết 1 trong 2 thứ đó là địa chỉ IP của máy chứa các file đó hoặc là domain ánh xạ đế host đó .

Bài 3 : Thiết kế Web với HTML

1. Khái niệm về trang WEB :

- Trong thực tế, một ứng dụng web luôn tồn tại với 2 loại là trang web tĩnh và trang web động .
- Một trang web tĩnh là một trang web được viết bằng HTML và không có kết nối cơ sở dữ liệu .
- Một trang web động thì ngược lại , có nghĩa là một trang web động được thiết kế bằng một ngôn ngữ khác, có kết nối cơ sở dữ liệu . Điều này cũng có nghĩa là một trang web động luôn luôn được “làm tươi” (thông tin mới luôn được cập nhật qua cơ sở dữ liệu) .
- Dù cho thiết kế một trang web tĩnh hay một trang web động, và dù cho ta viết bằng bất cứ ngôn ngữ nào đi nữa nhưng muốn người sử dụng có thể xem được nội dung của trang web bằng trình duyệt web thì buộc ta phải kết hợp các thẻ HTML theo một qui luật nhất định.
- Hiện nay có hai trình duyệt web rất phổ biến đó là : Internet Explorer(IE) và NetsCape(Nc)

2. Cấu trúc của một trang web :
- Ðể 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.
- Một trang web nếu muốn hiển thị nội dung lên trình duyệt thì buộc ta phải tuân thủ theo cấu trúc HTML .
- Một cấu trúc HTML được bắt đầu bằng thẻ mở và được kết thúc bằng thẻ đóng .
- Các khai báo cho trang web . Phần này không được hiển thị trong trang web nhưng rất quan trọng vì nó định dạng hay khai báo một số phần cho trang web . Để bắt đầu phần khai báo này ta dùng thẻ mở và kết thúc bằng thẻ đóng .
- Phần nội dung, các nội dung của trang web được hiển thị lên trình duyệt đều được đặt tại đây . Phần nộI dung được bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng
Cách viết một chương trình HTML : Ðể 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.

3. Các qui tắc của HTML :
- Một trang web tĩnh có cấu trúc HTML thường có tên mở rộng là .htm,.html,.jhtm,phtm,…. Nhưng tên mở rộng chuẩn của một trang HTML là .htm và .html
- Các cú pháp lệnh của HTML không phân biệt chữ hoa hay chữ thường . Điều này có nghĩa là ta có thể viết hay hoặc là ,…
- Một cấu trúc lệnh HTML nếu là thẻ mở thì tên lệnh nằm trong cập dấu ngoặc lớn hơn nhỏ hơn . Còn thẻ đóng thì tên lệnh được đặc trong cập dấu lớn hơn nhỏ hơn và sau dấu nhỏ hơn thì có dấu sổ xuống .
- Lệnh của HTML có lệnh có thẻ đóng và cũng có thẻ không có thẻ đóng . Nếu thẻ có thẻ đóng thì HTML không bắt buộc ta đóng lại nhưng thường thì ta nên dùng thẻ đóng để cho cấu trúc lệnh rõ ràng và trang web hiển thị như ý muốn.
- Một lệnh HTML có thể có thêm nhiều thuộc tính nhưng các thuộc tính thường không bắc buộc . Điều này có nghĩa là ta có thể thêm vào hoặc không thêm vào cũng được . Nếu như ta muốn thêm vào thì sau tên lệnh ta thêm một khoảng trắng rồi thêm thuộc tính đó vào .
- Khi nội dung được trình bày lên trình duyệt thì nội dung chỉ hiển thị theo chiều ngang, điều này có nghĩa là ta phải định dạng lại văn bản để cho văn bản trình bày hết trên trình duyệt.
- Các lệnh HTML có từng chức năng riêng rất đơn độc, bởi vậy nếu muốn trình bày trang web sinh động thì ta nên kết hợp nhiều thẻ lệnh của HTML.

4. Các thẻ HTML cơ bản :
Thẻ ... :
Tất cả các thông tin chứa trong thẻ này đều không xuất hiện trên trang web . Điều này có nghĩa là trong thẻ , bạn có thể khai báo cá thẻ như , , , ,...
Thẻ ...:
Thẻ này cho phép bạn trình bày chuổi trên thanh tựa đề của trang web , mỗi khi trang web đó được đưa lên trình duyệt Web . Thông thường , trong thẻ những thông tin tóm tắt liên quan đến ứng dụng hay trang web mà bạn cần trình bày .
Thẻ ... :
Tất cả những thông tin được khai báo trong thẻ này đều có thể xuất hiện lên trang web . Chính vì vậy để người dùng có thể nhìn thấy những thông tin trên trang web , bạn cũng có thể khai báo các thẻ khác và nội dung muốn trình bày trong thẻ BODY .
Các thẻ định dạng :
Thẻ ...:
Thẻ này cho phép bạn định dạng một đoạn văn bản bằng các thuộc tính của chúng . Chẳng hạn , trong trường hợp bạn muốn canh giữa một đoạn văn bạn có thể sữ dụng thẻ với algin=center hay justify để canh đều lề của đoạn văn đó .
Thẻ ...:
Tương tự như thẻ , trong trường hợp bạn muốn định dạng một câu , bạn có thể sữ dụng thẻ . Điều này có nghĩa là sau khi kết thúc bằng thẻ đóng , dữ liệu trình bày tự động xuống hàng .
Thẻ ...:
Thẻ cho phép bạn định dạng một chuỗi với kiểu chữ nhất định m cỡ chữ và màu chữ cũng được định nghĩa trong thẻ . Trong thẻ bạn cần cung cấp các từ khoá face với tên kiểu chữ như arial,tohoma,vni-times,... , từ khoá color với tên của một loại màu . Trong trường hợp màu thuộc hệ 16 màu chuẩn bạn có thể sữ dụng các từ khoá như blue, red , green ,...
Thẻ ... ; ... ; ... :
Thẻ cho phép bạn định dạng văn bản theo kiểu in đậm , là in nghiêng và là in ra từ có gạch dưới .
Thẻ ...:
Thẻ này cho phép bạn khai báo một chuổi chuyễn động theo nhiều hướng khác nhau trên trang web. Thẻ này thường dược sữ dụng để quảng cáo hay đặt tin tức mới nào đó . Bạn có thể điều chỉnh cho nó chạy theo hướng nào đó mà bạn thích . bạn đặt thêm từ khoá direction= "UP"(đi lên) ; "down"(đi xuống) ; "left" ( qua trái ) ; "right" (qua phải) .

5. Cách đưa tranh ảnh vào một 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.
Thẻ liên kết ảnh có cấu trúc như sau :
Ví dụ :
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 bỏ qua không xem ảnh để đỡ tốn thời gian) Khi đó người xem biết được mình sẽ được xem cái gì.
Một số thuộc tính của thẻ liên kết ảnh:
- Width : xác định chiều rộng của ảnh .
- Height : xác định chiều cao của ảnh .
- Border : đường viền bao quanh ảnh .
- Align=”left” : ảnh được đặt bên trái trình duyệt và các dòng chữ bao quanh hình .
- Align=”right” : ảnh đặt bên phải trình duyệt và các dòng chữ bao quanh hình.
- Alt : hiển thị kí tự khi đưa chuột vào ảnh .

6.Cách tạo liên kết (hyper link) tới các trang web khác :- Để có thể tạo một liên kết thì ta dùng lệnh : văn bản
- Để mở một cửa sổ mới khi ta nhấn chuột vào liên kết thì ta them vào lệnh liên kết thuộc tính target=”Resource Window” .
Một địa chỉ trang web hay địa chỉ của một hình ảnh được định nghĩa thành hai loại là địa chỉ tuyệt đối và địa chỉ tương đối .
- Địa chỉ tuyệt đối : là địa chỉ chính xác của một trang web hay một hình ảnh trên máy của ta hoặc trên mạng .
- Địa chỉ tương đối : là địa chỉ không chính xác đến hình ảnh hay là liên kết. Với địa chỉ này thì ta phải xác định được khoảng cách từ vị trí trang web đang tạo và địa chỉ của lien kết hay hình ảnh .

7.Các thẻ META :
Khi đặt thẻ META vào trang web thì thẻ này không được trình bày lên trình duyệt. Thẻ META dùng khai báo một số tính năng để làm trang web của ta sinh động hơn . Để sử dụng thẻ META thì ta đặt thẻ này nằm giữa phần khai báo HEAD, mỗi lệnh META thì ta dung một lệnh riêng chứ không thể kết hợp các thuộc tính của META lại được.

7.1. Dùng thẻ META để hiển thị tiếng Việt:

Với thẻ này, các văn bản trên trang web được viết bằng font Unicode đều được hiển thị tiếng Việt do Windown hổ trợ font này .

7.2. Dùng thẻ META để các bộ máy tìm kiếm (Search Engine) tìm thấy trang web:
Với thẻ này, thì các bộ máy tìm kiếm trực tuyến sẽ tìm thấy trang web và hiển thị kết quả trang web trong các lần tìm kiếm .

Trong đó từ khoá là các kí tự ngắn gọn do ta đặt ra để miêu tả trang web. Nếu có nhiều từ khoá thì ta đặc dấu phẩy vào giữa các từ khoá .

7.3. Chuyển hướng người sử dụng :

Trong đó x là thời gian sẽ chuyển (tính bằng giây). Và một điều chú ý là thẻ này phảI được đặt trước thẻ tiêu đề .

8. Thêm các FORM vào trang web :Để thực thi được các form thì ta cần phải có một đoạn code HTML tạo form và một đoạn script trên server để sừ lí các giá trị đưa vào form và trả về kết quả trên máy khách . Ở bài này sẽ hướng dẫn thẻ HTML tạo ra FORM .
Để bắt đằu và kết thúc FORM thì ta sử dụng thẻ HTML sau :

Sau đâu sẽ là một thuộc tính của FORM :
a. Textbox:

b. Radio Button:

c. Check Box:

d. List :




e. Submit:

f. Xoá nội dung trong FORM(reset)


II. Bảng trong HTML:

Table - một yếu tố rất quan trong trong các Website đẹp. Table cho phép ta có một sự chính xác đến từng pixel trong bố cục của Homepage. Với Table ta 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 ta có một layout sinh động hơn. Ở đây ta 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ư ta 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 ta 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.

III. FRAME :

Dùng Frames, ta 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 ta 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 C**'ng hơn.
Ngoài ra còn một số đặc tính khác của Frames như:
• scrolling="no" (nếu 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)
Như thế, với chừng ấy lệnh ta đã có thể tạo được những trang web cho riêng mình rồi. Nhưng mà khi tạo web thì ta không dùng các mã lệnh để viết (nhưng ta vẫn học các mã lệnh vì nó là nền tảng để thiết kế web) mà người ta dùng các chương trình soạn thảo WEB .
Về Đầu Trang Go down
Xem lý lịch thành viên http://kson.forumotion.com/
kid

avatar

Tổng số bài gửi : 549
Join date : 18/03/2010
Age : 24
Đến từ : 12a5 TBT

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Thu Aug 19, 2010 9:53 pm

affraid ghê woa xá. Suspect lam pieng doc ghe
Về Đầu Trang Go down
Xem lý lịch thành viên
»-(¯`v´¯)»(peheo)»N

avatar

Tổng số bài gửi : 498
Join date : 16/08/2010
Age : 23
Đến từ : 11A pro_vo doi

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Fri Aug 20, 2010 2:28 pm

dai dong qua di ba cu oi
Về Đầu Trang Go down
Xem lý lịch thành viên
Lynh

avatar

Tổng số bài gửi : 726
Join date : 13/11/2009
Age : 23
Đến từ : 11A pro_ai chống

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Fri Aug 20, 2010 4:26 pm

m n..g..u quá sao hỉu
Về Đầu Trang Go down
Xem lý lịch thành viên http://kson.forumotion.com/
»-(¯`v´¯)»(peheo)»N

avatar

Tổng số bài gửi : 498
Join date : 16/08/2010
Age : 23
Đến từ : 11A pro_vo doi

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Fri Aug 20, 2010 6:42 pm

bao ai ngu do kon kia
Về Đầu Trang Go down
Xem lý lịch thành viên
kid

avatar

Tổng số bài gửi : 549
Join date : 18/03/2010
Age : 24
Đến từ : 12a5 TBT

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Sat Aug 21, 2010 6:26 am

tui cun~ hem~ hiU~...ngu nhat ak >< scratch
Về Đầu Trang Go down
Xem lý lịch thành viên
»-(¯`v´¯)»(peheo)»N

avatar

Tổng số bài gửi : 498
Join date : 16/08/2010
Age : 23
Đến từ : 11A pro_vo doi

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Sat Aug 21, 2010 7:34 am

chi co moi chi Lynh dau oc thien tai moi hiu thui
Về Đầu Trang Go down
Xem lý lịch thành viên
Lynh

avatar

Tổng số bài gửi : 726
Join date : 13/11/2009
Age : 23
Đến từ : 11A pro_ai chống

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Sat Aug 21, 2010 7:42 am

dĩ nhiên.tự tyn là chính t,hâhhâhha.tui cug ko hỉu luôn
Về Đầu Trang Go down
Xem lý lịch thành viên http://kson.forumotion.com/
»-(¯`v´¯)»(peheo)»N

avatar

Tổng số bài gửi : 498
Join date : 16/08/2010
Age : 23
Đến từ : 11A pro_vo doi

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Sat Aug 21, 2010 7:49 am

troi
the hoa ra toan ddan ga thui ak
Về Đầu Trang Go down
Xem lý lịch thành viên
kid

avatar

Tổng số bài gửi : 549
Join date : 18/03/2010
Age : 24
Đến từ : 12a5 TBT

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Sat Aug 21, 2010 10:20 am

haha.....cop ma` hok hiu~ ha~....chem link di heo....pai~ hiu~ con` chi~ anh em oi` moi cop' chu''''''''''''' king vua ra lenh oi` ak....^^
Về Đầu Trang Go down
Xem lý lịch thành viên
»-(¯`v´¯)»(peheo)»N

avatar

Tổng số bài gửi : 498
Join date : 16/08/2010
Age : 23
Đến từ : 11A pro_vo doi

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Sat Aug 21, 2010 10:55 am

bay dat vua nua chu
oi\
thui ranh trua noi chien
gio phai nau com da
hihi
12h nhe
Về Đầu Trang Go down
Xem lý lịch thành viên
kid

avatar

Tổng số bài gửi : 549
Join date : 18/03/2010
Age : 24
Đến từ : 12a5 TBT

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Sat Aug 21, 2010 10:58 am

hen xui
Về Đầu Trang Go down
Xem lý lịch thành viên
»-(¯`v´¯)»(peheo)»N

avatar

Tổng số bài gửi : 498
Join date : 16/08/2010
Age : 23
Đến từ : 11A pro_vo doi

Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   Sat Aug 21, 2010 11:16 am

chu cha
lai con hen xui
ukn
Về Đầu Trang Go down
Xem lý lịch thành viên
Sponsored content




Bài gửiTiêu đề: Re: thiết kế wed cho người mới học   

Về Đầu Trang Go down
 
thiết kế wed cho người mới học
Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang 
Trang 1 trong tổng số 1 trang

Permissions in this forum:Bạn không có quyền trả lời bài viết
 :: PHẦN MỀM - THỦ THUẬT TIN HỌC :: Thủ thuật Tin học-
Chuyển đến