Ngôn ngữ đánh dấu siêu văn bản HTML - Hyper Text Makeup Language

HTML hay HyperText Markup Language là ngôn ngữ đánh dấu siêu văn bản, đây là một ngôn ngữ thông dụng được định dạng để báo cho trình duyệt Web – Web Browser làm thế nào để hiện thị một trang Web trên màn hình máy tính. Ngôn ngữ HTML không phải là một ngôn ngữ lập trình, HTML gọi là ngôn ngữ chỉ vì nó gồm các tập hợp nhỏ các nhóm ký tự theo một quy tắc mà chúng ta dùng để quy định kiểu dáng, vị trí, cách thức của văn bản, ảnh, âm thanh hay bất cứ một đối tượng nào khác cùng với sự liên kết giữa chúng.

doc65 trang | Chuyên mục: HTML | Chia sẻ: dkS00TYs | Lượt xem: 2391 | Lượt tải: 2download
Tóm tắt nội dung Ngôn ngữ đánh dấu siêu văn bản HTML - Hyper Text Makeup Language, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
5 để tạo các liên kết khác đến khoa_may_mặc.htm, khoa_thương_mại.htm, và tt_tin_học_ngoại_ngữ.htm. Đặt các liên kết kế tiếp nhau.
Nhấn DOWN ARROW để thôi chọn hyperlink.
Trang của chúng ta sẽ có dạng sau :
Dĩ nhiên là chúng ta có thể thực hiện các thao tác như trên với các trang khác trong Web site, nhưng đó là một việc mất rất nhiều thời gian nếu có nhiều trang. Ngoài ra, nếu chúng ta quyết định thêm hay xoá trang khỏi Web site, chúng ta phải cập nhật lại các liên kết bằng cách thủ công như trên.
FrontPage còn có một cách khác làm hay hơn để khởi tạo, quản lý và tự động cập nhật các liên kết trong toàn bộ Website. Bây giờ, chúng ta sẽ xoá đi các liên kết vừa tạo ở trên bằng chức năng Undo (bấm nút Undo trên thanh công cụ nhiều lần cho tới khi trả về trạng thái ban đầu)
Tạo Shared Borders và thanh di chuyển (Navigation Bar)
Shared borders (biên dùng chung) là các vùng trên trang Web được dùng để chứa các nội dung xuất hiện một cách ổn định trên tất cả các trang trong Web site. Các biên này chứa các banner, quảng cáo hoặc các nút di chuyển. Banner của trang có thể là tiêu đề trang sinh ra khi tạo trang, còn thanh di chuyển là các hàng hoặc cột chứa các liên kết chính của Web site. FrontPage có thể tự động cập nhật shared borders và navigation bars, sao cho cấu trúc của Website luôn luôn hoạt động tốt, ngay cả khi thêm, di chuyển, xoá trang.
Tạo shared border của Web site
Trong phần này chúng ta sẽ dùng các chức năng nâng cao của Frontpage để tạo ra một Website có tên là Sonadezi College
Mở Frontpage, trên thanh công cụ standard, bấm Toggle Pane , rồi chọn Web 
Xuất hiện cửa sổ Web Site Templates. Chọn mục One Page Web 
Đổi tên thành Sonadezi College trong mục Specify the location of the new web
Sau khi nhấp chọn OK sẽ xuất hiện màn hình như sau
Chuyển qua chế độ Navigation View, tạo mới các trang Khoa Giày Da, Khoa May Mặc, Khoa Quản Trị- Kinh Doanh, Khoa Thương Mại, T.T Tin Học – Ngoại Ngữ, Diễn Đàn và Thời Khoá Biểu.
Tắt hiển thị Folder List trong chế độ làm việc này.
Trong menu Format, chọn Shared Borders.
FrontPage hiển thị hộp thoại Shared Borders .Chú ý có 2 loại thanh di chuyển có thể gắn vào
Trong hộp thoại Shared Borders, tạo các tùy chọn cho tất cả các trang. Phải bảo đảm rằng All pages đã được chọn.
Đánh dấu Top và đánh dấu tiếp Include navigation buttons để chỉ định cho hiển thị trên đầu trang.
Đánh dấu Left và đánh dấu tiếp Include navigation buttons để chỉ định cho hiển thị trên bìa trái trang.
Bỏ trống Right và Bottom, và sau đó bấm OK.
Lúc này FrontPage đã tạo shared borders và thanh di chuyển mặc nhiên cho tất cả các trang.
Chuyển qua chế độ Page View, chúng ta sẽ thấy các định dạng của toàn bộ trang Web như sau .
Sau đây, chúng ta sẽ học cách sửa đổi hình thức của thanh di chuyển cho phù hợp.
Thử nghiệm hyperlink trên thanh liên kết
Trong chế độ Navigation View, Nhấp đúp chuột vào trang chủ Home Page (index.htm). 
Tắt hiển thị Folder List trong chế độ làm việc này. 
Giữ CTRL và sau đó bấm hyperlink có tên Khoa May Mặc trên lề trái. 
FrontPage mở trang đích của liên kết, trong trang Khoa May Mặc, shared borders và thanh di chuyển cũng đã được chèn thêm vào đó. Tuy nhiên, trên trang này các liên kết chỉ tới các trang khác chỉ hiển thị trong lề trên (top). Đó là do FrontPage sử dụng cấu trúc site để xác định các cấp (level) của trang hiện hành. 
Mặc nhiên, shared border ở trên chỉ tới các trang cùng cấp, còn shared border bên trái chỉ tới các trang cấp dưới 
Hiệu chỉnh thanh liên kết (link bar)
Mở trang index.htm, FrontPage mở lại trang chủ.
Trong phần thân của trang chủ nhấp đúp chuột lên dòng chữ Edit properties for this Link Bar to display hyperlinks here. Nhấp đúp chuột lên thanh liên kết để mở hộp thoại Link Bar Properties.
Trong hộp Link Bar Properties, có dạng như sau
FrontPage tạo một navigation bar đến tất cả các trang cấp dưới trang chủ. Trang của chúng ta sẽ có dạng như sau:
Tương tự chúng ta sẽ xem các liên kết ở bên lề trái như sau:
Lưu ý: Tất cả những thay đổi trên các thanh liên kết đều được tự động phản ánh ở trang này cũng như trong tất cả các trang khác.
Chủ đề định dạng (theme)
Trong Website của chúng ta, các hình ảnh, danh sách, form, shared border, thanh liên kết đã có đủ cả và tạo nên một sắc thái đa dạng. Tuy nhiên, để cho hình thức các trang trong cùng Website được trình bày một cách nhất quán, FrontPage sử dụng khái niệm theme (tạm gọi là chủ đề định dạng hay mẫu định dạng), giúp cho việc thiết kế tiết trang Website kiệm được rất nhiều thời gian.
FrontPage 2002 có hơn 50 theme được thiết kế sẵn một cách chuyên nghiệp, mỗi theme bao gồm các thành phần trang như: danh sách (list), font, ảnh nền, hình trang trí, thanh di chuyển,… làm cho hình thức của Website thêm sống động và nhất quán.
Cách thức áp đặt theme đối với Web site
Chọn Page tab của index.htm.
Trong menu Format, chọn Theme.
FrontPage hiển thị hộp thoại Themes, ở mục này chúng ta có thể chọn theme tuỳ thích. Mỗi lần bấm chọn tên theme, một hình mẫu hiện ra để chúng ta xem trước có vừa ý không trước khi quyết định chọn. Ở đây ta chọn mục Expedition có dạng như sau 
Nếu muốn chọn Theme cho tất cả các trang trong Website thì phải đánh dấu vào mục All pages như sau
Trong phần Apply theme to, để xác lập cho tất cả các trang được chọn, chắc chắn rằng bạn đã đánh dấu All pages.
Chọn Yes để khẳng định xác lập theme.
Trang Website của chúng ta sẽ có dạng sau:
Hiệu chỉnh Theme
Mặc dù tiêu đề trang (page banner) tương đối đẹp, nhưng có lẽ chưa phù hợp lắm với nội dung của Website như trang Website không hiển thị được Tiếng Việt ở cột bên trái. Chúng ta sẽ tạo một banner khác dựa vào việc sửa đổi theme đang chọn.
Mở lại trang chủ index.htm
Trên menu Format, bấm Theme. FrontPage hiển thị hộp thoại Themes…
Trong hộp thoại Themes, đánh dấu chọn All Pages.
Kế tiếp chọn Modify, sẽ xuất hiện cửa sổ như sau:
Dưới câu hỏi What would you like to modify? bấm chọn Text. FrontPage hiển thị hộp thoại Modify Theme. Tại đây bạn có thể thay đổi font chữ và các thành phần khác.
Muốn cho cột banner bên trái hiển thị đúng Tiếng Việt, chúng ta nhấp chuột chọn button Text. Ở đây chúng ta muốn cho toàn bộ phần Body của tất cả trang Website đều sử dụng font chữ Verada thì chúng ta chọn mục Body và chọn font Verada như sau
Trong Item list, bấm chọn Body.
Trong thẻ Font, bấm chọn font Verada.
Bấm OK trong Modify Theme và sau đó bấm OK trong Themes
Chọn Yes để tái xác nhận.
FrontPage hiển thị hộp thoại Save Theme cùng với thông báo This theme is read-only. Please enter a new theme title to save as:
Gõ vào tên New Expedition làm tiêu đề của Theme đã sửa, và chọn OK. 
Lưu ý: Chúng ta không nên thay đổi Theme mặc định của FrontPage mà nên chọn chế độ Save As để lưu lại Theme với một tên mới. 
Chọn Yes để xác lập Theme. 
Bấm Save trên menu File. 
Trang Website của chúng ta sẽ có dạng sau: 
Lưu ý: Ngoài việc thay đổi font chữ trong Theme, chúng ta còn có thể thay đổi hình ảnh, font chữ của các phần header, button... trong mục Modify Color và Modify Graphic. Bằng cách này chúng ta có thể tạo ra các Theme mới rất dễ dàng bằng những hình ảnh riêng của mình.
Xem trước Web site trong Web browser
Trong menu File, chọn Preview in Browser.
FrontPage hiển thị hộp thoại Preview in Browser để bạn lựa chọn một trình duyệt đã cài đặt trên máy (Trong WinXP, đã có sẵn IE6). Website của chúng ta đã sẵn sàng được xem thử trên trình duyệt này
Bấm tại các liên kết để kiểm tra các đích của nó
Đóng cửa sổ Web browser sau khi đã kiểm tra xong.
Tổ chức file trong web site
Bây giờ trong Web site đã chứa nhiều trang và tập tin, chúng ta sẽ dùng chế độ Folders view để quản lý chúng. Tương tự như Windows Explorer, Folders view cho phép thực hiện các thao tác quản lý tập tin và thư mục trong phạm vi Web site. Chúng ta có thể thêm, bớt, thay đổi, sắp xếp lại các tài nguyên mà không phá vỡ các liên kết và cấu trúc của nó.
Trong các bước sau, chúng ta sẽ thực hành chuyển các tệp ảnh từ Sonadezi College Web site vào thư mục Images do FrontPage tạo ra như một thành phần của Web site.
Lưu ý: Nếu chúng ta dùng Explorer hay một trình quản lý tập tin nào khác để thực hiện các thao tác về các tập tin, chúng ta có thể bẻ gẫy các liên kết trong trang Web
Di chuyển các file hình ảnh vào thư mục Images
Di chuyển các tập tin hình ảnh vào thư mục Images 
Trên Views bar, bấm Folders. FrontPage chuyển qua chế độ Folders view. 
Trong Folder List khung, bấm thư mục trên cùng :\My Documents\My Webs\Sonadezi College. 
Trong khung Contents , bấm cột Type 
Danh sách của các file bây giờ được nhóm theo loại (GIF, JPEG,..).
Trong khung Contents, bấm tập tin hình ảnh đầu tiên để chọn nó
Giữ SHIFT, bấm tập tin hình ảnh cuối cùng trong danh sách.
Kéo thả (nút phải) vào thư mục Images trong Folder List.
Khi thư mục Images được chọn, thả chuột, bấm Move Here menu tắt FrontPage hiển thị hộp thoại Rename trong quá trình di chuyển.
Lặp lại các bước 4 và 5 tương tụ như cho các tập tin khác.
Trong khung Contents, bấm cột Name để sắp xếp lại theo tên
Xuất bản (publishing) Website Sonadezi College
Khi xuất bản Website lên Internet hoặc Intranet, FrontPage tự động kiểm tra các liên kết, các địa chỉ trang và đường dẫn của các địa chỉ đó.
Xuất bản Web site đang làm việc
Đóng tất cả các trang trong Page view.
Trên menu File, bấm Publish Web, hoặc bấm nút Publish Web button trên thanh công cụ, xuất hiện cửa sổ như sau:
Nhập địa chỉ URL của Web server, (ví dụ  sau đó bấm Publish.
Lưu ý: 
Sau khi xuất bản lần đầu, chúng ta thể bỏ qua hộp thoại Publish Web bằng cách bấm nút Publish Web trên toolbar. Nếu FrontPage phát hiện chúng ta xuất bản lên một Web server không hỗ trợ FrontPage Server Extensions, nó liền chuyển qua chế độ file transfer protocol (FTP).
Khi xuất bản Web site, tất cả các trang và hình đều được tải lên mạng. Để loại trừ một số tập tin không muốn xuất bản bấm Don’t Publish. 
Khi FrontPage xuất bản thành công, nó sẽ xuất hiện một hộp thoại chứa địa chỉ URL, qua đó có thể mở Web site trong trình duyệt Web để xem lại.

File đính kèm:

  • docNgôn ngữ đánh dấu siêu văn bản HTML - Hyper Text Makeup Language.doc
Tài liệu liên quan