Ngôn ngữ đánh dấu siêu văn bản [HTML], Cascading Style Sheets [CSS] và JavaScript là những ngôn ngữ chạy web. Chúng có liên quan rất chặt chẽ, nhưng chúng cũng được thiết kế cho những nhiệm vụ rất cụ thể. Hiểu cách họ tương tác sẽ đi một chặng đường dài để trở thành nhà phát triển web. Chúng tôi sẽ mở rộng vấn đề này trong suốt hướng dẫn, nhưng ý chính của nó là

• HTML là để thêm ý nghĩa cho nội dung thô bằng cách đánh dấu nó
• CSS là để định dạng nội dung được đánh dấu
• JavaScript là để làm cho nội dung và định dạng tương tác

Hãy coi HTML là văn bản trừu tượng và hình ảnh đằng sau một trang web, CSS là trang thực sự được hiển thị và JavaScript là các hành vi có thể thao tác cả HTML và CSS

Ví dụ: bạn có thể đánh dấu một dòng văn bản cụ thể nào đó dưới dạng một đoạn văn bằng HTML này

This is a paragraph.

Sau đó, bạn có thể đặt kích thước và màu sắc của đoạn đó bằng một số CSS

p {
  font-size: 20px;
  color: blue;
}

Và, nếu bạn muốn trở nên thú vị, bạn có thể viết lại đoạn đó khi người dùng nhấp vào nó bằng một số JavaScript [chúng tôi sẽ lưu những thứ thú vị cho hướng dẫn trong tương lai]

var p = document.getElementById['some-paragraph'];
p.addEventListener['click', function[event] {
  p.innerHTML = 'You clicked it!';
}];

Như bạn có thể thấy, HTML, CSS và JavaScript là những ngôn ngữ hoàn toàn khác nhau, nhưng chúng đều đề cập đến nhau theo một cách nào đó. Hầu hết các trang web đều dựa vào cả ba, nhưng giao diện của mọi trang web được xác định bởi HTML và CSS. Điều đó làm cho hướng dẫn này trở thành điểm khởi đầu tuyệt vời cho hành trình phát triển web của bạn

Ngôn ngữ đánh dấu siêu văn bản [HTML] là ngôn ngữ của web, không có HTML bạn sẽ không có trang web. HTML xác định nội dung và cấu trúc trang web của bạn. Sử dụng phần thân để so sánh, HTML sẽ là bộ xương của bạn, giữ mọi thứ lại với nhau và cung cấp cơ sở để treo mọi thứ lên. Một tệp HTML được tạo thành từ nhiều phần tử HTML.  

Here’s an example of a single HTML element:

your content

được gọi là thẻ mở, đây là phần bắt đầu của phần tử HTML và cho trình duyệt biết rằng đây là phần bắt đầu của một phần nội dung của trang web

h1 là loại nội dung bạn muốn, h1 là viết tắt của tiêu đề 1 [tiêu đề chính của trang của bạn]

nội dung của bạn là nơi bạn đặt nội dung thực tế cho tiêu đề của mình, đây là bất cứ nội dung nào bạn muốn

Thứ tự mà bạn đặt các thành phần HTML vào tệp của mình ảnh hưởng đến cách chúng được hiển thị trên trang cũng như cấu trúc cơ bản của trang. Dưới đây hiển thị hai ví dụ, cả hai đều sử dụng các phần tử HTML giống nhau nhưng theo các thứ tự khác nhau

Trường hợp phụ đề ở trước tiêu đề chính không có ý nghĩa về mặt cấu trúc, vì h1 phải là cha của h2 để phù hợp với hệ thống phân cấp tiêu đề.  

Bạn có thể thêm thuộc tính vào HTML của mình, thuộc tính được sử dụng để cung cấp thông tin bổ sung cho phần tử HTML của bạn. Một ví dụ là khi bạn muốn thêm một mã định danh duy nhất vào phần tử của mình để bạn có thể tạo kiểu cho chỉ một phần tử đó

Đây là đoạn tóm tắt của tôi

Thuộc tính id được thêm vào thẻ mở. Sau khi thêm từ khóa id, bạn thêm dấu bằng theo sau dấu ngoặc kép. Bên trong dấu ngoặc kép, bạn đặt [các] từ nhận dạng duy nhất.  

Khi bạn đã tạo tệp HTML với tất cả nội dung của mình, bạn có một trang web đang hoạt động, nó có thể trông không đẹp mắt hoặc hoạt động nhiều, nhưng đó là một trang hoạt động cơ bản. Điều này mang lại cho bạn khung xương sẵn sàng để loại bỏ phong cách và hành vi của bạn

CSS. Làn da

Nếu HTML là bộ xương cho cơ thể của chúng ta, thì Cascading Style Sheets [CSS] là lớp da. CSS được sử dụng để thay đổi giao diện của trang web. Đó là nơi bạn xác định cách phối màu, phông chữ, khoảng cách, bố cục, v.v.  

CSS được viết trong một tệp riêng cho HTML. Điều này cho phép tách biệt các mối quan tâm và giúp cuộc sống của chúng ta dễ dàng hơn khi thử nghiệm và bảo trì. Điều này cũng làm cho các kiểu của chúng ta có thể tái sử dụng nhiều hơn, nếu chúng ta đặt các kiểu trực tiếp vào HTML thì chúng ta sẽ không thể sử dụng các kiểu trên các trang HTML khác nhau.  

90% CSS khá đơn giản, chọn phần tử HTML bạn muốn tạo kiểu, chỉ định thuộc tính bạn muốn thay đổi và giá trị bạn muốn thay đổi thành. Rửa sạch và lặp lại mô hình này và bạn có thể tiến rất xa. CSS trở nên phức tạp hơn khi bạn muốn bố cục phức tạp, hoạt ảnh hoặc chức năng CSS

Trong ví dụ trên, chúng tôi đang sử dụng ba bộ chọn CSS khác nhau. Lựa chọn đầu tiên dựa trên loại phần tử HTML. Cái thứ hai chọn bất kỳ phần tử nào có lớp 'đường viền tròn'. Cái thứ ba chọn phần tử có id ‘second-subtitle’

Với HTML và CSS, bạn có thể tạo các trang web hấp dẫn có cấu trúc tốt. Nếu bạn muốn nó làm được nhiều hơn chức năng cơ bản và giao diện đẹp, bạn sẽ cần JavaScript

JavaScript. các cơ

JavaScript được tạo ra vào năm 1995 bởi Brendan Eich để thêm hành vi vào các trang web. Cho đến thời điểm này, web là một nơi tương đối tĩnh, tốt cho việc tìm kiếm thông tin nhưng không có tính tương tác cao. Tương tự như cơ thể của chúng ta, JavaScript thay thế cơ bắp, cung cấp chuyển động và hành vi cho các chi của chúng ta.  

Có rất nhiều ngôn ngữ lập trình ngoài kia, nhưng nếu bạn muốn phát triển web, thì JavaScript là lực lượng thống trị. Ngay cả các ngôn ngữ khác bổ sung tính tương tác cho các trang web cuối cùng cũng kết thúc dưới dạng JavaScript [ví dụ: CoffeeScript]

Giống như CSS, JavaScript có xu hướng nằm trong tệp riêng của nó để cho phép sử dụng lại và giúp cải thiện khả năng bảo trì. Mặc dù việc bắt đầu với HTML và CSS ngay lập tức mang lại nhiều lợi ích, nhưng JS yêu cầu một khối lượng kiến ​​thức quan trọng trước khi nó có thể được sử dụng cho nhiều mục đích hơn là sao chép và dán. Điều này là do JS có chiều sâu và độ phức tạp hơn rất nhiều. Độ sâu và độ phức tạp này có nghĩa là có một đường cong học tập ban đầu dốc [đối với những người mới phát triển phần mềm], nhưng một khi vượt qua đường cong ban đầu đó, bạn sẽ có được những cơ hội thú vị và rộng lớn

Điểm bắt đầu khi học JavaScript [hoặc bất kỳ ngôn ngữ lập trình nào] là hiểu rõ các khái niệm lập trình cốt lõi, chẳng hạn như biến, hàm, câu lệnh điều kiện và vòng lặp. Những điều này cần có thời gian và thực hành để có được, vì vậy đừng bỏ qua chúng quá nhanh, chúng rất quan trọng và là nền tảng cho tất cả các chức năng