Tài liệu Giới thiệu ngôn ngữ HTML ppt

Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com 0912378211 PHẦN I GIỚI THIỆU NGÔN NGỮ HTML I CÁC THẺ ĐỊNH CẤU TRÚC TÀI LIỆU 1.1 HTML Cặp thẻ sử dụng để xác nhận tài liệu tài liệu HTML, tức có sử dụng thẻ HTML để trình bày Tồn nội dung tài liệu đặt cặp thẻ Cú pháp: Toàn nội tài liệu đặt Trình duyệt xem tài liệu không sử dụng thẻ tệp tin văn bình thường 1.2 HEAD Thẻ HEAD dùng để xác định phần mở đầu cho tài liệu Cú pháp: Phần mở đầu (HEADER) tài liệu đặt 1.3 TITLE Cặp thẻ sử dụng phần mở đầu tài liệu, tức phải nằm thẻ phạm vi giới hạn cặp thẻ Cú pháp: Tiêu đề tài liệu 1.4 BODY Thẻ sử dụng để xác định phần nội dung tài liệu - phần thân (body) tài liệu Trong phần thân chứa thơng tin định dạng định để đặt ảnh cho tài liệu, màu nền, màu văn siêu liên kết, đặt lề cho trang tài liệu Những thông tin đặt phần tham số thẻ Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com 0912378211 phần nội dung tài liệu đặt Cú pháp: Trên cú pháp thẻ BODY, nhiên HTML 3.2 có nhiều thuộc tính sử dụng thẻ BODY Sau thuộc tính chính: BACKGROUND= Đặt ảnh làm ảnh (background) cho văn Giá trị tham số (phần sau dấu bằng) URL file ảnh Nếu kích thước ảnh nhỏ cửa sổ trình duyệt tồn hình cửa sổ trình duyệt lát kín nhiều ảnh BGCOLOR= Đặt mầu cho trang hiển thị Nếu hai tham số BACKGROUND BGCOLOR có giá trị trình duyệt hiển thị mầu trước, sau tải ảnh lên phía TEXT= Xác định màu chữ văn bản, kể đề mục ALINK=,VLINK=,LINK= Xác định màu sắc cho siêu liên kết văn Tương ứng, alink (active link) liên kết kích hoạt - tức kích chuột lên; vlink (visited link) liên kết kích hoạt; Như tài liệu HTML có cấu trúc sau: Tiêu đề tài liệu Nội dung tài liệu II CÁC THẺ ĐỊNH DẠNG KHỐI 2.1 THẺ P Thẻ

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

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

Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com 0912378211 2.2 CÁC THẺ ĐỊNH DẠNG ĐỀ MỤC H1/H2/H3/H4/H5/H6 HTML hỗ trợ mức đề mục Chú ý đề mục dẫn định dạng mặt logic, tức trình duyệt thể đề mục khn dạng thích hợp Có thể trình duyệt font chữ 14 point sang trình duyệt khác font chữ 20 point Đề mục cấp cao giảm dần đến cấp Thông thường văn đề mục cấp hay cấp thường có kích thước nhỏ văn thông thường Dưới thẻ dùng để định dạng văn dạng đề mục: Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp Định dạng đề mục cấp 2.3 THẺ XUỐNG DÒNG BR Thẻ khơng có thẻ kết thúc tương ứng (), có tác dụng chuyển sang dịng Lưu ý, nội dung văn tài liệu HTML trình duyệt Web thể liên tục, khoảng trắng liền nhau, ký tự tab, ký tự xuống dòng coi khoảng trắng Để xuống dòng tài liệu, bạn phải sử dụng thẻ 2.4 THẺ PRE Để giới hạn đoạn văn định dạng sẵn bạn sử dụng thẻ Văn hai thẻ thể giống hệt chúng đánh vào, ví dụ dấu xuống dòng đoạn văn giới hạn thẻ có ý nghĩa chuyển sang dịng (trình duyệt khơng coi chúng dấu cách) Cú pháp: Văn định dạng III CÁC THẺ ĐỊNH DẠNG DANH SÁCH 3.1 DANH SÁCH THÔNG THƯỜNG Cú pháp:

• Mục thứ
• Mục thứ hai

Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com 0912378211 Có kiểu danh sách: •` Danh sách khơng xếp ( hay khơng đánh số)

• Danh sách có xếp (hay có đánh số)
, 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:
1. Muc thu nhat
2. Muc thu hai
3. 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 Ngồ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 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 In chữ đậm Đánh dấu đoạn văn hai thẻ Giáo trình thiết kế Web In chữ nghiêng In chữ gạch chân Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com 0912378211 đị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ẻ 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 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ẻ khơng có ý nghĩa Định dạng số (SuperScript) Đị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ẻ khơng có thẻ kết thúc 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ữ 4.2 CĂN LỀ VĂN BẢN TRONG 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 Ngoài ra, sử dụng thẻ CENTER để trang khối văn Cú pháp: Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com 0912378211 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ự từ Ký tự Mã ASCII Tên chuỗi < < < > > > & & & 4.4 SỬ DỤNG MÀU SẮC TRONG THIẾT KẾ CÁC 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 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 Vàng #FFFF00 YELLOW Vàng nhạt #FFFFE0 LIGHTYELLOW Trắng #FFFFFF WHITE Đen #000000 BLACK Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com 0912378211 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ở BACKGROUND Chỉ định địa ảnh dùng làm BGCOLOR Chỉ định màu TEXT Chỉ định màu văn tài liệu SCROLL YES/NO - Xác định có hay không cuộn TOPMARGIN Lề RIGHTMARGIN Lề phải LEFTMARGIN Lề trái Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com 0912378211 4.5 CHỌN KIỂU CHỮ CHO VĂN BẢN Cú pháp: 4.6 KHÁI NIỆM VĂN BẢ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 Ví dụ URL Các tham số, biến, truy vấn đặ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 • 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 giao thức 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 Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com 0912378211 đườ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 khơng có 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) cửa sổ (_self), frame (tên frame) 4.7 ĐỊA CHỈ 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 Giáo trình thiết kế Web Giáo trình Thiết kế Web : Nguyễn Hữu Tuấn Email: prohuutuan@yahoo.com 0912378211 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 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 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Ẽ MỘT ĐƯỜNG THẲNG NẰM NGANG Cú pháp: Nội dung tài liệu < /HTML> II CÁC THẺ ĐỊNH DẠNG KHỐI... Hữu Tuấn Email: prohuutuan@yahoo.com 0912378211 PHẦN I GIỚI THIỆU NGÔN NGỮ HTML .1 I CÁC THẺ ĐỊNH CẤU TRÚC TÀI LIỆU 1.1 HTML 1.2 HEAD 1.3 TITLE ... THẺ CHÈN ÂM THANH, HÌNH ẢNH 11 5.1 Giới thiệu 11 5.2 Đưa âm vào tài liệu HTML 12 5.3 Chèn hình ảnh, đoạn video vào tài liệu HTML 13 VI CÁC THẺ ĐỊNH DẠNG BẢNG BIỂU