html, css là gì

Tìm hiểu về HTML và CSS cơ bản    

• Báo cáo

1. Định nghĩa về HTML và CSS

HTML (HyperText Markup Language) : là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web, nghĩa là các mẩu thông tin được trình bày trên World Wide Web.

CSS (Cascading Style Sheets) : định nghĩa về cách hiển thị của một tài liệu HTML. CSS đặc biệt hữu ích trong việc thiết kế Web. Nó giúp cho người thiết kế dễ dàng áp đặt các phong cách đã được thiết kế lên bất kì page nào của website một cách nhanh chóng, đồng bộ.

2.Cấu trúc cơ bản của HTML

Có thể dùng notepad hoặc text editor để soạn thảo 1 tài liệu HTML. Ta cùng làm 1 ví dụ nhỏ về HTML nhé:

B1: Mở notepad hoặc text editor

B2: Nhập đoạn HTML sau:

    


    
My First Heading
    
My first paragraph

B3: Save file với định dạng .html hoặc .htm

B4: Thử xem kết quả ra là gì nhé. Bằng cách mở file bằng 1 trình duyệt bất kỳ. Ví dụ: Chrome, IE, Firefox, Safari.

Page sẽ hiển thị như sau:

Cấu trúc cơ bản của HTML:

Một tài liệu HTML luôn được gói trong cặp tag và

Cặp tag và sẽ là nơi mô tả những gì có thể nhìn thấy của trang.

Như vậy, một trang web viết bằng html sẽ có cấu trúc cơ bản như sau:

   
         Phần trình bày nội dung
   

Ngoài phần body còn có phần head, được viết bởi cặp tag . Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một cặp tag nữa, đó là . Giữa là tên của trang web được hiển thị phía trên cùng của menubar. Như vậy một trang web với lúc này sẽ có cấu trúc như sau:

    


    Phần trình bày nội dung

3.Các thẻ cơ bản trong HTML

Một tài liệu HTML được tạo nên từ các cặp thẻ html

• Thẻ được bắt đầu bằng dấu < và kết thúc bằng dấu >
• Tên thẻ nằm giữa cặp dấu <>

Ví dụ:  tức là đang khai báo thẻ a

• Cặp thẻ được tạo nên từ thẻ mở và thẻ đóng

Ví dụ: trong đó là thẻ mở, là thẻ đóng

• Nội dung của thẻ sẽ được nằm giữa thẻ đóng và thẻ mở
• Cũng có một số thẻ chỉ có thẻ mở mà không có thẻ đóng.

Ví dụ:

B. Đoạn văn bản trong html (HTML Paragraphs):

• Nội dung văn bản được thể hiện trong cặp thẻ

Ví dụ: nhập đoạn lệnh bên dưới vào trong cặp thẻ

 Hello, every body !
 My name is Ha. Nice to meet you.

Và kết quả là:

C. Liên kết (HTML Links):

• Ta dùng cặp thẻ để làm công việc liên kết các trang web với nhau
• Thuộc tính của thẻ gồm:

href: qui định địa chỉ mà url trỏ tới

target: qui định liên kết sẽ được mở ra ở đâu

 _blank: cửa sổ mới

 _self: trang hiện tại

Ví dụ: nhập đoạn lệnh bên dưới vào trong cặp thẻ

Go to google page

Và kết quả là : trang google được mở ra trên 1 cửa sổ mới

D. Xuống dòng (HTML Line Breaks):

• Ta dùng thẻ
để xuống dòng trong một đoạn văn bản

Ví dụ:  nhập đoạn lệnh bên dưới vào trong cặp thẻ

Break line 
in 
paragraph

Và kết quả là:

E. HTML Lines (

):

• Ta dùng thẻ

  ---

  để tạo một đường kẻ ngang trong trang HTML

Ví dụ: nhập lệnh bên dưới vào trong cặp thẻ

Và kết quả là:

F. HTML images (Hình ảnh):

• Ta dùng thẻ

  Và kết quả là:

  G. Các thẻ định dạng text (HTML Text Formatting):

  (bold): Chữ In đậm

  (Underline): Chữ gạch chân

  (italic): Chữ in nghiêng

  (Big): Chữ lớn hơn

  (Subscrip) Chỉ số dưới, ví dụ: H2O

  (Superscript): Chỉ số trên, ví dụ: x2y

  In đậm (nhấn mạnh )

  (emphasized): Chữ in nghiêng, Nhấn mạnh hơn

  Ví dụ:

  This text is bold

  This text is underline

  This text is italic

  This text is big text

  H 2 O

  x 2 y

  This text is strong

  This text is emphasized

  Và kết quả là: