Hoclaptrinh24

8/28/15

[HTML] Bài 7: Thẻ định dạng đoạn văn bản (P - Paragraphs)

3:41 PM - No comments

Định dạng đoạn văn (paragraphs) luôn là một vấn đề quan trọng trong bất kỳ tài liệu, văn bản nào. Để hiểu và vận dụng thành thạo thẻ <p> trong HTML không phải vấn đề quá khó khăn. Trong bài học này, các bạn sẽ tìm hiểu cách sử dụng thẻ <p> và kết hợp với một số thẻ khác để tăng hiệu quả trình bày của đoạn văn.

7.1. Thẻ P: Định nghĩa một đoạn văn bản
Cú pháp: <p>Đoạn văn cần định dạng</p>
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Đoạn văn thứ 1</p>
<p>Đoạn văn thứ 2</p>
</body>
</html>

Kết quả:

7.2. Thẻ <p> tự động loại trừ ký tự cách và xuống dòng.

Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>
Đây là một đoạn văn
chứa rất nhiều ký tự cách, xuống dòng
trong mã nguồn HTML, nhưng các trình
duyệt web vẫn hiển thị đoạn trên cùng
một dòng
</p>
<p>
Đây là một đoạn văn
chứa rất nhiều ký tự cách,
xuống dòng trong mã nguồn HTML
, nhưng các trình duyệt web vẫn hiển
thị đoạn trên cùng
một dòng
</p>
</body>
</html>
Kết quả:

7.3. Sử dụng thẻ <br> để ngắt dòng trong một đoạn văn
Ví dụ 3:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Đây là <br>một đoạn<br>văn được viết ngắt dòng</p>
</body>
</html>
Kết quả:

7.4. Vấn đề gặp phải khi viết các dòng của một đoạn thơ: Nội dung các dòng đó sẽ nằm trên cùng một dòng, cho dù bạn có viết xuống dòng đi chăng nữa.
Ví dụ 4:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Đoạn thơ này sẽ được hiển thị trên một dòng:</p>
<p>
Anh đợi em về ăn cơm.

Trăng đã lên rồi, trăng sáng.

Mảnh ngọc trên cây hoàng lan.

Chắc thấy em trên đường vắng.
</p>
</body>
</html>
Kết quả:

7.5. Sử dụng thẻ <pre> trong đoạn văn <p> để soạn thảo khổ thơ theo ý muốn
Ví dụ 5:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p>Thẻ pre chấp nhận các khoảng trống và ký tự xuống dòng</p>
<pre>
Anh thương em khi ngủ

Phong thái rất hồn nhiên.

Em ngủ như trẻ nhỏ

Ngon say một giấc liền.
</pre>
</body>
</html>
Kết quả:

8/25/15

[HTML] Bài 6: Thẻ hình ảnh (IMG)

Thiết kế Web

1:41 PM - No comments

Trong nội dung bài trước, chúng ta đã tìm hiểu một số thẻ HTML căn bản. Trong bài 6, các bạn sẽ tìm hiểu thẻ làm việc với hình ảnh và âm thanh. Đây là những đối tượng hiển thị chủ yếu của trang web.

6.1. Thẻ IMG: Dùng để chèn hình ảnh vào trang web
Cú pháp:
<img src="url" alt="text" width="value" height="value" border="value" align="value">
Trong đó:
- src: xác định đường dẫn tới tập tin ảnh cần tải lên, để đường dẫn tương đối hoặc tuyệt đối
- alt: chứa nội dung văn bản thay thế cho hình ảnh khi hình không load về được, nếu load về được thì sẽ xuất hiện nội dung trong textbox mỗi khi người dùng đưa chuột tới hình.
- width: xác định chiều rộng của ảnh.
- height: xác định chiều cao của ảnh.
- border: xác định đường viền của ảnh.
- align: xác định căn lề của ảnh so với văn bản.
Ví dụ 1: sử dụng thuộc tính style
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<img src="html.png" alt="HTML Icon" style="width:128px;height:128px;">
</body>
</html>
Kết quả:

Ví dụ 2: sử dụng thuộc tính width và height
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<img src="html.png" alt="HTML Icon" width="228" height="228"">
</body>

</html>
Kết quả:

Ví dụ 3: so sánh thuộc tính style và with, height
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<p>Nên sử dụng thuộc tính style (bao gồm thuộc tính width và height), bởi vì ảnh sẽ không bị vỡ trong các trường hợp kích thước ảnh gốc nhỏ hơn kích thước mong muốn hiển thị
</p>
<img src="html.png" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html.png" alt="HTML5 Icon" width="128" height="128">
</body>

</html>
Kết quả:

Ví dụ 4: sử dụng đường dẫn ảnh từ một thư mục khác
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="/images/html.png" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="http://minhhienict.blogspot.com/images/html_demo.png" alt="HTML Demo">
</body>

</html>
Kết quả:

6.2. Dùng ảnh làm liên kết: Có thể dùng ảnh làm liên kết đến một trang khác
Cú pháp:
<a href="Địa chỉ trang liên kết">
<img src="đường dẫn tới ảnh" alt="nội dung thay thế">Nhãn
</a>
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<a href="Sanpham.html">
<img src="sanpham.gif" alt="Sản phẩm" style="width:42px;height:42px;border:0;">
</a>
</body>
</html>
6.3. Bản đồ ảnh
Cú pháp:
<IMG UseMap=”Label”>
<Map Name=”Label”>
<Area Shape= “type” coords=”x1,y1,x2,y2, …” href=”URL”>
</Map>

Trong đó:

- Label: tên của bản đồ ảnh
- Type: hình dạng của các vùng trên ảnh, gồm các loại:
+ Rect: Vùng hình chữ nhật
+ Circle: Vùng hình tròn
+ Poly: Vùng hình đa giác
- Coords: toạ độ các đỉnhcủa hình
+ Rect: (x1, y1, x2, y2) là toạ độ 2 đỉnh chéo của vùng hình CN
+ Circle: (x, y, r) lần lượt là toạ độ tâm và bán kính của vùng hình tròn Poly: (x1, y1, x2, y2, x3, y3, …) là các đỉnh của vùng hình đa giác
Ví dụ:
<html>
<head><title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<img src="../image/Map.jpg" width="150" height="150" border="0" usemap="#Map1">
<map name="Map1">
<area shape="rect" coords="73,3,149,66" href="B1.htm">
<area shape="poly" coords="152,81,71,75,62,109,97,123" href="B3.htm">
<area shape="circle" coords="37,32,27" href="B2.htm">
</map>
</body>
</html>

8/24/15

[HTML] Bài 5: Một số thẻ HTML căn bản (phần 2)

Thiết kế Web

1:55 PM - No comments

Trong nội dung bài trước, chúng ta đã tìm hiểu một số thẻ HTML căn bản. Trong bài 5, các bạn sẽ tiếp tục bổ sung thêm 2 thẻ Font, Body. Đây là các thẻ quan trọng và được sử dụng rất nhiều trong thiết kế các trang website.

5.1. Thẻ FONT: Dùng định dạng Font chữ cho văn bản web

- Nếu muốn định dạng Font chữ cho cả tài liệu thì đặt thẻ <Font> trong phần thẻ <Body>

- Nếu muốn định dạng từng phần hoặc từng từ thì đặt tại vị trí muốn định dạng

Cú pháp:

<FONT face=”fontName1, fontName2, fontName3” size=”value” color=”rrggbb”>

Nội dung hiển thị

</FONT>

Ví dụ 1:

<!DOCTYPE html>

<html>

<head>

<title>http://minhhienict.blogspot.com/</title>

</head>

<body>

<FONT SIZE=5 COLOR=RED FACE=Arial>Information Technology Department</FONT>

<P>Đây là <FONT COLOR=BLUE SIZE = 6> ví dụ</FONT>thẻ FONT

</body>

</html>

Kết quả:

Ví dụ 2:

<!DOCTYPE html>

<html>

<head>

<title>http://minhhienict.blogspot.com/</title>

</head>

<body>

<font face="verdana" color="green">Ví dụ thẻ Font kết hợp font chữ verdana</font>

</body>

</html>

Kết quả:

5.2. Thẻ BODY: Phần chính chứa nội dung của trang web

Cú pháp:

<BODY>

Nội dung chính của trang web

</BODY>

Thuộc tính của thẻ BODY:

- BgColor: thiết lập màu nền của trang.
- Text: thiết lập màu chữ.
- Link: màu của siêu liên kết.
- Vlink: màu của siêu liên kết đã xem qua.
- Background: dùng load một hình làm nền cho trang.
- LeftMargin: Canh lề trái TopMargin: Canh lề trên của trang.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<title>http://minhhienict.blogspot.com/</title>

</head>

<FONT COLOR = "WHITE" SIZE="9">Welcome to http://minhhienict.blogspot.com</FONT>

</body>

</html>

Kết quả:

8/20/15

[HTML] Bài 4: Một số thẻ HTML căn bản (phần 1)

Thiết kế Web

8:25 AM - No comments

Trong nội dung bài trước, chúng ta đã tìm hiểu về cấu trúc thẻ HTML và các thuộc tính của thẻ. Bài hôm nay, các bạn sẽ tìm hiểu một số thẻ HTML căn bản, và ứng dụng trong việc thiết kế các trang web đơn giản

4.1. Thẻ Title: hiển thị nội dung tiêu đề của trang web trên thanh tiêu đề của trình duyệt.
Cú pháp:
<title>Nội dung cần hiển thị trên thanh tiêu đề</title>
Mã HTML:
<!DOCTYPE html>
<html>
<head>
<title>Welcomto http://minhhienict.blogspot.com/</title>
</head>
<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>
Kết quả:

4.2. Thẻ Hn: tạo header, gồm 6 cấp header, được đặt trong phần BODY
Cú pháp:

<Hn ALIGN= “Direction”> Nội dung của Header </Hn>

Trong đó:

- n thuộc các giá trị nguyên từ 1 đến 6

- Direction: gồm các giá trị left, right, center, dùng để canh lề cho header, mặc định là canh trái

Mã HTML:

<!DOCTYPE html>

<html>

<head>

<title>http://minhhienict.blogspot.com/</title>

</head>

<body>

<p>Học lập trình tại http://minhhienict.blogspot.com/</p>

<h1>Tiêu đề 1</h1>

<h2>Tiêu đề 2</h2>

<h3>Tiêu đề 3</h3>

<h4>Tiêu đề 4</h4>

<h5>Tiêu đề 5</h5>

<h6>Tiêu đề 6</h6>

</body>

</html>

Kết quả:

4.3. Thẻ BR: ngắt dòng tại vị trí của thẻ

Mã HTML:

<!DOCTYPE html>

<html>

<head>

<title>http://minhhienict.blogspot.com/</title>

</head>

<body>

<p>

Anh thương em khi ngủ<br>

Phong thái rất hồn nhiên.<br>

Em ngủ như trẻ nhỏ<br>

Ngon say một giấc liền.<br><br>

Tay em thả xuôi xuôi<br>

Như bơi vào cõi mộng<br>

Mắt em khép dài dài<br>

Dưới trán em lồng lộng.<br>

</p>

</body>

</html>

Kết quả:

4.4. Thẻ HR: Dùng để kẻ đường ngang trang, không có thẻ đóng

Cú pháp:

Trong đó:

- Direction: hướng gồm các giá trị: left, right, center.

- Width: độ dài đường kẻ, tính bằng pixel hoặc tỉ lệ %

- Size: độ dày của đường kẻ, tình bằng pixel

- Color: màu đường kẻ, dùng tên màu hoặc mã màu theo hexa.

Mã HTML:

<!DOCTYPE html>

<html>

<head>

<title>http://minhhienict.blogspot.com/</title>

</head>

<body>

<H1>http://minhhienict.blogspot.com/</H1>

</body>

</html>

Kết quả:

8/18/15

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

Thiết kế Web

1:43 PM - 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

Thiết kế Web

8:07 AM - 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

Thiết kế Web

2:02 PM - 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> 
</head>
<body>
<h1>Dòng đầu tiên của trang</h1> 
<p>Đoạn văn bản đầu tiên</p> 
</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

Hoclaptrinh24

Category

Instagram posts

About us

8/28/15

[HTML] Bài 7: Thẻ định dạng đoạn văn bản (P - Paragraphs)

8/25/15

[HTML] Bài 6: Thẻ hình ảnh (IMG)

8/24/15

[HTML] Bài 5: Một số thẻ HTML căn bản (phần 2)

8/20/15

[HTML] Bài 4: Một số thẻ HTML căn bản (phần 1)

8/18/15

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

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

8/17/15

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

Theo dõi bài viết mới nhất

Bài viết mới

Find Me on Facebook

Bài viết xem nhiều nhất

Lịch sử bài viết

Labels