Nếu bạn đang học phát triển web, bạn sẽ bắt gặp các thuật ngữ như HTML, CSS và JavaScript. Chúng thường được gọi là các khối xây dựng của Web

Ba công cụ này thống trị phát triển web. Mọi thư viện hoặc công cụ dường như đều tập trung vào HTML, CSS và JS. Vì vậy, nếu bạn muốn trở thành một nhà phát triển web, bạn cần học chúng thật tốt

Bạn cũng sẽ khám phá ra rằng các trang web hầu hết được xây dựng từ ba ngôn ngữ này

Nhưng có lẽ bạn đang tự hỏi mỗi cái là gì và nó thực sự được sử dụng để làm gì. Điều gì làm cho những ngôn ngữ này trở nên đặc biệt và quan trọng?

Vâng, bây giờ bạn không cần phải tự hỏi nữa

Trong bài viết này, tôi sẽ giải thích những kiến ​​thức cơ bản về HTML, CSS và JavaScript là gì, cách chúng làm cho Web hoạt động và chúng tự làm những gì

Internet là gì?

Internet chỉ đơn giản là một mạng lưới các máy tính giao tiếp với nhau để gửi và nhận dữ liệu (thông tin)

Mỗi máy tính này trên internet có thể được phân biệt và định vị bằng một số duy nhất được gọi là Địa chỉ IP. Địa chỉ IP trông giống như thế này.

h1 {
  background-color: #ff0000;
}

h2 {
  background-color: #0000FF;
}

h3 {
  background-color: #00FF00;
}

em {
  background-color: #000000;
  color: #ffffff;
}

3

Web là gì?

Web là một tập hợp con của Internet

Giống như mọi mạng máy tính khác ngoài kia, Web được tạo thành từ hai thành phần chính. máy khách trình duyệt web và máy chủ web

Máy khách yêu cầu dữ liệu và máy chủ chia sẻ hoặc phục vụ dữ liệu của nó. Để đạt được điều này, hai bên phải thiết lập một thỏa thuận. Thỏa thuận đó được gọi là Giao diện lập trình ứng dụng hay ngắn gọn là API

Nhưng dữ liệu này phải được sắp xếp và định dạng ở dạng mà người dùng cuối có nhiều kinh nghiệm và khả năng kỹ thuật có thể hiểu được

Đây là nơi HTML, CSS, JavaScript và toàn bộ khái niệm phát triển web phát huy tác dụng

HTML là gì?

HTML là viết tắt của Ngôn ngữ đánh dấu siêu văn bản

Từ điển. com định nghĩa Đánh dấu là

một tập hợp các hướng dẫn chi tiết, thường được viết trên một bản thảo để sắp chữ, liên quan đến phong cách đánh máy, trang điểm, v.v.

Vì vậy, bạn có thể coi HTML là ngôn ngữ được sử dụng để tạo các hướng dẫn chi tiết liên quan đến kiểu, loại, định dạng, cấu trúc và cách trang điểm của trang web trước khi nó được in (hiển thị cho bạn)

Nhưng trong bối cảnh phát triển web, chúng ta có thể thay thuật ngữ 'in' bằng 'kết xuất' như một thuật ngữ chính xác hơn

HTML giúp bạn cấu trúc trang của mình thành các thành phần như đoạn văn, phần, tiêu đề, thanh điều hướng, v.v.  

Để minh họa một trang trông như thế nào, hãy tạo một tài liệu HTML cơ bản

  
  
  
  
  


  
This is a first level heading in HTML. With CSS, I will turn this into red color
  
This is a second level heading in HTML. With CSS, I will turn this into blue color
  
This is a third level heading in HTML. With CSS, I will turn this into green color
  
This is a paragragh As you can see, I placed an empahisis on the word "paragraph". Now, I will change also
    the background color of the word "paragraph" to black, and its text color  to green, all with just CSS.
  
The main essence of this tutorial is to:
    

       
Show you how to format a web document with HTML
       
Show you how to design a web page with CSS
       
Show you how to program a web document with JavaScript
    

  
Next, I am going to add the following two numbers and display the result, all with JavaScript

    
First number:2 

    
Second number: 7 
    
Therefore, the sum of the two of those numbers is: (placeholder for the answer)
    

chỉ mục. html

Đây là cách bạn có thể định dạng và cấu trúc tài liệu chỉ bằng HTML. Như bạn có thể thấy, phần đánh dấu này chứa một số phần tử web như

• Tiêu đề cấp 1

  h1 {
    background-color: #ff0000;
  }
  
  h2 {
    background-color: #0000FF;
  }
  
  h3 {
    background-color: #00FF00;
  }
  
  em {
    background-color: #000000;
    color: #ffffff;
  }

  4
• Tiêu đề cấp 2

  h1 {
    background-color: #ff0000;
  }
  
  h2 {
    background-color: #0000FF;
  }
  
  h3 {
    background-color: #00FF00;
  }
  
  em {
    background-color: #000000;
    color: #ffffff;
  }

  5
• Tiêu đề cấp 3

  h1 {
    background-color: #ff0000;
  }
  
  h2 {
    background-color: #0000FF;
  }
  
  h3 {
    background-color: #00FF00;
  }
  
  em {
    background-color: #000000;
    color: #ffffff;
  }

  6
• Đoạn văn  

  h1 {
    background-color: #ff0000;
  }
  
  h2 {
    background-color: #0000FF;
  }
  
  h3 {
    background-color: #00FF00;
  }
  
  em {
    background-color: #000000;
    color: #ffffff;
  }

  7
• Một danh sách không có thứ tự với các gạch đầu dòng  

  h1 {
    background-color: #ff0000;
  }
  
  h2 {
    background-color: #0000FF;
  }
  
  h3 {
    background-color: #00FF00;
  }
  
  em {
    background-color: #000000;
    color: #ffffff;
  }

  0

  h1 {
    background-color: #ff0000;
  }
  
  h2 {
    background-color: #0000FF;
  }
  
  h3 {
    background-color: #00FF00;
  }
  
  em {
    background-color: #000000;
    color: #ffffff;
  }

  1
• Một nút đầu vào

  h1 {
    background-color: #ff0000;
  }
  
  h2 {
    background-color: #0000FF;
  }
  
  h3 {
    background-color: #00FF00;
  }
  
  em {
    background-color: #000000;
    color: #ffffff;
  }

  2
• Và toàn bộ trang

  h1 {
    background-color: #ff0000;
  }
  
  h2 {
    background-color: #0000FF;
  }
  
  h3 {
    background-color: #00FF00;
  }
  
  em {
    background-color: #000000;
    color: #ffffff;
  }

  3

Đây là những gì đánh dấu ở trên hiển thị trên trình duyệt web

máy chủ cục bộ. 3000/chỉ số. html

Bạn cũng có thể thêm các thuộc tính cho các phần tử này mà bạn có thể sử dụng để xác định các phần tử và truy cập chúng từ những nơi khác trong trang web

Trong ví dụ của chúng tôi, chúng tôi đặt các thuộc tính

h1 {
  background-color: #ff0000;
}

h2 {
  background-color: #0000FF;
}

h3 {
  background-color: #00FF00;
}

em {
  background-color: #000000;
  color: #ffffff;
}

4 cho cả ba phần tử

h1 {
  background-color: #ff0000;
}

h2 {
  background-color: #0000FF;
}

h3 {
  background-color: #00FF00;
}

em {
  background-color: #000000;
  color: #ffffff;
}

5. Điều này sẽ giúp chúng tôi truy cập chúng từ JavaScript của chúng tôi như bạn sẽ thấy sau

Hãy nghĩ về thuộc tính này giống như tên người dùng mạng xã hội của bạn. Với tên này, những người khác có thể tìm thấy bạn trên mạng xã hội. Và ai đó cũng có thể đề cập đến bạn hoặc đề cập đến bạn với tên này (bạn có thể được gắn thẻ trong một bài đăng, v.v.)

Trang này rất cơ bản và không hấp dẫn, mặc dù. Nếu bạn đang xây dựng bất kỳ thứ gì khác ngoài bản trình diễn, bạn sẽ cần thêm một số kiểu dáng cơ bản để làm cho nó dễ nhìn hơn. Và chúng ta có thể làm chính xác điều đó với CSS

Bạn muốn tìm hiểu thêm về HTML?

CSS là gì?

Mặc dù HTML là ngôn ngữ đánh dấu được sử dụng để định dạng/cấu trúc trang web, CSS là ngôn ngữ thiết kế mà bạn sử dụng để làm cho trang web của mình trông đẹp mắt và dễ nhìn

CSS là viết tắt của Cascading Style Sheets và bạn sử dụng nó để cải thiện giao diện của trang web. Bằng cách thêm các kiểu CSS chu đáo, bạn làm cho trang của mình hấp dẫn và dễ chịu hơn đối với người dùng cuối để xem và sử dụng

Hãy tưởng tượng nếu con người được tạo ra chỉ có bộ xương và xương trần - điều đó sẽ trông như thế nào? . Vì vậy, CSS giống như làn da, mái tóc và ngoại hình chung của chúng ta

Bạn cũng có thể sử dụng CSS để bố trí các thành phần bằng cách định vị chúng trong các khu vực được chỉ định trên trang của bạn

Để truy cập các phần tử này, bạn phải “chọn” chúng. Bạn có thể chọn một hoặc nhiều phần tử web và chỉ định cách bạn muốn chúng trông hoặc được định vị

Các quy tắc chi phối quá trình này được gọi là bộ chọn CSS

Với CSS, bạn có thể đặt màu và nền cho các thành phần của mình, cũng như kiểu chữ, lề, khoảng cách, phần đệm, v.v.

Nếu bạn còn nhớ trang HTML mẫu của chúng tôi, thì chúng tôi có các thành phần khá dễ hiểu. Ví dụ: tôi đã nói rằng tôi sẽ thay đổi màu của tiêu đề cấp một

h1 {
  background-color: #ff0000;
}

h2 {
  background-color: #0000FF;
}

h3 {
  background-color: #00FF00;
}

em {
  background-color: #000000;
  color: #ffffff;
}

4 thành màu đỏ

Để minh họa cách CSS hoạt động, tôi sẽ chia sẻ mã đặt màu nền của ba cấp tiêu đề thành màu đỏ, xanh lam và xanh lục tương ứng

h1 {
  background-color: #ff0000;
}

h2 {
  background-color: #0000FF;
}

h3 {
  background-color: #00FF00;
}

em {
  background-color: #000000;
  color: #ffffff;
}

máy chủ cục bộ. 3000/kiểu. css

Phong cách trên, khi được áp dụng, sẽ thay đổi giao diện của trang web của chúng tôi thành thế này

Mát mẻ, phải không?

Chúng tôi truy cập từng yếu tố mà chúng tôi muốn làm việc bằng cách "chọn" chúng. ________ 14 chọn tất cả các tiêu đề cấp 1 trong trang, _______ 15 chọn các thành phần cấp 2, v.v. Bạn có thể chọn bất kỳ thành phần HTML nào bạn muốn và chỉ định cách bạn muốn nó trông hoặc được định vị

Bạn muốn tìm hiểu thêm về CSS?

JavaScript là gì?

Bây giờ, nếu HTML là ngôn ngữ đánh dấu và CSS là ngôn ngữ thiết kế, thì JavaScript là ngôn ngữ lập trình

Nếu bạn không biết lập trình là gì, hãy nghĩ về một số hành động bạn thực hiện trong cuộc sống hàng ngày

Khi bạn cảm thấy nguy hiểm, bạn chạy. Khi bạn đói, bạn ăn. Khi bạn mệt mỏi, bạn ngủ. Khi bạn lạnh lùng, bạn tìm kiếm sự ấm áp. Khi băng qua một con đường đông đúc, bạn tính toán khoảng cách của các phương tiện cách xa bạn

Bộ não của bạn đã được lập trình để phản ứng theo một cách nhất định hoặc làm những việc nhất định bất cứ khi nào có điều gì đó xảy ra. Theo cách tương tự, bạn có thể lập trình trang web hoặc các thành phần riêng lẻ của mình để phản ứng theo một cách nhất định và thực hiện điều gì đó khi có điều gì khác (sự kiện) xảy ra

Bạn có thể lập trình các hành động, điều kiện, tính toán, yêu cầu mạng, tác vụ đồng thời và nhiều loại hướng dẫn khác

Bạn có thể truy cập bất kỳ phần tử nào thông qua API Mô hình Đối tượng Tài liệu (DOM) và làm cho chúng thay đổi theo cách bạn muốn

DOM là một biểu diễn dạng cây của trang web được tải vào trình duyệt

Mỗi phần tử trên trang web được thể hiện trên DOM

Nhờ có DOM, chúng ta có thể sử dụng các phương thức như

h1 {
  background-color: #ff0000;
}

h2 {
  background-color: #0000FF;
}

h3 {
  background-color: #00FF00;
}

em {
  background-color: #000000;
  color: #ffffff;
}

9 để truy cập các phần tử từ trang web của mình

JavaScript cho phép bạn làm cho trang web của mình “suy nghĩ và hành động”, đó là tất cả những gì về lập trình

Nếu bạn còn nhớ từ trang HTML mẫu của chúng tôi, tôi đã đề cập rằng tôi sẽ tính tổng hai số được hiển thị trên trang và sau đó hiển thị kết quả ở vị trí của văn bản giữ chỗ. Tính toán chạy sau khi nút được nhấp

Nhấn vào nút "Lấy tổng" sẽ hiển thị tổng của 2 và 7

Mã này minh họa cách bạn có thể tính toán bằng JavaScript

function displaySum() {
  let firstNum = Number(document.getElementById('firstNum').innerHTML)
  let secondNum = Number(document.getElementById('secondNum').innerHTML)

  let total = firstNum + secondNum;
  document.getElementById("answer").innerHTML = ` ${firstNum} + ${secondNum}, equals to ${total}` ;
}

document.getElementById('sumButton').addEventListener("click", displaySum);

Hãy nhớ những gì tôi đã nói với bạn về các thuộc tính HTML và cách sử dụng chúng?

function displaySum() {
  let firstNum = Number(document.getElementById('firstNum').innerHTML)
  let secondNum = Number(document.getElementById('secondNum').innerHTML)

  let total = firstNum + secondNum;
  document.getElementById("answer").innerHTML = ` ${firstNum} + ${secondNum}, equals to ${total}` ;
}

document.getElementById('sumButton').addEventListener("click", displaySum);

0 là một hàm lấy cả hai mục từ trang web, chuyển đổi chúng thành số (với phương thức Số), tính tổng và chuyển chúng dưới dạng giá trị bên trong cho phần tử khác

Lý do chúng tôi có thể truy cập các phần tử này trong JavaScript của mình là vì chúng tôi đã đặt các thuộc tính duy nhất cho chúng, để giúp chúng tôi xác định chúng

Vì vậy, nhờ điều này

h1 {
  background-color: #ff0000;
}

h2 {
  background-color: #0000FF;
}

h3 {
  background-color: #00FF00;
}

em {
  background-color: #000000;
  color: #ffffff;
}

1

chúng tôi đã có thể làm điều này

h1 {
  background-color: #ff0000;
}

h2 {
  background-color: #0000FF;
}

h3 {
  background-color: #00FF00;
}

em {
  background-color: #000000;
  color: #ffffff;
}

2

Cuối cùng, khi nhấp vào nút, bạn sẽ thấy tổng của hai số trên trang mới được cập nhật

2 cộng 7 bằng 9

Nếu bạn muốn bắt đầu với JavaScript, bạn có thể xem chứng nhận Cấu trúc dữ liệu và thuật toán JavaScript của freeCodeCamp. Và bạn có thể sử dụng khóa học Giới thiệu về JS tuyệt vời này để bổ sung cho việc học của mình

Cách kết hợp HTML, CSS và JavaScript với nhau

Cùng nhau, chúng tôi sử dụng ba ngôn ngữ này để định dạng, thiết kế và lập trình các trang web

Và khi bạn liên kết một số trang web với nhau bằng các siêu liên kết, cùng với tất cả nội dung của chúng như hình ảnh, video, v.v. trên máy tính của máy chủ, nó sẽ được hiển thị thành một trang web

Quá trình hiển thị này thường xảy ra ở giao diện người dùng, nơi người dùng có thể thấy nội dung đang được hiển thị và tương tác với nội dung đó

Mặt khác, dữ liệu, đặc biệt là thông tin nhạy cảm như mật khẩu, được lưu trữ và cung cấp từ phần cuối của trang web. Đây là một phần của trang web chỉ tồn tại trên máy chủ và không được hiển thị trên trình duyệt phía trước. Ở đó, người dùng không thể nhìn thấy hoặc dễ dàng truy cập thông tin đó

kết thúc

Là nhà phát triển web, ba ngôn ngữ chính chúng tôi sử dụng để xây dựng trang web là HTML, CSS và JavaScript

JavaScript là ngôn ngữ lập trình, chúng tôi sử dụng HTML để cấu trúc trang web và chúng tôi sử dụng CSS để thiết kế và bố cục trang web

Ngày nay, CSS không chỉ là một ngôn ngữ thiết kế đơn thuần. Bạn thực sự có thể triển khai hoạt ảnh và chuyển tiếp mượt mà chỉ bằng CSS

Trên thực tế, bạn cũng có thể lập trình cơ bản với CSS. Một ví dụ về điều này là khi bạn sử dụng truy vấn phương tiện, nơi bạn xác định các quy tắc kiểu khác nhau cho các loại màn hình (độ phân giải) khác nhau

JavaScript cũng đã phát triển vượt ra ngoài việc chỉ được sử dụng trong trình duyệt. Bây giờ chúng tôi sử dụng nó trên máy chủ nhờ Node. js

Nhưng thực tế cơ bản vẫn còn. HTML, CSS và JavaScript là những ngôn ngữ chính của Web

À chính nó đấy. Các ngôn ngữ của Web được giải thích bằng các thuật ngữ cơ bản. Tôi thực sự hy vọng bạn có một cái gì đó hữu ích từ bài viết này

Để kết thúc bài viết này, tôi có vài điều muốn chia sẻ. Gần đây, tôi đã bắt đầu một loạt thử thách mã hóa hàng tuần nhằm hướng dẫn những người mới bắt đầu cách lập trình bằng JavaScript. Kiểm tra nó trên blog của tôi.  

Cảm ơn bạn đã đọc và hẹn gặp lại

P/S. Nếu bạn đang học JavaScript, tôi đã tạo một Sách điện tử dạy 50 chủ đề về JavaScript bằng các ghi chú kỹ thuật số được vẽ bằng tay. Kiểm tra nó ra ở đây

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Kingsley Ubah

Nhà phát triển web. Nhà văn kỹ thuật. Nhà giáo dục trực tuyến

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm với tư cách là nhà phát triển. Bắt đầu