Dùng để định dạng đoạn văn Cặp thẻ tự động tạo khoảng cách đoạn trƣớc sau Cấu trúc:
Đoạn văn
Ví dụ 2.2: Soạn thảo code thử Tryit Editor 1.9 ta thấy kết trực quan Code HTML Kết b Thẻ Thẻ dùng ta muốn hiển thị văn trình duyệt theo định dạng y hệt chúng dược đá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: Đoạn văn định dạng Ví dụ 2.3: 2.4.2 Các thẻ định dạng văn bản(text) Dưới thẻ sử dụng để định dạng chữ : nghiêng, đậm, gạch chân thể trình duyệt: Định dạng chữ đậm Định dạng chữ nghiêng Định dạng chữ gạch chân Định dạng chữ 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) Đị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 Chọn kiểu chữ hiển thị Trong thẻ đặt hai tham số size= color= Hai tham số 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ụ 2.4: 2.4.3 Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 Gồm mức từ H1 H6, có cỡ chữ giảm dần từ H1 đến H6 Cú pháp: … Ví dụ 2.5: 2.4.4 Thẻ xuống dòng Muốn xuống dòng ta phải dùng thẻ Thẻ không thiết có thẻ kết thúc tương ứng Nó có tác dụng chuyển sang dòng b Một số đặc điểm định dạng ảnh GIF, JPEG PNG Gif JPEG hai định dạng dùng phổ biến Dưới giới thiệu đặc điểm loại Định dạng Gif Định dạng phổ biến mạng Internet Bởi nén hình với màu giống tốt, định dạng hỗ trợ hiệu ứng động cho phép trình duyệt hiển thị mạng (trừ bạn sử dụng Flash định dạng hình động vector khác) Gif hỗ trợ hiệu ứng suốt Định dạng Gif hỗ trợ tối đa 256 màu, đủ để sử dụng cho hình mang tính đồ hoạ Nó không đủ màu để thể hình ảnh đầy màu sắc hình chụp Nếu ta muốn giảm dung lượng file Gif, ta làm cách giảm số màu Color Palette Định dạng sử dụng chế độ nén hình LZW tự động làm cho có dung lượng nhỏ mà không làm ảnh hưởng đến liệu Với đặc điểm trên, nên định dạng gif thường sử dụng cho hình logo, icons Tránh sử dụng gif cho hình chụp tự nhiên hình đồ hoạ có khối màu tông liên tiếp Định dạng JPEG: Định dạng JPEG hỗ trợ 16.7 triệu màu, dùng chủ yếu cho hình chụp tự nhiên Thuật toán nén hình JPEG khác với định dạng Gif, thực chất làm liệu hình Ví dụ ta lưu lại hình, tuỳ thuộc vào việc thiết lập thông số sao, liệu bị không thấy mắt thường Cho nên ta giảm chất lượng hình thì, liệu bị lấy lại Khi nên sử dụng JPEG Định dạng sử dụng với hình chụp tự nhiên hình nhìn không đẹp hiển thị chế độ 256 màu Định dạng PNG Đây định dạng hỗ trợ rộng rãi định dạng nói đến Định dạng cấu tạo để khắc phục điểm hạn chế Gif PNG có tất tính mà định dạng Gif có, có độ sâu màu sắc Người ta hy vọng địnhdạng PNG sử dụng rộng rãi tương lai Tuy nhiên không thay hoàn toàn gif không hỗ trợ hiệu ứng động Lƣu ý: Để đóng góp phần quan trọng vào việc tối ưu hóa công cụ tìm kiếm tên file hình ảnh video nên đặt có nghĩa phù hợp với hình 2.9 CHÈN BẢNG Bảng có cấu trúc bảng tính Một bảng HTML gồm nhiều cột nhiều hàng Mỗi ô bảng chứa văn bản(tĩnh động) thành phần khác HTML kể siêu liên kết hình ảnh 2.9.1 Các thành phần để tạo bảng: Trước hết, HTML, để tạo bảng, cần cặp thẻ thành phần sau đây: Tag dùng để tạo bảng HTML Một tag đơn giản có chứa nhiều , , đó: xác định hàng table xác định phần tử tiêu đề table xác định phần tử nội dung table 2.9.2 Cú pháp tạo bảng Tiêu đề cho bảng Tiêu đề cột 1Tiêu đề cột 2 Dữ liệu ô Dữ liệu ô Lưu ý: Tiêu đề cột nằm trình duyệt hiển thị khác biệt với liệu ô nằm tag Nếu coi ô hàng tiêu đề ô liệu không cần dùng đến a Các thuộc tính định dạng thẻ bảng: ALIGN =Left/Center/Right : Đặt bảng bên trái/chính giữa/bên phải cửa sổ trang web bgcolor= giá trị màu: Màu bảng WIDTH=n%/(hoặc npx nin) : Định độ rộng bảng tính theo tỷ lệ phần trăm cửa sổ trang (width=50%) tính theo pixel (width=100px) tính theo inch (width=3.5in) BORDER=số pixel: Định độ rộng đường viền theo pixel (mặc định pixel) CELLSPACING=số pixel: Định khoảng cách vách bảng CELLPADDING=số pixel: Định khoảng liệu với vách ô b Các thuộc tính định dạng hàng bảng: Là thuộc tính đặt thẻ (): align=Left/Right/Center: lề liệu hàng bgcolor= giá trị màu: màu hàng valign= top/middle/bottom: Căn lề liệu hàng theo chiều đứng c Các thuộc tính định dạng ô: Là thuộc tính đặt thẻ (): align= Left/Right/Center: lề liệu ô bgcolor= giá trị màu: màu ô valign= top/middle/bottom: Căn lề liệu ô theo chiều đứng colspan= Nối ô liền hàng rowspan= Nối ô liền cột Ví dụ: Tạo bảng đơn giản gồm cột Họ tên, Địa chỉ, tuổi 2.9.7.Nhóm ô với Để nhóm hai số ô gần đường viền chung đặt tag thuộc tính sau: Thuộc tính COLSPAN =số ô: Nhóm ô cột khác hàng Thuộc tính ROWSPAN=số ô: Nhóm ô hàng khác cột Ví dụ: Tạo bảng lề giữa, chiếm 70% hình, dòng tiêu đề màu tím Tiêu đề bảng BẢNG ĐIỂM HỌC KỲ 2- 2012-2013 2.10 Layout: Là mô hình hay gọi khung trang web Vì vậy, việc thiết kế layout quan trọng trình thiết kế website Có nhiều mô hình thiết kế website, giới thiệu số mô hình phổ biến: Để tạo mô người ta dùng thẻ 2.9.1 Dùng thẻ table để tạo layout Cách đơn giản để tạo layout sử dụng thẻ Tuy nhiên, cách sử dụng muốn tạo layout đẹp người ta thường sử dụng thẻ Ví dụ: Sử dụng bảng với dòng cột để tạo layout 2.9.2 Dùng thẻ div để tạo layout Div thẻ quan trọng thiết kế giao diện Xây dựng layout thẻ DIV phương pháp phổ biến thiết kế web thay cho phương pháp sử dụng thẻ TABLE Chi tiết phần giới thiệu chi tiết chương a Nguyên tắc dựng layout: Dựng layout cách phân vùng giao diện thành khối DIV theo chiều từ xuống dưới, từ trái qua phải b Cách điều khiển vị trí phần tử DIV Giả thiết ta có DIV divA divB, chứa lòng divMain Muốn divA bám dính vào cạnh trái divMain, divB bám dính cạnh phải divMain ta sử dụng thuộc tính float của< style> Đặt style cho divA, divB sau: #divA{ float: left; } #divB{ float: right; } Muốn chỉnh vị trí divA dịch vào sâu lòng divMain với khoảng đo xác, sử dụng margin- left, margin-top Ví dụ: làm cho divA cách top divMain 10px, cách left divMain 10px, ta viết sau: #divA{ float: left; margin- left:10px; margin-top:10px; } Đẩy divB nằm xuống phía divA dùng thuộc tính clear #divA{ float:left; } #divB{ clear:both; } Thuộc tính clear:both làm cho DIV B không chấp nhận khối DIV "chẹn" hai đầu trái phải nó, tụt xuống DIV A để không bị DIV A "chẹn" đầu trái Khi hiển thị divA divB nằm cạnh theo chiều ngang bên divMain hình phải đảm bảo: Độ rộng (DIV A) + Độ rộng (DIV B) Thẻ bao gồm thuộc tính sau: THUỘC TÍNH Name Action Method MÔ TẢ Đặt tên cho Form Thuộc tính xác định trang Script xử lý liệu nhập vào từ Form Thuộc tính xác định phương thức liệu gửi đến máy chủ Nó xác định giao thức sử dụng máy khách gửi liệu lên cho máy chủ Nếu giá trị GET trình duyệt tạo câu hỏi có chứa địa URL trang, dấu chấm hỏi giá trị Form tạo Trình duyệt trả lại câu hỏi cho kịch xác định URL để xử lý Nếu giá trị POST, liệu form gửi đến kịch xử lý khối liệu, không thấy URL Vì vậy, GET thường dùng trang cho người dùng xem liệu truy vấn cách "tường minh", Form có liệu dài vượt 1024 kí tự VD:http://yourdomain/music.aspx?category=3&page=2 Trang thường dùng liệt kê danh sách nhạc loại liệt kê trang (nếu có nhiều trang) POST thường dùng với form chứa liệu "nhạy cảm" (như password chẳng hạn, chẳng dùng index.php?username=abc&password=xyz) form field có nhiều ký tự (post chẳng hạn) 2.10.2 Các thành phần Form a Thẻ Thẻ xác định loại diện mạo điều khiển hiển thị Form Các thuộc tính thẻ là: Cú pháp: Giải thích: THUỘC TÍNH Ý NGHĨA Align Căn lề cho hộp điều khiển Type Thuộc tính xác định loại điều khiển Có thể nhận giá trị sau: TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, HIDDEN BUTTON Mặc định TEXT Name Thuộc tính tên điều khiển Phạm vi họat động thuộc tính name nằm thẻ Value Đây thuộc tính tùy chọn, xác định giá trị khởi tạo điều khiển Size Thuộc tính xác định độ rộng ban đầu điều khiển Maxlength Thuộc tính sử dụng để xác định số ký tự lớn nhập vào phần tử TEXT PASSWORD Mặc định không giới hạn Checked Đây thuộc tính logic để xác định nút có chọn hay không Thuộc tính sử dụng loại điều khiển RADIO hay CHECKBOX Bảng 5.2: Các thuộc tính thẻ Dưới trình bày sơ loại điều khiển thuộc tính Type thẻ INPUT: Điều khiển Text: Loại tạo điều khiển nhập văn có dòng Cú pháp: Hộp văn dạng Password Điều khiển giống điều khiển hộp văn không hiển thị ký tự người dùng nhập vào, thay vào hiển thị ký tự dấu “*” Điều khiển thường dùng cho mục đích nhập mật người dùng Cú pháp: Lưu Việc hiển thị kí tự dấu * để thay có tác dụng che giấu với người nhìn máy cục Password gửi vào mạng dạng rõ, không mã hoá Checkbox (hộp kiểm) Checkbox nút hình vuông dùng để thể danh sách cho phép chọn nhiều tùy chọn Cú pháp: Radio Đây nút hình tròn, chọn có dấu chấm tròn màu đen vòng tròn nút Nút Radio dùng để hiển thị danh sách chọn lựa.Trong nhóm có nút chọn tất nút có tên Khi nút chọn nút chọn trước tự động xóa Cú pháp: Nút bấm (Button) Được dùng để tính toán hay sử dụng số phương thức Client Script Cú pháp: Nút Submit Dùng để chuyển liệu (giá trị thành phần điều khiển Form) Web Server Cú pháp: Nút Reset Được dùng để thiết lập giá trị điều khiển giá trị ban đầu Cú pháp: b Vùng văn (TextArea) Thẻ tạo điều khiển dùng để nhập nhiều dòng văn Khi dùng ta cần phải xác định kích thước textarea (xác định số dòng-rows, số cột- cols textarea) Thẻ kết thúc thẻ đóng Cú pháp: Nội dung vùng văn Ví dụ : Tạo hộp văn có tên “ghichu”, số dòng hiển thị số cột hiển thị 20 sau: Đoạn mã: c Thành phần lựa chọn (Select) Phần tử Select sử dụng để hiển thị danh sách lựa chọn cho người dùng Mỗi lựa chọn biểu diễn phần tử Option Một phần tử Select phải chứa phần tử Option Mỗi lựa chọn hộp chọn lấy giá trị thông qua mô tả văn xem có chọn hay không Cú pháp: Tên xuất danh sách chọn … Sử dụng thuộc tính multiple muốn cho người dùng chọn nhiều tùy chọn Nếu muốn phần tử chọn mặc định danh sách, ta khai báo thêm thuộc tính selected thẻ Trường hợp danh sách combo box ta khai báo sau: Tên xuất danh sách chọn … Trường hợp danh sách listbox ta khai báo sau: 1” > Tên xuất danh sách chọn … Ví dụ: Hãy tạo Form có cấu trúc sau: Dƣới code HTML giao diện trên: Ví dụ tạo Form