Nodejs.vn

Nguyễn Hùng Vương

Các kiến thức căn bản về HTML để tạo nên một trang web

HTML CĂN BẢN
PHẦN II :
Như ở phần I lượt bài lần trước chúng ta đã tìm hiểu một số các loại thẻ căn bản và ở lượt bài tiếp theo này chúng ta sẽ đi sâu hơn nữa về lượt bài html căn bản này .

1. Thẻ <img> chèn hình ảnh vào HTML

Thứ nhất ta có hiểu một cách đơn giản rằng thẻ <img> là được sử dụng để đặt một ảnh vào trong tài liệu của HTML

Ví dụ :

        <img src="img_girl.jpg" >

Lưu ý : Để chỉnh ảnh theo ảnh theo kích thước mong muốn của mình thì ta cần phải học lượt bài css sắp tới để có thể hiểu rõ hơn .
2. Thẻ <a> tạo liên kết HTML

Thẻ <a> là loại thẻ được dùng để liên kết một tài liệu nào đó .

Ví dụ :

<a href="https://www.nodemy.vn/">Well come nodemy </a>

=> Khi code như vậy chúng ta nhấn vào sẽ dẫn ta đến một tài liệu hay là một trang web nào đó tùy vào mọi người để link dẫn đến tài liệu .

3. Thẻ ul và ol tạo danh sách HTML

Lưu ý : Bên trong thẻ <ul> và <ul> đều phải có thêm một thẻ <li> các bạn cần phải lưu ý nha .

Thẻ <ul> được dùng để tạo danh sách không có thứ tự .

<ul>
        <li> Hello </li>
        <li> Well come </li>
        <li> Nodemy </li>        
</ul>

Thẻ <ol> được dùng để tạo danh sách có thứ tự .

<ol>
       <li> Hello </li>
       <li> Well come </li>
       <li> Nodemy </li>         
</ol>

=> Ở phần này hai loại thẻ này không khác nhau quá nhiều và chúng ta cũng dễ dàng nhận ra sự khác nhau của chúng .
4. Tạo kiểu bảng trong HTML

Ở trong phần tạo bảng chúng ta sẽ tạo bảng với thẻ <table>

Ví dụ :

   <table border="1">
     <tr>
       <th>Name</th>
       <th>Year of Birth</th> 
       <th>Age</th>    
     </tr>
     <tr>       
       <td>Vương</td>
       <td>2002</td>
       <td>18</td>
     </tr>
     <tr>
       <td>Hùng</td>
       <td>2006</td>    
       <td>14</td>
     </tr>
     <tr>
       <td>Hiệu</td>
       <td>2000</td>
       <td>20</td>
     </tr>
   </table>

Lưu ý : Như trong thẻ <table> ta bắt gặp border="" thì ở đây border là độ dày của khung cái này tùy vào bạn muốn dày hay mỏng thì bạn có thẻ tự điều chỉnh .
5. Thẻ <form> trong HTML

Thẻ <form> được sử dụng khi muốn thu thập một số dữ liệu người dùng ở trang web .

Ví dụ :

<form>
  <label for="fname">Họ và tên :</label><br>
  <input type="text" id="fname" name="fname" value="Nguyễn Hùng Vương"><br>
  <label for="lname"> Age :</label><br>
  <input type="text" id="lname" name="lname" value="18">
</form>

=> Đó là một form cơ bản các bản có thể code theo hoặc tự sửa chữa thêm nhưng mục mà bạn mong muốn .

Dưới đây là các video về HTML căn bản các bản có thể xem và tham khảo thêm :

Tóm lại : Qua hai lượt bài về HTML mình đã tóm tắt lại nhưng nội dung cơ bản nhất về HTML để giúp chúng ta hiểu rõ hơn đồng thời là thức hành để hiểu đúng tác dụng của các loại thẻ ở trong HTMl - Chúng ta sẽ kết thúc kiến thức HTMl căn bản tại đây và hẹn gặp lại các bạn ở trong phần kiến thức tiếp theo liên quan đến CSS

Phần 3 : Coming soon

Nguyễn Hùng Vương

Các kiến thức căn bản về HTML để tạo nên một trang web

HTML CĂN BẢN
PHẦN III :
Nếu như các bạn chưa xem loạt bài phần I và phần II thì chúng ta nên xem lại để hiểu hơn trước khi bước vào lượt bài ngày hôm nay .
1. Thẻ <link> trong HTML

Thẻ <link> được sử dụng để định nghĩa một link tới một tài liệu ngoại vi. Nó được đặt trong khu vực <head> của tài liệu .

Ví dụ :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Project </title>

    <link rel="stylesheet" href="./Display.html">
    
</head>
<body>
    
</body>
</html>

2. Thẻ <audio> trong HTML

Thẻ <audio> được dùng để tạo trình phát nhạc cho trang web .

Ví dụ :

<!DOCTYPE html>
<html>
<body>

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

3. Thẻ <iframe> trong HTML

Thẻ <iframe> thường được dùng để nhúng một trang web nào đó vào trang hiện tại

Ví dụ :

<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials">
</iframe>

</body>
</html>

4. Thẻ <select> và thẻ <option> trong HTML

Tại sao mình lại gộp 2 thẻ này lại với nhau tai vì thẻ <option> được bao bọc bởi thẻ <select> .

Thẻ <select> được sử dụng trong một form để định nghĩa một danh sách lựa chọn.
Thẻ <option> là một tùy chọn trong danh sách chọn lựa (danh sách thả xuống).

Ví dụ :

<!DOCTYPE html>
<html>
<body>

<h1> Thông tin của bạn </h1>

<label for="cars">Thành phố:</label>

<select id="cars">
  <option value="HN">Hà Nội</option>
  <option value="HCM">Hồ Chí Minh</option>
  <option value="ĐN">Đã Nẵng</option>
  <option value="HP">Hải Phòng</option>
</select>
  
</body>
</html>

5. Thẻ <video> trong HTML

Thẻ <video> được dùng để tạo một trình xem phim trên trang web.

Ví dụ :

<!DOCTYPE html>
<html>
<body>
    <video controls>
        <source src="../file/bunny.mp4">
    </video>
</body>
</html>

6. Thẻ <sub> và thẻ <sup> trong HTML

Thẻ <sub> được dùng để tạo một ký tự nhỏ bên dưới ( được sử dụng phổ biến trong hóa học )

Ví dụ :

<p>  H  <sub>  2  </sub>  O  </p>

Thẻ <sup> được dùng để tạo chữ ký nhỏ bên trên ( được sử dụng phổ biến trong toán học )

<p>  a  <sup>  2  </sup> </p>

7. Thẻ <output> trong HTML

Thẻ <output> được dùng để xác định kết quả của phép tính

Ví dụ :

<!DOCTYPE html>
<html>
<body>

<h1>The output element</h1>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>

<p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>

</body>
</html>

7. Thẻ <object> trong HTML

Thẻ **<object> được dùng để nhúng một tài liệu nào đó vào trang web.

<!DOCTYPE html>
<html>
<body>

<h1>The object element</h1>

<object data="snippet.html" width="500" height="200">
</object>
 
</body>
</html>

Dưới đây là toàn bộ video liên quan đến kiến thức về HTML các bạn có thể tham khao thêm :

Phần 4 : Coming soon

Nguyễn Hùng Vương

Các kiến thức căn bản về HTML để tạo nên một trang web .

HTML CĂN BẢN
PHẦN I :

1. HTML là gì ?

HTML được hiểu đơn giản là để tạo ra một trang web ( tất cả các nội dung trên trang web như : văn bản , link , hình ảnh ...chính là nội dung được tạo ra dựa trên các thẻ HTML )

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Trong đó :

Thẻ <html> được gọi thẻ mở đầu của trang HTML
Thẻ <head> được gọi là thẻ chứa các thẻ trong phần đầu của trang
Thẻ <title> được gọi là tiêu đề của trang web
Thẻ <meta> được gọi là để mô tả tổng quát về nội dung trang web
Thẻ <body> được gọi là phần thực hiện nội dung

3. Các loại thẻ trong HTML

Thẻ <h1> đến <h6> là để xác định tiêu đề của một thẻ HTML

Ví dụ :

   <h1> Well come nodemy </h1>  
    <h2> Hello </h2>
    <h3> Well come </h3>
    <h4> Xin chào  </h4>
    <h5> Nodemy </h5>
    <h6> Node.js </h6>

Thẻ <p> là thẻ chứa đoạn văn
Lưu ý : Hai thẻ <p> liên tiếp sẽ xuống dòng

Ví dụ :

    <p>  Hello everybody  </p>

Thẻ <b> là thẻ tạo chữ in đậm

Ví dụ

    <b>  Xin chào  </b>

Thẻ <i> là thẻ tạo chữ in nghiêng

Ví dụ :

    <i>   Happy   </i>

Thẻ <u> là thẻ tạo chữ gạch chân

Ví dụ :

    <u>   Hùng Vương   </u>

Thẻ <span> là thẻ chứa câu văn
Lưu ý : Hai thẻ <span> liên tiếp sẽ nối liền nhau

Ví dụ :

   <span>   Well come   </span>

Lưu ý : Đọc xong các phần bạn hãy dừng lại và code theo và các bạn có thể đặt tên các phần tử bên trong tùy theo ý muốn của mình nha !

( *Hẹn gặp lại các bạn ở lượt bài phần 2 nha * )

Phần 2 : Coming soon

Nguyễn Hùng Vương

Các kiến thức căn bản về HTML để tạo nên một trang web

HTML CĂN BẢN
PHẦN III :
Nếu như các bạn chưa xem loạt bài phần I và phần II thì chúng ta nên xem lại để hiểu hơn trước khi bước vào lượt bài ngày hôm nay .
1. Thẻ <link> trong HTML

Thẻ <link> được sử dụng để định nghĩa một link tới một tài liệu ngoại vi. Nó được đặt trong khu vực <head> của tài liệu .

Ví dụ :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Project </title>

    <link rel="stylesheet" href="./Display.html">
    
</head>
<body>
    
</body>
</html>

2. Thẻ <audio> trong HTML

Thẻ <audio> được dùng để tạo trình phát nhạc cho trang web .

Ví dụ :

<!DOCTYPE html>
<html>
<body>

<h1>The audio element</h1>

<p>Click on the play button to play a sound:</p>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

3. Thẻ <iframe> trong HTML

Thẻ <iframe> thường được dùng để nhúng một trang web nào đó vào trang hiện tại

Ví dụ :

<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials">
</iframe>

</body>
</html>

4. Thẻ <select> và thẻ <option> trong HTML

Tại sao mình lại gộp 2 thẻ này lại với nhau tai vì thẻ <option> được bao bọc bởi thẻ <select> .

Thẻ <select> được sử dụng trong một form để định nghĩa một danh sách lựa chọn.
Thẻ <option> là một tùy chọn trong danh sách chọn lựa (danh sách thả xuống).

Ví dụ :

<!DOCTYPE html>
<html>
<body>

<h1> Thông tin của bạn </h1>

<label for="cars">Thành phố:</label>

<select id="cars">
  <option value="HN">Hà Nội</option>
  <option value="HCM">Hồ Chí Minh</option>
  <option value="ĐN">Đã Nẵng</option>
  <option value="HP">Hải Phòng</option>
</select>
  
</body>
</html>

5. Thẻ <video> trong HTML

Thẻ <video> được dùng để tạo một trình xem phim trên trang web.

Ví dụ :

<!DOCTYPE html>
<html>
<body>
    <video controls>
        <source src="../file/bunny.mp4">
    </video>
</body>
</html>

6. Thẻ <sub> và thẻ <sup> trong HTML

Thẻ <sub> được dùng để tạo một ký tự nhỏ bên dưới ( được sử dụng phổ biến trong hóa học )

Ví dụ :

<p>  H  <sub>  2  </sub>  O  </p>

Thẻ <sup> được dùng để tạo chữ ký nhỏ bên trên ( được sử dụng phổ biến trong toán học )

<p>  a  <sup>  2  </sup> </p>

7. Thẻ <output> trong HTML

Thẻ <output> được dùng để xác định kết quả của phép tính

Ví dụ :

<!DOCTYPE html>
<html>
<body>

<h1>The output element</h1>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>

<p><strong>Note:</strong> The output element is not supported in Edge 12 (or earlier).</p>

</body>
</html>

7. Thẻ <object> trong HTML

Thẻ **<object> được dùng để nhúng một tài liệu nào đó vào trang web.

<!DOCTYPE html>
<html>
<body>

<h1>The object element</h1>

<object data="snippet.html" width="500" height="200">
</object>
 
</body>
</html>

Dưới đây là toàn bộ video liên quan đến kiến thức về HTML các bạn có thể tham khao thêm :

Phần 4 : Coming soon

Nguyễn Hùng Vương

Các kiến thức căn bản về HTML để tạo nên một trang web

HTML CĂN BẢN
PHẦN II :
Như ở phần I lượt bài lần trước chúng ta đã tìm hiểu một số các loại thẻ căn bản và ở lượt bài tiếp theo này chúng ta sẽ đi sâu hơn nữa về lượt bài html căn bản này .

1. Thẻ <img> chèn hình ảnh vào HTML

Thứ nhất ta có hiểu một cách đơn giản rằng thẻ <img> là được sử dụng để đặt một ảnh vào trong tài liệu của HTML

Ví dụ :

        <img src="img_girl.jpg" >

Lưu ý : Để chỉnh ảnh theo ảnh theo kích thước mong muốn của mình thì ta cần phải học lượt bài css sắp tới để có thể hiểu rõ hơn .
2. Thẻ <a> tạo liên kết HTML

Thẻ <a> là loại thẻ được dùng để liên kết một tài liệu nào đó .

Ví dụ :

<a href="https://www.nodemy.vn/">Well come nodemy </a>

=> Khi code như vậy chúng ta nhấn vào sẽ dẫn ta đến một tài liệu hay là một trang web nào đó tùy vào mọi người để link dẫn đến tài liệu .

3. Thẻ ul và ol tạo danh sách HTML

Lưu ý : Bên trong thẻ <ul> và <ul> đều phải có thêm một thẻ <li> các bạn cần phải lưu ý nha .

Thẻ <ul> được dùng để tạo danh sách không có thứ tự .

<ul>
        <li> Hello </li>
        <li> Well come </li>
        <li> Nodemy </li>        
</ul>

Thẻ <ol> được dùng để tạo danh sách có thứ tự .

<ol>
       <li> Hello </li>
       <li> Well come </li>
       <li> Nodemy </li>         
</ol>

=> Ở phần này hai loại thẻ này không khác nhau quá nhiều và chúng ta cũng dễ dàng nhận ra sự khác nhau của chúng .
4. Tạo kiểu bảng trong HTML

Ở trong phần tạo bảng chúng ta sẽ tạo bảng với thẻ <table>

Ví dụ :

   <table border="1">
     <tr>
       <th>Name</th>
       <th>Year of Birth</th> 
       <th>Age</th>    
     </tr>
     <tr>       
       <td>Vương</td>
       <td>2002</td>
       <td>18</td>
     </tr>
     <tr>
       <td>Hùng</td>
       <td>2006</td>    
       <td>14</td>
     </tr>
     <tr>
       <td>Hiệu</td>
       <td>2000</td>
       <td>20</td>
     </tr>
   </table>

Lưu ý : Như trong thẻ <table> ta bắt gặp border="" thì ở đây border là độ dày của khung cái này tùy vào bạn muốn dày hay mỏng thì bạn có thẻ tự điều chỉnh .
5. Thẻ <form> trong HTML

Thẻ <form> được sử dụng khi muốn thu thập một số dữ liệu người dùng ở trang web .

Ví dụ :

<form>
  <label for="fname">Họ và tên :</label><br>
  <input type="text" id="fname" name="fname" value="Nguyễn Hùng Vương"><br>
  <label for="lname"> Age :</label><br>
  <input type="text" id="lname" name="lname" value="18">
</form>

=> Đó là một form cơ bản các bản có thể code theo hoặc tự sửa chữa thêm nhưng mục mà bạn mong muốn .

Dưới đây là các video về HTML căn bản các bản có thể xem và tham khảo thêm :

Tóm lại : Qua hai lượt bài về HTML mình đã tóm tắt lại nhưng nội dung cơ bản nhất về HTML để giúp chúng ta hiểu rõ hơn đồng thời là thức hành để hiểu đúng tác dụng của các loại thẻ ở trong HTMl - Chúng ta sẽ kết thúc kiến thức HTMl căn bản tại đây và hẹn gặp lại các bạn ở trong phần kiến thức tiếp theo liên quan đến CSS

Phần 3 : Coming soon

Nguyễn Hùng Vương

Các kiến thức căn bản về HTML để tạo nên một trang web .

HTML CĂN BẢN
PHẦN I :

1. HTML là gì ?

HTML được hiểu đơn giản là để tạo ra một trang web ( tất cả các nội dung trên trang web như : văn bản , link , hình ảnh ...chính là nội dung được tạo ra dựa trên các thẻ HTML )

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Trong đó :

Thẻ <html> được gọi thẻ mở đầu của trang HTML
Thẻ <head> được gọi là thẻ chứa các thẻ trong phần đầu của trang
Thẻ <title> được gọi là tiêu đề của trang web
Thẻ <meta> được gọi là để mô tả tổng quát về nội dung trang web
Thẻ <body> được gọi là phần thực hiện nội dung

3. Các loại thẻ trong HTML

Thẻ <h1> đến <h6> là để xác định tiêu đề của một thẻ HTML

Ví dụ :

   <h1> Well come nodemy </h1>  
    <h2> Hello </h2>
    <h3> Well come </h3>
    <h4> Xin chào  </h4>
    <h5> Nodemy </h5>
    <h6> Node.js </h6>

Thẻ <p> là thẻ chứa đoạn văn
Lưu ý : Hai thẻ <p> liên tiếp sẽ xuống dòng

Ví dụ :

    <p>  Hello everybody  </p>

Thẻ <b> là thẻ tạo chữ in đậm

Ví dụ

    <b>  Xin chào  </b>

Thẻ <i> là thẻ tạo chữ in nghiêng

Ví dụ :

    <i>   Happy   </i>

Thẻ <u> là thẻ tạo chữ gạch chân

Ví dụ :

    <u>   Hùng Vương   </u>

Thẻ <span> là thẻ chứa câu văn
Lưu ý : Hai thẻ <span> liên tiếp sẽ nối liền nhau

Ví dụ :

   <span>   Well come   </span>

Lưu ý : Đọc xong các phần bạn hãy dừng lại và code theo và các bạn có thể đặt tên các phần tử bên trong tùy theo ý muốn của mình nha !

( *Hẹn gặp lại các bạn ở lượt bài phần 2 nha * )

Phần 2 : Coming soon

Nguyễn Hùng Vương

@Nguyễn Hùng Vương

Best posts made by Nguyễn Hùng Vương

Latest posts made by Nguyễn Hùng Vương