Các quy trình này mô tả cách tạo các tệp HTML mới, cho phép triển khai chức năng chỉnh sửa HTML đầy đủ của PDT.
Eclipse Web Developer ToolsInsInses HTML, CSS và JSON Editors và JavaScript Development Tools từ dự án Nền tảng Công cụ Web Eclipse, nhằm hỗ trợ phát triển web và nút phát triển phía khách hàng.
Chúng ta có thể viết mã HTML CSS trong Eclipse không?
Trước khi chúng tôi bắt đầu blog 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ữ bình thường như Python và, C/C ++ & NBSP;
Why?
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ì 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 trình duyệt để hiển thị đầu ra trên trang 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 Eclipse của mình với máy chủ web
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 Eclipse IDE 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 bạn đã cài đặt Java trên hệ thống của mình
why?
Bởi vì nhật thực là một IDE dựa trên Java hoàn toàn & NBSP;
Ai để xác định xem Java có được cài đặt hay không trên hệ thống của bạn?
To & nbsp; kiểm tra xem bạn có cài đặt Java trên hệ thống của mình khôngwin + R from the keyboard and type cmd then press OK to open the window console
Khi bạn nhìn thấy, một cửa sổ bật lên lệnh bật lên trên màn hình, sau đó, tại trường hợp đó, 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
Java --version
Bấm vào đây -> Để tải xuống IDE từ trang web Eclipse
Một lần, bạn đã mở trang web Eclipse, sau đó, AT & NBSP; Ngay lập tức đó, hãy chuyển đến phần tải xuống và chọn Eclipse IDE cho các nhà phát triển web Java Enterprise
Chọn hệ điều hành của bạn, trong trường hợp của tôi, tôi có một hệ điều hành 64 bit cửa sổ, vì vậ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
Khi, bạn đã hoàn thành tải xuống Eclipse IDE, sau đó, ngay lập tức, trích xuất các tệp từ tệp .zip thông qua phần mềm Winrar
Khi bạn hoàn thành việc trích xuất các tệp, sau đó, tại trường hợp đó, hãy truy cập thư mục Eclipse & nbsp; và khởi chạy ứng dụng Eclipse
Bước #2: Tải xuống máy chủ web Apache Tomcat
Bấm vào đây -> Để tải xuống máy chủ web Apache Tomcat
Chọn phiên bản mà bạn muốn tải xuống và tải xuống trên hệ thống của bạn
Sau khi bạn hoàn thành tải xuống tệp trích xuất tệp .zip
Bước #3: Định cấu hình IDE Eclipse với máy chủ web Apache Tomcat
Khởi chạy Eclipse IDE của bạn sau đó chuyển đến tab Máy chủ và nhấp vào [không có máy chủ nào có sẵn Nhấp vào liên kết này đến & nbsp; & nbsp; tạo một máy chủ mới]
Trong trường hợp, nếu bạn đã không thấy tab Máy chủ thì tại cửa sổ Nhấp ngay lập tức -> Hiển thị chế độ xem -> và chọn máy chủ, bạn cũng có thể nhấp vào bảng điều khiển để xem bảng điều khiển nhấn
Tiếp theo, chọn phiên bản Apache Tomcat mà bạn đã tải xuống và nhấp vào Next & NBSP;click next
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 \ phần mềm \ apache_tomcat \ apache-tomcat-8.5.73]click next
Cuối cùng, nhấp vào Kết thúc để hoàn thành cấu hình để kết nối Eclipse IDE với & NBSP; máy chủ web apache tomcat click Finish to complete the configuration to connect eclipse ide to web server Apache Tomcat
Bước #4: Kiểm tra cấu hình
Để kiểm tra cấu hình mà chúng tôi đã đặt, 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 máy chủ Tomcat v9.0 tại Localhost 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 một cái gì đó như thế này
Khi máy chủ khởi động, sau đó trên tab máy chủ, nếu bạn nhấp đúp vào máy chủ của Tom Tomcat V9.0 tại localhost, sau đó, bạn sẽ có thể thấy số cổng của máy chủ web là 8080
Tại trường hợp này, bạn có thể mở trình duyệt web của mình và nhập địa chỉ dưới dạng local localhost: 8080, sau đó bạn sẽ nhận được kết quả như hình ảnh dưới đây cũng là hình ảnh dưới đây cho thấy bạn nhận được phản hồi từ máy chủ Tomcatlocalhost:8080” then you will get a result something like the below image also the below image shows that you got a response from the Tomcat server
Bước #5: Tạo một dự án web trong Eclipse
Khi bạn đã cấu hình Eclipse-IDE với Web Server & NBSP; Apache Tomcat thì chúng tôi có thể tạo một & NBSP mới;
Đầu tiên, hãy truy cập mới go to new—>Dynamic web project —> write the project name “Demo”—> next—> next —> finish
Thứ hai, nhấp chuột phải vào dự án demo -> mới -> HTML File, right click on the demo project —>new —>HTML file—> write file name —> finish
Thứ ba, lưu dự án [CTRL+S] save the project[ctrl+s]
Thứ tư, chạy dự án bằng cách chạy AS -> 1 chạy trên máy chủ -> Nhấp vào Localhost -> Chọn máy chủ Tomcat v9 run the project by going to run as —> 1 run on server —> click on localhost —>select Tomcat v9.0 Server at localhost —> next —> finish —> 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 bất kỳ đầu ra nào trên trình duyệt web thì ngay lập tức, nhấp vào Window Window-> Trình duyệt web và chọn Trình duyệt & NBSP;: you will see the output on the web browser, if you don’t see any output on the web browser then at that instant, click on window —-> web browser and select the browser
Một số điều cơ bản về HTML
Cấu trúc của tài liệu HTML
thẻ & nbsp; là nơi bạn giữ dữ liệu sẽ không hiển thị cho người dùng cuối & nbsp; Nhưng thêm các chức năng vào trang web như tiêu đề, kiểu
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 là nơi giữ nội dung của trang như tiêu đề, nút, văn bản
Nhận xét trong tệp HTML
Để nhận xét trong tệp HTML, hãy sử dụng mã dưới đây
Tag cơ thể
Thẻ cơ thể được áp dụng tất cả trên tài liệu HTML, thông thường, chỉ có một thẻ cơ thể sẽ có sẵn trong toàn bộ tài liệu HTML
Những điều mà thẻ cơ thể cũng có thể làm cũng có thể được thực hiện với sự trợ giúp của CSS và nó cũng được khuyến nghị sử dụng CSS thay vì & NBSP; một thẻ cơ thểrecommended to use CSS instead of a body tag
Hãy để xem, cách sử dụng thẻ cơ thể & nbsp; trong tài liệu HTML
Ở đây, trong mã bên dưới bgcolor = ”màu vàng là một thuộc tính bgcolor=”yellow” is an attribute
body tag
Tiêu đề
Thẻaneescraftsmanship.comđầu
Headings tags
aneescraftsmanship.comA Đoạn & NBSP;h2 aneescraftsmanship.com
h2 aneescraftsmanship.com
h3 aneescraftsmanship.com
h4 aneescraftsmanship.com
h5 aneescraftsmanship.com h6 aneescraftsmanship.com
A Paragraph
aneescraftsmanship.com [esp32 web server page]Sub Tag và Tag SUPh2 aneescraftsmanship.com[esp32 web server page]
pin 32 of an esp32 board - state
pin 26 of an esp32 board - state
Sub tag and sup tag
Hãy để xem cách chúng ta có thể & nbsp; Viết chỉ số [thẻ phụ] và superscript [thẻ SUP] trong HTML và cách chúng ta có thể sử dụng nó, để tạo chỉ số và siêu ký tự cho các chữ cái
The sub and sup elements
water H2 O
Temperature in degrees 30 °C text.
Các yếu tố phụ và SUP
Nước H2 o H2 O
Nhiệt độ tính bằng độ 30 ° C. 30 °C text.
Tạo không gian trong HTML
Để tạo không gian giữa hai từ sử dụng & nbsp; nó sẽ được nội tuyến và phá vỡ việc sử dụng dòng it will be inline and to break the line use
Nổi bật một văn bản
Để đánh 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 và or and
Lưu ý: Thẻ tấn công được xóa khỏi HTML5 strike tag is removed from the HTML5
________số 8nổi bật 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ể tấn công một văn bản? Thành công!
Đoạn thứ hai!
Đoạn thứ ba
nút
aneescraftsmanship.com [esp32 web server page]Hyperlinksh2 aneescraftsmanship.com[esp32 web server page]
pin 32 of an esp32 board - state
ON
OFF
pin 26 of an esp32 board - state
ON
OFF
Hyperlinks
Các siêu liên kết là không có liên kết nhưng các liên kết HTML mà bạn có thể tạo để liên kết một văn bản, & nbsp; hình ảnh, nút hoặc bất kỳ & nbsp khác; yếu tố đến một điểm đến nhất định
Cú pháp
0
Thí dụ
1
Ví dụ văn bản: Để sử dụng mã dưới đây, & nbsp; bạn cần sao chép và dán mã vào arduino IDE của mình và cài đặt một thư viện có tên là EspasyncwebserverESPAsyncWebServer
Liên kết một văn bản và nút
2CSS [Tờ phong cách xếp tầng]
CSS [cascading style sheets]
CSS được sử dụng để tạo kiểu tài liệu HTML và nó bao gồm 3 thuộc tính chính
- Bộ chọn: [Một bộ chọn là thẻ HTML mà tại đó bạn có thể áp dụng một kiểu như & nbsp; hoặc vv][a selector is an HTML tag at which you can apply a style such as
or etc]
- Thuộc tính: [Ví dụ: màu là một thuộc tính biểu thị màu của văn bản][for example, colour is a property which denotes the colour of the text ]
- 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 xanh lá cây][ for example, the colour property has property value #ff0000 for red and #00ff00 for green]
Cú pháp
3
Thí dụ
4
Ví dụ văn bản: Để sử dụng mã dưới đây, & nbsp; bạn cần sao chép và dán mã vào arduino IDE của mình và cài đặt một thư viện có tên là Espasyncwebserver
Liên kết một văn bản và nút
- CSS được sử dụng để tạo kiểu tài liệu HTML và nó bao gồm 3 thuộc tính chính
- Bộ chọn: [Một bộ chọn là thẻ HTML mà tại đó bạn có thể áp dụng một kiểu như & nbsp; hoặc vv]
2CSS [Tờ phong cách xếp tầng]
index.html
5
CSS được sử dụng để tạo kiểu tài liệu HTML và nó bao gồm 3 thuộc tính chính
Style.css
6Internal
Internal
7
Bộ chọn: [Một bộ chọn là thẻ HTML mà tại đó bạn có thể áp dụng một kiểu như & nbsp; hoặc vv]
Thuộc tính: [Ví dụ: màu là một thuộc tính biểu thị màu của văn bản]
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 xanh lá cây]Style tag
Một ví dụ but is recommended to place in the tags of your html document
Làm thế nào & nbsp; để liên kết một bảng kiểu CSS & nbsp; với một tài liệu HTMLCó ba cách mà bạn có thể liên kết bảng kiểu CSS với tài liệu HTML
Bên ngoài
Nội bộ
Nội tuyến
Bạn có thể tạo một tệp bên ngoài trong Eclipse 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.File,> Viết tệp với -> Kết thúc: always use dot[.] prefix for class
Kiểu nội tuyến xác định trong một yếu tố cụ thể, vì vậy, nó sẽ không can thiệp vào các phần tử làm lại khác trên trang web
index.html
0style.css
1idsids
8Style Tag
Để viết CSS, bạn cần sử dụng thẻ kiểu nhưng được khuyến nghị đặt vào các thẻ của tài liệu HTML của bạn
Why?
9
index.html
2style.css
3Đây là một tiêu đề
Đây là một đoạn văn.
Cách sử dụng các lớp và ID
Bằng cách sử dụng các lớp, bạn có thể thay đổi thẻ với các kiểu khác nhau và & nbsp; sử dụng mã bên dưới bằng cách tạo tệp .css bên ngoài được gọi là style.css
Lưu ý: Luôn sử dụng tiền tố DOT [.]
Thí dụxample
4Ví dụ văn bản: Để sử dụng mã dưới đây, & nbsp; bạn cần sao chép và dán mã vào arduino IDE của mình và cài đặt một thư viện có tên là Espasyncwebserver
Liên kết một văn bản và nút
2CSS [Tờ phong cách xếp tầng]
CSS được sử dụng để tạo kiểu tài liệu HTML và nó bao gồm 3 thuộc tính chính
Bộ chọn: [Một bộ chọn là thẻ HTML mà tại đó bạn có thể áp dụng một kiểu như & nbsp; hoặc vv] I have just created a paragraph to explain the concept of span tag and let me create a second line of the paragraph so that I can extend the paragraph
Thuộc tính: [Ví dụ: màu là một thuộc tính biểu thị màu của văn bản]
Why?
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 xanh lá cây]
6Thẻ nhịp
Chào bạn! Những người tôi vừa tạo ra một đoạn văn để giải thích khái niệm về thẻ Span và để 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 I have just created a paragraph to explain the concept of span tag and let me create a second line of the paragraph so that I can extend the paragraph
Chào bạn! Những người tôi vừa tạo ra một đoạn văn để giải thích khái niệm về thẻ Span và để 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 I have just created a paragraph to explain the concept of span tag and let me create a second line of the paragraph so that I can extend the paragraph
Thẻ div
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 thùng chứa [tương tự như một hộp] cho các phần tử HTML khác
Khi chúng tôi sử dụng thẻ div, nó sẽ không có bất kỳ ảnh hưởng nào đến phần div
Why?
Vì để định dạng, một phần div won có bất kỳ thuộc tính cục bộ nào, chúng tôi chỉ có thể sử dụng các thuộc tính toàn cầu [như lớp, id, kiểu] trong thẻ div mà chúng tôi thường sử dụng trong các thẻ khác
7thẻ div
Chào bạn! Những người tôi vừa tạo ra một đoạn văn để giải thích khái niệm về thẻ Span và để 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 I have just created a paragraph to explain the concept of span tag and let me create a second line of the paragraph so that I can extend the paragraph
Chào bạn! Những người tôi vừa tạo ra một đoạn văn để giải thích khái niệm về thẻ Span và để 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 I have just created a paragraph to explain the concept of span tag and let me create a second line of the paragraph so that I can extend the paragraph
Thẻ div
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 thùng chứa [tương tự như một hộp] cho các phần tử HTML khácthẻ div
Chúng ta có thể thay đổi các thuộc tính của Div bằng cách sử dụng CSS I have just created a paragraph to explain the concept of span tag and let me create a second line of the paragraph so that I can extend the paragraph
Chào bạn! Những người tôi vừa tạo ra một đoạn văn để giải thích khái niệm về thẻ Span và để 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 I have just created a paragraph to explain the concept of span tag and let me create a second line of the paragraph so that I can extend the paragraph
Thẻ div
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 thùng chứa [tương tự như một hộp] cho các phần tử HTML khác
Khi chúng tôi sử dụng thẻ div, nó sẽ không có bất kỳ ảnh hưởng nào đến phần div
Vì để định dạng, một phần div won có bất kỳ thuộc tính cục bộ nào, chúng tôi chỉ có thể sử dụng các thuộc tính toàn cầu [như lớp, id, kiểu] trong thẻ div mà chúng tôi thường sử dụng trong các thẻ khác
7thẻ div
Chào bạn! Những người tôi vừa tạo ra một đoạn văn để giải thích khái niệm về thẻ Span và để 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 I have just created a paragraph to explain the concept of span tag and let me create a second line of the paragraph so that I can extend the paragraph
Chúng ta có thể thay đổi các thuộc tính của Div bằng cách sử dụng CSS
8 Chào bạn! Những 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à để 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ănSự khác biệt giữa thẻ div và thẻ span
Cả thẻ div và thẻ span đều tương tự như từng thẻ nhưng thẻ div được sử dụng cho một phần của các phần tử trong khi khoảng thời gianTrong mã dưới đây, thẻ nhịp được thay thế với thẻ div để bạn có thể thấy sự khác biệt
Nếu bạn đã nhận thấy! Rằng khi tôi áp dụng div vào dòng của một văn bản, nó ngay lập tức chuyển sang dòng tiếp theo tương tự, trong trường hợp thẻ nhịp, nó hoạt động trơn tru trong dòng văn bản duy nhất9Sự khác biệt giữa thẻ div và thẻ span
Chào bạn! Những ngườiTôi vừa tạo ra một đoạn văn
- Để giải thích khái niệm về
- Thẻ nhịp và để 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
Một số ví dụ về thẻ div
body tag2