PHẦN 1: GIỚI THIỆU NGÔN NGỮ HTML

sử dụng để định dạng đoạn văn Cú pháp:

Nội dung đoạn văn bản

Mơc thø nhÊt

Mục thứ hai Giáo trình thiết kế Web

Ã Danh sách có xếp (hay có đánh số) < OL>, mục da nh sách xếp thứ tự Ã Danh sách thực đơn Ã Danh sách phân cấp Với nhiều trình duyệt, danh sách phân cấp danh sách thực đơn giống danh sách không đánh số, dùng lẫn với Với thẻ OL ta có cú pháp sau:

Muc thu nhat
Muc thu hai
Muc thu ba

đó: TYPE =1 Các mục xếp theo thứ tự 1, 2, =a Các mục xÕp theo thø tù a, b, c =A C¸c mục xếp theo thứ tự A, B, C =i Các mục xếp theo thứ tự i, ii, iii =I Các mục xếp theo thứ tự I, II, III Ngoài thuộc tính START= xác định giá trị khởi đầu cho danh sách Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mục danh sách Thuộc tính nhận giá trị : disc (chấm tròn đậm); circle (vòng tròn); square (hình vuông) IV Các thẻ định dạng ký tự 4.1 Các thẻ định dạng in ký tự Sau thẻ sử dụng để quy định thuộc tính in nghiêng, in đậm, gạch chân cho ký tự, văn thể trình duyệt Giáo trình thiết kế Web In chữ đậm In chữ nghiêng Giáo trình ThiÕt kÕ Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com In chữ gạch chân Đánh dấu đoạn văn hai thẻ định nghĩa từ Chúng thường in nghiêng thể qua kiểu đặc biệt In chữ bị gạch ngang In chữ lớn bình thường cách tăng kích thước font thời lên Việc sử dụng thẻ lồng tạo hiệu ứng chữ tăng dần Tuy nhiên trình duyệt có giới hạn kích thước font chữ, vượt giới hạn này, thẻ ý nghĩa In chữ nhỏ bình thường cách giảm kích thước font thời Việc sử dụng thẻ lồng tạo hiệu ứng chữ giảm dần Tuy nhiên trình duyệt có giới hạn kích thước font chữ, vượt giới hạn này, thẻ ý nghĩa Định dạng số (SuperScript) Chọn kiểu chữ hiển thị Trong thẻ đặt hai tham số size= color= xác định cỡ chữ màu sắc đoạn văn nằm hai thẻ Kích thước tuyệt đối (nhận giá trị từ đến 7) tương đối (+2,-4 ) so với font chữ Định dạng số (SubScript) Định nghĩa kích thước font chữ sử dụng hết văn Thẻ có tham số size= xác định cỡ chữ Thẻ thẻ kết thúc 4.2 Căn lề văn trang Web Trong trình bày trang Web bạn phải ý đến việc lề văn để trang Web có bố cục đẹp Một số thẻ định dạng P, Hn, IMG có tham số ALIGN cho phép bạn lề văn nằm phạm vi giới hạn thẻ Các giá trị cho tham số ALIGN: LEFT Căn lề trái CENTER Căn trang RIGHT Căn lề phải Giáo trình thiết kế Web Giáo trình Thiết kế Web : Chu Văn Hồnh - Email: chuhoanh.dhxd@gmail.com Ngoµi ra, chóng ta sử dụng thẻ CENTER để trang khối văn Cú pháp: Văn trang 4.3 Các ký tự đặc biệt Ký tự & sử dụng để chuỗi ký tự sau xem thực thể Ký tự ; sử dụng để tách ký tù mét tõ Ký tù M· ASCII Tªn chuỗi < < < > > > & & & 4.4 Sử dụng màu sắc thiết kế trang Web Một màu tổng hợp từ ba thành phần màu chính, là: Đỏ (Red), Xanh (Green), Xanh nước biển (Blue) Trong HTML giá trị màu số nguyên dạng hexa (hệ đếm số 16) có định dạng sau: #RRGGBB đó: RR - giá trị màu Đỏ GG - giá trị màu Xanh BB - giá trị màu Xanh nước biển Màu sắc xác ®Þnh qua thuéc tÝnh bgcolor= hay color= Sau dÊu b»ng giá trị RGB hay tên tiếng Anh màu Với tên tiếng Anh, ta 16 màu với giá trị RGB ta tới 256 màu Sau số giá trị màu bản: Màu sắc Giá trị Tên tiếng Anh Đỏ #FF0000 RED Đỏ sẫm #8B0000 DARKRED Xanh #00FF00 GREEN Xanh nhạt #90EE90 LIGHTGREEN Xanh nước biển #0000FF BLUE Giáo trình thiết kế Web Giáo trình Thiết kế Web : Chu Vn Honh - Email: chuhoanh.dhxd@gmail.com Vàng #FFFF00 YELLOW Vàng nhạt #FFFFE0 LIGHTYELLOW Trắng #FFFFFF WHITE Đen #000000 BLACK Xám #808080 GRAY Nâu #A52A2A BROWN TÝm #FF00FF MAGENTA TÝm nh¹t #EE82EE VIOLET Hång #FFC0CB PINK Da cam #FFA500 ORANGE Màu đồng phục hải quân #000080 NAVY #4169E1 ROYALBLUE #7FFFD4 AQUAMARINE Cú pháp: phÇn néi dung tài liệu đặt Sau ý nghĩa tham số thẻ BODY: Các tham số ý nghĩa LINK Chỉ định màu văn siêu liên kết ALINK Chỉ định màu văn siêu liên kết đang chọn VLINK Chỉ định màu văn siêu liên kết đÃ mở Giáo trình thiết kế Web Giáo trình Thiết kÕ Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com BACKGROUND Chỉ định địa ảnh dùng làm BGCOLOR Chỉ định màu TEXT SCROLL Chỉ định màu văn tài liệu YES/NO - Xác định có hay không cuộn TOPMARGIN Lề RIGHTMARGIN Lề phải LEFTMARGIN Lề trái 4.5 Chọn kiểu chữ cho văn Có ph¸p: 4.6 Khái niệm văn siêu liên kết Văn siêu liên kết hay gọi siêu văn từ, cụm từ hay câu trang Web dùng để liên kết tới trang Web khác Siêu văn môi trường chứa liên kết (link) thông tin Do WWW cấu thành từ nhiều hệ thống khác nhau, cần phải có quy tắc đặt tên thống cho tất văn Web Quy tắc Dịch vụ Cổng Tên file http://selab.vnuh.edu.vn:8080 /~dir1/dir2/dir3/index.HTML#chapter001 Tên hệ thống Đường dẫn Các tham số, biến, truy vấn Ví dụ URL đặt tên URL (Universal Resource Locator) Các thành phần URL minh hoạ hình Ã Dịch vụ: Là thành phần bắt buộc URL Nó xác định cách thức trình duyệt máy khách liên lạc với máy phục vụ để nhận liệu Có nhiều dịch vụ http, wais, ftp, gopher, telnet Giáo trình thiết kế Web Giáo trình Thiết kế Web : Chu Vn Honh - Email: chuhoanh.dhxd@gmail.com Ã Tên hệ thống : Là thành phần bắt buộc URL Có thể tên miền đầy đủ máy phục vụ phần tên đầy đủ trường hợp xảy văn yêu cầu nằm miền bạn Tuy nhiên nên sử dụng đường dẫn đầy đủ Ã Cổng : Không thành phần bắt buộc URL Cổng địa socket mạng dµnh cho mét giao thøc thĨ Giao thøc http ngầm định nối với cổng 8080 Ã Đường dẫn thư mục : Là thành phần bắt buộc URL Phải đường dẫn tới file yêu cầu kết nối với hệ thống Có thể đường dẫn URL khác với đường dẫn thực hệ thống máy phục vụ Tuy nhiên rút gọn đường dẫn cách đặt biệt danh (alias) Các thư mục đường dẫn cách dấu gạch ch éo (/) Ã Tên file : Không thành phần bắt buộc URL Thông thường máy phục vụ cấu hình cho không tên file trả file ngầm định thư mục yêu cầu File thường có tên index.html, index.htm, default.html hay default.htm Nếu file thường kết trả danh sách liệt kê file hay thư mục thư mục yêu cầu Ã Các tham số : Không thành phần bắt buộc URL Nếu URL yêu cầu tìm kiếm sở liệu truy vấn gắn vào URL, đoạn mÃ đằng sau dấu chấm hỏi (?).URL trả lại thông tin thu thập từ form Trong trường hợp dấu thăng (#) xuất đoạn mÃ đăng sau tên vị trí (location) file Để tạo siêu văn sử dụng thẻ Cú pháp: siªu văn ý nghĩa tham số: HREF Địa trang Web liên kết, URL NAME Đặt tên cho vị trí đặt thẻ TABLEINDEX Thø tù di chuyÓn Ên phÝm Tab TITLE Văn hiển thị di chuột siêu liên kết TARGET Mở trang Web liên cửa sổ (_blank) Giáo trình thiết kế Web Giáo trình Thiết kế Web : Chu Vn Honh - Email: chuhoanh.dhxd@gmail.com cưa sỉ hiƯn t¹i (_self), mét frame (tên frame) 4.7 Địa t- ơng đối URL trình bày URL tuyệt đối Ngoài có URL tương đối hay gọi URL không đầy đủ Địa tương đối sử dụng khác biệt tương đối văn thời văn cần tham chiếu tới Các thành phần URL ngăn cách ký tự ngăn cách (ký tự gạch chéo /) Để tạo URL tương đối, phải sử dụng ký tự ngăn cách URL đầy đủ sử dụng để tạo nên URL đầy đủ Nguyên tắc thành phần bên trái dấu ngăn cách URL giữ nguyên, thành phần bên phải thay thành phần URL tương đối Chú ý trình duyệt không gửi URL tương đối, bổ sung vào URL sở đÃ xác định trước thành phần URL tương đối xác định sau thuộc tính href= Ký tự sau dấu xác định thành phần URL tham gia để tạo nên URL Ví dụ, URL đầy đủ là: http://it-department.vnuh.edu.vn/HTML/index.htm thì: Ã Ã Ã Ã Dấu hai chấm (:) dịch vụ giữ nguyên thay đổi phần lại Ví dụ ://www.fpt.com/ tải trang chủ máy phục vụ www.fpt.com với dịch vụ http Dấu gạch chéo (/) dịch vụ máy phục vụ giữ nguyên toàn đường dẫn thay ®ỉi VÝ dơ /Javascript/index.htm sÏ t¶i file index.htm cđa th mục Javascript máy phục vụ www.it-department.vnuh.edu.vn Không có dấu phân cách có tên file thay đổi VÝ dơ index1.htm sÏ t¶i file index1.htm ë th mục HTML máy phục vụ www.itdepartment.vnuh.edu.vn Dấu thăng (#): dịch vụ, máy phuc vụ, đường dẫn tên file giữ nguyên, thay đổi vị trí file Do đường dẫn xem đơn vị độc lập nên sử dụng phương pháp đường dẫn tương đối UNIX hay MS-DOS (tức thư mục thư mục cha thư mục tại) URL sở xác định thẻ 4.8 Kết nối mailto Nếu đặt thuộc tính href= thẻ giá trị mailto:address@domain kích hoạt kết nối kích hoạt chức thư điện tử trình duyệt Trang WEB WEBMASTER bảo trì Giáo trình thiết kế Web 10 Giáo trình Thiết kÕ Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com · Ngồi ra, ta cịn chọn hình ảnh để thay cho kiểu bullet thông thường Để thay đổi, ta chọn Format/Bullets and Numbering/Picture bullets, chọn ảnh dùng để làm bullet · Để bỏ định dạng bullets, ta chọn Format/Bullets and Numbering/Plain Bullets 2.4 Tables · Người ta thường dùng table để: o Hiển thị thông tin có dạng dịng/cột, ví dụ bảng thời khóa biểu, o Trình bày (layout) văn bản(text) ảnh đồ họa(graphics) thông tin sản phẩm, · Để tạo bảng, ta dùng hai cách: o Chọn Table/Insert Table Khi hộp hội thoại tạo bảng ra, bạn phải cung cấp thông tin chi tiết cho việc tạo bảng, ví dụ số dịng, số cột, kích thước, o Chọn Table/Draw Table Với chức này, bạn dùng bút vẽ để tạo dịng, cột · Để khơng (hide) border bảng, ta click phải chuột lên table, chọn Table Properties/Border/Sizes · Để tách cell hay trộn nhiều cell lại, ta chọn Tabe chọn Split /Merge Cells · Để thêm xóa cell, ta chọn Table chọn Insert/Delete Cells 2.5 Một số hiệu ứng đặc biệt · Chuyển trang (Page transition): Chọn Format/Page Transition… · Hiệu ứng chữ chuyển động theo chiều ngang (Marquees): Chọn Insert/Component/Marquee Sau hộp thoại ra, bạn gõ vào dòng chữ cần chuyển động đặt thuộc tính khác màu sắc, font chữ, … · Thêm hiệu ứng font chữ cho hyperlink: Chọn Format/Background, check vào Enable hyperlink rollover effects Sau bạn chọn màu theo ý muốn 2.6 Chèn ảnh · Chọn chức Insert/Picture/From File · Đặt thuộc tính kích thước ảnh, click phải chuột lên ảnh, chọn Picture Properties · Để tạo hotspot hyperlink, ta chọn hình vẽ tương ứng (hình chữ nhật, ellipse, …) toolbar pictures Chọn vùng ảnh, điền thông tin hyperlink vào 2.7 Chèn hyperlink · Chọn chức Insert/Hyperlink · Sau hộp thoại ra, gõ vào hyperlink tương ứng Có dạng: o Địa Internet, có dạng: http://… Ví dụ: http:// www.yahoo.com o Liên kết tới trang site, có dạng: /thư mục/tên tập tin Ví dụ: /images/shopping.htm o Liên kết trang, đặt bookmark Định dạng trang · Click phi chut lờn trang, chn Page Properties Giáo trình thiết kế Web 19 Giáo trình Thiết kế Web : Chu Văn Hoành - Email: chuhoanh.dhxd@gmail.com · Để đặt màu cho trang, chọn Background/Colors/Background · Để đăt ảnh cho trang, chọn Background/Formatting/Background picture · Để đặt thông số màu sắc cho hyperlink, chọn Background/Colors/Hyperlink · Để đặt tiờu cho trang chn General/Title Giáo trình thiết kế Web 20

Định dạng
Số trang	33
Dung lượng	785,02 KB