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ị sự 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

Bạn đang xem: html css javascript hướng dẫn

Nếu bạn đang học phát triển web, bạn sẽ 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ị sự 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 phải học chúng thật tốt.

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

Nhưng có thể bạn đang tự hỏi từng ngôn ngữ 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à điều gì khiến chúng phổ biến đến mức bạn không thể không nhìn thấy chúng trong mọi hướng dẫn và chủ đề dựa trên phát triển web?

Giờ thì bạn không cần phải băn khoăn nữa.

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

Internet là gì?

Internet chỉ đơn giản là một mạng 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ư sau: 168.212.226.204 < / code>

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, 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ủ < strong> chia sẻ hoặc phân phát 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 thành một biểu mẫu dễ hiểu bởi những người dùng cuối có nhiều kinh nghiệm và khả năng kỹ thuật.

Đây là lúc HTML, CSS, JavaScript và toàn bộ khái niệm về 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.

Dictionary.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 bản thảo để được sắp chữ, liên quan đến kiểu loại, cách sắp xếp các trang và những thứ tương tự.

Vì vậy, bạn có thể hãy nghĩ về HTML như 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ấu trúc của một 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 thế thuật ngữ 'in' bằng 'kết xuất' dưới dạng m từ chính xác.

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

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

 & lt;! DOCTYPE html & gt;
& lt; html lang = "vi" & gt;
& lt; đầu & gt;
  & lt; meta charset = "UTF-8" & gt;
  & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt;
  & lt; meta http-equiv = "X-UA-Tương thích" content = "ie = edge" & gt;
  & lt; link rel = "stylesheet" href = "./ styles.css" & gt;
  & lt; title & gt; Tài liệu & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
  & lt; h1 & gt; Đây là tiêu đề cấp đầu tiên trong HTML. Với CSS, tôi sẽ chuyển màu này thành màu đỏ & lt; / h1 & gt;
  & lt; h2 & gt; Đây là tiêu đề cấp hai trong HTML. Với CSS, tôi sẽ chuyển màu này thành màu xanh lam & lt; / h2 & gt;
  & lt; h3 & gt; Đây là tiêu đề cấp ba trong HTML. Với CSS, tôi sẽ chuyển màu này thành màu xanh lục & lt; / h3 & gt;
  & lt; p & gt; Đây là & lt; em & gt; paragragh & lt; / em & gt; Như bạn có thể thấy, tôi đã đặt dấu cách vào từ "đoạn văn". Bây giờ, tôi cũng sẽ thay đổi
    màu nền của từ "đoạn văn" thành màu đen và màu văn bản của từ "đoạn văn" thành màu xanh lục, tất cả chỉ bằng CSS. & lt; / p & gt;
  & lt; p & gt; Bản chất chính của hướng dẫn này là: & lt; / p & gt;
    & lt; ul & gt;
       & lt; li & gt; Chỉ cho bạn cách định dạng tài liệu web bằng HTML & lt; / li & gt;
       & lt; li & gt; Chỉ cho bạn cách thiết kế trang web bằng CSS & lt; / li & gt;
       & lt; li & gt; Chỉ cho bạn cách lập trình tài liệu web bằng JavaScript & lt; / li & gt;
    & lt; / ul & gt;

  & lt; p & gt; Tiếp theo, tôi sẽ thêm hai số sau và hiển thị kết quả, tất cả đều bằng JavaScript & lt; p / & gt;
    & lt; p & gt; Số đầu tiên: & lt; span id = "firstNum" & gt; 2 & lt; / span & gt; & lt; br & gt; & lt; / p & gt;
    & lt; p & gt; Số thứ hai: & lt; span id = "secondNum" & gt; 7 & lt; / span & gt; & lt; / p & gt;
    & lt; p & gt; Do đó, tổng của hai trong số đó là: & lt; span id = "answer" & gt; (chỗ dành sẵn cho câu trả lời) & lt; / span & gt; & lt; / p & gt;
    & lt; input type = "button" id = "sumButton" value = "Nhấp để thêm!" & gt;
& lt; / body & gt;
& lt; / html & gt;
 

index.html

Đây là cách bạn có thể định dạng và cấu trúc một tài liệu chỉ với 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
  • Tiêu đề cấp 2 h2 < / code>
  • Tiêu đề cấp 3 h3
  • Một đoạn văn p
  • Một danh sách không có thứ tự với dấu đầu dòng điểm ul li
  • Một nút đầu vào input
  • Và toàn bộ nội dung của trang < code> body

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

HTML localhost: 3000 / index.html

Bạn cũng có thể thêm các thuộc tính vào 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 id cho tất cả các ba phần tử span . Đ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.).

Tuy nhiên, trang này rất cơ bản và không hấp dẫn. Nếu bạn đang xây dựng bất kỳ thứ gì khác ngoài bản demo, bạn sẽ cần thêm một số kiểu 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? Bạn có thể bắt đầu với chứng nhận Thiết kế web đáp ứng của freeCodeCamp khóa học HTML hoàn toàn mới này của Beau Carnes .

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 để tạo trang web của bạn trông đẹp và dễ thương.

CSS là viết tắt của Trang tính kiểu xếp tầng và bạn sử dụng CSS để cải thiện giao diện của trang web. Bằng cách thêm các kiểu CSS phù hợp, bạn làm cho trang của mình trở nên hấp dẫn và dễ chịu hơn để người dùng cuối xem và sử dụng.

Hãy tưởng tượng nếu con người chỉ được tạo ra để có bộ xương và bộ xương trần - điều đó sẽ trông như thế nào? Không tốt nếu bạn hỏi tôi. Vì vậy, CSS giống như da, 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 phần tử bằng cách đặt chúng vào các khu vực cụ thể 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 như thế nào hoặc vị trí.

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

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

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

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

  h1 {
  màu nền: # ff0000;
}

h2 {
  màu nền: # 0000FF;
}

h3 {
  màu nền: # 00FF00;
}

em {
  màu nền: # 000000;
  màu: #ffffff;
}  

localhost: 3000 / styles.css

Kiểu trên, khi được áp dụng, sẽ thay đổi giao diện trang web của chúng ta thành:

CSS

Tuyệt vời, đúng không ?

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

Bạn muốn tìm hiểu thêm về CSS? Bạn có thể xem phần thứ hai của chứng nhận Thiết kế web đáp ứng của freeCodeCamp để bắt đầu.

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ĩ đến một số hành động bạn thực hiện trong cuộc sống hàng ngày:

Khi cảm thấy nguy hiểm, bạn sẽ chạy. Khi bạn đói, bạn ăn. Khi bạn mệt mỏi, bạn ngủ. Khi bạn lạnh, bạn tìm kiếm sự ấm áp. Khi băng qua một con đường đông đúc, bạn sẽ tính toán khoảng cách của các phương tiện đối với 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 một số việc bất cứ khi nào có điều gì đó xảy ra. Cũng theo cách này, bạn có thể lập trình trang web của mình hoặc các phần tử riêng lẻ để phản ứng theo một cách nhất định và làm điều gì đó khi điều gì đó khác (một 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 , các 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à thay đổi chúng theo cách bạn muốn.

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

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

Nhờ DOM, chúng tôi có thể sử dụng các phương thức như getElementById () để truy cập các phần tử từ trang web của chúng tôi.

JavaScript cho phép bạn tạo trang web của mình thành “ suy nghĩ và hành động ”, đó là nội dung của lập trình.

Nếu bạ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 sẽ chạy khi nút được nhấp.

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

Đoạn mã này minh họa cách bạn có thể thực hiện các phép tính với JavaScript:

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

  cho tổng = firstNum + secondNum;
  document.getElementById ("answer"). innerHTML = `$ {firstNum} + $ {secondNum}, bằng $ {total}`;
}

document.getElementById ('sumButton'). addEventListener ("nhấp chuột", 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 của chúng? Mã này chỉ hiển thị như vậy.

displaySum 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 pháp Số), tính tổng và chuyển chúng dưới dạng giá trị bên trong cho một phần tử khác.

Lý do chúng tôi có thể truy cập những 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 trên chúng, để giúp chúng tôi xác định chúng.

< p> Nhờ đó:

  // thuộc tính id đã được thiết lập trong cả ba

& lt; span id = "firstNum" & gt; 2 & lt; / span & gt; & lt; br & gt;
    ... & lt; span id = "secondNum" & gt; 7 & lt; / span & gt;
    ...... & lt; span id = "answer" & gt; (trình giữ chỗ cho câu trả lời) & lt; / span & gt;  

Chúng tôi có thể thực hiện việc này:

< pre> // getElementById sẽ lấy tất cả các phần tử HTML theo thuộc tính "id" cụ thể
...
let firstNum = Number (document.getElementById ('firstNum'). innerHTML)
let secondNum = Number (document.getElementById ('secondNum'). innerHTML)

cho tổng = firstNum + secondNum;
document.getElementById ("answer"). innerHTML = `$ {firstNum} + $ {secondNum}, bằng $ {total}`;

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ập nhật:

JAVASCRIPT 2 cộng với 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ác thuật toán JavaScript và Cấu trúc dữ liệu 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 thực hiện Đặt HTML, CSS và JavaScript cùng 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 siêu liên kết, cùng với tất cả nội dung của họ như hình ảnh, video, v.v. có trên máy chủ, nội dung đó sẽ được hiển thị vào trang web .

Việc 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 những gì đang được hiển thị và tương tác với nó.

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 giao diện người dùng. Ở đó, 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 mà 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, Tuy nhiên, CSS đã trở thành không chỉ là một ngôn ngữ thiết kế. Bạn thực sự có thể triển khai các hoạt ảnh và chuyển tiếp mượt mà chỉ với 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 không chỉ được sử dụng trong trình duyệt. Giờ đây, 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 là: HTML, CSS và JavaScript là ngôn ngữ chính của Web.

Vậy là xong. 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 nhận được điều 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 chuỗi thử thách viết mã hàng tuần nhằm hướng dẫn người mới bắt đầu cách lập trình bằng JavaScript. Hãy khám phá trên blog của tôi .

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

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ủ đề bằng JavaScript với các ghi chú kỹ thuật số vẽ tay. Hãy xem tại đây .


Xem thêm những thông tin liên quan đến chủ đề html css javascript hướng dẫn

Learn to Code in 5 Minutes - HTML, CSS, and Javascript Tutorial | Must Know Advice for Beginners

alt

  • Tác giả: ROOTs Technology
  • Ngày đăng: 2020-04-16
  • Đánh giá: 4 ⭐ ( 1197 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Learn to Code in 5 Minutes - HTML, CSS, and Javascript Tutorial | Must Know Advice for Beginners

    Hey! In this video, I'll be giving you a quick overview of HTML, CSS, and JavaScript. This HTML, CSS, and JavaScript tutorial covers the three main technologies powering the web, that are used on almost every website you interact with daily. This is a tutorial for beginners, and the best way to learn how to code is by writing code, so open up another browser tab, go to www.JsBin.com and let's start writing code!

    Computer science will allow you to have many job opportunities since coding is needed by a lot of startups and larger businesses as well. So if you're ready to start learning to code, watch this video!

    SUBSCRIBE, LIKE, and share this video so I can share more tutorials and tech insights.
    Comment below any questions you have.

    Coding Programming HTML CSS JavaScript ComputerScience ComputerScienceStudents

    Sample of the coding curriculum I use to teach my students: https://rootstechnology.info/resources/

    Schedule a phone call with me:
    https://calendly.com/rootstechnology-tj/quick-chat

    Want to learn how to code?
    Let me teach you: http://www.RootsTechnology.info

    Coding Portfolio Projects: https://bit.ly/roots-projects
    Limited $50 off coupon: roots50

    How I went from making $37K/yr to $125K+ by teaching myself to code: https://youtu.be/NyCyknm_n8M

    Learn HTML basics in 15 minutes: https://youtu.be/LjiGQoIqxs8

    Learn CSS basics in 15 minutes: https://youtu.be/3ceaeJtd2Ec

    Buy me coffee:
    https://www.buymeacoffee.com/toluvstj

    SUBSCRIBE and LIKE these videos for more tutorials. Comment below what types of tutorials you'd like to see, and any questions you may have.

    Also, checkout my lifestyle channel with my wife: https://www.youtube.com/channel/UCInx5rG7p-754im8lHA7k3w

One moment, please...

  • Tác giả: quachquynh.com
  • Đánh giá: 5 ⭐ ( 7095 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tự Học Thiết Kế Website với HTML, CSS và JavaScript

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 5 ⭐ ( 5679 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khoá hướng dẫn tự học thiết kế website với HTML, CSS và JavaScript này được thiết kế dựa trên sự tiếp nối của khoá hướng dẫn [tự học thiết website với HTML và CSS](https://www.codehub.vn/huong-dan/Tu-Hoc-Thiet-Ke-Website-voi-HTML-va-CSS).

    Trong khoá...

Hướng Dẫn Xây Dựng Tabs Với HTML, CSS và Javascript

  • Tác giả: www.thanhlongdev.com
  • Đánh giá: 5 ⭐ ( 4471 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn tạo tabs bằng HTML, CSS và Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 5581 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: HIển thị nội dung theo các tabs là một trong những kỹ thuật rất hiệu quả khi trang web của bạn có chứa nhiều nội dung ở các thể loại khác nhau, nó cũng rất.

Hướng dẫn chi tiết lập trình HTML

  • Tác giả: www.elib.vn
  • Đánh giá: 5 ⭐ ( 3798 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn HTML, CSS & Javascript cơ bản

  • Tác giả: solutionseeking.com
  • Đánh giá: 5 ⭐ ( 8896 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn HTML, CSS & Javascript cơ bản - Thiết kế web giá rẻ tại Vũng Tàu và HCM. Thiết kế web chuẩn SEO, theo yêu cầu khách hàng, làm app Android & iOS

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách tạo liên kết tải xuống có thể chia sẻ cho tệp trên Google Drive - cách tạo liên kết tải xuống

By ads_php