/ / Html & Css / Comment (0)

Html cơ bản, các thẻ hay sử dụng

Đây là bài học đầu tiên mà các bạn thiết kế website đều phải học qua đó chính là HTML, những mã html như là 1 khung hiển thị dữ liệu của website và những mã html có thể tạo ra 1 trang website tĩnh,với những bạn mới làm quen với lập trình website thì các bạn nắm vững khái niệm cũng như những thẻ cơ bản trong html. Dù sử dụng ngôn ngữ lập trình nào đi nữa thì khi muốn hiển thị cho người dùng thấy thì đều phải xuất ra định dạng mã html, lên chúng ta cần nắm vững các thẻ,ý nghĩa và cách sử dụng các thẻ html.Hôm nay mình sẽ giới thiệu qua 1 chút về các thẻ html cơ bản

1. Giới thiệu về html

HTML viết tắt cho HyperText Markup Language, hay là “Ngôn ngữ Đánh dấu Siêu văn bản”.

– HTML không phải là một ngôn ngữ lập trình máy tính mà nó là một ngôn ngữ sử dụng các thẻ html để biểu diễn các trang web.

– Một file HTML làmột file text bao gồm những tag (thẻ) nhỏ bên trong,và được lưu lại với phần mở rộng là .html hoặc .htm

2. Cấu trúc file html

– Thẻ kép html:

<ten_the>Nội dung trong thẻ</ten_the>

Thường thì các thẻ html bắt đầu bằng thẻ mở và kết thúc bằng 1 thẻ đóng,trong ví dụ trên thì <ten_the> là dấu hiệu thẻ mở và </ten_the> là dấu hiệu thẻ đóng

Ví dụ: thẻ liên kết <a href=”http://hocphp.info” >hocphp.info</a>

– Trong 1 số trường hợp đặc biệt thì thẻ html chỉ là những thẻ đơn:

 <ten_the />

Ví dụ: Thẻ xuống dòng <br />
– Cấu trúc 1 file html cơ bản:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
        <title>Bài học về html cơ bản</title>
    </head>
    <body>
         <!-- nội dung hiển thị -->
         <h1>Bài học về html cơ bản tại hocphp.info</h1>
    </body>
</html>

+ Trên trình duyệt sẽ hiển thị nội dung sau:

Học html cơ bản

Học html cơ bản

+ Thẻ <html> là thẻ lớn nhất nhằm bắt đầu cho 1 file html,bên trong đó là các thẻ con khác
+ Cặp <head> là cặp thẻ nằm bên trong cặp thẻ <html>, đây chính là nơi bạn hiển thị tiêu đề của website,các đoạn mã hoặc file css, javascript, các thẻ <meta> <title> và các nội dung bên trong thẻ này sẽ không thể nhìn thấy được
+ Trong đoạn code trên các bạn cần chú ý tới thẻ

<meta http-equiv="Content-Type" content="text/html; charset=utf8">

đây chính là đoạn mã cho phép hiển thị mã utf-8,nếu không có thẻ này chúng ta sẽ không thể hiển thị tiếng Việt được nhé.

+ Cặp thẻ <body> là cặp thẻ nằm bên trong cặp thẻ <html>, đây chính là nơi chúng ta viết ra những nội dung của website, chúng ta có thể nhìn thấy nội dung khi viết trong cặp thẻ này

3. Các thẻ html hay được sử dụng

3.1 Các thẻ headings

Headings được định dạng với các thẻ <h1> đến <h6>. <h1> xác định heading lớn nhất. <h6> xác định heading nhỏ nhất.

    <h1>Đây là heading h1</h1>
    <h2>Đây là heading h2</h2>
    <h3>Đây là heading h3</h3>
    <h4>Đây là heading h4</h4>
    <h5>Đây là heading h5</h5>
    <h6>Đây là heading h6</h6>

– Đoạn code trên sẽ hiển thị trên trình duyệt như sau:

Các thẻ headings trong html

Các thẻ headings trong html

3.2 Các thẻ đoạn văn – paragraphs

Paragraphs được định dạng bởi thẻ cặp thẻ <p></p>

<p>Nội dung đoạn văn</p>
<p>Bài học về html cơ bản tại hocphp.info</p>
 

3.3 Chú thích trong html

– Các dòng chú thích trong mã html các bạn có thể đặt trong đoạn mã sau:

<!– Chú thích trong html –>

3.4 Thẻ liên kết – Anchor

HTML sử dụng thẻ <a> (anchor) để tạo đường liên kết đến một tài liệu khác.Thẻ anchor có thể liên kết với bất cứ trang nào trong cùng website hay ngoài website thông qua thuộc tính href

<a href="http://hocphp.info">Học các thẻ cơ bản của html</a>

3.5 Thẻ hình ảnh

HTML sử dụng thẻ <img /> để hiển thị 1 hình ảnh nào đó lên website thông qua thuộc tính src

<!-- Hiển thị ảnh demo.jpg ra ngoài website,có chiều rộng 200px và chiều cao 100px-->
<img src="demo.jpg" width=''200px height='100px'/>

3.6 Thẻ hiển thị bảng

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>. Một cột dữ liệu có thể bao gồm chữ, hình ảnh, danh sách, đoạn vắn, form và bảng v.v.

<table border="1">
    <tr>
       <td>Cột 1 của dòng 1</td>
        <td>Cột 2 của dòng 1</td>
    </tr>
    <tr>
       <td>Cột 1 của dòng 2</td>
        <td>Cột 2 của dòng 2</td>
    </tr>
 </table>

Với đoạn mã trên sẽ hiển thị ra trình duyệt nội dung sau:

Cột 1 của dòng 1 Cột 2 của dòng 1
Cột 1 của dòng 2 Cột 2 của dòng 2

3.7 Thẻ khối bao nội dung

Với những website ngày trước người ta thường sử dụng thẻ <table> để làm khung giao diện nhưng từ khi css ra đời các nhà thiết kế website dần chuyển sang thiết kế khung giao diện website với thẻ <div> kết hợp với các thuộc tính của css, đây là thẻ chứa 1 khung hiển thị hoặc khối bao nội dung.

<div>Khối nội dung phái trên</div>
<div>Khối nội dung ở giữa</div>
<div>Khối nội dung cuối trang</div>

3.7 Thẻ form

Trong html sử dụng thẻ form để cho phép chúng ta có thể nhập dữ liệu vào,ví dụ như các form đăng ký thành viên,đăng nhập,liên hệ…Bên trong thẻ form là tập hợp các thẻ input, select ,button…để cho phép chúng ta nhập ,lựa chọn dữ liệu:

       <form name='register' action='register.php' method='POST'>
             Tên đăng nhập: <input type="text" name="username">
              <br>
              Mật khẩu: <input type="text" name="password">
              <br>
              Giới tính:
              <!-- thẻ radio cho phép lựa chọn 1 giá trị  -->
             <input type="radio" name="sex" value="male"> Male
             <input type="radio" name="sex" value="female"> Female <br />
              Năm sinh:
              <!-- Thẻ select cho phép lựa chọn giá trị trong 1 danh sach-->
              <select name='year'>
                   <option value='1990'>Sinh năm 1990</option>
                   <option value='1991'>Sinh năm 1991</option>
                   <option value='1992'>Sinh năm 1992</option>
              </select>
              <br />
              Sở thích:
              <!-- thẻ checkbox cho phép lựa chọn nhiều giá trị  -->
             <input type="checkbox" name="sothich" value="Chơi game"> Chơi game
             <input type="checkbox" name="sothich" value="Nghe nhạc"> Nghe nhạc
             <input type="checkbox" name="sothich" value="Code"> Code
             <br />
             <input type="submit" value="Đăng ký">
        </form>

– Đoạn mã trên sẽ hiển thị trên trình duyệt như sau:

Thẻ form trong html

Thẻ form trong html

– Các bạn thấy trong thẻ form có thuộc tính action=’register.php’ đây chính là link xử lý dữ liệu trên server.Còn method=’POST’ đây chính là phương thức gửi dữ liệu có giá trị là POST hoặc GET.Về bài học cơ bản html thì các bạn chưa cần quan tâm tới những phần này.Mình sẽ có bài hướng dẫn các phương thức trong PHP riêng.

3.8 Thẻ tạo danh sách

Sử dụng cặp thẻ <ul> và <li>:

Danh sách không theo thứ tự bắt đầu với thẻ <ul>. Mỗi một mục được bắt đầu với một thẻ <li>.Những dạng menu của website người ta thường hay sử dụng cặp thẻ này.

<ul>
<li>Máy tính</li>
<li>Điện thoại</li>
<li>Điện thoại</li>
</ul>

Với đoạn mã trên sẽ hiển thị ra trình duyệt như sau:

  • Máy tính
  • Điện thoại
  • Điện thoại

Sử dụng cặp thẻ <ol> và <li>:

Một danh sách theo thứ tự bắt đầu với thẻ <ol>. Mỗi mục được bắt đầu với thẻ <li>.

<ol>
<li>Máy tính</li>
<li>Điện thoại</li>
<li>Điện thoại</li>
</ol>

Với đoạn mã trên sẽ hiển thị ra trình duyệt như sau:

  1. Máy tính
  2. Điện thoại
  3. Điện thoại

3.9 Thẻ html hay sử dụng khác

   <b>Thẻ in đậm văn bản</b>
   <i>Thẻ in nghiêng</i>
   <u>Thẻ gạch nghiêng</u>
   <br /> Thẻ xuống dòng
   <span>Noi dung span </span>

4,0 Kết thúc bài viết
Trong bài này mình đã hướng dẫn cho các bạn 1 vài thẻ hay sử dụng trong html khi thiết kế website,ngoài ra thì trong html còn rất nhiều thẻ khác các bạn có thể tự tìm hiểu thêm.Qua bài này các bạn có thể tự xây dựng 1 website tĩnh bằng các đoạn mã html của mình.Bài sau mình sẽ giới thiệu cho các bạn các thuộc tính quan trọng trong html.



31/08/2014
Tags:
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL