LÝ THUYẾT LIÊN QUAN
Thiết kế giao diện website
1.1 Cấu trúc HTML cơ bản
- Một trang web được tạo thành từ các thẻ HTML, bắt đầu là thẻ
- Mỗi thẻ gồm 1 cặp mởvà đóng, một số thẻ không có thẻđóng
CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tìm kiếm và định dạng các phần tử do ngôn ngữ đánh dấu HTML tạo ra Nói một cách đơn giản, CSS là công cụ tạo phong cách cho trang web.
- Đểnhúng CSS vào HTML có 3 phương pháp Phương pháp được khuyến khích là nhúng dạng file rời
Trong đó path là đường dẫn đến file css
Mở đầu các trang văn bản bằng các tiêu đề nổi bật cho từng phần như Chương, Mục là rất quan trọng Điều này không chỉ giúp phân chia rõ ràng nội dung mà còn tạo điều kiện thuận lợi cho người đọc theo dõi Các đề mục cần được trình bày một cách rõ ràng và khác biệt so với phần thân văn bản.
Có 6 mức tiêu đề trong HTML: h1, h2, h3, h4, h5, h6 Sử dụng như các thẻ html thông thường gồm có thẻ mở và thẻđóng.
Tiêu đề 1 cho kết quả Tiêu đề 1
Tiêu đề 6 cho kết quảTiêu đề 2
Thẻnày dùng đểxác định một đoạn văn bản Thẻ
(Paragraph) có thể dùng kèm thuộc tính đểấn định cách trình bày đoạn văn bản
Đoạn văn bản 2
Để căn lề văn bản, chúng ta có thể dùng thuộc tính chỉnh lề nằm trong thẻ p như sau:Đoạn văn bản
Khi sử dụng thẻ `
`, văn bản sẽ tự động xuống dòng để tạo thành một đoạn Nếu cần xuống dòng tại một vị trí cụ thể, bạn có thể sử dụng thẻ `` Khi thẻ `` được sử dụng, toàn bộ văn bản phía sau sẽ nhảy xuống một dòng, và việc sử dụng nhiều thẻ `` sẽ khiến văn bản nhảy xuống nhiều dòng liên tiếp.
Đoạn văn bản 1
→ có kết quả là: Đoạn văn bản 1
Thẻ này sẽ cho chúng ta 1 đường kẻ ngang màn hình, đường kẻ này có thể chỉnh chiều dài bằng cách thay đổi thuộc tính chiều rộng của thẻ
→1 đường kẻ ngang màn hình
→ 1 đường kẻ ngang màn hình có độ rộng là 50% màn hình
→ 1 đường kẻngang màn hình có độ rộng là 50px
1.7 Thẻđịnh dạng văn bản thông dụng: Đểđịnh dạng văn bản như in đậm, in nghiêng, gạch dưới chúng ta có thể sử dụng các thẻ lần lượt là , ,
Đoạn văn bản
→ Đoạn văn bả nĐoạn văn bản
→Đoạn văn bản1.8 Thẻ giữnguyên định dạng văn bản:
Khi sử dụng thẻp để tạo đoạn văn bản, việc xuống dòng nhiều lần trong đoạn sẽ không được tính, và khi hiển thị, chỉ một đoạn duy nhất sẽ xuất hiện.
Khi soạn thảo văn bản, chúng ta có thể sử dụng thẻ thay vì thẻ
để đảm bảo nội dung được hiển thị chính xác Việc sử dụng thẻ sẽ khiến văn bản chuyển sang font chữ Courier, giúp tạo ra định dạng dễ đọc hơn.
Một thẻ cấp khối luôn bắt đầu trên một dòng mới
Thẻ cấp khối chiếm toàn bộ chiều rộng có sẵn, mở rộng sang hai bên tối đa Các thẻ cấp khối như và
có lề trên và lề dưới, trong khi thẻ nội tuyến không có đặc điểm này.
Một số thẻ cấp khối:
-
Một thẻ nội tuyến không bắt đầu trên một dòng mới Một thẻ nội tuyến chỉ chiếm nhiều chiều rộng khi cần thiết Thẻ , , , là thẻ nội tuyến
Một số thẻ nội tuyến:
Thẻ thường được sử dụng làm vùng chứa cho các phần tử HTML khác
Thẻ không có thuộc tính bắt buộc, nhưng style, class và id thường được dùng
Khi được sử dụng cùng với CSS, phần tử có thểđược sử dụng để tạo kiểu cho các khối nội dung, xây dựng bố cục trang web
Thẻdiv thường được sử dụng làm vùng chứa cho các phần tử HTML khác
Thẻ là một vùng chứa nội tuyến dùng để đánh dấu một phần của văn bản hoặc tài liệu Mặc dù thẻ không có thuộc tính bắt buộc, nhưng thường được sử dụng với các thuộc tính như style, class và id để định dạng và phân loại nội dung.
Khi được sử dụng cùng với CSS, phần tử có thểđược sử dụng để tạo kiểu cho các phần của văn bản
Thẻ span là một vùng chứa
nội tuyến được sử dụng đểđánh dấu một phần của văn bản hoặc một phần của tài liệu
Các liên kết được tìm thấy trong hầu hết các trang web Liên kết cho phép người dùng nhấp theo cách của họ từ trang này sang trang khác
Liên kết HTML, hay còn gọi là siêu liên kết, cho phép người dùng nhấp vào để chuyển đến tài liệu khác Khi di chuột qua liên kết, biểu tượng chuột sẽ chuyển thành hình bàn tay nhỏ, cho thấy rằng liên kết có thể được nhấp vào.
Lưu ý: Một liên kết không nhất thiết phải là văn bản Một liên kết có thể là một hình ảnh hoặc bất kỳ phần tử HTML nào khác!
ThẻHTML xác định một siêu liên kết
Thuộc tính quan trọng nhất của thẻ là href, xác định địa chỉ URL mà liên kết trỏ tới Văn bản liên kết là phần hiển thị cho người đọc, và khi nhấp vào nó, người dùng sẽ được chuyển đến địa chỉ URL đã được chỉ định.
Cùng học HTML
Mặc định, liên kết sẽ mở trong cửa sổ trình duyệt hiện tại Để thay đổi điều này, bạn cần chỉ định một target khác cho liên kết, giúp xác định thuộc tính nơi mở tài liệu được liên kết.
Các target có thể có một trong các giá trị sau:
_self: Mở tài liệu trong cùng một cửa sổ/ tab khi nó được nhấp vào
_blank: Mở tài liệu trong một cửa sổ hoặc tab mới
_parent: Mở tài liệu trong khung chính
_top: Mở tài liệu trong toàn bộ phần thân của cửa sổ
Cùng học
Hình ảnh có thể cải thiện thiết kế và giao diện của một trang web
là thẻHTML được sử dụng để nhúng một hình ảnh vào một trang web
Hình ảnh không được chèn trực tiếp vào trang web mà được liên kết với các trang khác Thẻ là thẻ tự đóng, chỉ chứa các thuộc tính mà không có thẻ đóng đi kèm.
Các thẻ có hai thuộc tính cần thiết:
src - Chỉ định đường dẫn đến hình ảnh
alt - Chỉ định văn bản thay thế cho hình ảnh khi hình ảnh bị lỗi không hiển thị được
→ hinhnen.png nằm cùng thư mục với tập tin html
→ https://ibb.co/qF1NZqY/ là đường dẫn chứa hình ảnh trên internet
Bạn có thể thiết lập kích thước hiển thị cho hình ảnh bằng cách sử dụng tỷ lệ phần trăm hoặc pixel Để điều chỉnh kích thước hình ảnh, bạn có thể sử dụng thuộc tính width hoặc height, hoặc áp dụng CSS với thuộc tính style.
Có thểđặt link cho hình ảnh để tạo ra hình ảnh có dạng liên kết, bằng cách đặt thẻ img bên trong thẻ a
Các định dạng hình ảnh chung:
Dưới đây là các loại tệp hình ảnh phổ biến nhất, được hỗ trợ trong tất cả các trình duyệt (Chrome, Edge, Firefox, Safari, Opera):
Loại tập tin Mô tả Đuôi của tập tin
APNG Hình động dùng cho mạng apng
GIF Hình ảnh có thể chuyển động gif
ICO Hình dạng ICON của Microsoft ico, cur
JPEG Hình ảnh thông thường jpg, jpeg, jfif, pjpeg, pjp PNG Hình ảnh chuyên dùng trên mạng png
SVG Hình ảnh dạng vector (dùng trong thiết kế)
Bảng HTML cho phép các nhà phát triển web sắp xếp dữ liệu thành các hàng và cột
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Thẻ HTML được sử dụng để tạo bảng, bao gồm các ô bảng được tổ chức trong các hàng và cột Bảng có thể có tiêu đề, sử dụng thẻ để định nghĩa tiêu đề cho bảng.
Ví dụ: Một bảng thông thường trong HTML
Trong ví dụ trên, các thẻ và cần phải được đặt bên trong thẻ , nghĩa là phải tạo hàng trước khi tạo cột hoặc tiêu đề Thẻ được gọi là ô, vì chỉ những nội dung bên trong thẻ mới được hiển thị trên website.
Mặc định, bảng được tạo ra sẽ không có đường viền Để hiển thị đường viền, bạn cần thay đổi thuộc tính border của bảng thành giá trị mong muốn, thường là 1.
Ngoài ra, chúng ta có thể dùng thuộc tính style để tùy chỉnh hoặc dùng CSS (sẽ học ởbài sau) để làm cho bảng chúng ta sinh động hơn.
Thiết kế website động dùng PHP & MYSQL
MySQL is an open-source relational database management system (RDBMS) that operates on a client-server model It serves as software or a service for creating and managing databases, focusing on the relationships between them.
Sau đây sẽ trình bày một số lệnh cơ bản thường dùng:
- Tạo CSDL: dùng lệnh CREATE DATABASE ;
- Hủy CSDL: dùng lệnh DROP ;
- Hiển thịdanh sách CSDL đã có bằng lệnh SHOW DATABASES;
- Chọn CSDL cần làm việc bằng lệnh USE ;
- Hiển thị danh sách table trong CSDL: SHOW tables;
PRIMARY KEY ([,TênCột_k])
,FOREIGN KEY ([,