3 Chương HTML XHTML, CSS,JavaScript
3.3.3Chú thích
Cách chú thích trong (X)HTML: <!– Nội dung chú thích .... –>
3.3.4 Cấu trúc một trang HTML - XHTML
Cấu trúc cơ bản của trang HTML/XHTML có dạng như sau, thường gồm 3 phần:
• <!Doctype>: Phần khai báo chuẩn của html hay xhtml.
• <head></head>: Phần khai báo ban đầu, khai báo về meta, title, css, javascript. . .
• <body></body>: Phần chứa nội dung của trang web, nơi hiển thị nội dung. Cấu trúc cơ bản của trang web
Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout.
• Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,...
• Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation).
• Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar). Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem.
• Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo,...
• Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ,... và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,...
3.3.5 Một số thẻ hay dùng
Các thẻ khối (block-level) thường dùng Là các thẻ hiển thị trên màn hình dưới dạng một đoạn riêng. Ví dụ: <p>, <h1>, <h2>, ...
• <p> định nghĩa một đoạn (paragraph) trong trang web (ở trước và sau thẻ <div> tự động xuống dòng).
• <h1> đến <h6> dùng để định nghĩa các tiêu đề (<h1> là lớn nhất, <h6> là nhỏ nhất)
• <div> nhóm các tags để tạo một mục hoặc tiểu mục có cùng cách hiển thị (kết hợp CSS, nếu không kết hợp với CSS thì không ảnh hưởng đến cách hiển thị của trang web)
Các thẻ inline thường dùng
• <i> in nghiêng chữ
• <b> in đậm chữ
• <u> gạch chân
• <span> tác dụng tương tự thẻ <div> nhưng chỉ dùng với các thẻ inline Các thẻ dùng để tạo bảng • <table> dùng để tạo bảng. • <tr> dùng để tạo hàng. • <td> dùng để tạo ô. Ví dụ: < tableborder= ”1”> < tr > < td > Row1, Column1< /td > < td > Row1, Column2< /td > < /tr > < tr > < td > Row2, Column1< /td > < td > Row2, Column2< /td > < /tr > < /table >
Một số thẻ để chèn nội dung đa phương tiện
• Thẻ <img> dùng để chèn hình ảnh. Thuộc tính “src” để chỉ ra đường dẫn đến file ảnh, thuộc tính “alt” (alternative) sẽ hiển thị trong trường hợp trình duyệt không hiển thị được ảnh hoặc không được hiển thị ảnh, cũng có thể được dùng trong các chương trình đọc màn hình để hỗ trợ người khuyết tật, các máy tìm kiếm cũng dùng thuộc tính này để lập chỉ mục cho web. Hiện nay nhiều trình duyệt hiển thị thuộc tính này như một chú thích cho ảnh khi di chuột vào. Ví dụ: <img src="example.jpg" alt="Example image" />
3.3.6 Form trong (X)HTML
Form trong (X)HTML cho phép người dùng nhập thông tin để gửi về máy chủ. Form trong (X)HTML được đặt trong thẻ <form>.
< f ormaction = ”actionpage.php”> U sername:
< br >
< inputtype= ”text”name= ”user”> < br >< br > Encryption: < br > < keygenname= ”security”> < br >< br > < inputtype= ”submit”> < /f orm >
Một số thuộc tính của thẻ <form>:
• action: địa chỉ trang web hoặc chương trình ở server xử lý dữ liệu của form. (adsbygoogle = window.adsbygoogle || []).push({});
• method: chỉ ra cách thức dữ liệu được gửi về server: có 2 cách: “get” và “post” Một số công cụ để nhập dữ liệu trong form:
• Với thẻ <input> có thể tạo ra các ô nhập dữ liệu, các nút tùy vào thuộc tính “type”. Một số giá trị của thuộc tính “type”: text Tạo ra textbox. password Tạo ra ô nhập password. checkbox Tạo ra ô chọn có thể chọn nhiều giá trị một lúc. radio Tạo ra ô chọn, chỉ được chọn 1 trong số các ô. submit Tạo ra nút để gửi dữ liệu về server. reset Tạo ra nút để đưa giá trị các ô trong form về trạng thái mặc định.
• Với thẻ <textarea> có thể tạo ra ô cho phép nhập liệu dữ liệu nằm trên nhiều dòng.
• Với thẻ <select> có thể tạo ra danh sách lựa chọn. Thẻ <option> để chỉ ra các lựa chọn. Nếu thẻ <select> không thiết lập thuộc tính “multiple” và “size” thì sẽ có một drop-down box, nếu không sẽ có một danh sách.
Ví dụ
< selectname= ”cars”>
< optionvalue = ”volvo”> V olvo < /option > < optionvalue = ”saab”> Saab < /option > < optionvalue = ”f iat”> F iat < /option > < optionvalue = ”audi”> Audi < /option > < /select >
Hình 3.1: Example
3.4 CSS
3.4.1 CSS là gì?
CSS (cascading style sheet) sử dụng để định dạng trang web (màu, kích thước font chữ; độ rộng, màu của đường; khoảng cách giữa các thành phần trang, ...) Vị trí đặt CSS
• Ở trong trang web: đặt trong thẻ <style> của phần <head> hoặc thuộc tính style của các thẻ có thuộc tính này. Ví dụ: <style type="text/css"> body color:#000000; background-color:#ffffff;
font-family:arial, verdana, sans-serif; h1 font-size:18pt;
p font-size:12pt; </style>
hoặc
< td style="font-family:courier; padding:5px;
border-style:solid; border-width:1px; border-color:#000000" >
• Trong 1 file ở ngoài (thường có phần mở rộng là css), đưa vào trang web bằng cách dùng thẻ <link> trong phần <head> Ví dụ:
<link rel="stylesheet" type="text/css" href="example.css" />
Ví Dụ: <!DOCT Y P Ehtml > < html > < head > < style > body { background−color: #d0e4f e; } h1 {color :orange;
text−align:center;
}
p{f ont−f amily : ”T imesN ewRoman”;
f ont−size: 20px; } < /style > < /head > < body > < h1> M yF irstCSSExample < /h1>
< p > T hisisaparagraph. < /p > < /body >
< /html >
3.4.2 Cấu trúc một quy tắc CSS
Bao gồm hai phần: selector để chỉ ra đối tượng áp dụng khai báo này, declaration để định nghĩa các định dạng.
• Selector: có thể là tên thẻ, class (xác định bằng thuộc tính “class” của thẻ), id (xác định bằng thuộc tính “id” của thẻ), có tính kế thừa.
• Declaration: Gồm 2 phần, có dạng: property:value; – property: chỉ ra thuộc tính. (adsbygoogle = window.adsbygoogle || []).push({});
– value: xác định giá trị thuộc tính Ví dụ: td width:36px; Comment trong CSS: bắt đầu bằng “/* ” kết thúc bằng “*/”.
3.4.3 Một số thuộc tính thường dùng
Về font
Tên Mục Đích Một số giá trị cho phép
font Thiết lập nhiều thuộc tính font cùng ghép các giá trị ở dưới
font-family Xác định họ font serif, sans-serif, monospace
font-size ,Kích thước font Kích thước font 10px, small, smaller Về background:
Tên Mục đích Một số giá trị cho phép
background-color Thiết lập màu nền # cccccc background-image urlbg.gif Thiết lập ảnh nền urlbg.gif
3.5 JavaScript
3.5.1 JavaScript là gì?
JavaScript là một ngôn ngữ kịch bản để cho phép lập trình truy cập các đối tượng trong trang web ở client-side cũng như một số đối tượng của trình duyệt, hỗ trợ tạo trang web
động và một số hiệu ứng đơn giản. JavaScript là ngôn ngữ có kiểu động, hỗ trợ hướng đối tượng (dưới dạng “prototype-based”, không phải “class-based” như java, C++). Vị trí đặt mã JavaScript Dùng thẻ <script>, mã có thể đặt hay trong phần <head> hoặc dùng thuộc tính “src” của thẻ script để chỉ ra file chứa mã. Ví Dụ:
<!DOCT Y P Ehtml > < html >
< body >
< h1> M yF irstJ avaScript < /h1> < buttontype= ”button”
onclick = ”document.getElementById(0demo0).innerHT M L=Date()” > ClickmetodisplayDateandT ime. < /button >
< pid= ”demo”>< /p > < /body >
< /html >