Tất cả các phần tử HTML đều có thể được coi là một hộp. Trong CSS, mơ hình hộp (box model) được sử dụng khi nói về thiết kế và bố cục trang.
Mơ hình hộpvề cơ bản là một hộp bao quanh phần tử HTML. Nó bao gồm: padding, border margin và content.
Hình 4.22. Mơ hình hộp
+ margin: là khoảng trắng nằm phía ngồi border + border : là đường biên bao quanh padding và content + padding : là vùng đệm giữa border và content
+ content : là nơi mà văn bản, hình ảnh nội dung của thành phần HTML xuất hiện.
Các thuộc tính định dạng mơ hình hộp bao gồm: width, height, border, margin, padding, float, clear, overflow, position, left, right, top, bottom, z- index, display.
Thuộc tính border: quy định đường viền cho hộp
Thuộc tính margin: quy định lề cho hộp
Thuộc tính padding: thêm vào vùng đệm cho hộp Thuộc tính height: quy định chiều cao của hộp
Thuộc tính width: quy định chiều rộng của hộp
Thuộc tính float: quy định vị trí cố định hộp
Dùng xác định vị trí hộp. Thuộc tính position thường dùng kèm với các thuộc tính định vị trí: left, right, bottom, top
- Cú pháp:
{ position: giá trị; }
Các giá trị:
+ Absolute: Một phần tử có vị trí absolute sẽ được định vị tương đối so với phần tử bao (phần tử cha) nó (phần tử cha phải khai báo relative), nếu khơng có phần tử bao này sẽ định vị tương đối so với body. Thiết lập các thuộc tính top, left, right, bottom để xác định vị trí của phần tử. + relative: Một phần tử có vị trí relative sẽ được định vị tương đối so với
vị trí bình thường của chính nó. Thiết lập các thuộc tính top, left, right, bottom để thay đổi vị trí của phần tử.
+ fixed: Một phần tử có vị trí fixed sẽ được định vị tương đối so với cửa sổ trình duyệt. Thiết lập các thuộc tính top, left, right, bottom để xác định vị trí của phần tử.
Thuộc tính left: dùng để định vị trí bên trái (left) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép trái ngồi cùng của thành phần bao ngồi.
Thuộc tính top: dùng để định vị trí bên trên (top) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép trên ngồi cùng của thành phần bao ngồi.
Thuộc tính right: dùng để định vị trí bên phải (riht) cho thành phần khi sử
dụng thuộc tính position, với khoảng cách được tính từ mép phải ngoài cùng của thành phần bao ngoài.
Thuộc tính bottom: dùng để định vị trí bên dưới (bottom) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép dưới ngồi cùng của thành phần bao ngồi.
Thuộc tính overflow:
Dùng quy định cách hiển thị nội dung của một thành phần HTML - Cú pháp:
{ overflow: giá trị; }
Các giá trị:
+ visible: giá trị mặc định, khi nội dung chứa bên trong vượt quá kích thước của thành phần thì vẫn được hiển thị tràn ra khỏi thành phần đó.
+ hidden: khi chiều cao của thành phần khơng đủ chứa nội dung, thì nội dung bị tràn sẽ được dấu đi.
+ auto: tự động hiện thanh cuộn khi nội dung chứa bên trong vượt quá kích thước của thành phần.
+ scroll: hiện thanh cuộn ngang và thanh cuộn đứng.
Hình 4.23. Ví dụ minh họa các giá trị thuộc tính overflow
Thuộc tính z-index:
Dùng được dùng để xếp chồng các phần tử trên cửa sổ trình duyệt - Cú pháp:
{ z-index: giá trị; }
Giá trị của thuộc tính z-index quyết định thứ tự xếp chồng. Giá trị càng lớn, thứ tự sắp xếp càng cao
Hình 4.24. Thứ tự xếp chồng các phần tử
Thuộc tính display:
Được dùng xác định cách hiển thị của thành phần - Cú pháp:
{ display: giá trị; }
Giá trị:
+ block: phần hiển thị như một khối, khi sử dụng giá trị block thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó. + inline: giá trị mặc định. Thành phần sẽ hiển thị trên cùng dòng + inline-block: kết hợp giữa inline và block
+ flex: hiển thị một thành phần dưới dạng vùng chứa linh hoạt + inline-flex: kết hợp giữa inline và flex
Bố cục sử dụng flex bao gồm 2 phần: flex-container và các flex- items. Các thuộc tính đi kèm với flex-container:
• flex-direction: row | row-reverse | column | column-reverse; định hướng các flex-items theo hàng| đảo ngược hàng | cột | đảo ngược cột
• flex-wrap: nowrap | wrap ;
cho phép flex-item tự động xuống dịng khi kích thước flex- container thay đổi. (mặc định nowrap)
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
điều chỉnh vị trí bắt đầu và căn chỉnh các flex-item bên trong flex-container (tùy thuộc vào flex-direction).
• flex-flow: flex-direction | flex-wrap
Hình 4.25. Ví dụ minh họa thuộc tính display
Thuộc tính box-sizing:
Dùng xác định cách tính chiều rộng và chiều cao của một phần tử. - Cú pháp:
{ box-sizing: giá trị; }
Giá trị:
content-box: thuộc tính chiều rộng và chiều cao chỉ bao gồm nội dung, không bao gồm đường viền và phần đệm.
border-box: thuộc tính chiều rộng và chiều cao bao gồm nội dung, phần đệm và đường viền.
Ví dụ 33: mơ hình hộp dùng thuộc tính float - Code CSS:
- Code HTML:
Hiển thị trên trình duyệt:
Ví dụ 34: mơ hình hộp dùng thuộc tính position - Code CSS:
- Code HTML:
Hình 4.28. Kết quả ví dụ 34
4.7. TẠO THANH ĐIỀU HƢỚNG CHO TRANG WEB
4.7.1. Pseudo-classes cho liên kết
Pseudo-Classes for Link cho phép xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định.
Pseudo-classes bắt đầu với dấu hai chấm (:) - Cú pháp:
a:pseudo-classes { thuộc tính: giá trị; }
Định dạng liên kết khi chƣa ghé thăm
- Cú pháp:
a:link { thuộc tính: giá trị; }
Định dạng liên kết khi đã ghé thăm
- Cú pháp:
a:visited { thuộc tính: giá trị; }
Định dạng liên kết khi đƣa chuột trên liên kết
- Cú pháp:
a:hover { thuộc tính: giá trị; }
Định dạng liên kết khi liên kết đang đƣợc kích hoạt
- Cú pháp:
a:active { thuộc tính: giá trị; }
* Lưu ý: Khi ta định dạng cho liên kết theo trạng thái, các trạng thái phải
Ví dụ 35: Thiết lập các trạng thái liên kết:
- Liên kết chưa thăm: chữ màu vàng, nền màu xanh lá, khơng có gạch chân, đường viền màu xanh nhạt, kiểu outset, dày 5px.
- Liên kết có chuột đi qua: chữ màu đỏ đậm, chữ to hơn (1.2em), nền màu vàng (gold), khơng có gạch chân, đường viền màu xanh nhạt, kiểu outset, dày 5px.
- Liên kết đã thăm: chữ màu trắng, nền màu xanh lá, khơng có gạch chân, đường viền màu xanh nhạt, kiểu outset, dày 5px.
- Liên kết đang kích hoạt: chữ màu đỏ, nền màu xanh vàng (yellowgreen), khơng có gạch chân, đường viền màu xanh nhạt, kiểu outset, dày 5px. - Code CSS:
4.7.2. Tạo thanh điềuhƣớng dọc
Có nhiều cách để tạo thanh điều hướng, cách phổ biến nhất là tạo thanh điều hướng bằng danh sách sử dụng các thẻ <ul> và <li>.
Ví dụ 36: - Code CSS:
Hiển thị trên trình duyệt:
Hình 4.29. Kết quả ví dụ 36
4.7.3. Tạo thanh điều hƣớng ngang
Tương tự như taọ thanh điều hướng dọc, nhưng thanh điều hướng ngang sử dụng thuộc tính display: inline để hiển thị các phần tử <li> trên cùng một dịng. Ví dụ 37:
- Code HTML:
Hiển thị trên trình duyệt:
Hình 4.30. Kết quả ví dụ 37
Tương tự như trên nhưng sử dụng thuộc tính display: flex để taọ thanh điều hướng dọc hoặc thanh điều hướng ngang.
Ví dụ 38: - Code CSS:
- Hiển thị trên trình duyệt:
Hình 4.31. Kết quả ví dụ 38
4.8. ĐỊNH DẠNG BẢNG BIỂU BẰNG CSS
Các thuộc tính định dạng bảng bao gồm: width, height, border, border- collapse, margin, padding, text-align, vertical-align, background-color.
Thuộc tính height: quy định chiều cao của ơ, dịng, bảng
Thuộc tính width: quy định chiều rộng của ơ, dịng, bảng
Thuộc tính border: quy định đường viền cho bảng
Thuộc tính margin: quy định lề cho bảng
Thuộc tính padding: quy định vùng đệm giữa đường viền và nội dung trong
Thuộc tính background-color: thiết lập màu nền cho bảng
Thuộc tính text-align: canh chỉnh nội dung trong bảng theo chiều ngang. Thuộc tính vertical-align: canh chỉnh nội dung trong bảng theo chiều đứng.
- Cú pháp:
{ vertical-align: giá trị;}
Các giá trị:
+ top: nội dung nằm ở trên + bottom: nội dung nằm ở dưới + middle nội dung nằm ở giữa Thuộc tính border-collapse:
Dùng xác định kết hợp hoặc tách riêng đường viền của bảng. - Cú pháp: { border-collapse: giá trị;}
Các giá trị:
+ collapse: kết hợp đường viền (loại bỏ khoảng trống giữa các đường viền)
+ separate: phân tách đường viền Ví dụ 39:
- Code HTML:
- Hiển thị trên trình duyệt:
Hình 4.32. Kết quả ví dụ 39 4.9. ĐỊNH DẠNG BIỂU MẪU BẰNG CSS
Các thuộc tính định dạng biểu mẫu (form) bao gồm: width, height, border, margin, padding, text-align, vertical-align, background-color.
Thuộc tính height: quy định chiều cao của phần tử form Thuộc tính width: quy định chiều rộng của phần tử form Thuộc tính border: quy định đường viền cho phần tử form
Thuộc tính padding: quy định vùng đệm giữa đường viền và nội dung trong phần tử form
Thuộc tính background-color: thiết lập màu nền cho phần tử form Ví dụ 40:
- Code CSS:
- Code HTML:
4.10. BÀI TẬP ÁP DỤNG
Thiết kế trang web có nội dung và định dạng như mẫu.
BÀI 5 - NGÔN NGỮ JAVASCRIPT Giới thiệu:
Trong bài học này sẽ cung cấp cho người học các kiến thức cơ bản về ngôn ngữ lập trình kịch bản JavaScript như: cách thức viết một đoạn mã JavaScript để tạo ra tương tác giữa trang web với người dùng, cách xử lý các sự kiện trên form.
Mục tiêu:
- Trình bày được các đối tượng cơ bản trong JavaScript - Nhúng được đoạn mã JavaScript vào trang web.
- Tạo được tương tác cơ bản với trang web bằng JavaScript
- Sử dụng được JavaScript để viết kịch bản đơn giản cho trang web.
5.1. GIỚI THIỆU VỀ JAVASCRIPT
JavaScript là một ngơn ngữ lập trình kịch bản phía máy khách, mã lệnh được thực thi bởi trình duyệt của người dùng.
JavaScript được sử dụng rộng rãi trong việc kết hợp với HTML/CSS để thiết kế web động.
JavaScript có thể tăng cường tính động và tính tương tác của các trang web.
Cung cấp sự tương tác người dùng Thay đổi nội dung động
Xác nhận tính hợp lệ của dữ liệu
5.2. NHÚNG JAVASCRIPT VÀO TRANG WEB
JavaScript được viết dưới dạng câu lệnh, các câu lệnh này được đặt bên trong cặp thẻ <script></script>
Có hai cách để nhúng mã lệnh JavaScript vào trang web: Cách 1: Đặt mã lệnh JavaScript trực tiếp vào trang web Cách 2: Đặt mã lệnh JavaScript bên trong một tập tin .js
5.2.1. Đặt mã lệnh JavaScript trực tiếp vào trang web
Mã lệnh JavaScript được đặt bên trong cặp thẻ <head></head> hoặc cặp thẻ <body></body> của trang web.
Trong một trang web có thể sử dụng nhiều đoạn mã lệnh <script>.
* Lưu ý: - Các đoạnmã lệnh <script> có thể được đặt ở bất kỳ nơi nào trong trang web. Tuy nhiên nên đặt chúng ở vị trí cuối cùng trong phần tử <body> . Điều đó giúp cải thiện tốc độ tải giao diện của trang web và tránh một số trường hợp xảy ra lỗi thực thingồi mong đợi.
Ví dụ 1: viết mã lệnh JavaScript xuất dịng Hello World! ở cửa sổ trình duyệt
<!DOCTYPE html> <head> <script > // mã lệnh JavaScript </script> <head> Hoặc <body> <script > // mã lệnh JavaScript </script> <body>
5.2.2. Đặt mã lệnh JavaScript bên trong một tập tin .js
Mã lệnh JavaScript được viết trong một tập tin có phần mở rộng là .js và được liên kết với trang web bằng thẻ <script> với cú pháp:
* Lưu ý: không đặt mã lệnh JavaScript bên trong cặp thẻ <script></script> trong tập tin .js
Ví dụ 2: viết mã lệnh JavaScript trong tập tin vd1.js để xuất dịng Hello World! ở cửa sổ trình duyệt.
Nội dung tập tin vd1.js:
document.write("Hello World!");
Nội dung tập tin vidu1.html:
<!DOCTYPE html>
5.3. TẠO TƢƠNG TÁC CƠ BẢN VỚI TRANG WEB 5.3.1. Hiển thị dữ liệu ra màn hình trong JavaScript
JavaScript khơng hỗ trợ hiển thị dữ liệu trực tiếp dữ liệu ra màn hình mà phải thơng qua một phương thức nào đó.
Các cách hiển thị dữ liệu thường dùng trong JavaScript: Sử dụng alert()
Sử dụng document.write() Sử dụng innerHTML Sử dụng alert( )
Câu lệnh alert() dùng để hiển thị nội dung bên trong một hộp thông báo.
<script src=“đường dẫn đến tập tin JavaScript” >
// mã lệnh JavaScript
- Cú pháp:
alert(nội dung muốnhiển thị);
- Ví dụ 3: Mã lệnh hiển thị dịng chữ “Hello World” trong hộp thông báo Mã lệnh JavaScript:
Hiển thị trên trình duyệt:
Hình 5.1. Kết quả ví dụ 3
Sử dụng Confirm()
Hộp thoại Confirm dùng để người dùng xác nhận. Khi hộp thoại hiển thị nếu người dùng nhấn vào OK thì trả về true, nhấn vào Cancel sẽ trả về false
- Cú pháp:
confirm(nội dung muốn hiển thị);
- Ví dụ 4: Mã lệnh hiển thị hộp thông báo “Bạn có muốn rời trang?”, nếu người dùng nhấn vào OK thì hiện hộp thông báo “Cám ơn đã truy cập!”, nếu người dùng nhấn vào Cancel thì hiện hộp thơng báo “Cảm ơn đã ở lại!”
Sử dụng Prompt()
Hộp thoại Prompt() dùng để người dùng nhập giá trị. Khi hộp thoại hiển thị, người dùng gõ dữ liệu yêu cầu sau đó nhấn nút OK hoặc Cancel để thi hành tiếp.
Nếu nhấn OK trả về giá trị nhập vào, nếu Cancel trả về giá trị null - Cú pháp:
confirm(nội dung thông báo,giá trị mặc định);
- Ví dụ 5: Mã lệnh hiển thị hộp thông báo “Nhập tên của bạn”, người dùng nhập tên và nhấn OK thì hiện hộp thơng báo hiển thị tên vừa nhập.
Sử dụng document.write()
document.write() dùng hiển thị dịng nội dung ra màn hình. - Cú pháp:
document.write(nội dung muốn hiển thị);
- Ví dụ 6: Mã lệnh hiển thị dòng chữ “Hello World” ra màn hình Mã lệnh JavaScript:
* Lưu ý: Nếu thực thi câu lệnh document.write() sau khi trang web đã được
download xong thì tồn bộ nội dung của trang web sẽ bị thay thế mới nội dung của câu lệnh document.write().
Sử dụng innerHTML
Câu lệnh innerHTML dùng thay thế nội dung của một phần tử HTML bằngnội dung mới.
- Cú pháp:
document.getElementById(“id”).innerHTML = “nội dung hiển thị”;
Trong đó:
document.getElementById(“id”): xác định phần tử HTML dựa vào tên id của nó.
innerHTML = “nội dung hiển thị”: dùng thay thế nội dung của phần tử HTML đó thành nội dung mới muốn hiển thị.
- Ví dụ 7: thay thế nội dung của phần tử HTML có id là demo thành "Hello World!"
Hiển thị trên trình duyệt:
Hình 5.2. Kết quả ví dụ 7
* Lưu ý: Nếu phần tử được chọn đã cónội dung thì sau khi dùng innerHTML các nội dung của phần tử đó sẽ bị thay thế bởi nội dung mới.
5.3.2. Sử dụng biến, kiểu dữ liệu, biểu thức, toán tử trong JavaScript
Kiểu dữ liệu
Kiểu dữ liệu của một ngôn ngữ xác định những thành phần cơ bản có thể được sử dụng trong ngơn ngữ đó.
Các kiểu dữ liệu trong JavaScript: kiểu số (số nguyên, số thực), kiểu chuỗi, kiểu logic (true/false), kiểu null, kiểu undefined (không xác định), kiểu đối tượng.
JavaScript không quy định kiểu biến khi khai báo biến, kiểu của biến sẽ được tự động xác định khi gán dữ liệu cho biến.