Thiết kế website ( chương 2)

Thiết kế web Thiết kế web hay thiết kế website đơn giản là công việc tạo một trang Web cá nhân hoặc cho công ty, doanh nghiệp, tổ chức,... Để thiết kế được một trang Web ta có 2 phương thức chính là:

II.1 Giới thiệu II.1.1 Thành phần HTML Một văn HTML hay trang Web thường có thành phần chính: phần đầu phần thân  Phần đầu văn (document head)  Cho biết tiêu đề văn thiết lập quan hệ văn với hệ thống thư mục  Mở đầu thẻ kết thúc  Thông tin phần đầu trình duyệt Web hiển thị tiêu đề văn II.1.1 Thành phần HTML  Phần thân văn (document body)  Bắt đầu thẻ kết thúc , chứa nội dung văn  Cung cấp thơng tin cho người dùng kết hợp với  Văn bản, hình ảnh, âm thanh, Biếu mẫu (form) để người dùng thực điền thơng tin tìm kiếm, tra cứu,   Chứa liên kết (hyperlink) với văn khác  Thành phần HTML định nghĩa thẻ HTML II.1.2 Thẻ HTML  HTML dùng thẻ để đánh dấu, định dạng văn  Mỗi thẻ văn HTML đặt ngoặc có dạng sau < tên thẻ > Ví dụ Một số thẻ cịn có tham số (thuộc tính) để bổ xung thêm chức thẻ Ví dụ: II.1.2 Thẻ HTML Trong HTML có hai loại thẻ thẻ chứa thể rỗng  Thẻ rỗng  Chỉ có thành phần không bao đoạn tài liệu  Loại thẻ mô tả định dạng thẻ mô tả cấu trúc  Thông thường loại thẻ có tác động vị trí xuất thẻ • Ví dụ: thẻ : ngắt dịng  Cũng có loại thẻ rỗng mà tác động tới đoạn văn sau gặp thẻ kiểu • Ví dụ: thẻ

: đề mục danh sách II.1.2 Thẻ HTML  Thẻ chứa:  Là thẻ có hai thành phần: phần đầu phần cuối thẻ  Một thẻ chứa có phần đầu gần giống hệt khác chỗ phần thẻ có ký tự "/" trước tên thẻ  Ví dụ ;  Hai thành phần thẻ bao bọc đoạn văn đặt kiểu định dạng cho đoạn văn  Ví dụ thẻ dùng để đặt dạng chữ nghiêng, văn HTML có đoạn:  Thẻ HTML không phân biệt chữ hoa chữ thường II.1.3 Thuộc tính thẻ HTML  Những thẻ HTML có thuộc tính riêng  Những thuộc tính cung cấp thông tin thành phần HTML trang web  Thuộc tính ln ln kèm cặp name/value: name="value" (tên="giá trị")  Thuộc tính ln ln thêm vào thẻ mở đầu thành phần HTML Ví dụ: II.1.3 Thuộc tính thẻ HTML  Một thẻ có nhiều thuộc tính:   Ví dụ:  Thẻ đóng khơng có thuộc tính Chú ý: Chúng ta biết thẻ html không phân biệt chữ hoa chữ thường ta nên viết theo tiêu chuẩn thống đặt theo tiêu chuẩn W3C để sau dễ làm viêc II.2 CÁC THẺ CƠ BẢN TRONG HTML Thẻ Mô tả Xác định văn dạng HTML Xác định phần thân tài liệu đến Xác định header từ 1đến

Xác định đoạn văn Chèn dòng trắng Xác định đường thẳng Xác định vùng thích II.2.1 Thẻ  Dùng để xác định tài liệu HTML  Toàn tài liệu HTML nằm thẻ  Cú pháp: Toàn nội dung trang web II.2.2 Thẻ  Dùng để xác định nội của tài liệu  Chứa thông tin định dạng văn đồ họa, văn siêu liên kết, đặt lề trang  Cú pháp Nội dung tài liệu II.2.3 Thuộc tính tùy chọn Thuộc tính Giá trị Mơ tả background file_name Một hình ảnh dùng làm hình bgcolor rgb(x,x,x) #xxxxxx colorname Màu tài liệu text rgb(x,x,x) #xxxxxx colorname Màu chữ tài liệu Ví dụ My first HTML page Look: Colored Background! II.2.3 Thẻ < Heading> Headings định nghĩa thẻ từ đến : heading lớn : heading nhỏ Đây heading Đây heading Đây heading Đây heading Đây heading Đây heading II.2.4 Thẻ ngắt dòng  Được sử dụng bạn muốn kết thúc dịng lại khơng muốn bắt đầu đoạn văn khác  Thẻ tạo lần xuống dịng bạn viết  Thẻ thẻ rỗng Nó khơng có thẻ đóng  Thẻ ngắt dịng vị trí mà đặt II.2.5 Thẻ ngắt đoạn

 Các đoạn khai báo thẻ



This is a paragraph Tag



This is another paragraph Tag

 HTML tự động thêm dòng trống vào trước sau đoạn II.2.4 Thẻ  Định nghĩa cách sử dụng – Thẻ vẽ thước ngang Ví dụ

The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph

II.2.4 Thẻ  Thẻ thích sử dụng để thêm lời thích mã nguồn HTML  Một dịng thích bỏ qua trình duyệt  Sử dụng thích để giải thích code, để sau bạn có phải quay lại chỉnh sửa dễ nhớ Ví dụ

This is a regular paragraph

The end ...  Phần thân văn (document body)  Bắt đầu thẻ kết thúc , chứa nội dung văn  Cung cấp thơng tin cho người dùng kết hợp với  Văn bản, hình ảnh, âm thanh, Biếu mẫu (form) để người... phần chính: phần đầu phần thân  Phần đầu văn (document head)  Cho biết tiêu đề văn thiết lập quan hệ văn với hệ thống thư mục  Mở đầu thẻ kết thúc  Thông tin phần đầu trình duyệt... âm thanh, Biếu mẫu (form) để người dùng thực điền thơng tin tìm kiếm, tra cứu,   Chứa liên kết (hyperlink) với văn khác  Thành phần HTML định nghĩa thẻ HTML II.1.2 Thẻ HTML  HTML dùng thẻ