Hoclaptrinh.net. Theme images by Storman. Powered by Blogger.

Instagram posts

About us

8/18/15

[HTML] Bài 3: Thẻ HTML và thuộc tính của thẻ

- No comments

Trước khi tìm hiểu chi tiết về các thẻ HTML và ứng dụng của nó. Chúng ta sẽ đi tìm hiểu về cấu trúc, thuộc tinh của một thẻ HTML.

1. Thẻ HTML
1.1. Khai báo thẻ HTML
Thẻ HTML được bắt đầu với thẻ mở, kết thúc với thẻ đóng cùng tên, phần nội dung nằm ở giữa 2 thẻ
<tên thẻ>Nội dung cần trình bày</tên thẻ>
Ví dụ: <p>Khoa CNTT - Đại học Thành Đô</p>

Thẻ mở
Nội dung thẻ
Thẻ đóng
<h1>
Hello World !
</h1>
<p>
Khoa CNTT - Đại học Thành Đô
</p>
<br>



1.2. Thẻ HTML lồng nhau
<!DOCTYPE html>
<html>
<body>
<h1>Xin chào các bạn</h1>
<p>Khoa CNTT - Đại học Thành Đô</p>
</body>
</html>
Giải thích ý nghĩa các thẻ HTML:
- Thẻ <html> định nghĩa sử dụng html trong toàn trang, thẻ mở <html>, thẻ đóng </html>. Bên trong chứa toàn bộ các thẻ HTML khác.
- Thẻ <body> chứa nội dung chính của trang HTML. Thẻ body có thẻ mở <body> và thẻ đóng </body>.
- Thẻ <h1> xác định kích thước tiêu đề của văn bản
- Thẻ <p> chứa nội dung của từng đoạn văn bản.
1.3. Thẻ HTML trống
Các thẻ HTML không chứa nội dung được gọi là thẻ HTML trống
Ví dụ: Thẻ <br> không chứa nội dung. Thẻ này có chức năng xuống dòng, khi viết văn bản
Thông thường, hay sử dụng thẻ <br> với một thẻ như sau: <br />

2. Thuộc tính của thẻ HTML
- Các thẻ HTML có thể có hoặc không có thuộc tính
- Các thuộc tính cung cấp các thông tin chi tiết của thẻ.
- Các thuộc tính thường được định nghĩa ở trong thẻ mở của cặp thẻ HTML
- Thuộc tính có một tên và đi kèm một giá trị xác định cụ thể: name = value;
Cú pháp: <tên thẻ thuộc tính 1=giá trị 1 thuộc tính 2=giá trị 2> Nội dung văn bản</tên thẻ>
Ví dụ:
<img src="hienminh.jpg/" alt="Learn Design Web">

2.1. Một số ví dụ về thẻ HTML và thuộc tính:
- Thẻ html và thuộc tính lang: Khai báo ngôn ngữ sử dụng trong trang HTML
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>Thiết kế website</h1>
<p>Khoa CNTT - Đại học Thành Đô</p>
</body>
</html>
- Thẻ a và thuộc tính href: Khai báo liên kết giữa các trang web
<a href="http://minhhienict.blogspot.com/">This is a link</a>
- Thẻ img và thuộc tính alt: Dùng để hiển thị một ảnh và ghi chú về ảnh đó khi di chuột lên ảnh.
<img src="minhhien.jpg/" alt="Học lập trình" width="100" height="90">

2.2. Một số thuộc tính thường dùng trong HTML
Thuộc tính
Mô tả
alt
Chỉ định một văn bản thay thế cho hình ảnh
disable
Chỉ định vô hiệu hóa một đối tượng điều khiển
href
Chỉ định một đường dẫn liên kết
id
Chỉ định một định danh duy nhất cho một thẻ
src
Chỉ định một đường dẫn cho một ảnh

[HTML] Bài 2: Xây dựng trang HTML với Notepad

- No comments
Trong Bài 1: Tổng quan về HTML, tôi đã giới thiệu tới các bạn kiến thức tổng quan về HTML, bao gồm khái niệm HTML, cấu trúc trang HTML và các trình duyệt để hiển thị trang. Trong bài này, tôi tiếp tục giới thiệu tới các bạn một số công cụ dùng để biên soạn trang web.

Xây dựng trang HTML sử dụng NotePad
HTML có thể được soạn thảo sử dụng các công cụ chuyên nghiệp như:
- Microsoft WebMatrix
- Sublime Text
- Macromedia Dreamweaver
- Microsoft Fontpage
Tuy nhiên, để học các thẻ HTML một cách cơ bản, bạn nên sử dụng một công cụ soạn thảo văn bản như Notepad. Để sử dụng Notepad trong soạn thảo, chạy các thẻ HTML, các bạn thực hiện theo các bước sau:
Bước 1: Mở Notepad
- Để mở Notepad, trong Windows 7. Click Start (góc dưới bên trái màn hình) -> All Programs -> Accessories -> Notepad
- Để mở Notepad trong Windows 8. Mở Start Screen, gõ Notepad
- Để mở Notepad trong Windows 10, các bạn làm như sau:

Bước 2: Viết các thẻ HTML sau trong Notepad:
<!DOCTYPE html>
<html>
<body>

     <h1>Cùng học lập trình với hien minh</h1>     
     <p>Chào mừng các bạn đến với trang http://minhhienict.blogspot.com/</p>
</body>
</html>

Bước 3: Lưu trang với định dạng HTML
- Chọn menu File -> Save As

- Gõ tên trang web cần lưu vào mục File name: Ở đây, tôi chọn tên index.html. Bạn có thể chọn tên khác tùy ý.
Trong mục Encoding: Lựa chọn UTF-8 để trang web hiển thị tốt với font chữ Unicode. Nhấn Save để lưu trang web lại.


Bước 4: Hiển thị trang HTML trên trình duyệt
Click đúp vào file index.html bạn vừa tạo ra, nội dung trang web được hiển thị trên trình duyệt


8/17/15

[HTML] Bài 1: Tổng quan về HTML

- No comments
1. HTML là gì ?
HTML là ngôn ngữ đánh dấu cho các văn bản web
- HTML được viết tắt của từ Hyper Text Markup Language (ngôn ngữ đánh dấu siêu văn bản)
- Ngôn ngữ đánh dấu bao gồm một tập các thẻ đánh dấu
- Văn bản HTML được biểu diễn bởi các thẻ HTML
- Mỗi thẻ HTML mô tả các nội dung văn bản khác nhau
2. Ví dụ HTML
<html>
<head>
        <title>Tiêu đề trang</title>                <!--Thẻ title mô tả tiêu đề của trang web-->
</head>
<body>
       <h1>Dòng đầu tiên của trang</h1>     <!--Thẻ H1 định dạng cỡ chữ văn bản-->
       <p>Đoạn văn bản đầu tiên</p>           <!--Thẻ p định dạng đoạn văn bản-->
</body>
</html>
3. Thẻ HTML
Các thẻ HTML hay còn gọi là từ khóa (keywords) được bao quanh bởi cặp dấu <>
Cú pháp: <thẻ mở>Nội dung của thẻ</thẻ đóng>
Ví dụ:
<b>Xin chào các bạn</b>
<p>Đoạn văn mô tả</p>
Lưu ý:
- Các thẻ HTML thường có 2 thẻ. Một thẻ mở <tên thẻ> và một thẻ đóng </tên thẻ>
- Một số thẻ không cần thẻ mở.
4. Trình duyệt web
- Trình duyệt web được sử dụng để đọc các văn bản HTML và hiển thị chúng tới người dùng
- Một số trình duyệt web phổ biến:
   + Google Chrome
   + Microsoft Edge
   + FireFox
   + Safari
   + Opera.
- Trình duyệt web không hiển thị các thẻ HTML, nhưng người dùng vẫn có thể tùy biến để hiển thị các nội dung bất kỳ nếu muốn.

5. Cấu trúc của một trang HTML
Cấu trúc một trang HTML bao gồm các phần:

- Thẻ HTML: Là cặp thẻ bao ngoài cùng, nó chứa tất cả các thẻ HTML khác bên trong và giúp cho trình duyệt web nhận biết.
- Thẻ head: Chứa các thẻ khai báo, phần đầu của trang, bao gồm các thẻ <meta> và khai báo các đoạn mã khác.
- Thẻ title: Tiêu đề của trang.
- Thẻ body: Phần nội dung của trang. Đây là phần quan trọng nhất. Chỉ những nội dung nằm trong cặp thẻ <body> mới hiển thị lên trình duyệt web
- Thẻ h1: Định dạng kích cỡ của văn bản.
- Thẻ p: Chứa nội dung của các đoạn văn bản.
6. Các phiên bản HTML