Giáo trình hướng dẫn chi tiết thiết kế website

Các thẻ định cấu trúc tài liệu1.1 HTMLCặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có sửdụng các thẻ HTML để trình bày.. Cú pháp:Trình duyệt sẽ xem các t

sử dụng Cácđịnh dạng đoạn văn Nội dung tài liệu Cú pháp:

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

•` Danh

Mục thứ xếp ( hay khơng đánh số)

sách khơng • Danh có xếp (hay có đánh số)

Mục thứ hai 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: đó:
1. Muc thu nhat
2. Muc thu hai
3. Muc thu ba
Giáo trình thiết kế Web 8 Giáo trình Thiết kế Web 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 cịn 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 vng) 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 Giáo trình Thiết kế Web In chữ đậm In chữ nghiêng 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 q giới hạn này, thẻ khơng có ý nghĩa In chữ nhỏ bình thường cách giảm kích thước font thời Việc 10 Giáo trình thiết kế Web 10 Giáo trình Thiết kế Web • 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ố: 20 Giáo trình thiết kế Web 20 Giáo trình Thiết kế Web HREF NAME TABLEINDEX TITLE TARGET Địa trang Web liên kết, URL Đặt tên cho vị trí đặt thẻ Thứ tự di chuyển ấn phím Tab Văn hiển thị di chuột siêu liên kết Mở trang Web liên cửa sổ (_blank) cửa sổ (_self), frame (tên frame) 4.7 Địa tương đối URL trình bày URL tuyệt đối Ngồi cịn có URL tương đối hay cịn 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 21 Giáo trình thiết kế Web 21 Giáo trình Thiết kế Web 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 cị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 tải file index.htm 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 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 22 Giáo trình thiết kế Web 22 Giáo trình Thiết kế Web 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ì 4.9 Vẽ đường thẳng nằm ngang Cú pháp: ý nghĩa tham số: ALIGN COLOR NOSHADE SIZE WIDTH Căn lề (căn trái, phải, giữa) Đặt màu cho đường thẳng Khơng có bóng Độ dày đường thẳng Chiều dài (tính theo pixel % bề rộng cửa sổ trình duyệt) Thẻ giống thẻ BR, khơng có thẻ kết thúc tương ứng 24 Giáo trình thiết kế Web 24 Giáo trình Thiết kế Web V Các thẻ chèn âm thanh, hình ảnh 5.1 Giới thiệu Liên kết với file đa phương tiện tương tự liên kết bình thường Tuy phải đặt tên cho file đa phương tiện Phần mở rộng file phải cho biết kiểu file Kiểu Image/GIF Phần mở rộng gif Mô tả Viết tắt Graphics Interchange Format Khuôn dạng xuất người có nhu cầu trao đổi ảnh nhiều hệ thống khác Nó sử dụng tất hệ thống hỗ trợ giao diện đồ hoạ Định dạng GIF định dạng chuẩn cho trình duyệt WEB Nhược điểm thể 256 màu Mở rộng chuẩn GIF89, thêm nhiều chức cho ứng dụng đặc biệt làm ảnh suốt - tức ảnh cách làm màu giống với màu trình duyệt 25 Giáo trình thiết kế Web 25 Giáo trình Thiết kế Web Image/JPEG jpeg Image/TIFF tiff Text/HTML HTML, htm eps, ps PostScript Adobe Acrobat pdf Viết tắt Joint Photographic Expert Group Là khn dạng ảnh khác có thêm khả nén.Ưu điểm bật khuôn dạng lưu trữ hàng triệu màu độ nén cao nên kích thước file ảnh nhỏ thời gian download nhanh Nó sở cho khn dạng MPEG Tất trình duyệt có khả xem ảnh JPEG Viết tắt Tagged Image File Format Được Microsoft thiết kế để quét ảnh từ máy quét tạo ấn phẩm Được tạo để hiển thị in văn có chất lượng cao Viết tắt Portable Document Format Acrobat sử dụng siêu liên kết văn giống HTML Từ phiên 2.0, sản phẩm Acrobat cho phép liên kết nhiều văn Ưu điểm lớn khả WYSISYG 26 Giáo trình thiết kế Web 26 Giáo trình Thiết kế Web Video/MPE G mpeg Video/AVI Video/Quick Time avi mov Sound/AU Sound/MIDI au mid Sound/RealA ram udio Viết tắt Motion Picture Expert Group, định dạng dành cho loại phim (video) Đây khuôn dạng thông dụng dành cho phim WEB Là khuôn dnạg phim Microsoft đưa Do Apple Computer đưa ra, chuẩn video cho có nhiều ưu điểm MPEG AVI Mặc dù tích hợp vào nhiều trình duyệt chưa phổ biến hai loại định dạng Là khuôn dạng dành cho âm nhạc điện tử thơng dụng nhiều trình duyệt hệ thống khác hỗ trợ File Midi tổng hợp số hố trực tiếp từ máy tính Định dạng audio theo dòng Một bất tiện sử dụng định dạng khác file âm thường có kích thước lớn - thời gian tải xuống lâu, Trái lại audio dòng bắt đầu chơi tải phần file tải phần khác.Mặc dù file theo định dạng khơng nhỏ 27 Giáo trình thiết kế Web 27 Giáo trình Thiết kế Web VRML vrml so với định dạng khác song khả dịng khiến định dạng phù hợp với khả chơi Viết tắt Virtual Reality Modeling Language Các file theo định dạng giống HTML Tuy nhiên trình duyệt hiển thị cửa sổ chiều nên người xem cảm nhận cảm giác ba chiều 5.2 Đưa âm vào tài liệu HTML Cú pháp: Thẻ khơng có thẻ kết thúc tương ứng () Để chơi lặp lại vô hạn cần định LOOP = -1 LOOP = INFINITE Thẻ BGSOUND phải đặt phần mở đầu (tức nằm cặp thẻ HEAD) 28 Giáo trình thiết kế Web 28 Giáo trình Thiết kế Web 5.3 Chèn hình ảnh, đoạn video vào tài liệu HTML Để chèn file ảnh (.jpg, gif, bmp) video (.mpg, avi) vào tài liệu HTML, bạn sử dụng thẻ IMG Cú pháp: Trong đó: ALIGN = TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT ALT = text BORDER = n SRC = url Căn hàng văn bao quanh ảnh Chỉ định văn hiển thị chức show picture browser bị tắt hay hiển thị thay cho ảnh trình duyệt khơng có khả hiển thị đồ hoạ Văn gọi nhãn ảnh Đối với trình duyệt có khả hỗ trợ đồ hoạ, dịng văn lên di chuột qua ảnh hay hiển thị vùng ảnh ảnh chưa tải hết Chú ý phải đặt văn hai dấu nháy kép triong văn chứa dấu cách hay ký tự đặc biệt - trường hợp ngược lại bỏ dấu nháy kép Đặt kích thước đường viền vẽ quanh ảnh (tính theo pixel) Địa file ảnh cần chèn vào tài liệu 30 Giáo trình thiết kế Web 30 Giáo trình Thiết kế Web WIDTH/HEIGHT HSPACE/VSPACE TITLE = title DYNSRC = url START = FILEOPEN/MOUSEOVER LOOP = n/INFINITE Chỉ định kích thước ảnh hiển thị Chỉ định khoảng trống xung quanh hình ảnh (tính theo pixel) theo bốn phía trên, dưới, trái, phải Văn hiển thị chuột trỏ ảnh Địa file video Chỉ định file video chơi tài liệu mở hay trỏ chuột vào Có thể kết hợp hai giá trị phải phân cách chúng dấu phẩy Chỉ định số lần chơi Nếu LOOP = INFINITE file video chơi vô hạn lần VI Các thẻ định dạng bảng biểu Sau thẻ tạo bảng chính: Định nghĩa bảng Định nghĩa hàng bảng Định nghĩa hàng 31 Giáo trình thiết kế Web 31 Giáo trình Thiết kế Web Định nghĩa ô chứa tiêu đề cột Tiêu đề bảng Cú pháp: Tiêu đề bảng biểu Định nghĩa dòng 32 Giáo trình thiết kế Web 32 Giáo trình Thiết kế Web Định nghĩa dịng Nội dung ô 33 Giáo trình thiết kế Web 33 Giáo trình Thiết kế Web ý nghĩa tham số: ALIGN / VALIGN BORDER BORDERCOLOR BORDERCOLORDARK BORDERCOLORLIGHT BACKGROUND BGCOLOR CELLSPACING CELLPADDING Căn lề cho bảng nội dung Kích thước đường kẻ chia ô bảng, đo theo pixel Giá trị có nghĩa khơng xác định lề, bảng có khoảng trắng nhỏ để phân biệt Nếu để border ngầm định border=1 Với bảng có cấu trúc phức tạp, nên đặt lề để người xem phân biệt rõ dịng cột Màu đường kẻ Màu phía tối phía sáng cho đường kẻ Địa tới tệp ảnh dùng làm cho bảng Màu Khoảng cách ô bảng Khoảng cách nội dung đường kẻ 34 Giáo trình thiết kế Web 34 ... click vào SignUp 49 Giáo trình thiết kế Web 49 Giáo trình Thiết kế Web 50 Giáo trình thiết kế Web 50 Giáo trình Thiết kế Web Sau đú bạn hóy điền vào cỏc thụng tin liờn quan cần thiết Họ tờn, mật... phuc vụ, đường dẫn tên file giữ nguyên, thay đổi vị trí file 22 Giáo trình thiết kế Web 22 Giáo trình Thiết kế Web 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... Độ dày đường thẳng Chi? ??u dài (tính theo pixel % bề rộng cửa sổ trình duyệt) Thẻ giống thẻ BR, khơng có thẻ kết thúc tương ứng 24 Giáo trình thiết kế Web 24 Giáo trình Thiết kế Web V Các thẻ chèn

Định dạng
Số trang	34
Dung lượng	1,12 MB