Bai thiet ke web

1
THIẾT KẾ WEB
BÀI 3: TẠO TRANG WEB VỚI HTML
Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này.
Cú pháp: …….
Trình duyệt sẽ xem các tài liệu không sử dụng thẻ như những tệp tin văn bản bình thường.
1. Thẻ HTML.
BÀI 3: TẠO TRANG WEB VỚI HTML
2. Tạo một trang web mới.
Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu.
Cú pháp:

... Phần mở đầu (HEADER) của tài liệu được đặt ở đây

Tạo phần đầu.
a.1 HEAD
BÀI 3: TẠO TRANG WEB VỚI HTML
Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu, tức là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ .

a.2 TITLE
Cú pháp:
BÀI 3: TẠO TRANG WEB VỚI HTML
Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu - phần thân (body) của tài liệu. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu... Những thông tin này được đặt ở phần tham số của thẻ.

.... phần nội dung của tài liệu được đặt ở đây

Trên đây là cú pháp cơ bản của thẻ BODY, tuy nhiên bắt đầu từ HTML 3.2 thì có nhiều thuộc tính được sử dụng trong thẻ BODY. Sau đây là các thuộc tính chính:
b. Tạo phần thân (BODY)
Cú pháp:
BÀI 3: TẠO TRANG WEB VỚI HTML
BÀI 3: TẠO TRANG WEB VỚI HTML
Như vậy một tài liệu HTML cơ bản có cấu trúc như sau:





... Nội dung của tài liệu


BÀI 3: TẠO TRANG WEB VỚI HTML
c. Một số thẻ cơ bản.
Thẻ

được sử dụng để định dạng một đoạn văn bản.

Nội dung đoạn văn bản

Cú pháp:
c.1. Thẻ P
BÀI 3: TẠO TRANG WEB VỚI HTML
HTML hỗ trợ 6 mức đề mục.
c.2. Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6
Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic, tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp.
Có thể ở trình duyệt này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6.
Thông thường văn bản ở đề mục cấp 5 hay cấp 6 thường có kích thước nhỏ hơn văn bản thông thường.
BÀI 3: TẠO TRANG WEB VỚI HTML
Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:
BÀI 3: TẠO TRANG WEB VỚI HTML
Thẻ này không có thẻ kết thúc tương ứng (
), nó có tác dụng chuyển sang dòng mới.
c.3 Thẻ xuống dòng BR
BÀI 3: TẠO TRANG WEB VỚI HTML
Lưu ý, nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể hiện liên tục, các khoảng trắng liền nhau, các ký tự tab, ký tự xuống dòng đều được coi như một khoảng trắng.
Để xuống dòng trong tài liệu, bạn phải sử dụng thẻ

Là một nội dung nào đó bất kỳ thể hiện lên trên một trang web
3. Các thành phần của một trang HTML.
a. Các đoạn văn bản.
b. Các định dạng.
Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng, in đậm, gạch chân... cho các ký tự, văn bản khi được thể hiện trên trình duyệt.
b.1. Các thẻ định dạng in ký tự
BÀI 3: TẠO TRANG WEB VỚI HTML
BÀI 3: TẠO TRANG WEB VỚI HTML
BÀI 3: TẠO TRANG WEB VỚI HTML
Trong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bản để trang Web có được một bố cục đẹp. Một số các thẻ định dạng như P, Các giá trị cho tham số ALIGN:
b.2. Căn lề văn bản trong trang Web
BÀI 3: TẠO TRANG WEB VỚI HTML
Ngoài ra, chúng ta có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản.
Cú pháp:

Văn bản sẽ được căn giữa trang

b.2. Căn lề văn bản trong trang Web
BÀI 3: TẠO TRANG WEB VỚI HTML
b.4. Sử dụng màu sắc trong thiết kế các trang Web
Một màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây (Green), Xanh nước biển (Blue). Trong HTML một giá trị màu là một số nguyên dạng hexa (hệ đếm cơ số 16) có định dạng như sau:
#RRGGBB
RR - là giá trị màu Đỏ.
GG - là giá trị màu Xanh lá cây.
BB - là giá trị màu Xanh nước biển.
Trong đó:
BÀI 3: TẠO TRANG WEB VỚI HTML
Màu sắc có thể được xác định qua thuộc tính bgcolor= hay color=. Sau dấu bằng có thể là giá trị RGB hay tên tiếng Anh của màu. Với tên tiếng Anh, ta chỉ có thể chỉ ra 16 màu trong khi với giá trị RGB ta có thể chỉ tới 256 màu.
b.4. Sử dụng màu sắc trong thiết kế các trang Web
BÀI 3: TẠO TRANG WEB VỚI HTML
Sau đây là một số giá trị màu cơ bản:
BÀI 3: TẠO TRANG WEB VỚI HTML
Cú pháp:
BÀI 3: TẠO TRANG WEB VỚI HTML
Sau đây là ý nghĩa các tham số của thẻ BODY:
BÀI 3: TẠO TRANG WEB VỚI HTML
Cú pháp:
b.5. Chọn kiểu chữ cho văn bản
BÀI 3: TẠO TRANG WEB VỚI HTML
c. Các frame.
Sử dụng tag và để chia cửa sổ trình duyệt thành nhiều cửa sổ con frame. Tag được dùng kèm với tag để định nghĩa 1 frame.
BÀI 3: TẠO TRANG WEB VỚI HTML
c. Các frame.
Ví dụ: tạo trang web có tên là 2frame.htm chứa 2 frame, frame 1 bên trái chứa nội dung trang web page_1.htm và frame 2 bên phải chứa nội dung trang web page_2.htm.









BÀI 3: TẠO TRANG WEB VỚI HTML
Mỗi frame có 1 tên, ví dụ frame trái có name="muc_luc" và frame phải có name="noi_dung". Ðể tạo liên kết từ frame muc_luc với frame noi_dung ta chỉ định trong frame muc_luc như sau:target="noi_dung". src=file: để chỉ định ra trang web thể hiện trên khung. Các trang web page_1.htm và page_2.htm cần tạo ra trước khi tạo trang web 2frame.htm chứa chúng. Nội dung của trang web page_1.htm trong tag có khai báo sau:



BÀI 3: TẠO TRANG WEB VỚI HTML
Ðể tạo các liên kết hyperlink giữa trang page_1.htm với các trang web khác như page_2.htm, page_3.htm,... để thể hiện trên khung bên phải thì trong nội dung trang page_1.htm có nội dung như sau:
Ðể không xuất hiện scrollbar và border của frame, khi đó bạn thêm thuộc tính scrolling="no" và frameborder=0 vào tag , ví dụ:

BÀI 3: TẠO TRANG WEB VỚI HTML

Mục lục công việc

page 2

page 3

Khi đó trong trình duyệt bạn click vào các hyperlink thì các trang web page_2.htm và page_3.htm sẽ mở ra tương ứng ở frame bên phải(frame noi_dung) nhờ khai báo target="noi_dung".
BÀI 3: TẠO TRANG WEB VỚI HTML
d. Các bảng.
Tag định dạng bảng : sử dụng tag để bắt đầu và kết thúc 1 bảng. Sử dụng kèm theo với tag để thêm 1 dòng trong bảng và tag để thêm vào 1 ô trên dòng.
Ví dụ:

Ô 11	Ô 12
Ô 21	Ô 22

BÀI 3: TẠO TRANG WEB VỚI HTML
    ALIGN=align-type
    BACKGROUND=url
    BGCOLOR=color-type
    BORDER=n
    CELLPADDING=n
    WIDTH=n%>
Ðịnh nghĩa TABLE(bảng):
BÀI 3: TẠO TRANG WEB VỚI HTML
Ðịnh nghĩa TABLE(bảng):
    ALIGN=align-type: lề của bảng, ( LEFT hoặc RIGHT )
    BACKGROUND=url: chỉ định ảnh nền của bảng
    BGCOLOR=color-type: màu nền của bảng
    BORDER=n: đường viền bảng, n tính bằng pixel
    CELLPADDING=n: khoảng cách từ ô tới nội dung của ô, đơn vị pixel
    WIDTH=n: độ rộng của bảng, n tính theo % (phải có dấu % theo sau)
Trong đó:
BÀI 3: TẠO TRANG WEB VỚI HTML
Ðịnh nghĩa TR(dòng):
      ALIGN=align-type
    BACKGROUND=url
    BGCOLOR=color-type
    VALIGN=v-align-type>
BÀI 3: TẠO TRANG WEB VỚI HTML
    ALIGN=align-type: lề của các ô trong dòng, (LEFT, RIGHT hoặc CENTER )
    BACKGROUND=url: chỉ định ảnh nền của dòng
    BGCOLOR=color-type: màu nền của dòng
    VALIGN=v-align-type: lề theo chiều dọc cho văn bản trong các ô trên dòng. ( TOP, BOTTOM, MIDDLE.)
Ðịnh nghĩa TR(dòng):
Trong đó:
BÀI 3: TẠO TRANG WEB VỚI HTML
Ðịnh nghĩa TD (ô):

ALIGN=align-type     BACKGROUND=url     BGCOLOR=color-type     COLSPAN=n     ROWSPAN=n     VALIGN=v-align-type> BÀI 3: TẠO TRANG WEB VỚI HTML     ALIGN=align-type: lề văn bản trong ô (LEFT, RIGHT, CENTER)     BACKGROUND=url: chỉ định ảnh nền cho ô     BGCOLOR=color-type: màu nền của ô     COLSPAN=n: ô trải rộng trên n cột     ROWSPAN=n: ô trải dài trên n hàng     VALIGN=v-align-type: (TOP, BOTTOM, MIDDLE. ) Ðịnh nghĩa TD (ô): Trong đó: BÀI 3: TẠO TRANG WEB VỚI HTML e. Các liên kết. …Nhãn liên kết … Dùng liên kết các trang web với nhau hoặc liên kết web với các thuộc tính khác Cú pháp: BÀI 3: TẠO TRANG WEB VỚI HTML 4. Hiển thị trang web trong trình duyệt. Thông thường hiện nay người ta sử dụng trình duyệt web Internet Explorer. Trên màn hình click vào biểu tượng internet Explorer. Sau đó gõ địa chỉ trang web đã lưu vào ô Addres BÀI 3: TẠO TRANG WEB VỚI HTML www.k13cdspth.9f.com 6. Tìm hiểu một trang web mẫu. Xin chõn tha`nh ca?m on . * Một số tài liệu cũ có thể bị lỗi font khi hiển thị do dùng bộ mã không phải Unikey ... Người chia sẻ: Phạm Thị Hiệp Dung lượng: | Lượt tài: 0 Loại file: Nguồn : Chưa rõ (Tài liệu chưa được thẩm định) Tải tài liệu Báo cáo sai sót Đề suất chỉnh sửa , phân lại mục Thư Viện Giáo viên có gì ?! Thư viện tài liệu giáo viên đủ các bậc học Tải và chia sẻ tài liệu miễn phí , lưu trữ không giới hạn ... Cộng đồng chia sẻ kinh nghiệm dạy học ... Tham gia thư viện >