HTML CSS | Hướng dẫn học nhanh và hiệu quả

0
504

Trong loạt bài viết này mình sẽ viết về HTML CSS, tất nhiên là cái này cũng nhiều người viết rồi cơ mà mình thấy hơi dài. Điều đó đi ngược lại với nhẫn đạo của mình là “nhanh và gọn” :D. Bạn sẽ nhận được gì sau khi xem hết loạt bài viết này của mình ? Bạn sẽ tự tay viết ra giao diện của những trang web như facebook, youtube, google … Một khi đã viết được những trang này thì trang nào cũng viết được hết :v. Nhớ là viết ra giao diện thôi nha hihi, mình xin được bắt đầu bài viết.

html css

HTML CSS là gì ?

Mình sẽ không trình bày khái niệm đã có ở wiki nha : HTML hyper text markup link abc xyz …

Theo mình đã lập trình web hoặc thiết kế web thì phải có 2 thằng này, nếu ta xem một web site là một người thì HTML là khung xương  CSS sẽ là da thịt, áo quần, trang sức bên ngoài. Nếu chỉ có khung xương thì nhìn xấu vãi đúng không :D. CSS sẽ làm cho trang web của chúng ta gợi cảm hơn. Ví dụ có thể bạn không đẹp trai cao to nhưng bạn mang trên người vài cái nhẫn kim cương, ok bạn auto đẹp trai :D. Tóm lại HTML là cốt lõi của một trang web còn CSS sẽ phân chia bố cục làm cho web site nhìn bắt mắt hơn.

Mình xin 5 phút quảng cáo nha =))

Học HTML CSS như thế nào ?

Một trang web được tạo nên bởi các thẻ html , thì học html là học các thẻ html và chức năng của từng thẻ thôi. Thẻ html thì nhiều lắm nhưng chúng ta chỉ cần học tầm 50 thẻ là có thể tung hoành ngang dọc rồi :D. Ta có thể hiểu mỗi thẻ là một lệnh cũng được. Còn CSS chúng ta sẽ học tầm 100 thuộc tính.

Okê học luôn ! trong bài này mình sẽ hướng dẫn các bạn tầm 15 thẻ.

Phần mềm sử dụng : Notepad của window

Trước tiên chúng ta cứ sử dụng cái này lí do là gõ nhiều quen tay :v

Mình sẽ để chú thích chức năng của mỗi thẻ ở phía dưới

Các thẻ html cơ bản:

Chú ý: thẻ HTML được chia làm 2 loại :

  1. thẻ đóng (block) 
  2. thẻ mở (inline) 

Cái này sẽ liên quan đến CSS là nhiều nên mình sẽ nói rõ về nó ở bài viết sau, ở đây mình chỉ đề cập đến cách phân biệt 2 loại thẻ này.

Thẻ đóng: là thẻ sẽ có thẻ cùng tên nhưng có thêm dấu / ấy ví dụ <head> </head>

<!DOCTYPE html> <html> : Cho trình duyệt biết đây là tài liệu HTML

Chia tài liệu HTML thành 2 phần :

  1. Các thẻ nằm trong thẻ <head>
  2. Các thẻ nằm trong thẻ <body>

<head>: là một vùng chứa cho tất cả các phần tử đầu, như ví dụ ở trên thì nó chứa thẻ <meta> và title , thằng này chứa tầm 5 thẻ thôi.

<body>: chứa tất cả nội dung của trang web , chứa hầu hết các thẻ khác trừ 5 thẻ mà thằng head chứa.

Trước mắt chúng ta cứ tìm hiểu các thẻ nằm trong body nha, mà hầu hết các thẻ nằm trong thằng này mà.

Thẻ tiêu đề : <h1> <h2> … <h6>  giống heading trong Microsoft Word ấy thì nó là heading tiêu đề của văn bản kích thước bé dần từ 1 đến 6

Thẻ text : <i><u> <b><strong> <u> <span>
Thẻ ảnh : <img src=”nguồn” alt=”văn bản thay thế ” width = “chiều rộng” height = “chiều cao”>
Thẻ link : <a href=”đường dẫn”>Text</a>

Thực Hành

Các bạn cứ gõ lại cái ví dụ của mình nha gõ xong thì ấn CTRL S để lưu file tên file có đuôi .html nhé. Sau khi lưu xong thì mở nó ra bằng cách chuột phải vào file chọn openwith chọn trình duyệt muốn mở. Khuyển khích là google chrome để mở file lên. Xong thì cứ test các thẻ, test đến khi nào nhớ thì thôi :D. Hôm nay đến đây thôi gần 1/2 chặng đường chinh phục HTML rồi đấy. Nó chỉ thế thôi mà :D. Mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.

avatar
  Subscribe  
Notify of