Labels

Season 6: HTML Tutorial


I. HTML Block and Inline Elements (Khối và dòng)


Mỗi phần tử HTML có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị mặc định cho hầu hết các phần tử là khối hoặc dòng nội tuyến
1. Block-level Elements

Một khối luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn. Ví dụ như thẻ được dùng phổ biến là <div>. Các phần tử cấp khối của HTML


<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<output>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>


<!DOCTYPE html>
<html>
<body>

<div>Hello</div>
<div>World</div>

<p>The DIV element is a block element, and will start on a new line.</p>

</body>
</html>
2. Inline Elements

Một phần tử nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm tối đa chiều rộng nếu cần Các thành phần nội tuyến trong HTML

<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>


<!DOCTYPE html>
<html>
<body>

<span>Hello</span>
<span>World</span>

<p>The SPAN element is an inline element, and will not start on a new line.</p>

</body>
</html>
3. Phần tử <div>

Phần tử <div> thường được sử dụng như một vùng chứa cho các phần tử HTML khác.

Các <div> không yêu cầu các thuộc tính, nhưng chúng thường được đặt id hoặc class để chèn css cho các thuộc tính bên trong
<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
4. Phần tử <span>

Tương tự như <div> nhưng do là phần tử nội tuyến dòng nên span có thể được dùng ở một số trường hợp cần thiết không cần chiếm trọng không gian khối
<h1>My <span style="color:red">Important</span> Heading</h1>

II. HTML The class Attribute


1. Using The class Attribute

Class trong HTML rất quan trọng, các phần tử chung 1 class khi sử dụng css sẽ có style giống nhau, bên cạnh đó class cũng được sử dụng trong javascript và jquery. Gọi class trong css bằng dấu .

Cách dùng class khi viết CSS
<style>
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
} 
</style>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Cách dùng class khi viết javascript
<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>
2. Multiple Classes


Một phần tử có thế có nhiều class bằng việc bạn thêm dấu cách. 
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
3. Cùng class và khác tags

Không sao cả, chúng vẫn cùng 1 style
<h2 class="city">Paris</h2>
<div class="city">Paris is the capital of France</div>

III. HTML The id Attribute


1. Using The id Attribute

ID dùng để đặt định danh cho phần tử, dùng trong viết code css hoặc javascript, jquery. Khác với class, id chỉ dùng cho một phần tử duy nhất và nó là duy nhất. Gọi id trong code css bằng dấu #
<style>
#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
} 
</style>

<h1 id="myHeader">My Header</h1>

  • Thuộc tính id có thể được sử dụng trên bất kỳ phần tử HTML nào . 
  • Giá trị id phân biệt chữ hoa chữ thường.
  • Giá trị id phải chứa ít nhất một ký tự và không được chứa khoảng trắng (tab, ...).

Bạn có thể thấy được sự khác biệt giữa class và id qua ví dụ sau
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center;
}

/* Style all elements with the class name "city" */
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
} 
</style>
</head>
<body>

<h2>Difference Between Class and ID</h2>
<p>An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.</p>

<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

2. Sử dụng id trong javascript
<script>
function displayResult() {
    document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
3. Bookmarks with ID and Links
Vấn đề này đã được trình bày ở phần HTML Links

IV. HTML Iframes


Thẻ iframe được sẻ dụng để hiển thị 1 trang web trong 1 trang web khác. Theo cấu trúc <iframe src="URL"></iframe>. Url của trang web sẽ được đặt trong src. Ngoài ra bạn có thể thêm các thuộc tính sau cho iframe như

Đặt độ rộng và chiều cao
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"></iframe>
Xóa viền khung
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
Chèn target cho link
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="https://hung1001.github.io/" target="iframe_a">hung1001</a></p>

V. HTML JavaScript


1.The HTML <script> Tag

Chỉ có HTML và CSS thì trang web của bạn chỉ là trang tĩnh, javascript giúp trang web có tương tác với người dùng. Javascript được khai báo bằng cặp thẻ <script> đặt trong thẻ <head> hoặc thẻ <body> hoặc có thể gọi từ nguồn khác qua thuộc tính src

<!DOCTYPE html>
<html>
<body>

<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script> 

</body>
</html>
JS có thể thay đổi nội dung
<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>
function myFunction() { 
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

</body>
</html>

JS có thể thay đổi css
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
Chi tiết hơn đến mục học js ta sẽ tìm hiểu thêm

2. Thẻ <noscript>

Được sử dụng để cung cấp một nội dung thay thế khi người dùng vô hiệu hóa javascript trong trình duyệt của họ hoặc có một trình duyệt không hỗ trợ client-side script

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>
Đón đọc các bài viết tiếp theo...
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

    1. ủa xài tên miền này à, lúc ko truy cập đc tên miền kia tui tưởng ông nghĩ chơi Blog rồi nên huy LK, bây giờ vô tình vô lại mới thấy, treo LK lại rồi nha. :)

      ReplyDelete
      Replies
      1. Ok, dùng hàng lậu nên bị block mất cái domain ngon rồi |:8

        Delete