Bai 1 - hdsd html

  • 10 trang
  • file .pdf
BÀI 1
HƯỚNG DẪN SỬ DỤNG HTML
BẰNG NOTEPAD
Mục lục
I. Thông tin môn học: ................................................................................................................. 2
II. Cấu trúc cơ bản của một trang Web (Webpage): ..................................................................... 2
III. Mô tả cấu trúc của một thẻ (tag) HTML: ................................................................................ 3
IV. Một số ký tự đặc biệt trong HTML: ........................................................................................ 3
V. Định dạng trang web: ............................................................................................................. 4
VI. Định dạng văn bản: ................................................................................................................. 5
VII. Định dạng danh sách (List): ...................................................................................................... 6
VIII. Định dạng bảng (table): ........................................................................................................... 7
IX. Chèn hình ảnh (Image):............................................................................................................ 9
X. Liên kết trang web (Hyperlink): ................................................................................................ 9
XI. Bài tập : ................................................................................................................................ 10
1
GVLT: Lâm Quang Vũ – [email protected] - Lương Hán Cơ – [email protected]
GVHDTH: Lương Vĩ Minh – [email protected] - Trần Thị Bích Hạnh – [email protected]
I. Thông tin môn học:
- Công cụ để lập trình và thiết kế web: NotePad, EditPlus
- Địa chỉ website môn học: http://courses.cs.hcmuns.edu.vn/
(Hệ tại chức à 02TC Lập trình và thiết kế web1)
- FTP : 172.29.68.111 (username: tkwebv1 / passwork: tkweb)
-
II. Cấu trúc cơ bản của một trang Web (Webpage):
- Cấu trúc cơ bản của 1 trang web gồm các phần sau:


<br>


Nội dung chính của trang web


- Trong đó:
o Thẻ : Định nghĩa phạm vi của văn bản HTML
o Thẻ : Định nghĩa các mô tả về trang HTML. Các thông tin trong thẻ
này không được hiển thị trên màn hình cửa sổ trang web.
o Thẻ : Mô tả tiêu đề trang web. Thông tin trong phần này sẽ hiển
thị trên thanh tiêu đề của cửa sổ trang web.
o Thẻ : Xác định vùng thân của trang web. Đây là nơi chứa các thông
tin sẽ hiển thị trong trang web.
- Ví dụ:


Thiet ke web 1


Mon hoc: Thiet ke web 1
GVLT : Ths. Lam Quang Vu
Lop : 02TC


2
III. Mô tả cấu trúc của một thẻ (tag) HTML:
- Cú pháp:
Cấu trúc: Dữ liệu hiện thị
Mô tả: Thẻ mở. Thẻ đóng
- Trong đó:
o tên_tt : là tên thuộc tính của thẻ.
o gt1: là giá trị của thuộc tính tương ứng.
o Một thẻ, có thể có 1 hoặc nhiều thuộc tính hoặc không có thuộc tính nào.
o Tác dụng của thẻ chỉ ảnh hưởng đến Dữ liệu hiện thị nằm trong giữa thẻ đóng và thẻ
mở của thẻ đó.
o Các thẻ HTML có thể lòng nhau được.
- Ví dụ:

Hello world


Doan van ban co Chu in dam



IV. Một số ký tự đặc biệt trong HTML:
HTML Mô tả
  Ký tự khoảng trắng
< <
> >
& &
- BT: Viết trang web hiện thị chính xác dòng sau lên màn hình:
Function Converter(int &a, int &b) { /**/ int c; b = a; a = b; b = c; /*
*/ }
3
GVLT: Lâm Quang Vũ – [email protected] - Lương Hán Cơ – [email protected]
GVHDTH: Lương Vĩ Minh – [email protected] - Trần Thị Bích Hạnh – [email protected]
V. Định dạng trang web:
STT Tên thuộc tính thẻ HTML Mô tả - Ví dụ
1 bgcolor Thiết lập thuộc tính màu nền cho trang


Chú ý: Giá trị của thuộc tính bgcolor có thể là tên của màu bằng tiếng
anh (red, blue, green, …) hoặc là tổ hợp số thập lục phân của 3 màu
(đỏ, xanh lá, xanh dương) .
2 background Thiết lập thuộc tính ảnh nền cho trang

Giá trị của thuộc tính này đường dẫn đến một file hình ành. Chú ý đến
khái niện đường dẫn tuyệt đối, đường dẫn tương đối trong HTML.
3 topmargin, Thiết lập thuộc tính mép lề trên, trái, phải, dưới của trang
leftmargin,
rightmargin,
bottommargin Mặc định, giá trị của các thuộc tính này khác 0.
4 loop="Number">
- src : đường dẫn đến file nhạc
- loop= -1: lặp vô hạn



- BT: Hãy viết trang web có
o màu nền là màu có tổ hợp số thập lục phân là #FFFFCC,
o topmargin = 20
o Có nội dung là : Welcome to Natural Science University
4
GVLT: Lâm Quang Vũ – [email protected] - Lương Hán Cơ – [email protected]
GVHDTH: Lương Vĩ Minh – [email protected] - Trần Thị Bích Hạnh – [email protected]
VI. Định dạng văn bản:
STT Tên thẻ HTML Mô tả - Ví dụ

……

Định dạng tiêu đề cỡ 1 đến 6. Tiêu đề 1 là lớn nhất.
……

This is a heading


……

This is a heading


This is a heading


This is a heading


This is a heading

This is a heading

…… Định dạng chữ in đậm
This is a bold text
…… Định dạng chữ in nghiêng
This is an italic text

……

Định dạng 1 đoạn văn bản

This is a paragraph


This is another paragraph



Xuống hàng

This
is a para
graph with line breaks


Chú ý: Thẻ này không có thẻ đóng

Đường kẻ ngang

This


is a paragraph with a horizontal rule break


Ký hiệu ghi chú. Nội dung trong tag này sẽ không hiển thị lên trang web.

- BT: Viết trang web có nội dung như hình sau:
5
VII. Định dạng danh sách (List):
STT Tên thẻ HTML Mô tả - Ví dụ
1
  • Item 2
  • Định nghĩa các thành phần trong danh sách
    2
    Định nghĩa danh sách không có thứ tự

    • Tea

    • Coffee


    3
    Định nghĩa danh sách không có đánh số thứ tự

    1. Tea

    2. Coffee


    4

    1. Tea


      • Have ice

      • No ice


    2. Coffee


      • Have ice

      • No ice



    6
    VIII. Định dạng bảng (table):
    STT Tên thẻ HTML Mô tả - Ví dụ
    1 ……
    Khởi tạo 1 bảng
    2 …… Tạo một dòng. Thẻ phải nằm trong thẻ
    3 Tạo một ô tiêu đề. Thẻ
    4 Tạo một ô. Thẻ
    5 Ví dụ:
    …… phải nằm trong thẻ
    …… phải nằm trong thẻ

















    STT Ho va ten
    1 Lam Quang Vu
    1 Vu Giang Nam
    1 Le Tri Anh

    STT Thuộc tính Mô tả - Ví dụ
    1 Border Thiết lập độ dầy của đường kẻ khung. Giá trị mặc định của thuộc tính border (khi không
    khai báo) là 0 à Bảng không có đường kẻ khung.
    2 Colspan Thiết lập ô có độ rộng bằng bao nhiêu cột.










    Name Telephone
    Bill Gates 88352100 86251160

    3 Rowspan Thiết lập ô có độ cao bằng bao nhiêu dòng












    First Name: Bill Gates
    Telephone: 55577854
    55577855

    4 Cellpadding Khoảng cách từ border đến văn bản trong 1 ô
    7









    First Row
    Second Row

    5 Cellspacing Khoảng cách giữa các ô trong một bảng









    First Row
    Second Row

    6 Background Thiết lập ảnh nền cho thẻ ,
    ,









    First Row
    Second Row

    7 Bgcolor Thiết lập màu nền cho thẻ ,
    ,






    background="cat.jpg">Second


    First Row
    Row

    8