Để lập trình web thì trước tiên bạn cần phải hiểu các khái niệm căn bản như sau
Khi bạn gõ từ khoá google.com trên trình duyệt Firefox hay Chrome thì công việt dầu tiên, của trình duyệt làm đó là gửi một yêu cầu(request) đến server của google, sau khi nhận được request của trình duyệt bạn thì server google sẽ trả lời lại(response) bằng cái giao diện bạn thấy hằng ngày, trong đó nó bao gồm các đoạn code HTML, CSS, và Javascript, vậy ba thằng này có nghĩa là gì
Khái niệm căn bản
HTML là chữ viết tắt của cụm từ HyperText Markup Language((Xem thêm tại http://vi.wikipedia.org/wiki/HTML)) (dịch là Ngôn ngữ đánh dấu siêu văn bản) được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang và mỗi trang được quy ra là một tài liệu HTML (thi thoảng mình sẽ ghi là một tập tin HTML). Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World Wide Web và chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra các chuẩn trên môi trường Internet).
CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với phần tên mở rộng là .css. Trong Style Sheet này chứa những câu lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v..
JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng. Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java. .js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.
Trên đây tôi tóm tắt bộ 3 ngôn ngữ dùng để lập trình web, bạn hãy xét một ví dụ đoạn code sau
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#demo {
background: red;
}
</style>
</head>
<body>
<h1>JavaScript Functions</h1>
<p>This example calls a function which performs a calculation, and returns the result:</p>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Bạn tạo tập tin là gsviec.html trong bất cứ editor nào, rồi lưu lại mở bằng Firefox hoặc chrome sẽ có kết quả như hình bên dưới
Trong đó đoạn code bên dưới đây gọi là CSS, bạn có thể chèn trực tiếp nó trong file html hoặc tạo một file riêng rồi bỏ vào html, nó sẽ tô màu đỏ thẻ p, mà cụ thể là số 12
<style type="text/css">
#demo {
background: red;
}
</style>
Để hiểu rõ các thuộc tính CSS thì bạn có thể tham khảo trên Izweb
Còn đoạn code dưới đây là Javascript
<script type="text/javascript">
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
Đoạn code này có tính năng là trả về phép nhân của 2 chứ số a và b, trong trường hợp này là phép nhân của 3 và 4 là 12, đó là lý do tại sao trong cái file gsviec.html lại không có số 12, mà bạn mở bằng Firefox hoặc Chorme lại có số 12, bạn thử thây đoạn code
myFunction(4, 3)
thành
myFunction(5, 6)
thử kết quả trên trình duyệt nó như thế nào, để hiểu rõ JS là gì bạn có thể tìm hiểu Javasctip căn bản trên Freetut.net
Đoạn code còn lại hay nói các khác nó chứa cả 2 đoạn code JS vs Css là HTML, bạn thử thêm đoạn code này vào sau dòng(thẻ p) code: <p id=”demo”></p> thành như sau
<p id="demo"></p>
<p id="hello">Hello wold</p>
Kết luận
Trên đây tôi đã tóm tắt HTML, CSS, JS là gì, chắc bạn cũng đã hiểu sơ sơ, hãy truy cập các liên kêt bên trên để hiểu rõ hơn, nếu bạn có cách nào giải thích hay hơn hãy chia sẽ với chúng tôi
