Chào mừng bạn đến với HTML, cách dễ nhất để học HTML & CSS trực tuyến, tương tác.
Học HTML & CSS là điều cần thiết cho bất kỳ nhà phát triển web nào và không cần phải biết cách lập trình bằng JavaScript.
Trước khi bạn bắt đầu, tôi khuyên bạn nên bắt đầu bằng cách tải xuống IDE HTML & CSS. Sở thích cá nhân của tôi là sử dụng IDE của JetBrains. Bạn có thể tải xuống Phiên bản cộng đồng Pycharm miễn phí, có hỗ trợ phát triển HTML, CSS và JavaScript thực sự tốt, cùng với tất cả các tính năng mà IDE tốt cung cấp - tích hợp mã nguồn, tái cấu trúc mã, thụt tự động, đánh dấu cú pháp, so sánh Công cụ, v.v.
Dưới đây là danh sách các trình soạn thảo HTML, CSS và JavaScript mà bạn có thể chọn từ:
- Mã vs (miễn phí, được đề xuất) - //code.visualstudio.com/
- Atom (miễn phí) - //atom.io/
- JetBrains Webstorm (thương mại) - //www.jetbrains.com/webstorm/
- Văn bản siêu phàm (thương mại) - //www.sublimetext.com/
- Notepad ++ (Chỉ Windows)-//notepad-plus-plus.org/doad/v7.html
Trong hướng dẫn này, bạn sẽ không thực sự cần IDE, bởi vì tất cả các mã hóa được thực hiện trực tuyến.
Giới thiệu
HTML (Ngôn ngữ đánh dấu siêu văn bản) là một tiêu chuẩn được phát triển trong nhiều năm để truyền tải thông tin qua Internet bằng cách sử dụng "siêu liên kết" - hoặc chỉ liên kết như chúng ta biết ngày nay. Trái ngược với PDF, trang HTML có tính chất năng động hơn nhiều, cho phép bạn duyệt web bằng cách nhấp vào liên kết và tương tác với trang. Các liên kết có thể đưa bạn đến một vị trí khác trong trang hiện tại hoặc đến một trang khác qua internet.
Phiên bản cuối cùng của HTML là HTML 5.0, có nhiều khả năng hơn nhiều so với những gì web ban đầu có trong tâm trí. HTML 5 là một nền tảng cực kỳ toàn diện cho phép tạo giao diện người dùng cao cấp cùng với sức mạnh của CSS và JavaScript. HTML 5 mạnh đến mức nó đã xoay sở để phản đối Adobe Flash, Silverlight của Microsoft và tất cả các plugin HTML như trình phát video, applet Java, v.v.
Vậy sự khác biệt giữa HTML, CSS và JavaScript là gì? Trước hết, tất cả chúng có thể được gói gọn trong một trang HTML, có nghĩa là trình duyệt bắt đầu bằng cách tải một trang HTML và chỉ sau đó nó biết tải gì từ đó.
- Trang HTML là một tài liệu HTML xác định nội dung của trang bằng cách sử dụng một đánh dấu đặc biệt tương tự như XML.HTML page is an HTML document that defines the content of the page by using a special markup similar to XML.
- Một bảng kiểu CSS xác định kiểu của các phần tử HTML trong trang. Nó được đặt trong trang HTML hoặc được tải bằng thẻ.CSS stylesheet defines the style of the HTML elements in the page. It is either embeeded within an HTML page or loaded using the tag.
- JavaScript là ngôn ngữ lập trình được sử dụng để tương tác với trang HTML thông qua một API có tên DOM (mô hình đối tượng tài liệu). Nói cách khác, các ràng buộc DOM là keo giữa ngôn ngữ lập trình và trang HTML ban đầu được tải vào trình duyệt. is the programming language used to interact with the HTML page through an API called the DOM (Document Object Model) Bindings. In other words, the DOM Bindings are the glue between the programming language and the HTML page that was initially loaded into the browser.
Những điều cơ bản của hướng dẫn này bìa HTML và CSS. Các phần nâng cao cũng giả định kiến thức về lập trình và JavaScript. Để tìm hiểu JavaScript, hãy truy cập //www.learn-js.org.
Chúng tôi sẽ sử dụng khung CSS có tên Bootstrap by Twitter, thư viện CSS phổ biến nhất hiện nay. Các nguyên tắc cơ bản của thư viện CSS khá giống nhau - tất cả đều dựa trên "hệ thống lưới", đây là một cách dễ dàng để xác định bố cục của trang HTML - một phương pháp được phát triển trong nhiều năm trong phát triển web.
Trang HTML đầu tiên của bạn
Hãy bắt đầu bằng cách tạo một trang HTML đơn giản. Trang HTML có bố cục cơ bản sau:
<!DOCTYPE html> <html> <head> <!-- head definitions go here --> </head> <body> <!-- the content goes here --> </body> </html>Hãy bắt đầu bằng cách tạo một trang đơn giản chứa cụm từ "Xin chào, thế giới!" trong cơ thể. Trang cũng sẽ có một tiêu đề - thứ hiển thị trong tiêu đề của tab trong trình duyệt của bạn. Phần tử <title> xác định tiêu đề của trang HTML.
Thẻ <!DOCTYPE html> xác định loại tài liệu mà trình duyệt sẽ hiển thị. Điều này được sử dụng cho lý do di sản. Nếu bạn muốn đến phiên bản mới nhất của HTML (HTML5) thì bạn nên sử dụng thẻ này.
Phần tử <p> xác định một "đoạn", một khối văn bản có một khoảng cách nhỏ ở giữa trên cùng và dưới cùng.
Lưu ý cách các thẻ có thẻ bắt đầu và thẻ kết thúc được biểu thị bằng dấu gạch chéo (</p>). Tất cả mọi thứ ở giữa là nội dung của thẻ. Nội dung của thẻ thường có thể có các thẻ HTML bổ sung trong chúng.
<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <p>This is an example of a simple HTML page with one paragraph.</p> </body> </html>Bạn cũng có thể sao chép và dán mã này vào một tệp mới trong trình soạn thảo văn bản hoặc IDE và lưu tệp dưới dạng "index.html". Tệp "index.html" là tệp mặc định mà máy chủ web sẽ tìm kiếm khi truy cập trang web. Sau khi lưu tệp, bạn có thể nhấp đúp vào nó để mở nó bằng trình duyệt của mình.
Bây giờ chúng ta đã biết cấu trúc cơ bản của một trang HTML, hãy thử nó.
Tập thể dục
- Thêm thẻ HTML <title> với văn bản "Xin chào, Thế giới!"
- Thêm một đoạn văn (thẻ <p>) vào cơ thể với văn bản "Xin chào, Thế giới!"