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
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

Nhập văn bản
Nhập văn bản (Chọn Font, kích cỡ, màu sắc)

Chọn font: Bạn chỉ nên chọn font Arial, Verdana, Times New Roman, Tahoma
Đây là các font Unicode hỗ trợ dấu tiếng Việt.
Bạn cũng có thể chọn chữ in đậm (Bold), in nghiêng (Italic) hoặc gạch dưới (Underline)

Chọn kích cỡ chữ (size): Thông thường nên chọn cỡ chữ 10, các tiêu đề có thể chọn cỡ chữ lớn hơn.

Chọn màu sắc: Nếu phông nền là màu sáng thì văn bản nên có màu sậm, ngược lại nếu phông nền là màu sậm thì văn bản nên có màu sáng.





phông nền là màu sậm thì văn bản nên có màu sáng.










phông nền là màu sáng thì văn bản nên có màu sậm.








Chèn hình ảnh
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.
Chèn hình ảnh
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.
Dùng table để tạo sắp xếp
nội dung trang web



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.

Ví dụ: Chúng ta tạo 1 table như sau










Sau đó đưa nội dung vào

Kim tự tháp được xây từ trong ra ngoài?

Cho đến nay các nhà khoa học vẫn tự hỏi bằng cách nào người Ai Cập có thể đặt khoảng 3 triệu tảng đá, nặng trung bình 2,5 tấn/tảng để xây dựng đại kim tự tháp Cheops (hay còn gọi là Khufu).

Sau đó xoá đường viền của table và chọn màu nền cho table:

Kim tự tháp được xây từ trong ra ngoài ?

Cho đến nay các nhà khoa học vẫn tự hỏi bằng cách nào người Ai Cập có thể đặt khoảng 3 triệu tảng đá, nặng trung bình 2,5 tấn/tảng để xây dựng đại kim tự tháp Cheops (hay còn gọi là Khufu).

Rõ ràng là nội dung trông đẹp hơn.

Cách tạo môt table:

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



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


Chọn số cột (Number of columns)
Chọn số hàng (Number of rows)
Sau đó nhấp OK

Ví dụ: Chọn số cột là 2, số hàng là 2.
Bạn sẽ có table như sau:





Đ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.
Sau đây là vài ví dụ:
Box





All





Grid






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.

Dưới đây là vài ví dụ về màu nền cho table:











Tạo màu nền cho văn bản
bằng cách chọn paragraph
trong phần Apply to




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 “
Như table dưới đây:

Cho đến nay các nhà khoa học vẫn tự hỏi bằng cách nào người Ai Cập có thể đặt khoảng 3 triệu tảng đá, nặng trung bình 2,5 tấn/tảng để xây dựng đại kim tự tháp Cheops (hay còn gọi là Khufu).

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
Bạn sẽ có được table như sau:

Cho đến nay các nhà khoa học vẫn tự hỏi bằng cách nào người Ai Cập có thể đặt khoảng 3 triệu tảng đá, nặng trung bình 2,5 tấn/tảng để xây dựng đại kim tự tháp Cheops (hay còn gọi là Khufu).


Đ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í.





Sau đây là các ví dụ về vị trí của văn bản trong các ô của table:



Tạo liên kết (hyperlink)



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.
Xem ví dụ dưới đây:


EasyVN




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

Ví dụ: EasyVN

Dùng table để tạo menu



Trên EasyVN, khi thiết kế trang web, nếu bạn chọn kiểu trang trí là trang trống, bạn có thể dùng table để tự tạo hệ thống menu.

Thường có 4 kiểu tạo menu:

Menu nằm ngang bên trên
Menu nằm dọc bên trái
Menu nằm dọc bên phải
Menu phối hợp 3 vị trí trên


Menu nằm ngang bên trên

Tạo một table gồm 2 hàng và 1 cột.




Hàng 1 để chứa hệ thống menu
Hàng 2 để chứa nội dung trang web

Nhấp chuột vào hàng 1, sau đó nhấp Table -> Insert ->Table để tạo ra 1 table gồm 1 hàng và nhiều cột. Tùy số lượng menu nhiều hay ít bạn có thể tạo ra 2 hàng và nhiều cột





Nội dung trang web

Nhập tên menu vào các ô


Trang chủ Hình ảnh Âm nhạc Sinh hoạt Danh bạ


Nội dung trang web


Menu nằm dọc bên trái

Tạo một table gồm 1 hàng và 2 cột.



Cột 1 để chứa hệ thống menu
Cột 2 để chứa nội dung trang web

Nhấp chuột vào cột 1, sau đó nhấp Table -> Insert ->Table để tạo ra 1 table gồm 1 cột và nhiều hàng.







Nội dung trang web

Nhập tên menu vào các ô


Trang chủ
Hình ảnh
Âm nhạc
Sinh hoạt
Danh bạ

Nội dung trang web


Menu nằm dọc bên phải

Tạo một table gồm 1 hàng và 2 cột.



Cột 1 để chứa nội dung trang web
Cột 2 để chứa hệ thống menu

Nhấp chuột vào cột 2, sau đó nhấp Table -> Insert ->Table để tạo ra 1 table gồm 1 cột và nhiều hàng.


Nội dung trang web






Nhập tên menu vào các ô



Nội dung trang web Trang chủ
Hình ảnh
Âm nhạc
Sinh hoạt
Danh bạ



Menu phối hợp 3 vị trí trên

Tạo một table gồm 2 hàng và 3 cột.













Nhập 3 ô ở hàng 1 thành 1 ô


1




2










3

Cho table vào các ô số 1, 2, 3


Trang chủ Menu 1 Menu 2 Menu 3 Menu 4


Menu 5
Menu 6
Menu 7
Menu 8
Menu 9



Nội dung trang web







Menu 10
Menu 11
Menu 12
Menu 13
Menu 14




Nhập tên menu vào các ô

Tạo liên kết cho các menu
Nếu bạn đang thiết kế nội dung cho trang chủ thì không cần tạo liên kết cho trang chủ.
Chỉ cần tạo liên kết cho các menu còn lại.

Ví dụ: Tạo liên kết cho hệ thống menu dưới đây:


Trang chủ Hình ảnh Âm nhạc Sinh hoạt Danh bạ


Nội dung trang web

Nếu bạn đang thiết kế Trang chủ thì Menu Trang chủ để trống
File liên kết với menu Hình ảnh là hinhanh.htm
File liên kết với menu Âm nhạc là amnhac.htm
File liên kết với menu Sinh hoạt là sinhhoat.htm
File liên kết với menu Danh bạ là danhba.htm


Trang chủ Hình ảnh
Âm nhạc
Sinh hoạt
Danh bạ



Nội dung trang web

Nếu bạn đang thiết kế trang Hình ảnh thì Menu Hình ảnh để trống
File liên kết với menu Trang chủ là trangchu.htm
File liên kết với menu Âm nhạc là amnhac.htm
File liên kết với menu Sinh hoạt là sinhhoat.htm
File liên kết với menu Danh bạ là danhba.htm


Trang chủ
Hình ảnh Âm nhạc
Sinh hoạt
Danh bạ



Nội dung trang web

Tương tự như vậy đối với các trang khác.
Xin chú ý, file liên kết với menu Trang chủ bắt buộc phải là trangchu.htm


Trang trí hệ thống menu

Sau khi tạo xong liên kết, bạn có thể trang trí hệ thống menu cho đẹp.


Trang chủ Hình ảnh
Âm nhạc
Sinh hoạt
Danh bạ



Nội dung trang web

Sử dụng các công cụ sau đây để trang trí menu:
Tạo màu nền cho table (shading)
Tạo đường viền cho table (border)
Tạo khoảng cách giữa đường viền và văn bản (cellpadding)
Điều chỉnh vị trí của văn bản trong
Đưa nhạc vào trang web



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ấy mã HTML và đưa lên trang web



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