3. SỬ DỤNG HTML ĐỂ LÀM TRANG WEB HOẠT ĐỘNG

Ở đây tôi không thể nào mà phổ biến cho các bạn hết những kiến thức về HTML vì nó rất nhiều, do đó tôi chỉ hưỡng dẫn cho các bạn các thao tác cơ bản và tôi sẽ hướng dẫn bạn cách sử dụng một phần mềm chuyên nghiệp trong thiết kế web của hãng microsoft, đó là FrontPage.

1. Mở FrontPage ra - giao diện của nó sẽ như thế này

2. Nhấn Ctrl+O để mở file index mà bạn vừa lưu ở bài CẮT LAYOUT

3. Trước tiên tôi sẽ hưỡng dẫn bạn căn trang web ra giữa màn hình để cho người dùng ở độ phân giải nào cũng thấy nó nằm giữa màn hình. Như các bạn thấy ở hình dưới thì trang web bị lệch sang trái.

4. Kích chuột vào thẻ HTML bên cạnh thẻ Normal như hình

5. Bây giờ các bạn tìm đến thẻ lệnh :

align = "center" Hình :

6. Trang web sẽ được căn ra giữa màn hình, các bạn hãy nhấn vào thẻ Preview nằm bên cạnh thẻ HTML để kiểm tra kết quả

7. Bây giờ chúng ta sẽ xóa phần image mà các bạn dùng làm không gian để gõ text. Nhấn chuột phải vào vùng không gian đó và chọn CUT, hoặc nhấn chuột trái và nhấn phím delete

8. Sau khi xóa được cái image đó, bạn có thể gõ chữ bình thường vào đó. Bạn có thể trình bày những nội dung gì mà mình thích .

CHÚ Ý: Nội dung trình bày không được lớn hơn không gian trình bày, vì nó sẽ làm vỡ layout của trang web, không tin thì các bạn làm thử xem.

9. Việc tiếp theo là chúng ta sẽ liên kết các nút bấm đến một trang web khác.

Kích chuột phải vào nút bấm mà bạn muốn liên kết và chọn Hyperlink...

10. Gõ đường dẫn của trang web mà bạn muốn liên kết vào ô Address

Đó là một kiểu liên kết, kiểu liên kết này gọi là kiểu liên kết tuyệt đối. Kiểu liên kết này chỉ được dùng khi trang web mà bạn liên kết không nằm cùng host (hay nói cách khác là nó không nằm cùng 1 ổ cứng). Do đó nếu bạn đặt những kiểu liên kết tuyệt đối - đối với những dữ liệu nằm chung host - thì khi bạn đặt dữ liệu trên 1 máy chủ hay một ổ cứng khác thì liên kết sẽ bị sai và người dùng sẽ không truy cập trang web đó được.

Thông thường người ta hay sử dụng kiểu liên kết tương đối và sau đây là bài hưỡng dẫn

11. Có một vấn đề nhỏ sau khi các bạn tạo liên kết cho nút bấm, đó là nó sẽ tạo ra một viền màu xanh xung quanh nút bấm, như bạn thấy ở hình dưới đây

Việc này sẽ gây ra vỡ layout, tác hại của việc vỡ layout đó là các hình ảnh mà bạn cắt ra nó sẽ không khít với nhau mà mỗi hình nằm mỗi nơi.

12. Cách khắc phục đó là kích chuột phải vào nút bấm đó, chọn Picture Properties

13. Trong ô Border Thinkness các bạn gõ giá trị là 0

Viền xanh sẽ biến mất. Layout khi nhìn trong thẻ Normal sẽ không phản ánh đúng thực tế. Để kiểm tra kết quả chính xác thì bạn hãy nhấn Ctrl+S để save lại trang web, sau đó kích vào thẻ Preview . Nếu bạn muốn xem đầy đủ trên trình duyệt web InternerExplorer ( IE ) thì bạn vào File > Preview in Browser ..

14. Bây giờ tôi sẽ nói về liên kết tương đối, tôi lấy ví dụ với dòng chữ MÀN CHÀO HỎI

Các bạn chú ý là việc liên kết đối với chữ và hình ảnh tương tự nhau.

15. Ở hình trên thì dòng chữ của tôi nằm ở chính giữa vùng làm việc, tôi muốn đưa nó lên trên đầu vùng làm việc. Tôi sẽ làm như sau

+ Kích chuột phải lên vùng làm việc và chọn Cell Properties

+ Trong ô Vertical alignment các bạn chọn Top

+ dòng chữ sẽ được đưa lên đầu

16. Ở đây tôi sẽ tính như sau:

Khi người nào xem trang web của tôi khi kích chuột vào chữ MÀN CHÀO HỎI thì họ sẽ mở được 1 trang web khác và sẽ đọc được nội dung chào hỏi của tôi. Muốn làm được như vậy tôi phải tạo ra 1 trang web khác với nội dung là chào hỏi. Tôi tiến hành làm như sau:

17. Nhấn Ctrl+N để tạo 1 trang web mới, trên trang này chưa có nội dung gì. Sau đó bạn hãy gõ nội dung vào đó - hình

18. Sau khi tạo xong nội dung, bạn hãy save lại. Để việc sắp xếp các thư mục có khoa học thì bạn hãy tạo ra 1 folder với tên là chao_hoi , foder này các bạn đặt nó nằm ngang hàng với file index của theme sau đó save lại trang web này với tên là index trong thư mục chao_hoi. HÌNH

Save file index vào trong thư mục chào hỏi.

19. Bây giờ các bạn quay về trang web chứa giao diện trang web , tô đen dòng chữ MÀN CHÀO HỎI , sau đó kích chuột phải và chọn Hyperlink...

20. Với loại liên kết tương đối thì bạn không được gõ địa chỉ cụ thể của trang web vào ô Address, mà bạn hãy kích chuột vào thư mục chao_hoi để mở thư mục chứa file index ra, sau đó kích vào file index trong thư mục chao_hoi, lúc đó trong ô Address sẽ xuất hiện liên kết là chao_hoi\index.html. Xem hình

Như vậy: đối với liên kết tương đối thì các thư mục nằm chung ổ cứng (hay chung host) sẽ sử dụng cách liên kết này. Cho dù bạn đặt các file này ở bất kỳ đâu, trên đĩa CD hay trên một host bất kỳ - thì khi kích chuột vào chữ MÀN CHÀO HỎI - trang web chứa nội dung mà bạn vừa soạn ra sẽ được mở.

+ Nếu như bạn chưa hiểu thì tối sẽ lấy ví dụ sau: Nếu như bạn đặt toàn bộ file index & thư mục images của giao diện trang web mà bạn vừa thiết kế và thư mục chao_hoi trên ổ đĩa cứng C:\ . Nếu bạn lấy địa chỉ tuyệt đối cho dòng chữ MÀN CHÀO HỎI thì sẽ phải làm như sau: C:\chao_hoi\index.html. Nếu bạn chỉ chạy trang web của bạn trên ổ đĩa cứng nhà bạn thì được, nhưng nếu bạn copy nó vào đĩa CD hoặc đưa trang web của bạn lên một host nào đó thì khi người truy cập muốn xem trang web nằm trong thư mục chao_hoi thì sẽ không thể truy cập vào trang web đó được. Ngoại trừ bạn ra, vì bạn biết được địa chỉ tuyệt đối của trang web này.

21. Sau khi liên kết xong thì dòng chữ MÀN CHÀO HỎI sẽ được tô màu xanh và được gạch chân, nếu không muốn nó được gạch chân thì tô đen nó và nhấn Ctrl+U

---

Trên đây là toàn bộ nhũng kiến thức cơ bản để bạn có thể thiết kế được 1 trang web cho riêng mình, về phần HTML thì tôi chỉ hướng dẫn các bạn những cái cơ bản nhất để có thể thành lập được 1 trang web và hệ thống liên kết của nó. Nếu bạn có những vẫn đề gì thì hãy đưa ra những câu hỏi, tôi sẽ giải quyết giúp bạn trong lượng kiến thức cho phép.

VIẾT XONG BÀI NÀY TÔI LUÔN MONG MUỐN CÁC BẠN SẼ TẠO ĐƯỢC MỘT TRANG WEB CHO RIÊNG MÌNH. CHÚC CÁC BẠN THÀNH CÔNG.

Theo Killer