Làm quen với html – html cơ bản

Làm quen với html – html cơ bản

Chý ý:  các kiến thức trong tài liệu này không đầy đủ nhất, tuy nhiên sau khi có được những kiến thức này các bạn sẽ dễ dàng tiếp cận với sự đầy đủ.

Yêu cầu: cài đặt phần mềm notepad plus – là phần mềm soạn thạo code đơn giản và hiệu quả nhất cho người mới làm quen với thiết kế web.
Có thể download tại: http://notepad-plus-plus.org/download

  1. HTML là gì?
  • HTML là chữ viết tắt của Hyper Text Markup Language (Ngôn ngữ hiển thị siêu văn bản).
  • Một file HTML là một file text bao gồm những tag nhỏ
  • Những tag hiển thị nói cho trình duyệt biết nó phải hiển thị trang đó như thế nào
  • Một file HTML phải có phần mở rộng là .htm hoặc .html

Nói 1 cách đơn giản html là trung gian giao tiếp giữa văn bản (Chữ viết, ký tự, ký hiệu, hình ảnh..) và trình duyệt (IE, FireFox, Chrome, Safari, Opera …)

  1. Cấu trúc của 1 tài liệu html

Một tài liệu html nằm trong thẻ <html> </html>, chia ra 2 phần chính nằm trong 2 cặp thẻ <head> </head> và <body> </body>

Thẻ <head> là nơi chứa các thẻ tiêu đề, định dạng, từ khóa, đường dẫn đến các file css, jquery khác, …

Thẻ <body> là nơi chứa toàn bộ nội dung của trang web …

 

Để thử nghiệp bạn mở notepad ++

Trên thanh công cụ của notepad trong phần encoding > Encode in UTF-8 (Cái này để tài liệu của bạn không bị lỗi font Tiếng Việt)

Cũng trên thanh công cụ này trong phần Language > H > HTML (tức bạn đã định dạng văn bản này ở dạng html)

Pase đoạn code trên vào văn bản hiện tại và Save lại với tên bất kỳ, ở nơi bất kỳ J) destop đi cho dễ tìm 😀

Tìm file vừa save này mở nó với trình duyệt của bạn và cảm nhận sự đơn giản của html 😛

  1. Các thẻ thường sử dụng trong html
  • Các thẻ heading: Headings là thẻ định dạng đoạn ký tự với các thẻ từ <h1> đến <h6>. <h1> xác định heading lớn nhất. <h6> xác định heading nhỏ nhất (các bạn dùng word sẽ dễ hiểu hơn)

Mình sẽ ko giải thích nhiều, các bạn hãy thử pase đoạn code sau và phần body của file đã làm ở phần 1 rồi save lại và f5(refesh) lại trình duyệt:

 

  • Thẻ paragraphs: <p> </p>

Hãy thử luôn đi nào:

<p> Html mà dễ thế này sao? </p>

  • Thẻ line breaks: <br /> thẻ này dị hơn các thẻ khác nó chỉ có 1 phần như thế, tác dụng thì đúng như tên của nó luôn : xuống dòng 😀

Thử luôn nha, vào ví dụ ban đầu luôn:

Xin chào các bạn,<br /> đây là trang web đầu tiên của <b>Trịnh Tuấn Tài </b>

  • Thẻ Anchor và thuộc tính Href : <a href=”#”> </a> là thẻ để tạo đường liên kết đến một tài liệu khác

Ví dụ luôn vào ví dụ ban đầu nha(ví dụ thứ 2 thêm cho thuộc tính target nha, thử thì hiểu):

 

  • Cấu trúc list danh sách: <ul> <li> </li> </ul>

Thử luôn đê, thử là hiểu, sao phải giải thích nhiều J)

 

  • Thẻ img: <img src=”#” /> là thẻ biểu diễn ảnh:

Thử nhé :

 

Thuộc tính src chỉ đường dẫn của ảnh,(ảnh trong ví dụ mình lấy logo của google) các bạn có thể thử với 1 ảnh trên máy của mình, bạn hãy để 1 ảnh cùng thư mục với file ví dụ đang làm, mình để ở destop cả chẳng hạn, tên ảnh là anh.jpg

 

  • Cấu trúc bảng (html table) – bạn có thể hiểu nó như table trong microsof word vậy :D. Bảng được định dạng bởi thẻ <table>. Một bảng được chia ra làm nhiều hàng với thẻ <tr>, môi hàng được chia ra làm nhiều cột dữ liệu với thẻ <td>, heading trong một bảng được xác định bằng thẻ <th>. Ví dụ:

 

Trong ví dụ trên mình dùng thuộc tính border cho bản, thuộc tính này tạo nên đường viền cho các bạn dễ nhìn ra ví dụ, sau khi nhìn ra rồi bạn có thể xóa thuộc tính đó đi để hiểu công dụng của nó 😀

  • Cấu trúc form: là những thành phần cho phép người dùng có thể điền thông tin như là trường chữ, menu thả xuống, nút radio, … form được xác định bởi thẻ <form> form có thuộc tính chính là action(hành động) và method(phương thức)  2 cái này bạn chưa cần tìm hiểu, nó sẽ được nhắc đến trong các bài sau. Các thành phần của form có cấu trúc: <input type=”kieu_input” name=”ten_input”>. Ví dụ nhé

 

  • Thẻ div: <div> </div> một thẻ cực kỳ quan trọng và được sử dụng rất nhiều trong các tài liệu html. Thẻ div xác định các vùng logic – logical divisions bên trong nội dung của một trang. Nó giúp định dạng, quản lý, sao chép các vùng trong trang web. Nó là công cụ mạnh hỗ trợ cho các Web developers trong việc thiết kế web theo chuẩn của W3C.

Ví dụ:

 

Ví dụ trên thì các bạn không cần phải thử vì nó chưa có ý nghĩa lắm khi bạn chưa css cho nó, nói chung là phần về thẻ div này ở bài sau sẽ hiểu rõ hơn, bạn đọc lướt phần này nha.

 

  • Một số thẻ khác:

– Thẻ <span> </span> Span có thể nhóm một hoặc nhiều khối phần tử

– Thẻ <b> </b> Làm đậm ký tự bên trong

– Thẻ <i> </i> Làm nghiêng ký tự bên trong

– Thẻ <u> </u> Gạch chân ký tự bên trong

– Chú thích <!–Đây là chú thích trong html –>

– Thẻ <hr /> Nó sẽ kẻ 1 dòng kẻ ngang

 

Sau đây là hình ảnh cho trang html của toàn bộ các ví dụ cơ bản ở trên :

Ví dụ cho html

Ví dụ cho html

Like và chia sẻ bài viết này:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.