Danh Mục Bài Viết
Tiếp theo trong chuyên mục Học nhanh ngôn ngữ Html với Minacode. Bài viết này mình sẽ đề cập tiếp đến Ảnh, Favicon, Tiêu đề trang, Bảng và Danh sách trong Html nhé! Nào Let's go thôi
Trong một website hay trong bất cứ một tài liệu nào thì ảnh là một thành phần rất quan trọng. Vậy ảnh trong Html sẽ như thế nào.
Trong Html chúng ta sẽ dùng thẻ <img> để nhúng hình ảnh vào nội dung trang web
Thẻ <img> là một thẻ trống, chỉ chứa các thuộc tính và không có thẻ đóng.
Thẻ <img> có hai thuộc tính quan trọng:
<img src="url" alt="Văn bản thay thế">Thuộc tính src chỉ định đường dẫn (URL) tới hình ảnh.
Thuộc tính alt cung cấp văn bản thay thế cho hình ảnh nếu người dùng vì lý do nào đó không thể xem nó (vì kết nối chậm, lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình dành cho người khiếm thị).
Bạn có thể sử dụng style để chỉ định chiều rộng và chiều cao của hình ảnh.
<img src="banner.jpg" alt="Ảnh Banner Minacode" style="width:500px;height:600px;">Ngoài ra, bạn có thể sử dụng các thuộc tính width và height:
<img src=" bannerjpg" alt=" Ảnh Banner Minacode " width="500" height="600">Sử dụng thuộc tính CSS floatđể cho hình ảnh nổi sang bên phải hoặc bên trái của văn bản:
<p><img src=" bannerjpg" alt=" Ảnh Banner Minacode " style="float:right;width:42px;height:42px;">Chào mừng các bạn đến với Minacode.</p>
<p><img src=" bannerjpg" alt=" Ảnh Banner Minacode" style="float:left;width:42px;height:42px;">Chào mừng các bạn đến với Minacode.</p>Ảnh cũng có thể dùng làm hình nền
<style>
body {
background-image: url('banner.jpg');
}
</style>Các định dạng hình ảnh phổ biến
Favicon là một hình ảnh nhỏ hiển thị bên cạnh tiêu đề trang trong tab trình duyệt.
Bạn có thể sử dụng bất kỳ hình ảnh nào bạn thích làm favicon. Bạn cũng có thể tạo favicon của riêng mình trên các trang web như https://www.favicon.cc .
Favicon là một hình ảnh nhỏ nên nó phải là một hình ảnh đơn giản có độ tương phản cao.
Để thêm biểu tượng Favicon vào trang web của bạn, hãy lưu hình ảnh Favicon của bạn vào thư mục gốc. Tên phổ biến cho hình ảnh favicon là "favicon.ico".
Tiếp theo, thêm một thẻ <link> vào tệp "index.html" của bạn, sau <title> như sau:
<!DOCTYPE html>
<html>
<head>
<title>Minacode</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<h1>Đây là nội dung</h1>
</body>
</html>
Mỗi trang web phải có tiêu đề trang để mô tả ý nghĩa của trang đó. Phần tử <title> sẽ chứa tiêu đề trang của bạn:
<!DOCTYPE html>
<html>
<head>
<title>Minacode – Trang chủ</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<h1>Đây là nội dung</h1>
</body>
</html>
Tiêu đề phải mô tả được nội dung và ý nghĩa của trang.
Tiêu đề trang rất quan trọng để tối ưu hóa công cụ tìm kiếm (SEO). Văn bản được thuật toán của công cụ tìm kiếm sử dụng để quyết định thứ tự khi liệt kê các trang trong kết quả tìm kiếm.
Bảng chính là thẻ <table> trong HTML cho phép chúng ta sắp xếp dữ liệu thành hàng và cột.
Một Bảng đơn giản:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>Bảng trong Html</h2>
<table style="width:100%">
<tr>
<th>Sản Phẩm</th>
<th>Giá Mua</th>
<th>Giá Bán</th>
</tr>
<tr>
<td>Áo</td>
<td>15.000đ</td>
<td>20.000đ</td>
</tr>
<tr>
<td>Quần</td>
<td>30.000đ</td>
<td>35.000đ</td>
</tr>
</table>
<p>Bảng theo dõi giá thành Minacode</p>
</body>
</html>
Mỗi ô của bảng được xác định bởi thẻ <td>.
Mỗi hàng của bảng xác định bởi thẻ <tr>.
Đôi khi bạn muốn các ô của mình là ô tiêu đề bảng. Trong những trường hợp đó, hãy sử dụng thẻ <th> thay vì thẻ <td>:
Danh sách trong HTML cho phép chúng ta nhóm một tập hợp các mục liên quan vào trong một danh sách.
Danh sách không có thứ tự:
Danh sách không có thứ tự bắt đầu bằng thẻ <ul>. Mỗi mục danh sách bắt đầu bằng thẻ <li>.
Các mục trong danh sách sẽ được đánh dấu bằng dấu đầu dòng (vòng tròn nhỏ màu đen) theo mặc định:
<!DOCTYPE html>
<html>
<body>
<h2>Khóa học tại Minacode</h2>
<ul>
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
</ul>
</body>
</html>
Danh sách có thứ tự:
Một danh sách có thứ tự bắt đầu bằng thẻ <ol>. Mỗi mục danh sách bắt đầu bằng thẻ <li>.
Các mục trong danh sách sẽ được đánh dấu bằng số theo mặc định:
<!DOCTYPE html>
<html>
<body>
<h2>Khóa học tại Minacode</h2>
<ol>
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
</ol>
</body>
</html>
Thuộc tính CSS list-style-type được sử dụng để xác định kiểu của điểm đánh dấu mục danh sách. Nó có thể có một trong các giá trị sau:
<!DOCTYPE html>
<html>
<body>
<h2>Danh sách khóa học tại Minacode</h2>
<ul style="list-style-type:square;">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
</ul>
</body>
</html>
>>Còn tiếp nhé Anh Em>>
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
