TỔNG QUAN VỀ HTML 5 & CSS3
Phạm vi sử dụng
HTML5 được sử dụng để xây dựng các ứng dụng chạy trên PC , thiết bị di động (Smartphone , tablet,…)
Tổng quan cú pháp của HTML5
❖ Cấu trúc chuẩn của một site HTML5
❖ Ngôn ngữ HTML5 giới thiệu một số thẻ/ thành phần mới giúp cấu trúc trang web logic, thiết thực hơn
3.Các thành phần / thẻ mới của HTML5
Thẻ là thẻ chứa phần HEADER của văn bản
Thẻ thường dùng để chứa phần giới thiệu nội dung
Bạn có thể có nhiều thẻ trong một tài liệu web
logo, hình ảnh đại diện
Thẻ định nghĩa khu vực thiết lập menu điều hướng
Thẻ bao gồm tập hợp các link điều hướng.tuy nhiên không nhất thiết tất cả các điều hướng phải nằm trong thẻ
Thẻ định nghĩa các khối (block) của trang WEB
tuyen sinh truong co dien ha noi
Thẻ là thành phần thường chứa nội dung một bài viết , tin tức …
Có thể lồng thẻ vào trong thẻ
Thẻ là lựa chọn tối ưu để chứa nội dung được đăng tải trong những ngữ cảnh khác nhau
Thẻ có thể chứa các thẻ ,,
trường cao đẳng cơ điện hà nội
Thẻ sử dụng cho vùng sidebar của website
Sử dụng cho một vùng nội dung liên quan bên trong THẺ
Thẻ chỉ rõ footer của trang WEB hoặc của một khối section
Thẻ chuẩn chứa thông tin về tác giả, bản quyền, link liên kết điều khoản sử dụng, thông tin liên hệ, vv
Bạn có thể có nhiều trong một trang web
Thẻ và trong HTML5 cho phép nhóm hình ảnh và tiêu đề lại với nhau, giúp tạo ra chú thích rõ ràng cho hình ảnh, tương tự như cách mà các trang báo và sách thường sử dụng.
ảnh tuyển sinh
Thẻ cho phép nhúng video vào trang web mà không cần dùng plugin của trình duyệt
Thẻ cho phép nhúng file âm vào thanh vào trang web mà không cần dùng plugin của trình duyệt
và cho phép bạn nhúng flash vào trang web
Thiết kế form cơ bản
HTML5 cung cấp nhiều điều khiển trong form hơn , dễ dàng hơn cho nhà thiết kế và phát triển
▪ i Thẻ input ii Thẻ textarea
▪ Các thuộc tính thường được sử dụng
• @rows: số hàng nhìn thấy, nhiều hơn phải cuộn
• @cols: số cột, mỗi cột có độ rộng bằng ký tự rộng nhất (M hoặc W) iii Thẻ select
Một số thành phần CSS3 mới
✓ Thuộc tính border-radius CSS3 (Bo Góc )
✓ Thuộc tính box-shadow CSS3 ( Bóng )
✓ Tạo ra gradient với hai kiểu linear và radial (
✓ CSS Transition (CSS chuyển đổi)
✓ CSS Animation (CSS chuyển động)
GIỚI THIỆU RESPONSIVE
Khái niệm về Responsive Web Design
Responsive Web Design utilizes HTML and CSS to automatically adjust the display of web content, ensuring an aesthetically pleasing experience across all devices, including desktops, tablets, and smartphones.
Thiết kế web đáp ứng (Responsive Web Design - RWD) là xu hướng hiện đại cho phép website tự động điều chỉnh theo kích thước và chiều của màn hình thiết bị người dùng Bằng cách kết hợp linh hoạt các kỹ thuật như lưới linh hoạt, hình ảnh phản hồi và truy vấn media CSS, trang web có thể chuyển đổi mượt mà khi người dùng di chuyển giữa các thiết bị như laptop, iPad hay iPhone Điều này không chỉ giúp loại bỏ nhu cầu thiết kế nhiều phiên bản khác nhau mà còn tiết kiệm thời gian và chi phí trong quá trình thiết kế web.
Responsive Web Design là gì? Từ khái niệm tới thực tế
Độ phân giải màn hình
Các thiết bị công nghệ mới liên tục được phát triển với khả năng xử lý đa dạng về kích thước, chức năng và màu sắc Người dùng có sở thích khác nhau, từ việc chọn màn hình nhỏ đến màn hình lớn, cũng như việc sử dụng theo chiều dọc hoặc chiều ngang Sự phổ biến của các thiết bị như iPhone, iPad và điện thoại Android cho thấy nhu cầu linh hoạt trong cách sử dụng Điều này đặt ra thách thức cho các nhà thiết kế trong việc tạo ra sản phẩm đáp ứng được sở thích và nhu cầu của người dùng.
VIEWPORT TRONG THIẾT KẾ RESPONSIVE
Khai báo meta viewport
Để cho trang website của bạn có thể hiển thị được Responsive thì chúng ta Khai báo tên trường meta viewport
thẻ này trong cặp trong mã HTML của website
Thẻ meta viewport là thẻ quan trọng giúp trình duyệt hiển thị đúng kích thước màn hình của thiết bị Bằng cách thiết lập chiều rộng thiết bị (device-width) và cố định tỷ lệ phóng to (initial-scale = 1.0), thẻ này đảm bảo rằng người dùng không thể phóng to hay thu nhỏ theo chiều ngang, mang lại trải nghiệm người dùng nhất quán trên mọi thiết bị.
Các giá trị trong khai báo thẻ meta viewport
− Width : Định dạng chiều rộng của viewport
− Device-width: Chiều rộng cố định của các thiết bị khác nhau
− Height : Thiết lập chiều cao của viewport
− Device-height : Chiều cao cố định của thiết bị
Giá trị "initial-scale" xác định mức phóng to ban đầu của trình duyệt Nếu giá trị được đặt là 1, điều này có nghĩa là không có phóng to, và khi thiết lập giá trị này, người dùng sẽ không thể phóng to trang vì nó đã được cố định.
− Minimum-scale : Mức phóng to tối thiểu của thiết bị với trình duyệt
− Maximum-scale : Mức phóng to tối đa của thiết bị với trình duyệt
− Muser-scalable : Cho phép người dùng có thể phóng to, có hai giá trị là yes và no.
MEDIA QUERIES
Media CSS là gì?
Media CSS là một công nghệ mới trong CSS3, cho phép điều chỉnh kiểu dáng của trang web dựa trên kích thước màn hình Nó hoạt động thông qua các thông số được khai báo bằng cú pháp @media, giúp tối ưu hóa trải nghiệm người dùng trên các thiết bị khác nhau.
Với công cụ này, chúng ta có thể phân đoạn CSS thành nhiều phần khác nhau, tương ứng với kích thước của các loại thiết bị Cú pháp của thuộc tính này được trình bày như sau:
@media not|only mediatype and (media feature) {
Trong đó mediatype gồm các thuộc tính hay sử dụng sau:
● all: Dùng cho mọi thiết bị
● print: Dùng cho máy in
● screen: Dùng cho máy tính và các thiết bị smart phone
Sử dụng @media với các thiết bị di động và máy tính
Phương pháp Desktop First ưu tiên thiết kế giao diện cho màn hình Desktop trước, sau đó sử dụng @media query để điều chỉnh CSS cho các thiết bị có màn hình nhỏ hơn như Laptop, Tablet và Mobile Trong quá trình phát triển, thuộc tính max-width được áp dụng để thay đổi giao diện khi chiều rộng của màn hình nhỏ hơn hoặc bằng các break point đã được xác định Danh sách các thuộc tính @media giúp nhận diện các thiết bị khác nhau, từ đó tối ưu hóa trải nghiệm người dùng trên từng loại màn hình.
PC first là phương pháp thiết kế giao diện web ưu tiên cho màn hình lớn trước, sau đó điều chỉnh cho các màn hình nhỏ hơn Để thực hiện mô hình này, chúng ta sử dụng thuộc tính max-width trong media query để đảm bảo tính linh hoạt và khả năng hiển thị tốt trên nhiều thiết bị.
Dưới đây là các media query điển hình mà ta cần thêm vào dự án
@media screen and (max-width: 1024px){
@media screen and (max-width: 768px){
@media screen and (max-width: 480px){
@media screen and (max-width: 320px){
@media screen and (max-width: 240px){
Phương pháp Mobile First trái ngược với Desktop First, trong đó giao diện web được thiết kế ưu tiên cho thiết bị màn hình nhỏ (Mobile) trước, sau đó mở rộng cho các thiết bị lớn hơn như Tablet, Laptop và Desktop Tương tự như Desktop First, phương pháp này cũng sử dụng @media query trong CSS, nhưng với Mobile First, chúng ta sẽ áp dụng thuộc tính min-width thay vì max-width như trong Desktop First.
Khi chạm đến các break point cụ thể, giao diện sẽ thay đổi nếu độ rộng màn hình lớn hơn hoặc bằng 768px và 1024px Chạy đoạn code này sẽ cho kết quả tương tự như phương pháp đầu tiên, nhưng cách thực hiện lại hoàn toàn ngược lại.
Nói chung với mỗi phương pháp sẽ khác nhau như sau:
@media all and (min-width: 320px) { }
/* For Tablet With Vertical Screen */
@media all and (min-width: 600px) { }
/* For Tablet With Horizontal Screen */
@media all and (min-width: 1024px) { }
@media all and (min-width: 1280px)
● Giao diện thay đổi khi độ rộng màn hình nhỏ hơn hoặc bằng break point
● Giao diện thay đổi khi độ rộng màn hình lớn hơn hoặc bằng break point
CSS GRIDVIEW
Grid-View là gì?
Các trang web sử dụng Grid-View được chia thành nhiều cột, giúp việc thiết kế trở nên dễ dàng hơn và tối ưu hóa khả năng responsive Việc xây dựng một Grid-View chuẩn sẽ hỗ trợ hiệu quả cho quá trình phát triển sau này Hãy xem hình minh họa dưới đây để hiểu rõ hơn về cấu trúc Grid-View.
Sử dụng Grid-View trong thiết kế web mang lại nhiều lợi ích, giúp sắp xếp các phần tử trên trang một cách dễ dàng Hình minh họa dưới đây thể hiện một trang web với cấu trúc bao gồm header, footer, hai sidebar và phần nội dung chính ở giữa, tất cả được phân chia hợp lý dựa trên Grid-View.
Grid-View thường được thiết kế với 12 cột và tổng chiều rộng 100%, cho phép tự động điều chỉnh khi kích thước cửa sổ trình duyệt thay đổi Bạn có thể xem ví dụ để hiểu rõ hơn về tính năng này.
Xây dựng 1 Responsive Grid-View
Trong bài viết này, chúng ta sẽ xây dựng một Grid-View hoàn toàn thủ công để hiểu rõ cơ chế hoạt động của nó mà không phụ thuộc vào các thư viện CSS như Bootstrap hay Foundation Để tạo một Grid-View responsive, trước tiên, hãy đảm bảo rằng tất cả các phần tử HTML có thuộc tính box-sizing được đặt thành border-box Điều này sẽ giúp các thuộc tính padding và border được bao gồm trong tổng chiều rộng và chiều cao của các phần tử Hãy thêm đoạn code sau vào file CSS của bạn.
Để sử dụng grid-view với 12 cột nhằm kiểm soát tốt hơn bố cục trang web, đầu tiên chúng ta cần tính toán tỷ lệ phần trăm cho mỗi cột, cụ thể là 100% chia cho 12, tương đương với 8.33% Sau đó, chúng ta sẽ tạo các class cho từng cột, sử dụng cú pháp class="col-" và tỷ lệ tương ứng cho từng class đó.
.col-12 {width: 100%;} ví dụ: Trang web chia thành một hàng, và hai cột:
Ta sẽ có 1 trang web đơn giản với bố cục như hình dưới đây:
Thiết kế website responsive với menu
Menu là yếu tố quan trọng không thể thiếu trên website Trên màn hình desktop, menu thường được bố trí theo chiều ngang Tuy nhiên, với màn hình tablet hoặc điện thoại, không gian hạn chế khiến việc hiển thị menu theo chiều dọc trở thành giải pháp tối ưu.
Sau đây sẽ là các bước thực hiện thiết kế website responsive với menu:
Bước 1: Code HTML (index.html)
☰
Bước 2: Thêm CSS (responsive.css)
/* chèn màu nền trên thanh topnav */
.topnav { background-color: #333; overflow: hidden;
/* Hiển thị dạng block, căn chỉnh thanh nav */
.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;
/* Sử dụng hiệu ứng hover khi trỏ chuột đổi màu nền */
.topnav a:hover { background-color: #ddd; color: black;
/* Ẩn liên kết sẽ mở và đóng topnav trên màn hình nhỏ */
* Khi màn hình rộng dưới 600 pixel,
* ẩn tất cả các liên kết, ngoại trừ liên kết đầu tiên ("Trang chủ")
* Hiển thị liên kết có chứa nên mở và đóng topnav (.icon)*/
@media screen and (max-width: 600px) {
topnav a:not(:first-child) {display: none;}
topnav a.icon { float: right; display: block;
* Lớp "responsive" được thêm vào topnav bằng JavaScript
(hiển thị các liên kết theo chiều dọc thay vì theo chiều ngang)
@media screen and (max-width: 600px) {
topnav.responsive a.icon { position: absolute; right: 0; top: 0;
topnav.responsive a { float: none; display: block; text-align: left;
.topnav { background-color: #333; overflow: hidden;
- topnav: chính là class ứng với thẻ - chính là thanh menu
- background-color: #333: cài đặt màu nền cho thanh menu Bạn có thể thay đổi tuỳ thích
Thuộc tính overflow trong CSS có các giá trị như visible, hidden, scroll, auto và inherit Khi thiết lập giá trị overflow là hidden, chiều cao của thanh menu sẽ tự động được điều chỉnh theo chiều cao của các phần tử bên trong, cụ thể là các liên kết, mà không cần chỉ định giá trị cho thuộc tính height.
Cấu hình các mục (link) trên thanh menu
.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;
● float: left: để dồn các mục về phía tay trái Cũng có thể dùng float: right để dồn menu về phía tay phải
● display: block: cấu hình các mục của menu là một block chứ không phải chỉ mỗi dòng chữ (link)
● color, text-align, padding, text-decoration, font-size: những phần này đơn giản là để trang trí cho menu
Tạo hiệu ứng khi di chuyển chuột đến các mục của menu
.topnav a:hover { background-color: #ddd; color: black;
● a:hover: dùng để cấu hình cho thẻ khi chuột hover
● Mình thay đổi background-color (màu nền) và color (màu chữ) Ẩn icon (đóng mở menu) khi ở màn hình rộng
Trong đó, display: none: để ẩn class="icon" Ẩn các mục của menu khi màn hình nhỏ
@media screen and (max-width: 600px) {
topnav a:not(:first-child) {display: none;}
topnav a.icon { float: right; display: block;
● Ở bài này, chúng ta thiết kế theo kiểu desktop trước
● Sử dụng @media screen and (max-width: 600px) để cấu hình menu khi độ rộng màn hình tối đa là 600px - nghĩa là màn hình điện thoại
● topnav a:not(:first-child) {display: none;}: tất cả các thẻ đều ẩn đi, trừ thẻ đầu tiên (home)
● float: right: dùng để đưa link với class="icon" sang bên phải màn hình
● display: block: hiển thị link dạng block
Hiển thị menu khi người dùng nhấn vào icon phía bên phải
@media screen and (max-width: 600px) {
topnav.responsive a.icon { position: absolute; right: 0; top: 0;
topnav.responsive a { float: none; display: block; text-align: left;
Chúng ta sử dụng @media screen and (max-width: 600px) để cấu hình menu cho màn hình có độ rộng tối đa 600px, vì việc nhấn vào biểu tượng bên phải chỉ xảy ra trên màn hình nhỏ Khi người dùng nhấn vào biểu tượng, JavaScript sẽ thêm lớp "responsive" cho phần tử "topnav", tạo ra hiệu ứng tương tác Điều này có nghĩa là tính năng này chỉ hoạt động khi người dùng tương tác với biểu tượng trên màn hình nhỏ.
Để cấu trúc menu hiệu quả, chúng ta sử dụng thuộc tính position: relative, giúp các phần tử bên trong có thể áp dụng position: absolute Icon sẽ được đặt ở góc trên bên phải của thanh menu với các thuộc tính position: absolute; top: 0; right: 0 Đối với các mục menu (link), chúng ta thiết lập float: none để tránh việc dồn sang trái, kết hợp với display: block để các mục này chiếm trọn chiều ngang màn hình.
Chữ trên các mục menu để phía bên trái: text-align: left
Giao diện trên máy tính:
Giao diện trên điện thoại:
Hiện tại, khi bạn nhấn vào biểu tượng bên phải thanh menu, không có phản ứng nào xảy ra Tiếp theo, tôi sẽ bổ sung phần xử lý bằng JavaScript để khắc phục tình trạng này.
Bước 3: Xử lý Javascript (responsive.js) function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive";
Trong phần HTML chúng ta đã xét:
☰}
Nghĩa là class="icon" sẽ thực hiện hành động trong hàm myFunction() khi nó được click Trước tiên, lấy phần tử với id là "myTopnav" dùng document.getElementById("myTopnav")
Lúc đầu, phần tử này chỉ thuộc lớp "topnav" Ta sẽ gán thêm giá trị lớp cho nó là
"responsive": x.className += " responsive" Lúc này, các mục menu sẽ được hiển thị (theo phần css ở trên)
Khi menu được mở, nó sẽ thuộc hai lớp "topnav" và "responsive" Nếu nhấn vào biểu tượng bên phải một lần nữa, giá trị của thuộc tính lớp sẽ chỉ còn lại một lớp.
"topnav": x.className = "topnav" Và menu sẽ lại bị ẩn đi
Kết quả khi nhấn vào icon:
BÀI 6: THIẾT KẾ TRANG WEB
