JavaScript có giống với HTML và CSS không?

Theo dữ liệu được công bố bởi cuộc khảo sát năm 2021 của Stackoverflow, HTML, CSS và JavaScript là những ngôn ngữ phổ biến nhất được sử dụng trên toàn thế giới

Ba ngôn ngữ này là xương sống của sự phát triển web;

• HTML được sử dụng để xây dựng cấu trúc cơ bản của trang web
• CSS được sử dụng để vẽ (thiết kế) cấu trúc đó
• JavaScript thêm hành vi vào một trang web

Xem sơ đồ bên dưới

Hãy bắt đầu với từng ngôn ngữ và tìm hiểu một số điều cơ bản về chúng

HTML 🌎

HTML là viết tắt của Hyper Text Markup Language, trong đó hầu hết các trang web được viết

Nơi đây -

siêu văn bản. - Khi Siêu văn bản đề cập đến cách các tài liệu (tài liệu HTML) được liên kết với nhau, các liên kết có sẵn trên trang web được gọi là Siêu văn bản

Các liên kết này cho phép người đọc chuyển đến các vị trí khác trong tài liệu hoặc đến một tài liệu khác hoàn toàn

ngôn ngữ đánh dấu. - Vì HTML là ngôn ngữ “đánh dấu” nên chúng tôi sử dụng “đánh dấu” để thể hiện văn bản. "Đánh dấu" này được xử lý bằng máy tính và hiển thị cho bạn

Ví dụ. -

This is the Heading.

Nơi đây

Phiên bản hiện tại của HTML là HTML5

Trình chỉnh sửa HTML ✍️. -

HTML có thể được viết bằng bất kỳ trình soạn thảo văn bản nào và chúng tôi có thể lưu tệp đó làm ví dụ. html

Nhưng trình soạn thảo văn bản được ưa chuộng và sử dụng rộng rãi nhất là VS Code

Tại sao lại là mã VS?🤔

Microsoft xây dựng Mã VS với nhiều tính năng như tô sáng cú pháp, tự động hoàn thành, gỡ lỗi, v.v.

Xem hình ảnh đầy đủ tính năng của VS Code

Biên tập viên trực tuyến 🖋. –

Có rất nhiều trình chỉnh sửa trực tuyến rất hữu ích để viết mã mà không cần đặt bất kỳ môi trường nào

Một trang web sử dụng HTML 📄. -

Hãy tạo một trang web đơn giản bằng HTML để chúng ta có thể nghiên cứu một số kiến ​​thức cơ bản về nó

Chúng tôi sẽ làm theo các bước dưới đây để làm cho trang web của chúng tôi

Bước 1. -

Mở Mã VS, tạo một tệp mới và lưu nó dưới dạng chỉ mục. html

Bước 2. -

Trong phần này, chúng tôi sẽ viết mã HTML của chúng tôi

   
    
 
     Page Title
 
    
    
 
     My Heading
     
My paragraph.
 
    
   

Bước 3. -

Chạy mã đầu ra sẽ là một trang web có tiêu đề, tiêu đề và đoạn văn

Xem hình ảnh bên dưới để hiểu thêm về nó –

Xin chúc mừng 🎉 bạn đã tạo trang web đầu tiên của mình.
Hãy thảo luận thêm về mã HTML ở trên. -

Thành phần và Thẻ 🧑‍💻. -

• Các thẻ được sử dụng để đánh dấu văn bản, ví dụ Tiêu đề của tôi
  
• Tương ứng là thẻ mở và thẻ đóng
  
• Một số phần tử HTML không có nội dung (như
  và
  

  Chúng tôi có thể biểu thị màu bằng tên màu hoặc bằng RGB, HEX, HSL, .

  Cỡ chữ 🔠. -

  Chúng ta có thể điều chỉnh/thay đổi kích thước của văn bản HTML bằng cách sử dụng thuộc tính font-size của HTML

  Ví dụ. -

  This is the paragraph.
  
  
  
  

  Trong ví dụ trên, HTML đặt cỡ chữ của thành phần đoạn văn thành 20px

  Các đơn vị được sử dụng nhiều nhất cho kích thước phông chữ HTML là px, rem, em và %

  Viết nhiều thuộc tính 🖼. -

  Chúng ta có thể viết bất kỳ số lượng thuộc tính nào vào thuộc tính style của HTML.
  Ví dụ. -

  I am a div.

  Trong ví dụ trên, chúng tôi đã áp dụng ba thuộc tính cho phần tử div của HTML

  Đây còn được gọi là kiểu Nội tuyến

  Kiểu nội tuyến dài có một số nhược điểm như chúng làm cho mã HTML trở nên lộn xộn

  Để tránh nhược điểm của kiểu nội tuyến, chúng ta có thể tạo một kiểu riêng trong thành phần kiểu bên trong thành phần của HTML

  Ví dụ. -

  
  
     
     
     
   
    
   
     My Heading.
     
  My Paragraph.
   
    
   
   

  Bây giờ chúng tôi đã dần dần chuyển sang CSS

  CSS là gì?

  • CSS là ngôn ngữ, được sử dụng để định kiểu (thiết kế) tài liệu HTML
    
  • Dạng đầy đủ của CSS là Cascading Style Sheets
    
  • Sử dụng CSS, chúng tôi làm cho trang web của mình phản hồi nhanh, Responsive có nghĩa là trang web có thể được hiển thị trên các màn hình khác nhau như thiết bị di động, máy tính bảng và Máy tính để bàn
    
  • Chúng ta có thể viết CSS trong Heading

    3. Bên ngoài. -

    Bằng cách sử dụng phần tử bên trong phần tử

    Phần tử liên kết tệp CSS bên ngoài với tài liệu HTML hiện tại của chúng tôi

    Thuộc tính rel chỉ định mối quan hệ giữa tài liệu hiện tại và tài liệu được liên kết

    
     
       
       My Document
       
       
     
      
     
       Heading
     
      
     
     

    Tìm hiểu HTML và CSS bằng cách thực hiện Dự án 🎨. -

    Hãy tìm hiểu thêm về HTML và CSS bằng cách thực hiện Project chúng ta sẽ tạo phần Navbar của một thiết kế trang web

    

    Dự án này là sự kết hợp giữa phần Navbar và Hero của trang web. Sử dụng hai phần này, chúng ta sẽ tìm hiểu các thuộc tính sau-

    1. Uốn cong
    2. Chiều rộng tối đa
    3. Lề
    4. đệm
    5. Mô hình hộp
    6. trang trí văn bản

    Thanh điều hướng 🧭. -

    Navbar của một trang web thường bao gồm một logo (có thể là văn bản hoặc hình ảnh) và các liên kết khác nhau của một trang web

    Chúng tôi có một phần tử ngữ nghĩa cho Navbar i. e

    .

    Hãy viết cấu trúc của thanh điều hướng bằng HTML

    
      
    
       logo
      
      
    
       
    home
       
    projects
       
    about
       
    contact us
      
     

    Bước 1. -

    Trong bước đầu tiên, chúng tôi sẽ thực hiện một số đặt lại cơ bản. chúng tôi thực hiện đặt lại cơ bản để có thể xóa các thuộc tính mặc định do HTML đặt. Giống như phần đệm hoặc lề mặc định của HTML được đặt thành 0

    CSS để đặt lại cơ bản –

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
     }

    Mô hình hộp. -

    
    Mô hình Hộp xác định bố cục và thiết kế của chúng tôi.
    Xem hình ảnh bên dưới để tham khảo.

    

    Các phần khác nhau của mô hình hộp là –

    • Nội dung. - Nội dung của hộp, nơi xuất hiện văn bản, hình ảnh, liên kết và video của chúng tôi
    • đệm. - Đó là khu vực xung quanh nội dung. nó trong suốt
    • Biên giới. - Đây là khu vực xung quanh nội dung và phần đệm
    • Lề. - Đây là khu vực ngoài biên giới. Nó cũng trong suốt

    Tổng chiều rộng của phần tử được tính là –

    Tổng chiều rộng phần tử = chiều rộng + đệm trái + đệm phải + viền trái + viền phải + lề trái + lề phải

    Bước 2. -

    Trong bước này, chúng tôi sẽ thêm các kiểu vào phần tử điều hướng của chúng tôi

    ________số 8

    Hãy thảo luận về các thuộc tính từ đoạn mã trên

    1. chiều rộng tối đa. -

    Thuộc tính max-width chỉ định chiều rộng tối đa của phần tử. Nếu một phần tử có chiều rộng nhỏ hơn chiều rộng tối đa thì thuộc tính chiều rộng tối đa không có tác dụng

    JavaScript có giống với HTML và CSS không?

    HTML cung cấp cấu trúc cơ bản của trang web, cấu trúc này được nâng cao và sửa đổi bởi các công nghệ khác như CSS và JavaScript . CSS được sử dụng để kiểm soát cách trình bày, định dạng và bố cục. JavaScript được sử dụng để kiểm soát hành vi của các phần tử khác nhau.

    HTML và CSS có dễ hơn JavaScript không?

    JavaScript có thể sẽ mất nhiều thời gian để nắm bắt hơn CSS, nhưng cả hai đều khó hơn đáng kể so với HTML . Mặc dù vậy, JavaScript và Python vẫn được coi là hai trong số những ngôn ngữ lập trình dễ học nhất và được khuyên dùng cho người mới bắt đầu.

    JavaScript có giống với HTML không?

    Cả hai đều là ngôn ngữ máy tính hỗ trợ lập trình, nhưng có sự khác biệt lớn giữa JavaScript và HTML. Mặc dù JavaScript (viết tắt là JS) là ngôn ngữ kịch bản, HTML là ngôn ngữ đánh dấu . Chúng tôi sử dụng HTML để tạo các trang web hoặc ứng dụng web.

    Tôi nên học HTML CSS hay JavaScript?

    Lý tưởng nhất là bạn sẽ học HTML trước, sau đó là CSS và sau đó kết thúc bằng JavaScript , khi chúng xây dựng dựa trên nhau theo thứ tự đó.