Giáo trình chi tiết về HTML

HTML (Hypertext Markup Language): Ngôn ngữ đánh dấu siêu văn bản Siêu văn bản (Hypertext): là các liên kết đến các trang web khác. Đánh dấu (Markup): gồm một vài mã đơn giản để tạo ra văn bản nét đậm hoặc nghiêng, các hình đồ hoạ chèn thêm vào, cùng với sự xác định các mối liên kết siêu văn bản... Ngôn ngữ (Language): gồm các tập hợp nhỏ các nhóm hai đến ba chữ và các từ dùng để quy định các loại đối tượng trên một Website....

Thẻ

sử dụng để bắt đầu đoạn văn Cú pháp:

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

Đơn xin việc Kết quả: Cộng hoà xã hội chủ nghĩa Việt nam Độc lập - Tự - Hạnh phúc Đơn xin việc 2.2.2 , , , , , 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 Dưới thẻ dùng để định dạng văn dạng đề mục: Ví dụ: Đị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 Design Simple Website Đây đầu đề 1 Đây đầu đề 2 Đây đầu đề 3 Đây đầu đề 4 Đây đầu đề 5 Đây đầu đề 6 Kết quả: Trang Đây đầu đề Đây đầu đề Đây đầu đề Đây đầu đề Đây đầu đề Đây đầu đề 2.3 Các thẻ định dạng danh sách 2.3.1 Danh sách có trật tự Danh sách có trật tự tự động đánh số thành tố danh sách Mã nguồn Kết

Yếu tố

Yếu tố Yếu tố

Yếu tố

Yếu tố 3 Yếu tố

o Yếu tố

Yếu tố o Yếu tố

Yếu tố

Yếu tố o Yếu tố

Yếu tố  Yếu tố

Yếu tố  Yếu tố 2.3.3 Danh sách định nghĩa Mỗi yếu tố danh sách bao gồm hai thành phần: • Tiêu đề lề phía trái (chỉ thẻ ) • Phần giải nghĩa lề thụt sang phía phải (chỉ thẻ ) Mã nguồn Yếu tố Chú giải cho yếu tố Yếu tố Kết Yếu tố Chú giải cho yếu tố Yếu tố Chú giải cho yếu tố Trang Chú giải cho yếu tố 2.4 Các thẻ định dạng ký tự 2.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 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 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ữ Ví dụ: Một số thẻ định dạng kiểu chữ kết thể trình duyệt: Trang Kiểu có tính chất vật lý Mã nguồn Kết đậm đậm gạch dưới gạch nghiêng nghiêng teletype teletype Kiểu có tính logic Mã nguồn Kết nhấn mạnh nhấn mạnh nhấn mạnh hơn nhấn mạnh trích dẫn trích dẫn code code sample sample keyboard keyboard varible variable giải thích giải thích 2.4.2 Các thẻ canh lề Trong trình bày trang Web bạn ln phải ý đến việc lề văn để trang Web có bố cục đẹp Một số thẻ định dạng P,, 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 CENTER JUSTIFY Căn lề trái Căn trang Căn hai bên RIGHT Căn lề phải Ngồi ra, sử dụng thẻ CENTER để trang khối văn Cú pháp: Văn trang 2.4.3 Các thẻ 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 < > & Kí tự trắng < > & < > & Trang Những ký hiệu dùng để thẻ mà bạn dùng chúng HTML Bạn dùng dấu phối hợp để thể ký tự đặc biệt Ký tự Dấu phối hợp < & &>; & & " " 2.4.4 Trang trí màu sắc thiết kế website 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 Trong đó: 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 Một 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 Xám #808080 GRAY Nâu #A52A2A BROWN Tím #FF00FF MAGENTA Trang Tím nhạt #EE82EE VIOLET Hồng #FFC0CB PINK Da cam #FFA500 ORANGE Màu đồng phục hải #000080 quân #4169E1 #7FFFD4 NAVY ROYALBLUE AQUAMARINE Cú pháp: phần nội dung tài liệu đặt Ý nghĩa tham số: Các tham số Ý nghĩa LINK ALINK VLINK BACKGROUND BGCOLOR TEXT SCROLL TOPMARGIN RIGHTMARGIN LEFTMARGIN Chỉ định màu văn siêu liên kết Chỉ định màu văn siêu liên kết chọn Chỉ định màu văn siêu liên kết mở Chỉ định địa ảnh dùng làm Chỉ định màu Chỉ định màu văn tài liệu YES/NO - Xác định có hay khơng cuộn Lề Lề phải Lề trái 2.4.5 Thẻ xác định kiểu chữ Cú pháp: Trang 2.4.6 Văn siêu liên kết Để tạo siêu văn sử dụng thẻ Cú pháp: siêu văn Ý nghĩa tham số: HREF NAME TABLEINDEX TITLE TARGET Địa trang Web liên kết, URL Đặt tên cho vị trí đặt thẻ siêu liên kết 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 kết cửa sổ (_blank) cửa sổ (_self), frame (tên frame) 2.4.7 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ì Ví dụ: Trang 10 CheckUser="True" end if End Function %> 4.5.6 Sử dụng thẻ #include Trong trường hợp muốn trộn mã nguồn từ file asp vào file asp khác trước server thực thi nó, người ta dùng thẻ định hướng #include với cú pháp Ví dụ: Ghi chú: Người ta thường include file chứa hàm thư viện dùng chung cho ứng dụng vào đầu file Asp cần sử dụng thư viện này, insert file Header Footer cho trang web, insert thành phần sử dụng chung nhiều file asp menu, Nếu sử dụng cú pháp với từ khóa virtual u cầu phải có đường dẫn đầy đủ từ Alias IIS Trong ví dụ trên, Alias QLSV cấu hình IIS để đường dẫn đến thư mục chứa trang web Trang Web ASP include không chứa đoạn code: trang sử dụng có đoạn mã Ví dụ: Xây dựng trang index.asp có bố cục cổ điển bao gồm: o Một Banner đầu trang o Một menu bên trái trang o Một Footer cuối trang Banner Left Menu Body of pape Footer Trong đó: o Để hiển thị Banner ta xây dựng file Banner.asp o Để hiển thị Left Menu ta xây dựng file LeftMenu.asp o Để hiển thị Footer ta xây dựng file Footer.asp Ví dụ: Trong ứng dụng ASP có nhiều trang cần thao tác với database, viết riêng module thao tác với database file myConnection.asp, include file vào trang asp muốn thao tác với database với đoạn mã sau: MaSVHọ tên 4.5.8.6 Sử dụng ADO với câu lệnh truy vấn SQL Với connection mở dùng để thực thi câu lệnh SQL dạng insert, update, delete Thêm liệu: Sửa liệu: Trang 96 Xoá liệu: Ngoài dùng Recordset để thêm, sửa, xóa liệu database cách duyệt qua tập hợp ghi bảng Thêm liệu: Sửa liệu: Xóa liệu: 4.5.8.7 Một số tập ứng dụng Bài 1: Tạo đếm số người truy cập Website Bài 2: Lấy địa IP máy Client Bài 3: Tạo password ngẫu nhiên Bài 4: Liệt kê file thư mục Bài 5: Tạo biểu đồ thống kê 4.5.9 Xây dựng ứng dụng ASP hoàn chỉnh 4.5.9.1 Xây dựng Website quản lý sinh viên Trang 97 4.5.9.2 Xây dựng Website tin tức 4.5.9.3 Xây dựng Website trưng cầu ý kiến 4.5.9.4 Xây dựng Website thư viện ảnh Trang 98 MỤC LỤC Chương 1: Giới thiệu ngôn ngữ HTML 1 Tổng quan 1.1 Giới thiệu 1.2 Cấu trúc trang web Các thẻ HTML 2.1 Các thẻ định cấu trúc tài liệu .1 2.1.1 2.1.2 2.1.3 2.1.4 2.2 Các thẻ định dạng khối 2.2.1

2.2.2 , , , , , .4 2.3 Các thẻ định dạng danh sách .5 2.3.1 Danh sách có trật tự 2.3.2 Danh sách khơng có trật tự 2.3.3 Danh sách định nghĩa 2.4 Các thẻ định dạng ký tự .6 2.4.1 Các thẻ định dạng in ký tự 2.4.2 Các thẻ canh lề 2.4.3 Các thẻ ký tự đặc biệt 2.4.4 Trang trí màu sắc thiết kế website 2.4.5 Thẻ xác định kiểu chữ 2.4.6 Văn siêu liên kết 10 2.4.7 Kết nối mailto 10 2.4.8 Vẽ đường thẳng nằm ngang 11 2.5 Các thẻ chèn âm thanh, hình ảnh .11 2.5.1 Giới thiệu 11 2.5.2 Chèn âm vào Website .13 2.5.3 Chèn hình ảnh, đoạn video vào Website 13 2.6 Các thẻ định dạng bảng biểu 15 2.7 FORM 17 2.7.1 Thẻ FORM .17 2.7.2 Tạo danh sách lựa chọn .19 2.7.3 Tạo hộp soạn thảo văn .20 Chương 2: CSS (Cascading Style Sheets) .20 2.1 Giới thiệu chung 20 2.2 Sử dụng thuộc tính Style 20 2.3 CSS nhúng bên trang Web .20 2.4 Liên kết đến file CSS 21 2.5 Khảo sát file CSS 22 2.5.1 Cấu trúc file CSS 22 2.5.2 Một số thuộc tính 23 2.5.2.1 Các thuộc tính hộp nhập .23 2.5.2.2 Các thuộc tính đường viền 23 2.5.2.3 Thuộc tính Border-width 24 2.5.2.4 Thuộc tính height .24 2.5.2.5 Thuộc tính Margin .24 2.5.2.6 Thuộc tính Padding 24 2.5.2.7 Thuộc tính Width .24 2.5.2.8 Thuộc tính color Background .25 2.5.2.9 Các thuộc tính font .25 2.5.2.10 Các thuộc tính Text 27 Trang 99 2.5.3 Tạo file CSS với công cụ Rapid CSS 2008 (HS nghiên cứu) 28 Chương 3: JavaScript 34 2.1 Giới thiệu chung 34 2.2 Cách thức nhúng JavaScript vào file HTML 34 2.3 Sử dụng thẻ SCRIPT .34 2.4 Sử dụng file nguồn JavaScript 34 2.5 Hiển thị dòng Text Website .35 2.6 Giao tiếp với người sử dụng thông qua hộp thoại 35 2.6.1 Hàm Alert 35 2.6.2 Hàm Prompt .36 2.6.3 Hàm Comfirm 37 2.7 Biến JavaScript 37 2.7.1 Biến phân loại biến 37 2.7.2 Kiểu liệu 37 2.8 Xây dựng biểu thức JavaScript 38 2.8.1 Định nghĩa phân loại biểu thức 38 2.8.2 Các toán tử .38 2.8.2.1 Gán 38 2.8.2.2 So sánh 39 2.8.2.3 Số học 39 2.8.2.4 Chuỗi 39 2.8.2.5 Logic 39 2.8.2.6 Bitwise .39 2.9 Các cấu trúc lệnh JavaScript .40 2.9.1 Lệnh điều kiện if else 40 2.9.2 Câu lệnh lặp 41 2.9.2.1 Lệnh For 41 2.9.2.2 Lệnh While 41 2.9.2.3 Lệnh Break 42 2.9.2.4 Lệnh Continue 42 2.10 Các câu lệnh thao tác đối tượng .43 2.10.1 Lệnh For in 43 2.10.3 New 44 2.10.4 Lệnh With .45 2.11 Hàm JavaScript 46 2.11.1 Hàm người dùng định nghĩa 46 2.11.2 Các hàm có sẵn .47 2.11.2.1 Hàm eval 47 2.11.2.2 Hàm Parseint 48 2.11.2.3 Hàm Parsefloat 49 2.12 Mảng 49 2.13 Sự kiện .51 2.14 Các đối tượng JavaScript 57 2.14.1 Đối tượng Navigator 57 2.14.2 Đối tượng Windows .58 2.14.3 Đối tượng Location 59 2.14.4 Đối tượng Frame 59 2.14.5 Đối tượng Document 60 2.14.6 Đối tượng Form 61 2.14.7 Đối tượng History 74 2.14.8 Đối tượng Math 74 2.14.9 Đối tượng Date .75 2.14.10 Đối tượng String 76 www.dynamicdrive.com 77 Trang 100 Chương 4: Ngôn ngữ kịch ASP 78 4.1 Giới thiệu 78 4.2 ASP file gì? 78 4.3 ASP làm việc nào? 78 4.4 Cài đặt ASP máy tính .79 4.5 Ngôn ngữ kịch VBScript 80 4.5.1 Biến 80 4.5.2 Mảng 81 4.5.2.1 Mảng chiều 81 4.5.2.2 Mảng đa chiều 81 4.5.3 Hằng số .81 4.5.4 Cấu trúc điều khiển lệnh 81 4.5.4.1 Cấu trúc điều kiện IF…THEN…ELSE…IF .81 4.5.4.2 Cấu trúc lựa chọn SELECT CASE…END SELECT 82 4.5.4.3 Cấu trúc lặp FOR…NEXT 82 4.5.4.4 Cấu trúc lặp DO WHILE…LOOP 82 4.5.4.5 Cấu trúc lặp WHILE…WENT 82 4.5.4.6 Cấu trúc lặp DO…LOOP UNTIL… 83 4.5.5 Một số hàm ASP 83 4.5.5.1 Hàm xử lý chuỗi 83 4.5.5.2 Các hàm xử lý số .83 4.5.5.3 Các hàm chuyển đổi kiểu 84 4.5.5.4 Các hàm format 84 4.5.5.5 Các hàm ngày tháng 84 4.5.5.6 Các hàm kiểm tra .85 4.5.5.7 Thủ tục hàm người dùng .85 4.5.6 Sử dụng thẻ #include 87 4.5.7 Các đối tượng xây dựng sẵn ASP 88 4.5.7.1 Đối tượng Request .88 4.5.7.2 Đối tượng Response 89 4.5.7.3 Đối tượng Session .89 4.5.7.4 Đối tượng Application .90 4.5.7.5 File Global.asa 90 4.5.7.6 Đối tượng Dictionary 92 4.5.7.7 Đối tượng Server .92 4.5.8 Database ASP 92 4.5.8.1 SQL-Ngơn ngữ truy vấn có cấu trúc 93 4.5.8.2 Truy xuất liệu từ trang ASP 94 4.5.8.3 ADO gì? 94 4.5.8.4 Đối tượng Connection .94 4.5.8.5 Đối tượng Recordset 95 4.5.8.6 Sử dụng ADO với câu lệnh truy vấn SQL 96 4.5.8.7 Một số tập ứng dụng 97 4.5.9 Xây dựng ứng dụng ASP hoàn chỉnh .97 4.5.9.1 Xây dựng Website quản lý sinh viên 97 4.5.9.2 Xây dựng Website tin tức 98 4.5.9.3 Xây dựng Website trưng cầu ý kiến 98 4.5.9.4 Xây dựng Website thư viện ảnh 98 Trang 101 ... 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 2.5.2 Chèn âm vào Website Cú pháp: