HTML_Dream

Chia sẻ bởi Nguyễn Văn Bình | Ngày 29/04/2019 | 88
Chia sẻ tài liệu: HTML_Dream thuộc Bài giảng khác

Nội dung tài liệu:

World Wide Web
1. World Wide Web là gì ?
2. World Wide Web làm việc như thế nào?
Web
Browser
Web
Server
Yêu cầu
Kết quả
(Trang html)
3. Trình duyệt web (Web Browser)
Trình duyệt là một dạng chương trình khách (client), nhận và hiển thị các trang web từ Server.
Các trình duyệt thông dụng:
Internet Explorer (IE)
Netscape

4. Các ứng dụng trong thực tế
Quảng cáo, kinh doanh
Mua bán trực tuyến
Nguồn cung cấp tài liệu
Diễn đàn (forum), tán gẫu (chat)
Giải trí
Thương mại điện tử
…
HTML
1. HTML là gì?
HTML là viết tắt của Hyper Text Markup Language_Ngôn ngữ đánh dấu siêu văn bản.
HTML là một ngôn ngữ cơ sở để xây dựng các trang web
HTML sử dụng các thẻ để định dạng, trình bày nội dung trên trang web.
2. Môi trường soạn thảo tài liệu HTML
File HTML có thể được tạo từ các trình soạn thảo như: NotePad,WordPad,
Hoặc các trình soạn thảo trực quan: Microsoft FrontPage, DreamWeaver,…
3. Tìm hiểu các thẻ HTML
Qui tắc viết thẻ HTML
Thẻ HTML bao gồm một từ khóa nằm trong cặp dấu ngoặc nhọn:
Thẻ mở:
Thẻ đóng:
Các thẻ không phân biệt chữ hoa, chữ thường.
Các thẻ có thể nằm trên cùng một dòng hoặc khác dòng.
4. Cấu trúc tài liệu HTML


Dòng tiêu đề


Phần thân (Trình bày n/d chính)


Ví dụ:


Tieu de trang


Chào mừng các bạn đã đến với HTML
Hy vọng bạn có những bài học bổ ích!


5. Thẻ và các thuộc tính
a. Thẻ

:
Ðịnh dạng cho 1 đoạn.
 Ví dụ:

Đoạn văn bản thứ nhất


Đoạn văn bản thứ hai.


Thuộc tính: ALIGN=left/center/right: Canh lề văn bảng

...

: Canh lề phải
b. Thẻ
:
Thẻ nầy dùng để ngắt một đoạn văn và xuống hàng mới.
Thí dụ:
Chỉ có thuyền mới hiểu

Biển mênh mông nhường nào

Chỉ có biển mới biết

Thuyền đi đâu về đâu.
c. Thẻ :
. Giá trị values từ 1-7.
COLOR = #rrggbb (hay COLOR = color): Xác lập màu chữ
FACE=name [,name] [,name]: Chỉ định font chữ khi hiển thị text.

Ví dụ:
Scroll (mặc định)
Slide: Trượt theo một hướng rồi dừng lại
Alternate: Đổi hướng khi chạm đường biên trình duyệt.
Ví dụ:
Hướng từ phải sang
Hướng từ phải sang và đổi hướng khi chạm vào biên
đ. Đường kẻ ngang

Thuộc tính:
Width: Độ rộng đường kẻ
Color: Màu đường kẻ
Size: Độ rộng đường kẻ
Kiểu chữ
Kiểu in nghiêng:..
Kiểu in nghiêng:..
Kiểu gạch chân:..
e. Thẻ Image
Cú pháp:
Trong đó:
URL: đường dẫn đến file ảnh. Width và height: chiều rộng và chiều cao của hình
Alt=“Dòng chú thích cho hình”
f. Thẻ BODY 
BACKGROUND: Dùng chỉ định file hình ảnh làm nền:

BGCOLOR: Xác lập màu cho nền

TEXT: Xác lập màu cho văn bàn

g. Thẻ BODY 
  LEFTMARGIN: Canh lề trái. Thí dụ:

Tài liệu này sẽ cách lề trái cửa sổ trình duyệt 40 pixels

TOPMARGIN: Canh lề trên. Thí dụ:

Tài liệu này sẽ cách lề trên cửa sổ trình duyệt 40 pixels

h. Thẻ liên kết (A):
Thẻ liên kết được sử dụng để tạo liên kết giữa các trang
Cú pháp: Đầu mối liên kết
i. Danh sách (List)
Danh sách các bullet

  • Mục 1
  • Mục 2
    …
  • Mục n

i. Danh sách (List)
Thuộc tính:

  • square: Hình vuông
    disc: Hình tròn tô đậm
    circle: Hình tròn
    Danh sách các phần tử liên tục

    1. Mục 1
    2. Mục 2
      …
    3. Mục n

    Thuộc tính:

      Bảng




      …




      …

      ….
      Nội dung ô 1 dòng 1 Nội dung ô 2 dòng 1
      Nội dung ô 1 dòng 2 Nội dung ô 2 dòng 2

      1. Các thuộc tính
      a. Thẻ
      Border: Xác định độ dày đường viền
      BorderColor: X/định màu cho đường viền
      BgColor: Lót màu nền cho bảng
      Background: Lót ảnh nền cho bảng
      Width: Xác định độ rộng bảng (pixel, %)
      Align: Canh chỉnh bảng (left, center, right)
      CellSpacing
      CellPadding
      b. Thẻ
      ,
      BgColor: Lót màu nền
      Background: Lót ảnh nền
      Align: canh chỉnh nội dung trong hàng hoặc cột (left, right, center)
      Valign: canh chỉnh nội dung trong ô (top, middle, bottom)
      Width: Xác định độ rộng cho cột
      Height: Xác định chiều cao hàng
      Colspan: Dồn nhiều ô trên 1 hàng thành một ô
      Rowspan: Dồn nhiều ô trên 1 cột thành một ô
      Form và các đối tượng trong form
      1. Chèn form vào trang:

      Các đối tượng trong form

      Trong đó:
      Name: Đặt tên cho form
      Method: Chỉ định phương thức gửi form (POST, GET)
      Action: Chỉ định trang sẽ tiếp nhận và xử lý form này
      2. Các đối tượng trong form
      a. Hộp nhập liệu

      Trong đó:
      Type: Kiểu đối tượng
      Name: Tên đối tượng
      size: Xác định chiều dài của hộp Text (theo kí tự)
      Maxchar: Giới hạn số ký tự nhập
      b. Hộp mật khẩu:
      size = “”>
      Trong đó:
      Type: Kiểu đối tượng
      Name: Tên đối tượng
      size: Xác định chiều dài của hộp Text (theo kí tự)
      c. Nút tuỳ chọn (Radio)
      Đây là dạng danh sách các chọn lựa, người sử dụng chỉ được chọn một trong số các tuỳ chọn này.

      Trong đó:
      Checked: Có thể có hoặc không, sử dụng khi cần chọn trước đối tượng
      d. Hộp kiểm (CheckBox):
      Đây là dạng tuỳ chọn, cho phép người dùng có thể chọn hoặc không chọn một (hoặc nhiều) mục cho trước.


      e. Vùng nhập liệu (TextArea)

      Trong đó:
      Cols: Xác định độ rộng của vùng nhập liệu (tính theo cột)
      Rows: Xác định chiều cao của vùng nhập liệu (tính theo hàng)
      f. Chèn danh sách chọn (Select)