Giới Thiệu Về Công Nghệ Web
Trong bối cảnh Internet hiện đại, thuật ngữ Web thường dùng để chỉ phần giao diện đồ họa và nội dung đa phương tiện mà người dùng tiếp cận được qua các trình duyệt mạng. Mạng lưới toàn cầu (World Wide Web) bao gồm một hệ thống các trang web liên kết với nhau. Để truy cập và tương tác, chúng ta sử dụng các ứng dụng gọi là trình duyệt.
JavaWeb đề cập đến các giải pháp ứng dụng được xây dựng bằng ngôn ngữ Java, cho phép xử lý yêu cầu từ phía máy khách thông qua mạng. Cơ chế hoạt động dựa trên sự tương tác giữa các thành phần: Java đóng vai trò là bộ xử lý dữ liệu phía sau (backend), trong khi giao diện hiển thị dành cho người dùng chính là các trang web.
Bạn có thể hình dung quy trình này giống như việc mua sắm trực tuyến: tiền bạc bạn thấy trên màn hình đại diện cho giao diện người dùng; quy trình xác nhận và hoàn tất giao dịch là lớp trung gian xử lý logic; còn não bộ tính toán số dư chính là hệ thống máy chủ chạy Java.
Lộ Trình Phát Triển Chuyên Sâu
Quy trình đào tạo kỹ năng phát triển web chia thành hai nhánh chính:
- Kỹ Thuật Frontend: Tập trung vào HTML, CSS, JavaScript cùng các framework quản lý trạng thái và công cụ server như Nginx.
- Kỹ Thuật Backend: Bao gồm quản lý dự án (Maven), thiết kế API (SpringBoot Web), quản trị dữ liệu (MySQL) và tích hợp ORM (Mybatis).
Nền Tảng Giao Diện Người Dùng
Cấu trúc của một trang web bao gồm các thành phần đa dạng như văn bản, hình ảnh, âm thanh và các điểm dẫn siêu văn bản. Mọi gì hiển thị trên màn hình đều là kết quả của quá trình biên dịch mã nguồn từ lập trình viên.
Máy tính chuyển đổi mã thành giao diện thực tế nhờ vào trình duyệt. Bộ phận cốt lõi chịu trách nhiệm phân tích cú pháp và render nội dung được gọi là kernel của trình duyệt.
Lưu ý: Các trình duyệt khác nhau sử dụng kernel riêng biệt, dẫn đến việc hiển thị kết quả của cùng một đoạn mã có thể chênh lệch đôi chút về giao diện.
Chuẩn Hóa Web
Để đảm bảo tính đồng nhất, chuẩn Web được thiết lập bởi W3C (World Wide Consortium). Bộ chuẩn này bao gồm ba trụ cột chính:
- HTML: Định nghĩa cấu trúc và nội dung của trang.
- CSS: Kiểm soát cách thức hiển thị (màu sắc, bố cục, font chữ).
- JavaScript: Xử lý các tương tác động và hành vi người dùng.
Học Cốt Lõi HTML & CSS
1. Ngôn Ngữ Đánh Dấu Siêu Văn Bản (HTML)
HTML viết tắt của HyperText Markup Language. Đây là ngôn ngữ không chỉ chứa văn bản mà còn định danh được các tài nguyên đa phương tiện khác như video hay âm thanh. Vì đây là ngôn ngữ đánh dấu, các thẻ (tag) đã được định nghĩa sẵn từ trước (ví dụ: <a> cho link, <img> cho ảnh).
Trình duyệt đọc trực tiếp file HTML và thực thi lệnh để hiển thị nội dung. Dưới đây là ví dụ khởi tạo một trang đơn giản với CSS inline:
<h1 style="color: blue;">Chủ Đề Giới thiệu</h1>
<img src="image-demo.jpg">
2. Cấu Trúc Trang Cơ Bản
Để bắt đầu, cần tạo một file văn bản, khai báo cấu trúc HTML và thêm nội dung vào vùng thân body:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trang Minh Họa</title>
</head>
<body>
<h1>Chào mừng đến với Web Dev</h1>
<p>Đây là nội dung chính.</p>
</body>
</html>
- Ghi chú: Thẻ HTML không phân biệt chữ hoa/thường.
- Các giá trị thuộc tính có thể bao bọc trong dấu ngoặc kép hoặc nháy đơn.
- Cú pháp khá linh hoạt, ít khắt khe.
Thẻ Tiêu Đề và Định Dạng
Tích Hợp Đa Phương Tiện
Thẻ <img> là chìa khóa để nhúng hình ảnh. Cần chú ý tham số đường dẫn (src) có thể là tuyệt đối hoặc tương đối. Kích thước ảnh có thể điều chỉnh bằng width hoặc height theo pixel hoặc tỷ lệ %.
Có Gạch Ngang và Tiêu Đề
Sử dụng các thẻ <h1> đến <h6> cho tiêu đề cấp độ khác nhau và thẻ <hr> để chèn đường viền ngang phân tách nội dung.
<!-- Thiết lập khung HTML5 cơ bản -->
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Dự Án Web Demo</title>
<style>
body { font-family: sans-serif; }
</style>
</head>
<body>
<img src="./assets/logo.png">
<h1>Hệ Thống Quản Lý</h1>
<hr>
<p>Phiên bản thử nghiệm v1.0</p>
</body>
</html>
Phương Thức Áp Dụng CSS
CSS giúp tùy biến màu sắc và kiểu dáng. Có ba cách cơ bản:
- Style Trực Tiếp (Inline): Đặt thuộc tính
stylengay trong thẻ thẻ HTML. Không khuyến khích dùng do khó bảo trì. - CSS Nội Tại: Viết trong thẻ
<style>nằm tronghead. Phù hợp cho trang nhỏ. - CSS Bên Ngoài: Tạo file .css riêng biệt và liên kết thông qua thẻ
<link>. Phương pháp tối ưu cho dự án lớn.
Định Dạng Màu Sắc
Ngoài tên màu cố định (như red, green), CSS hỗ trợ mã RGB và Hexadecimal (#RRGGBB) để tinh chỉnh màu sắc chi tiết hơn.
<style>
h1 {
/* Sử dụng mã Hex */
color: #ff0000;
/* Hoặc sử dụng RGB */
background-color: rgba(255, 255, 255, 0.5);
}
</style>
Các Chọn Lựa CSS (Selectors)
CSS Selector xác định phần tử nào sẽ được áp dụng样式:
- Element Selector: Chọn theo tên thẻ (VD:
h1). - ID Selector: Chọn theo thuộc tính ID duy nhất (VD:
#unique-id). - Class Selector: Chọn theo class để tái sử dụng cho nhiều phần tử (VD:
.my-class).
/* Ví dụ áp dụng selector */
h1 { color: navy; } /* Tất cả h1 */
.header-main { color: orange; } /* Class name */
#footer { color: gray; } /* ID */
Thứ tự ưu tiên thực thi: ID Selector > Class Selector > Element Selector.
Xử Lý Liên Kết và Phương Tiện
Siêu Liên Kết (Anchor)
Thẻ <a> giúp điều hướng giữa các trang hoặc tài nguyên. Thuộc tính href chỉ đích đến, target quyết định cách mở trang mới.
- _self: Mở tại cửa sổ hiện tại (mặc định).
- _blank: Mở tab mới.
Để loại bỏ gạch chân dưới liên kết, dùng thuộc tính text-decoration: none;.
Bài Viết Đa Phương Tiện
HTML5 cung cấp các thẻ native cho video và âm thanh:
<video>: Nhúng clip phim, hỗ trợcontrolsđể thao tác phát/nghỉ.<audio>: Nhúng nhạc nền.<p>,<strong>,<b>: Quản lý văn bản và làm nổi bật.
<video src="media/content.mp4" controls width="600px"></video>
<p><strong>Thông Báo:</strong> Hệ thống đã sẵn sàng.</p>
Bố Cục Trang (Page Layout)
Khi thiết kế giao diện, mọi phần tử đều được xem như một khối hộp (Box). Mô hình Box Model bao gồm:
- Content: Vùng chứa nội dung chính.
- Padding: Khoảng đệm bên trong cạnh viền.
- Border: Đường viền bao quanh.
- Margin: Khoảng cách ngăn cách với các phần tử lân cận.
Tính năng Flexbox hoặc Grid hiện nay thường được dùng, nhưng vẫn cần hiểu rõ về hai thẻ layout cơ bản không mang ý nghĩa ngữ nghĩa:
- <div>: Khối chứa nội dung, mặc định chiếm trọn chiều rộng dòng (block-level).
- <span>: Phần tử văn bản nội tuyến (inline), thường dùng để tô đậm từng từ hoặc cụm từ con mà không xuống dòng.