Cách tạo một trang web miễn phí, các mẹo ,thủ thuật thường dùng và kinh nghiệm tạo web

B1:

TẠO MỘT TRANG WEB TRỐNG

Mở Microsoft Word

Nhấp vào File -> New

Bạn sẽ nhận được:


Nhấp vào mục Blank web page để tạo một trang web trống

Cách lưu trang web:

Sau khi soạn xong nội dung trang web bằng Word, bạn lưu nội dung của file Word vào một thư mục.

Nhấp vào menu File rồi chọn Save as Web Page.

Trong mục Save as Type, chọn Web page.

Trong mục File name, nhập vào một tên, ví dụ trang1

Trong mục Save in, chọn thư mục để chứa file, ví dụ thư mục D:\website

B2:

Tạo phông nền cho trang web
(Background)

Tạo phông nền cho trang web (Background)

Nhấp vào Format ->Background


Bạn sẽ nhận được hình sau đây:



Chọn màu phù hợp để làm Background

Nếu muốn xóa Background thì nhấp vào mục No Fill

Nếu muốn thêm nhiều màu nữa thì nhấp vào mục More Colors …

Nếu muốn dùng một hình ảnh để làm background thì nhấp vào mục Fill Effects …

Trong phần Fill Effects nhấp vào mục Picture -> Select picture


Nhấp vào mục Select Picture để chọn hình làm Background

B3:

Chèn hình ảnh từ máy tính

Nhấp vào Insert ->Picture ->From File … như hình dưới đây:

Sau đó chọn hình ảnh, nhấp nút Insert

Xin lưu ý: Hình ảnh sẽ được chèn vào vị trí của dấu nháy.

Sau khi hình đã được đưa vào trang web, bạn có thể chỉnh lại kích thước, vị trí bằng cách:

Nhấp vào hình để chọn, sau đó đưa con trỏ vào các ô vuông màu đen để chỉnh kích thước.

Hoặc nhấp vào biểu tượng Trái, Giữa, Phải để di chuyển hình theo chiều ngang.

Tạo đường viền bằng cách nhấp chuôt phải vào bức hình, sau đó nhấp vào Border and shading

Bạn sẽ nhận được hình sau:

Nhấp vào Box, Shadow, 3-D và Style, color, width để lựa đường viền.

Sau đó nhấp vào nút OK





Chèn hình ảnh từ Web



Để tiết kiệm dung lượng website, bạn có thể đưa hình ảnh lên các server cho host miễn phí, sau đó copy địa chỉ của hình ảnh để đưa vào website.



Sau đây là vài ví dụ về địa chỉ của các file hình:

https://2img.net/r/ihimizer/img339/8241/flower32ot.jpg

https://2img.net/r/ihimizer/img428/732/flower24cm.jpg

https://2img.net/r/ihimizer/img428/4341/flower19vd.jpg

Đây là các hình ảnh được host trên server của http://imageshack.us

Hướng dẫn cách sử dụng : Tải hình không tốn dung lượng

(chỉ xem đến phần lấy được địa chỉ của hình ảnh)

Khi chèn hình ảnh từ web, bạn cũng làm tương tự như hướng dẫn ở trên

Sau khi copy địa chỉ file hình, paste vào mục File name.

Xin lưu ý: Dùng phím Ctrl+V để paste.

Sau đó nhấp vào nút Insert.

Bạn phải chờ một thời gian để chương trình kết nối với server.

Bạn sẽ thấy hình ảnh như sau:

Sau đó hình ảnh sẽ xuất hiện.

Bạn phải làm thêm một công đoạn sau đây nữa thì mới hoàn thành.

Nhấp nút phải chuột vào bức hình, rồi chọn Format Picture


Bạn sẽ nhận được hình sau đây:

Nhấp vào mục Web để mở ra hình sau đây:

Copy địa chỉ file hình, paste vào mục Alternative text.

Xin lưu ý: Dùng phím Ctrl+V để paste.

Sau đó nhấp vào nút OK.

Muốn đưa các mẫu chữ đẹp vào trang web, bạn có thể dùng WordArt như sau:

Nhấp vào Insert -> Picture -> WordArt như hình dưới đây:


Bạn sẽ nhận được hình sau đây:



Nhấp vào một kiểu chữ bạn thích, sau đó nhấp vào nút OK

Bạn sẽ nhận được hình sau đây:

Nhập dòng chữ của bạn vào ô trắng, chọn font unicode: Arial, Verdana, Times new romans, Tahoma để gõ tiếng Việt có dấu.

Sau đó chọn Size cho phù hợp.

Nhấp vào nút OK, dòng chữ đẹp sẽ xuất hiện ở vị trí bạn đặt dấu nháy.

Sau đây là vài ví dụ:





Các nội dung của trang web, như văn bản, hình ảnh, . . . thay vì được trình bày theo thứ tự từ trên xuống, có thể được bố trí thành nhiều kiểu khác nhau giúp trang web nhìn đẹp mắt hơn.

Công cụ Table (bảng) giúp bạn thực hiện được điều này.

Table là một khung có nhiều Rows (hàng) và Columns (cột)

Các Rows và Columns chia Table ra thành nhiều Cells (ô).

Nội dung của trang web, như văn bản, hình ảnh, . . . sẽ được đưa vào trong các Cells.

Do có thể chỉnh được số lượng Rows và Colums, cũng như chỉnh được kích thước của Cells nên chúng ta dễ dàng bố trí trang web theo ý muốn cho đẹp mắt.

Cách tạo môt table:

Nhấp vào Table ->Insert ->Table

Bạn sẽ nhận được:
[img][/img]
Chọn số cột (Number of columns)

Chọn số hàng (Number of rows)

Sau đó nhấp OK
Điều chỉnh kích thước table.

Đưa con trỏ vào một cạnh của table, sau đó nhấp và giữ chuột rồi kéo để di chuyển cạnh đó.

Thêm Rows và thêm Columns

Nhấp chuột vào một hàng hoặc một cột, sau đó nhấp vào:

Table -> Insert: Chọn 1 trong các mục:
Columns to the left: Thêm cột vào bên trái
Columns to the Right: Thêm cột vào bên phải
Rows Above: Thêm hàng vào bên trên
Rows Belove: Thêm hàng vào bên dưới


Nhập và tách Cells
Nhiều cells có thể nhập lại thành một:
Đánh dấu các Cells, sau đó nhấp vào Table -> Merge Cells
Hoặc một Cell có thể tách ra thành nhiều Cells:
Nhấp chuột vào Cell, sau đó nhấp vào Table -> Split cells
Sau đó chọn số hàng, số cột rồi nhấp OK

Tạo và xóa đường viền (border)
Nhấp chuột phải vào table rồi chọn Borders and shading …
Bạn sẽ nhận đưọc hình sau:


Bạn có thể chọn:
None: Xóa bỏ đường viền, bạn chỉ còn nhìn thấy một đường viền mờ để nhận ra vị trí các cell. Khi đưa lên web đường viền này sẽ mất.
Box, All, Grid: Table sẽ có đường viền phù hợp.
Bạn có thể chọn Style, Color, Width để có đường viền theo ý muốn.
Bạn có thể xem trước kết quả ở hình nhỏ bên phải.
Sau đó nhấp nút OK.
Tạo màu nền cho table (shading)

Tương tự như việc tạo đường viền, nhấp chuột phải vào table rồi chọn Borders and shading …, sau đó chọn mục Shading


Bạn có thể:
Xóa màu nền: Bằng cách nhấp vào mục No Fill rồi nhấp OK
Chọn màu có sẳn trên bảng màu rồi nhấp OK
Nhấp vào More Colors để chọn được nhiều màu hơn.
Trong mục More Colors, chọn Custom thì có thể chọn được bất cứ màu nào bạn thích

Xin lưu ý: Trong phần Apply to, bạn có thể chọn màu nền áp dụng cho cả Table hoặc Cell.
Hoặc áp dụng cho paragraph, tức là một đoạn văn bản trong table.
Tạo khoảng cách giữa đường viền và văn bản (cellpadding)

Thông thường khi gõ văn bản vào table,
khoảng cách giữa văn bản và đường viền trên và dưới là 0.
khoảng cách giữa văn bản và đường viền trái và phải là 0.08 “
Bạn có thể thay đổi khoảng cách này.

Nhấp chuột phải vào table, chọn Table properties … bạn sẽ nhận được:

Nhấp vào mục Options … bạn sẽ nhận được:

Chỉnh số liệu ở các mục Top, Bottom, Left, Right (ví dụ 0.15”) sau đó nhấp OK.

Điều chỉnh vị trí của văn bản trong table (Cell alignment)



Nhấp chuột phải vào một ô trong table, sau đó chọn mục Cell Alignment, rồi chọn 1 trong 9 vị trí.

Có thể tạo liên kết cho một dòng chữ hay một hình ảnh.

Khi một dòng chữ hay một hình ảnh đã có liên kết, người xem có thể nhấp chuột vào để mở ra một trang web khác.

Tạo liên kết:

Đánh dấu dòng chữ hoặc hình ảnh muốn tạo liên kết.

Nhấp chuột vào Insert -> Hyperlink

Bạn sẽ nhận được hình sau đây:


Xin lưu ý: Vì mục đích phần hướng dẫn này là để soạn nội dung trang web cho EasyVN, nên chúng tôi chỉ hướng dẫn những gì cần thiết.



Tạo trang mới:

Nếu muốn liên kết mở ra một trang mới, thì nhập tên trang mới vào mục Address.

Cách đặt tên cho trang mới: dùng chữ thường, không dấu, không ký tự đặc biệt, phần đuôi là .htm

Ví dụ: trang1.htm, amnhac.htm, thethao.htm, . . .

Khi đưa mã HTML lên trang web của bạn tại EasyVN, chương trình sẽ nhận biết và tạo ra trang mới cho bạn. Chỉ khi nào đưa lên trang web EasyVN thì trang mới mới được tạo ra.



Liên kết đến một trang web:

Có thể là một địa chỉ website, một file hình ảnh, một file nhạc trên web, . . .

Nhập địa chỉ vào mục Address.

Ví dụ:

http://www.easyvn.com
https://2img.net/r/ihimizer/img339/8241/flower32ot.jpg
http://kyniem.easyvn.com/_easyweb/web/design/musiclib/abba/happynewyear.mp3
Sau khi nhập xong phần Address bạn cần chọn Target Frame

Chọn Target Frame là chọn liên kết sẽ mở ra trang mới cùng cửa sổ hiện nay hoặc mở ra cửa sổ mới.

Nếu mở ra cùng của sổ hiện nay thì chọn Page Default (none)

Nếu mở ra của sổ mới thì chọn New Window
Cuối cùng nhấp nút OK
Đổi màu cho liên kết:
Thông thường khi tạo liên kết cho một dòng chữ thì dòng chữ sẽ có màu xanh nước biển.

Ví dụ: EasyVN

Nếu muốn đổi sang màu khác, nhấp chuột phải vào dòng chữ sau đó chọn Font.

Chọn màu ở mục Font color.

Nếu muốn xóa đường gạch dưới thì trong mục Underline style chọn None





Bạn có thể đưa nhạc vào trang web như sau:
Nhấp vào Insert -> Object …


Bạn sẽ nhận được


Chọn Windows Media Player, rồi nhấp OK

Bạn sẽ nhận được

Nhấp nút phải chuột vào hình trên rồi chọn Properties


Ở mục URL, nhập địa chỉ file nhạc vào (file nhạc trên web hoặc trên máy).

Ví dụ:

http://kyniem.easyvn.com/_easyweb/web/design/musiclib/abba/happynewyear.mp3

C:\WINDOWS\Media\Windows XP Startup.wav



Dấu Media Player



Bạn có thể dấu Media Player bằng cách cho Media Player nằm xuống cuối trang và chỉnh thông số Height và Width bằng 1.



Như vậy là xong

Muốn thử nghe nhạc, sau khi Save lại nhấp vào File -> Web page preview

Bạn sẽ nghe được nhạc.





Lưu nội dung file Word

Sau khi soạn xong nội dung trang web bằng Word, bạn lưu nội dung của file Word vào một thư mục.

Nhấp vào menu File rồi chọn Save as Web Page


Trong mục Save as Type, chọn Web page.

Trong mục File name, nhập vào một tên, ví dụ trang1

Trong mục Save in, chọn thư mục để chứa file, ví dụ thư mục D:\website
Dùng Window Explorer để xem vị trí của file:

Các hình ảnh được chứa trong thư mục trang1_files có tên là image001, image002

Lấy mã HTML

Bạn có thể copy mã HTML của trang web để đưa lên website.

Bạn có thể lấy mã HTML bằng 2 cách:



Cách 1:

Nhấp vào File -> Web page preview

Một cửa sổ Internet Explorer sẽ mở ra để thể hiện nội dung trang web của bạn.

Trong của sổ Internet Explorer nhấp vào View -> source

Bạn sẽ nhận được mã HTML của trang web.



Cách 2:

Dùng Window Explorer để xem vị trí của file.

Ví dụ: Muốn lấy mã HTML của trang trang1.htm

Nhấp nút phải chuột và trang1.htm, chọn mục Open with -> Notepad

Đưa mã HTML lên trang web



Copy toàn bộ mã HTML.

Nhấp vào nút HTML trên trang web của bạn.

Paste vào ô màu trắng sau đó nhấp vào nút OK.

Nếu nội dung trang web có hình ảnh, chương trình sẽ nhắc bạn đưa file hình lên website.

Khi đưa hình lên website, nhớ tìm đúng thư mục có chứa hình của trang web.

Ví dụ: Nếu trang web là trang1.htm thì thư mục chứa hình sẽ là trang1_files.

Thank a Admin !