Tổng quan về HTML CSS JAVASCRIPT – Khái niệm và vai trò của nó trong website
Bài này mình sẽ nói tóm lượt cơ bản về khái niệm và vai trò của HTML CSS JAVASCRIPT trong một website theo hướng nông dân nhất và theo kiểu hiểu của mình. Hy vọng sẽ giúp được cho bạn nào trong những ngày đầu lớ ngớ học code.
HTML, CSS, JAVASCRIPT là gì?
Để có thể thiết kế và xây dựng giao diện cho các trang web hoặc ứng dụng web để người dùng có thể xem và tương tác trực tiếp trên đó người ta sử dụng 3 ngôn ngữ chính HTML, CSS, JAVASCRIPT.
Công việc của một coder front-end là thiết kế cho 3 ngôn ngữ trên được hài hòa tạo ra một giao diện website bắt mắt và thích hợp với người dùng.
HTML: Là cái sườn để tạo nên giao diện của trang web. Ví dụ như trang web là một cái nhà thì HTML chính là hệ thống dầm cột, tường vách.
CSS: Nó có chức năng trang trí định dạng cho các phần tử HTML. Trong ví dụ cái nhà trên thì CSS có thể xem như là màu sơn, gạch ốp lát trong cái nhà đó nhé.
Javascript: Để lập trình cách mà chương trình hoạt động dưới sự tương tác của người dùng đối với website.
Dưới đây là 1 đoạn code mẫu trong đấy chứa cả html, css, javascipt.
<!DOCTYPE HTML>
<html>
<head>
<title>Bài học đầu tiên</title>
<meta charset="utf-8">
<style type="text/css">
#language {
color: green;
}
.html {
background-color: red;
}
</style>
</head>
<body>
<h1>HTML, CSS, Javascript là gì?</h1>
<h2 id="language">3 ngôn ngữ chính HTML, CSS, JAVASCRIPT</h2>
<h3 class="html">Html là gì?</h3>
<h4 style="background-color: blue">Css là gì</h4>
<script>
alert(‘Xin chào các bạn’);
</script>
</body>
</html>
Toàn bộ cấu trúc bên trên chính là code của 1 trang HTML tĩnh, bạn nào chưa hiểu thì có thể copy nó để chạy thử thì sẽ thấy nó hoạt động như thế nào nhé. Còn dưới đây mình sẽ đi vào chi tiết
Tổng quan về HTML
HTML là ngôn ngữ đánh dấu siêu văn bản.
HTML mô tả các cấu trúc, giống như việc tạo nên 1 bộ khung trước khi “trang trí” cho website.
Để làm được điều này thì các coder sử dụng các đoạn mã, các đoạn mã này là phần tử của HTML. Các phần tử này sẽ cho trình duyệt biết cách hiển thị nội dung.
Isinhvien sẽ lấy 1 ví dụ minh họa về HTML.
<!DOCTYPE HTML> <html> <head> <title>HTML là gì?</title> <meta charset="utf-8"> </head> <body> <h2>Tổng quan về HTML</h2> <p>HTML là ngôn ngữ đánh dấu siêu văn bản.</p> </body> </html>
Giải thích:
- Các <!DOCTYPE html> tuyên bố xác định rằng tài liệu này là một tài liệu HTML5
- Phần <html>; là phần tử gốc của trang HTML
- Phần <head>tử chứa thông tin meta về trang HTML
- Phần <title>tử chỉ định tiêu đề cho trang HTML (được hiển thị trong thanh tiêu đề của trình duyệt hoặc trong tab của trang)
- Phần <body>tử xác định phần thân của tài liệu và là vùng chứa tất cả nội dung hiển thị, chẳng hạn như tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, danh sách, v.v.
- Phần <h1>tử xác định một tiêu đề lớn
- Phần <p>tử xác định một đoạn văn
HTML có 2 thành phần chính: Phần tử và thuộc tính.
Phần tử HTML.
Phần tử HTML được xác định bởi tag bắt đầu.
<tên thẻ> ….. </ tên thẻ>
ví dụ: <h1> tổng quan HTML </h1>
Phần tử HTML có rất nhiều tag và mỗi tag đều có ý nghĩa riêng. Isinhvien sẽ có bài tổng hợp các tag để giúp các bạn hiểu rõ hơn về các phần tử HTML.
Thuộc tính HTML
Thuộc tính HTML cung cấp các thông tin bổ sung cho phần tử HTML
ví dụ <h1 style=”color: blue”> Tổng quan HTML <h1>
“color: blue” chính là thuộc tính bổ sung cho phần tử HTML
Tổng quan về CSS
CSS mô tả cách các phần tử HTML hiển thị trên trình duyệt.
CSS có thể định dạng các thuộc tính của HTML riêng biệt bằng cách định dạng theo phương pháp: Trực tiếp, phần tử, id, class.
<!DOCTYPE HTML>
<html>
<head>
<title>Bài học đầu tiên</title>
<meta charset="utf-8">
<style type="text/css">
#language {
color: green;
}
.html {
background-color: red;
}
</style>
</head>
<body>
<h1>HTML, CSS, Javascript là gì?</h1>
<h2 id="language">3 ngôn ngữ chính HTML, CSS, JAVASCRIPT</h2>
<h3 class="html">html là gì?</h3>
<h4 style="background-color: blue">Css là gì</h4> </body>
</html>
Như ví dụ trên ta có 4 cách sử dụng CSS cho phần tử HTML: trực tiếp, phần tử, ID, Class
Isinhvien sẽ có bài riêng để nói về cách sử dụng CSS, để các bạn có thể hiểu rõ và có thể áp dụng vào quá trình làm việc
Tổng quan về JAVASCRIPT
Với Javascript có thể thực hiện rất nhiều tác vụ, có thể can thiệp vào phần tử và thuộc tính của HTML.
Javascipt hoạt động theo phương pháp: đoạn code sẽ chạy khi có một sự kiện xảy ra đáp ứng đủ điều kiện thì dữ liệu được lưu trữ sẵn trong code sẽ được hiển thị.
<!DOCTYPE html> <html> <head> <title>Javascript</title> <meta charset="utf-8"> </head> <body> <script> alert(‘Xin chào các bạn’); </script> </body> </html>
Sự kiện xảy ra ở đây sẽ là khi bật trang trình duyệt thì sẽ có sự kiện xuất hiện, sự kiện ở đây chính là “Xin chào các bạn”
Một số framework thông dụng hay được anh em lập trình sử dụng để làm giao diện
Framework là “bộ khung” được cấu thành từ các đoạn code, 1 thư viện code nhằm tối giản công sức phát triển ứng dụng.
Hiện nay có nhiều framework cho backend, front end, ứng dụng mobile…phổ biến nhất có lẽ là các web framework và các framework cho mobile. Kể ra như: Bootstrap, Reactjs, Vuejs, Angularjs, v.v
Đối với mỗi loại framework thì lại có những ưu và nhược điểm của từng loại tùy thuộc vào nhu cầu ở mỗi công ty, khách hàng và sở thích của mỗi người nhưng nhìn chung thì việc ứng dụng các framework vào lập trình web là giống như nhau nên nếu bạn biết sử dụng một loại framework thì có thể sử dụng các loại framework khác. Ở đây, mình sẽ đi sâu và Bootstrap vì mình đã có khoảng thời gian làm việc với framework này khá lâu.
{“type”:”block”,”srcIndex”:1,”srcClientId”:”ebc2d125-9e1a-4521-a07c-5c017642bb67″,”srcRootClientId”:””}Với Bootstrap nền tảng tạo sẵn cho người dùng một thư viện để lưu trữ dữ liệu và tùy sửa theo mục đích cá nhân, giúp bạn sở hữu ngay một giao diện website hoàn chỉnh và nhanh chóng, dễ dàng tùy biến
Ở nền tảng Bootstrap có sử dụng grid system nên sẽ hỗ trợ responsive (phản ứng nhanh) và viết theo xu hướng ưu tiên trên giao diện mobile trước. Điều này làm cải thiện đáng kể hiệu suất người dùng khi truy cập trên điện thoại di động.
Bootstrap tương thích với google rất tốt nên sẽ dễ dàng cho các SEOer tiếp cận các khách hàng.
Bài đầu tiên Isinhvien chỉ nói giới thiệu với các bạn nhưng điều tổng quan nhất về HTML, CSS, Javascript, framework. Bài tiếp theo chúng ta sẽ học về HTML. Nhớ like và share để nhận những bài viết mới nhất từ Isinhvien nhé
