Danh Mục Bài Viết
Ok anh em, Bài viết này trong chuyên mục Học nhanh Html cùng minacode. Mình sẽ đề cập để các khái niệm rất quan trọng đó là Đường dẫn file, Vai trò thẻ head trong Html và các cách phổ biến để chúng ta Làm layout cho một trang web nhé! Nào Let’s Go thôi.
Đường dẫn file mô tả vị trí của file trong cấu trúc thư mục chứa nội dung trang web của bạn.
Vì dụ:
<img src="picture.jpg">File "picture.jpg" nằm trong cùng thư mục với trang hiện tại
<img src="image/picture.jpg">File "picture.jpg" nằm trong thư mục image và thư mục image này nằm trong thư mục hiện tại
<img src="/images/picture.jpg">
File "picture.jpg" nằm trong thư mục image mà thư mục image này nằm ở thư mục gốc của trang web hiện tại
<img src="../picture.jpg">File "picture.jpg" nằm trong thư mục cao hơn một cấp so với thư mục hiện tại
Đường dẫn bên cạnh việc mô tả vị trí của file trong cấu trúc thư mục của trang web sẽ còn được sử dụng khi liên kết đến các file bên ngoài, như:
Đường dẫn tuyệt đối có URL đầy đủ của file:
<img src="https://minacode.net/public/frontend/images/minacode.png" alt="Minacode-Logo">Đường dẫn tương đối trỏ đến vị trí tương ứng với trang hiện tại như một số ví dụ ở đầu bài viết
Trong thực tế chúng ta nên sử dụng đường dẫn tương đối (nếu có thể). Khi sử dụng đường dẫn tương đối, các trang web của bạn sẽ không bị ràng buộc với URL hiện tại. Tất cả các liên kết sẽ hoạt động trên máy tính của riêng bạn (localhost) cũng như trên tên miền trong tương lai khi bạn đưa website lên môi trường online.
Thẻ <head> trong Html sẽ là nơi chứa các thẻ quan trọng sau: <title>, <style>, <meta>, <link>, <script>và <base>.
Ví dụ thành phần của một thẻ head phổ biến:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="https://minacode.net/" target="_blank">
<link rel="stylesheet" href="style.css">
<title>Minacode – Trang chủ</title>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Xin chào! Mình là Minacode
}
</script>
</head>
<body>
</body>
</html>Mình sẽ nhắc lại công dụng một số thẻ quen thuộc nhé!
Trang web thường hiển thị nội dung theo nhiều cột (như tạp chí hoặc báo).
Ví dụ một trang trong minacode.net:
Một bố cục Layout điển hình của một trang web sẽ là:
Một số cách để tạo layout cho Html. Mỗi cách đều có ưu và nhược điểm:
CSS Frameworks:
Một thư viện khá phổ biến cho cách này đó chính là Bootstrap
CSS float:
Trước đây ta thường thực hiện layout cho web bằng thuộc tính float của CSS. Float rất dễ học, bạn chỉ cần nhớ cách hoạt động của các thuộc tính floatvà clear.
CSS flexbox:
Việc sử dụng flexbox đảm bảo rằng các thành phần của trang có thể dự đoán được khi bố cục trang phải thay đổi theo các kích thước màn hình khác nhau và các thiết bị hiển thị khác nhau.
CSS grid:
CSS grid cung cấp một hệ thống bố cục dựa trên lưới, với các hàng và cột, giúp thiết kế trang web dễ dàng hơn mà không cần phải sử dụng các float và định vị.
.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)
