1. HTML

HTML(Hyper Text Markup Language) một ngôn ngữ để quy định cách hiển thị thông tin trong
trang web. HTML gồm nhiều lệnh, mỗi lệnh gọi là 1 tag. Mỗi tag quy định một cách thức hiển thị
dữ liệu trong trang web. Ví dụ như: chữ đậm, chữ nghiêng, màu chữ … Người xem trang web
không thấy các tag mà chỉ thấy các dữ liệu được định dạng bởi các tag. Nói đơn giản : HTML Là
1 ngôn ngữ dùng để tạo ra các trang web.
Các tag cùng với dữ liệu trong đó được lưu trong 1 file text, gọi là trang web. File này thường có
tên mở rộng là .html hoặc .htm.
Ví dụ: Nếu bạn gõ như sau khi tạo trang web:

Họ tên: <b>Nguyễn Văn A</b><br>
Địa chỉ: <u><i>01 Lê Duẩn</i></u>

thì kết quả hiện trong Browser sẽ thế này:

Tên tag bạn nên viết bằng chữ thường, đặt trong 2 dấu <> . Tag thường có mở và đóng, một số tag
chỉ có mở.

2. Cấu trúc của một trang web

– Một trang web thường có mở đầu và kết thúc bởi tag <html>
– Tag <head> chứa những thông tin để quản lý và hoạt động nội tại bên trong trang web, không
hiện ra cho user xem.
– Tag <title> là tiêu đề của trang web, bạo giờ cũng nằm trong tag <head>.
– Tag <body> chứa dữ liệu hiện ra trong trang web cho user xem.

3. Soạn thảo trang web

Mở Notepad++ và gõ nội dung sau.

<html>
<head>
<title>Trang web cá nhân</title> <!-- Hiện trên thanh trình duyệt web -->
</head>
<body>
<h1> Chào bạn </h1>
<hr> <!-- Thẻ gạch ngan -->
Họ tên: <b>Đỗ Nam Trung</b> <!-- Thẻ <b> in đậm -->
Email: <i><u> namtrung@giahu.com </u></i> <!-- thẻ <i> in nghiên -->
</body>
</html>

– Nhắp menu File => Save để lưu file. Lưu vào Desktop , tên file là vidu.html (Encoding là
UTF-8)
– Nhắp đúp vào file vidu.html trên Desktop để xem kết quả

3.1 Xem Source HTML của trang
– Trong trình duyệt , nhắp phải chuột => View page Source, bạn sẽ thấy code HTML của trang.
– Hoặc hay hơn là nhắp nút phải tại tên file .html > Edit With Notepadd++

3.2 Thêm lệnh xuống hàng giữa Họ tên và Email
– Thêm sau tag </b> lệnh xuống hàng: <br/>
– Đóng Notepad và lưu lại.
– Nạp lại trang vidu.html (phím F5) để xem những thay đổi

3.3. Đưa hình (hinh.jpg) vào trang web:
– Trong source HTML của trang, nhắp sau tag <hr> và gõ như sau:

<img src="hinh.jpg">

– Mở thêm 1 cửa sổ Browser. Vào Google, tìm 1 hình nào đó (cỡ lớn) và lưu vào Desktop với
tên hinh.jpg (Chú ý: Trong trang google có chỗ để bạn tìm hình theo kích thước, theo màu, theo
loại hình, theo thời gian.)
– Nạp lại trang vidu.html để xem kết quả

3.4 Chỉnh kích thước và title, cách canh và đường viền cho hình:

– Xem Source HTML của trang.
– Nhắp sau chữ <img và bổ sung để được như sau:

<img width="200" height="" title="Hình tui đó" align="left"
border="5" src="hinh.jpg">

– F5 và xem kết quả.

– Sửa chữ left thành right và xem kết quả

3.5 Thêm liên kết vào trang (liên kết nằm trong tag a)
– Trong source HTML của tran, nhắp sau chữ </i> , Enter xuống hàng vào nhập vào code sau
rồi lưu lại:

<p>Website thường xem: </p>
<a href=http://google.com> Google</a><br>
<a href=http://microsoft.com target=_blank> Microsoft </a>

– Nạp lại trang vidu.html để xem kết quả

Hết bài 2.

Leave a Reply

Your email address will not be published.