Trước khi chúng ta bắt đầu blog ngày hôm nay, hãy để tôi nói với bạn rằng viết mã HTML khác với các ngôn ngữ thông thường như python và C/C++

nhưng tại sao?

Bởi vì, để sử dụng python và C/C++, bạn sẽ không cần trình duyệt web để xem đầu ra của chương trình thay vào đó bạn có thể sử dụng bất kỳ ide cụ thể nào để hiển thị đầu ra trên bảng điều khiển nhưng khi nói đến HTML, chúng tôi sử dụng web.

Vì vậy, để xem đầu ra của mã Html, chúng tôi cần một máy chủ web và chúng tôi cũng cần định cấu hình ide nhật thực của mình với một máy chủ web

trên thực tế, máy chủ web mà chúng tôi sẽ sử dụng cho blog này là Apache Tomcat

Bước 1. tải xuống ide nhật thực Java EE IDE

trước khi bạn cài đặt Eclipse ide trên hệ thống của mình, hãy đảm bảo rằng bạn đã cài đặt java trên hệ thống của mình

tại sao?

Bởi vì nhật thực là một ý tưởng hoàn toàn dựa trên java và bạn cần java trên hệ thống của mình để vận hành nhật thực trên hệ thống của mình

ai để xác định xem java đã được cài đặt hay chưa trên hệ thống của bạn?

Để kiểm tra xem hệ thống của bạn đã cài đặt java hay chưa, bạn cần sử dụng phím tắt là win + R trên bàn phím và nhập cmd rồi nhấn OK để mở bảng điều khiển cửa sổ

Khi bạn nhìn thấy, một cửa sổ nhắc lệnh bật lên trên màn hình, sau đó, trong trường hợp đó, hãy nhập lệnh bên dưới để xác định xem bạn có java trên hệ thống của mình không

Java --version

với điều này trong tâm trí, rõ ràng như bùn?

nhân dịp này, Hãy bắt đầu tải xuống ide nhật thực

Nhấp vào đây -> để tải xuống ide từ trang web nhật thực

Khi bạn đã mở trang web nhật thực, sau đó, ngay lúc đó, hãy chuyển đến phần gói tải xuống và chọn ide Eclipse dành cho Nhà phát triển web Java dành cho doanh nghiệp

Chọn hệ điều hành của bạn, trong trường hợp của tôi, tôi có hệ điều hành window 64bit, vì vậy, hãy chọn hệ điều hành của bạn theo yêu cầu hệ thống và tải xuống

Trong trường hợp, nếu bạn không biết mình có loại hệ thống 32 bit hay 64 bit

Sau đó, trong trường hợp đó hãy nhập lệnh trong dấu nhắc lệnh được đề cập bên dưới để xem loại hệ thống của bạn

systeminfo

Khá hiệu quả đúng không?

Khi bạn đã hoàn tất tải xuống ide nhật thực, ngay lúc đó, hãy giải nén các tệp từ thư mục. zip thông qua phần mềm WinRAR

khi bạn hoàn thành việc giải nén các tệp, lúc đó, hãy chuyển đến thư mục nhật thực và khởi chạy ứng dụng nhật thực

Đó là nó

Bước 2. tải xuống máy chủ web Apache Tomcat

Được rồi, đây là một cái khác mà bạn cần tải xuống

Nhấp vào đây -> để tải xuống máy chủ web Apache Tomcat

lần này, Chọn phiên bản bạn muốn tải xuống và tải xuống trên hệ thống của bạn

Sau khi tải tập tin về xong, giải nén. tập tin nén

Bước 3. định cấu hình ide nhật thực với máy chủ web Apache Tomcat

theo cách tương tự, Hãy đi sâu vào cấu hình ý tưởng nhật thực

không còn nghi ngờ gì nữa, Đầu tiên, Khởi chạy ý tưởng nhật thực của bạn

trong trường hợp này, hãy chuyển đến tab máy chủ và nhấp vào (không có máy chủ nào, hãy nhấp vào liên kết này để tạo máy chủ mới )

Trong trường hợp, nếu bạn không thấy tab máy chủ thì ngay lúc đó

tất nhiên, nhấp vào cửa sổ -> hiển thị chế độ xem -> và chọn tùy chọn máy chủ

chưa kể, Tiếp theo, chọn phiên bản Apache Tomcat mà bạn đã tải xuống và nhấp vào tiếp theo

Duyệt đến đường dẫn mà bạn đã lưu máy chủ Tomcat trong trường hợp của tôi, thư mục đường dẫn là (C. \Users\Mohammed Anees\Desktop\software\apache_tomcat\apache-tomcat-8. 5. 73 ) sau đó nhấp vào tiếp theo

Cuối cùng, nhấp vào Kết thúc để hoàn thành cấu hình kết nối ide nhật thực với máy chủ web Apache Tomcat

không còn nghi ngờ gì nữa, đó là nó

tính đến thời điểm hiện tại, Chúng tôi đã cấu hình, Eclipse ide với web server Apache Tomcat

Bước 4. Kiểm tra cấu hình

trong thực tế, hãy xem liệu chúng tôi đã định cấu hình đúng chưa

lúc này mặc định server sẽ ở chế độ dừng

Vì vậy, để kiểm tra cấu hình mà chúng tôi đã thiết lập,

để chắc chắn, trước tiên, nhấp vào phần máy chủ và trên phần máy chủ, nhấp chuột phải vào” Tomcat v9. 0 tại localhost[đã dừng]” và nhấp vào bắt đầu

Trên tab bảng điều khiển của bạn, bạn sẽ thấy nội dung như thế này bên dưới khi bạn nhấp vào bắt đầu

Khi máy chủ bắt đầu, sau đó trên tab máy chủ, bạn sẽ thấy

lần này, “ Tomcat v9. 0 Máy chủ tại máy chủ cục bộ [đã bắt đầu, đã đồng bộ hóa]”

Nếu bạn nhấp đúp chuột vào “ Tomcat v9. 0 tại máy chủ cục bộ [đã bắt đầu, đã đồng bộ hóa]” thì trong trường hợp đó, bạn sẽ có thể thấy số cổng của máy chủ web là 8080

Như chúng ta biết rằng máy chủ của chúng ta đã được khởi động, hãy thực hiện một bài kiểm tra đơn giản để kiểm tra máy chủ trên trình duyệt web

cho đến bây giờ, được rồi,

Đầu tiên, hãy mở trình duyệt web của bạn và nhập địa chỉ là “localhost. 8080” thì bạn sẽ nhận được kết quả như hình bên dưới

trong thực tế, điều đó có nghĩa là bạn đã nhận được phản hồi từ máy chủ Tomcat

tóm lại là hay

Về mặt tích cực, hãy để tôi xin chúc mừng bạn rằng chúng tôi đã thiết lập ý tưởng nhật thực của mình với máy chủ tomcat

cho đến bây giờ, được rồi,

tóm lại, Tiếp theo, chúng ta sẽ xem, làm thế nào chúng ta có thể tạo dự án đầu tiên của mình phải không?

Bước #5. Tạo một dự án web trong nhật thực

Khi bạn đã định cấu hình Eclipse-ide với máy chủ web  Apache Tomcat thì chúng ta có thể tạo một dự án mới

Đầu tiên, vào new—>Dự án web động —> viết tên dự án “Demo”—> next—> next -> kết thúc

Thứ hai, nhấp chuột phải vào dự án demo —> mới —> tệp HTML—> ghi tên tệp —> kết thúc

Thứ ba, lưu dự án (ctrl+s)

Thứ 4 chạy project bằng cách vào run as —> 1 run on server —> click vào localhost —>chọn Tomcat v9. 0 Máy chủ tại localhost —> tiếp theo —> kết thúc —> ok

Thứ năm. bạn sẽ thấy đầu ra trên trình duyệt web, nếu bạn không thấy đầu ra nào trên trình duyệt web thì ngay lập tức hãy nhấp vào cửa sổ —-> trình duyệt web và chọn trình duyệt

chưa kể Một số điều cơ bản về HTML

Cấu trúc của một tài liệu HTML

tag  is the place where you keep data that will not be visible to end-users  but adds functionalities to the web page such as title, styles

tag is the place where keep content of the page such as headings, buttons, text

Nhận xét trong tệp HTML

nói một cách dễ hiểu, Để nhận xét trong tệp HTML, hãy sử dụng mã bên dưới

thẻ cơ thể

có nghĩa là, thẻ body được áp dụng trên toàn bộ tài liệu Html, thông thường, chỉ có một thẻ body sẽ có sẵn trong toàn bộ tài liệu Html

Những việc mà thẻ nội dung có thể làm cũng có thể được thực hiện với sự trợ giúp của CSS và đó cũng là được khuyến nghị sử dụng CSS thay vì  thẻ nội dung

để bắt đầu, Hãy xem, Cách sử dụng thẻ body  trong tài liệu Html

Ở đây, trong mã bên dưới bgcolor=”yellow” là một thuộc tính

Chức vụ

Thẻ tiêu đề

 




 h1 aneescraftsmanship.com 
 h2 aneescraftsmanship.com 
 h3 aneescraftsmanship.com 
 h4 aneescraftsmanship.com 
 h5 aneescraftsmanship.com 
 h6 aneescraftsmanship.com 

Đoạn văn  

 





 h1 aneescraftsmanship.com[esp32 web server page] 
pin 32 of an esp32 board - state
pin 26 of an esp32 board - state

Thẻ phụ và thẻ phụ

nhân dịp này, hãy xem cách chúng ta có thể viết chỉ số dưới (thẻ phụ) và chỉ số trên (thẻ sup) trong Html và cách chúng ta có thể sử dụng nó để tạo chỉ số dưới và chỉ số trên cho các chữ cái

________số 8_______

Các yếu tố phụ và sup

nước H2 O

Nhiệt độ tính bằng độ 30 °C văn bản.

Tạo không gian trong Html

Để tạo khoảng cách giữa hai từ, hãy sử dụng   từ đó sẽ nằm trong dòng và để ngắt dòng, hãy sử dụng <

Đánh văn bản

Để gạch một văn bản trong tài liệu Html, bạn có thể sử dụng các thẻ như hoặc and

Ghi chú. thẻ đình công bị xóa khỏi HTML5

striking a text
hi there! People, let's see, how we can strike a text?
Successfully!
Second paragraph!
Third paragraph 
  

đánh một văn bản

Chào bạn. Mọi người, hãy xem, làm thế nào chúng ta có thể gõ một văn bản?

Đoạn thứ hai

đoạn thứ ba

nút

systeminfo

0

Siêu liên kết

Siêu liên kết chẳng là gì ngoài các liên kết Html mà bạn có thể tạo để liên kết văn bản,  hình ảnh, nút hoặc bất kỳ phần tử  nào khác đến một đích nhất định

cú pháp

systeminfo

1

Thí dụ

systeminfo

2

Văn bản mẫu. Để sử dụng mã bên dưới, bạn cần sao chép và dán mã vào Arduino ide của mình và cài đặt thư viện có tên ESPAsyncWebServer

Liên kết văn bản và nút

systeminfo

3

CSS (biểu định kiểu xếp tầng)

Tóm lại, CSS được sử dụng để tạo kiểu cho tài liệu HTML và nó bao gồm 3 thuộc tính chính

1. Bộ chọn. [bộ chọn là thẻ HTML mà tại đó bạn có thể áp dụng kiểu như  
2. Thuộc tính. [ví dụ: color là thuộc tính biểu thị màu của văn bản ]
3. Giá trị thuộc tính. [ ví dụ: thuộc tính màu có giá trị thuộc tính #ff0000 cho màu đỏ và #00ff00 cho màu lục]

cú pháp

systeminfo

4

một ví dụ

systeminfo

5

Cách  liên kết biểu định kiểu CSS  với tài liệu HTML

nói chung, có ba cách để bạn có thể liên kết biểu định kiểu CSS với tài liệu HTML

1. Bên ngoài
2. Nội bộ
3. nội tuyến

Bên ngoài

mục lục. html

systeminfo

6

lần này, Bạn có thể tạo một tệp bên ngoài trong nhật thực bằng cách nhấp chuột phải vào thư mục dự án trong thư mục Demo trường hợp của tôi -> mới -> CSS. TẬP TIN—>ghi tập tin với. phần mở rộng css  —>kết thúc

Phong cách. css

systeminfo

7

Nội bộ

systeminfo

8

Nội tuyến

Kiểu nội tuyến xác định trong một phần tử cụ thể để nó không can thiệp vào các phần tử còn lại khác trên trang web

systeminfo

9

Thẻ kiểu

Để viết CSS, bạn cần sử dụng thẻ style nhưng nên đặt trong tags of your html document

0

Đây là một tiêu đề

Đây là một đoạn

Cách sử dụng Lớp và id

chưa kể, bằng cách sử dụng các lớp, bạn có thể thay đổi các thẻ với các kiểu khác nhau và sử dụng mã bên dưới bằng cách tạo một bên ngoài. tệp css được gọi là kiểu. css

GHI CHÚ. để bắt đầu, hãy luôn sử dụng dấu chấm (. ) tiền tố cho lớp

Ví dụ(. màu xanh da trời,. màu vàng,. hồng)

mục lục. html

1

Phong cách. css

2

id

Đối với id, thay thế lớp từ bằng id và cũng thay thế dấu chấm tiền tố (. ) với hàm băm (#)

Bạn có thể sử dụng các lớp và id nhưng cách tốt nhất là id phải là duy nhất trên một trang

nhưng tại sao?

Vì nó sẽ hữu ích cho bạn khi viết java script

mục lục. html

3

Phong cách. css

4

Thẻ meta trong HTML

Nói tóm lại, thẻ meta cung cấp thông tin liên quan đến trang HTML và nội dung của thẻ meta sẽ không hiển thị với người dùng cuối hoặc trang web

Thẻ meta, siêu dữ liệu được trình duyệt và công cụ tìm kiếm sử dụng để lấy thông tin liên quan đến trang web như mô tả, từ khóa, tác giả, bộ ký tự

in general, the Meta tags are always used in element

chưa kể, Chế độ xem thẻ meta sẽ chia tỷ lệ trang web thành thiết bị di động hoặc bất kỳ thiết bị nào khác

Thí dụ

5

thẻ khoảng cách

Tóm lại, thẻ span là một thẻ dòng và nó được sử dụng để định dạng văn bản

6span thẻ

chào bạn. Mọi người Tôi vừa tạo một đoạn văn để giải thích khái niệm về thẻ span và hãy để tôi tạo một dòng thứ hai của đoạn văn để tôi có thể mở rộng đoạn văn<

Khi chúng tôi sử dụng thẻ span, nó sẽ không có bất kỳ ảnh hưởng nào đến văn bản

nhưng tại sao?

Vì để định dạng, một khoảng văn bản sẽ không có bất kỳ thuộc tính cục bộ nào, chúng ta chỉ có thể sử dụng các thuộc tính toàn cục (chẳng hạn như lớp, id, kiểu) trong thẻ span mà chúng ta thường sử dụng trong các thẻ khác

thẻ 7span

chào bạn. Mọi người Tôi vừa tạo một đoạn văn để giải thích khái niệm về thẻ span và hãy để tôi tạo một dòng thứ hai của đoạn văn để tôi có thể mở rộng đoạn văn<

chào bạn. Mọi người Tôi vừa tạo một đoạn văn để giải thích khái niệm về thẻ span và hãy để tôi tạo một dòng thứ hai của đoạn văn để tôi có thể mở rộng đoạn văn<

thẻ div

Tóm lại, thẻ div chia toàn bộ tài liệu Html thành các phần khác nhau và phần tử div thường được sử dụng làm vùng chứa (tương tự như hộp) cho các phần tử Html khác

Khi chúng ta sử dụng thẻ div nó sẽ không ảnh hưởng gì đến phần div

nhưng tại sao?

Vì để định dạng, một phần div sẽ không có bất kỳ thuộc tính cục bộ nào, chúng ta chỉ có thể sử dụng các thuộc tính toàn cục (chẳng hạn như lớp, id, kiểu) trong thẻ div mà chúng ta thường sử dụng trong các thẻ khác

8div thẻ

chào bạn. Mọi người Tôi vừa tạo một đoạn văn để giải thích khái niệm về thẻ span và hãy để tôi tạo một dòng thứ hai của đoạn văn để tôi có thể mở rộng đoạn văn<

chào bạn. Mọi người Tôi vừa tạo một đoạn văn để giải thích khái niệm về thẻ span và hãy để tôi tạo một dòng thứ hai của đoạn văn để tôi có thể mở rộng đoạn văn<

tóm lại, Chúng ta có thể thay đổi các thuộc tính của div bằng cách sử dụng CSS

thẻ 9div

chào bạn. Mọi người Tôi vừa tạo một đoạn văn để giải thích khái niệm về thẻ span và hãy để tôi tạo một dòng thứ hai củaso that I can extend the paragraph

chào bạn. Mọi người Tôi vừa tạo một đoạn văn để giải thích khái niệm về thẻ span và hãy để tôi tạo một dòng thứ hai của đoạn văn để tôi có thể mở rộng đoạn văn<

Sự khác biệt giữa thẻ div và thẻ span

Cả thẻ div và thẻ span đều giống nhau nhưng thẻ div được sử dụng cho một phần của các phần tử trong khi span được sử dụng cho nội tuyến

Trong đoạn mã dưới đây, thẻ span được hoán đổi với thẻ div để bạn có thể thấy sự khác biệt

trong trường hợp, Nếu bạn đã nhận thấy

Rằng khi tôi áp dụng div vào dòng văn bản, nó sẽ ngay lập tức chuyển sang dòng tiếp theo tương tự, trong trường hợp thẻ span, nó hoạt động trơn tru trong một dòng văn bản

Bạn có thể viết HTML trong Eclipse không?

Bạn có thể sử dụng Eclipse cho HTML và CSS không?

Làm cách nào để định dạng mã HTML trong Eclipse?

Làm cách nào để chạy HTML và JavaScript trong Eclipse?