Hướng dẫn web application code in html - mã ứng dụng web trong html

Đây là bài học đầu tiên của khóa học ứng dụng web mini, hướng dẫn bạn tạo ra một ứng dụng web đơn giản, bao gồm HTML và CSS, PHP, bootstrap, lưu trữ cục bộ, v.v.

Khi nói đến việc xây dựng một trang web hoặc một ứng dụng web, có rất nhiều điều cần xem xét, nhưng một điều sẽ & nbsp; luôn luôn & nbsp; cần thiết là một sự hiểu biết mạnh mẽ về HTML và CSS.

Phần 1: Giới thiệu về HTML và CSS

HTML và CSS là các khối xây dựng nền tảng trong thế giới phát triển web. Khi nói đến việc hiển thị thông tin trên web, bạn có thể thực hiện nhiều tính toán ưa thích như bạn thích trong nền, nhưng HTML và CSS giúp bạn có thể trình bày thông tin cho người dùng thông qua trình duyệt web.

HTML - Cấu trúc trang web cung cấp

Ngay cả khi bạn không biết về nó, bạn có thể đã quen thuộc với HTML. Điều này có trông quen thuộc không?

  
  
    
Watch out for the flying cat!
    

      Here it comes:
      
    
  

Nếu bạn đã từng gặp phải thứ gì đó trông giống như mã ở trên, thì đó là HT HTML. HTML là ngôn ngữ cho phép bạn tạo các trang web có thể được hiển thị trong trình duyệt web. Nó bao gồm các yếu tố khác nhau & nbsp; mỗi yếu tố phục vụ các mục đích khác nhau.elements, each of which serve different purposes.

Mỗi phần tử có riêng & nbsp; tag & nbsp; - một đoạn mã cụ thể duy nhất cho chính nó. Trong mã HTML ở trên, bạn có thể thấy một ví dụ về hai thẻ khác nhau: & nbsp; ____ 8, chỉ định tiêu đề chính hoặc tiêu đề của một trang và & nbsp; ____ 9, chỉ định một đoạn văn. Cũng lưu ý rằng các thẻ thường xuyên nhất có theo cặp - với một thẻ mở và một thẻ đóng - chẳng hạn như & nbsp; ________ 8 & nbsp; và & nbsp; ________ 11 & nbsp; các thẻ được thấy ở trên. Nội dung mà Lừa chứa trong một yếu tố được bao gồm & nbsp; giữa & nbsp; các thẻ mở và đóng, như trong trường hợp của The Watch Out For the Flying Cat! tiêu đề.tag — a specific snippet of code unique to itself. In the HTML code above, you can see an example of two different tags: 

, designating the main header or title of a page, and 

, designating a paragraph. Note also that tags most frequently come in pairs — with one opening and one closing tag — such as the 

 and 

body {
  background-color: Sienna;
 }

1 tags seen above. Content that’s contained within an element is included between the opening and closing tags, as in the case of the “Watch out for the flying cat!” header.

Tuy nhiên, bạn sẽ nhận thấy rằng một số thẻ & nbsp; không & nbsp; có cả thẻ mở và đóng, như đã thấy với thẻ & nbsp; ____ 12 & nbsp; ở trên. TAG & nbsp; ________ 12 & nbsp; đại diện cho một hình ảnh và vì bạn có thể thực sự gửi kèm theo bất kỳ văn bản bổ sung nào & nbsp; trong & nbsp; một hình ảnh, thẻ của nó chỉ đơn giản kết thúc bằng & nbsp; ____ 14, như được hiển thị. Bạn cũng sẽ thấy một chỉ định bổ sung trong & nbsp; ________ 12 & nbsp; Tag: thuộc tính ____ 16 & nbsp; Trong HTML, các thuộc tính có thể được sử dụng để liên kết thông tin bổ sung với một phần tử. Trong trường hợp này, thẻ của chúng tôi & nbsp;attribute. In HTML, attributes can be used to associate additional information with an element. In this case, our 

body {
  background-color: Sienna;
 }

2 tag requires a

body {
  background-color: Sienna;
 }

6 attribute — designating the URL of the image — or else it wouldn’t know what image to display!

Bạn cũng sẽ nhận thấy rằng, nhiều lần, các phần tử HTML có thể được & nbsp; được lồng hoặc bao gồm trong nhau. Ví dụ, hình ảnh, & nbsp; ____ 12, thẻ được lồng trong đoạn văn, & nbsp; ________ 9, Tag. Điều này cho phép bạn làm những việc như bao gồm một hình ảnh trực tiếp trong một đoạn văn bản, như được thực hiện trong ví dụ.nested, or included within one another. The image, 

body {
  background-color: Sienna;
 }

2, tag, for example, is nested within the paragraph, 

, tag. This allows you to do things such as include an image directly within a paragraph of text, as is done in the example.

Nếu bạn đã tạo một trang web chỉ với nội dung trong ví dụ trên, nó sẽ hoạt động tốt nhưng nó sẽ trông giống như thế này:

Không quá ấn tượng, phải không? (Ý tôi là, ngoại trừ con mèo, tất nhiên.)

Mặc dù HTML chăm sóc & nbsp; Cấu trúc & nbsp; của một trang, đối tác của nó trong tội phạm, CSS, chăm sóc & nbsp; kiểu dáng, & nbsp; cho phép bạn tạo các trang thực sự & nbsp; trông đẹp.

CSS - Làm cho các trang web trông & nbsp; slick

CSS là ngôn ngữ, trong thế giới web, cho phép bạn làm cho các trang web trở nên đẹp. Nó cung cấp cho bạn khả năng kiểm soát mọi khía cạnh trực quan của một trang, từ văn bản và màu nền đến chiều rộng, độ cao và lề.

Và điều thú vị về CSS là nó hoạt động & nbsp; trực tiếp & nbsp; với HTML của bạn: Bạn áp dụng CSS & NBSP; Rules & nbsp; cho các yếu tố HTML cụ thể. Vì vậy, nói, ví dụ, chúng tôi muốn cung cấp cho toàn bộ trang của chúng tôi một nền cam. Chúng tôi có thể sử dụng các CSS sau đây để thực hiện điều đó:rules to specific HTML elements. So say, for example, we wanted to give our entire page an orangey background. We could use the following CSS to accomplish just that:

body {
  background-color: Sienna;
 }

Để áp dụng các quy tắc cho các phần tử HTML bằng CSS, bạn có thể chỉ định khối khai báo A & nbsp; chỉ định phần tử HTML - & nbsp; ____ ____ 21 & nbsp; Màu sắc, trong trường hợp này.declaration block, which designates the HTML element — the 

body {
  background-color: Sienna;
  font-family: "Helvetica Neue Light", Helvetica, sans-serif;
  font-weight: 300;
  text-align: center;
}

Trong một khối khai báo, bạn có thể xác định bao nhiêu quy tắc như bạn muốn. Chúng tôi có thể sửa đổi khối của chúng tôi ở trên để thay đổi văn bản trang của chúng tôi, phông chữ, màu sắc và độ dày của chúng tôi (tức là trọng lượng), như vậy:

body {
  background-color: Sienna;
  font-family: "Helvetica Neue Light", Helvetica, sans-serif;
  font-weight: 300;
  text-align: center;
}

Nếu chúng tôi xác định thêm một vài quy tắc CSS cho các yếu tố bổ sung, chúng tôi có thể làm cho trang của chúng tôi trông & nbsp; nhiều & nbsp; đẹp hơn:

Phần 2: Bài học tương tác: Tạo trang web (đơn giản)

Như đã hứa, mỗi bài học ứng dụng web mini sẽ chứa một hoạt động tương tác để giúp củng cố kiến ​​thức mới của bạn. Dưới đây là hoạt động bài học đầu tiên, nơi bạn sẽ có thể kiểm tra một số kỹ năng HTML và CSS mới của bạn thông qua việc sử dụng các trình chỉnh sửa mã tương tác.

Các bước cho hoạt động được hiển thị, theo thứ tự, trong cột bên trái, bên dưới. Bạn có thể nhận thấy rằng mỗi bước chứa các mẹo, nhưng trước tiên hãy thử hoàn thành chúng! Cách tốt nhất để học cách viết mã là làm. Nếu bạn bị mắc kẹt (điều này hoàn toàn tốt, và chắc chắn sẽ xảy ra tại các điểm), sau đó tìm kiếm một số trợ giúp. Tin tôi lần này đi.try completing them on your own, first! The best way to learn how to code is by doing. If you get stuck (which is totally fine, and will inevitably happen at points), then seek some help. Trust me on this one.

Bạn có thể, và nên sử dụng các tài nguyên tuyệt vời của các trường W3SS khi bạn tiến hành thông qua các bước hoạt động. Cả danh sách đầy đủ các yếu tố HTML cũng như danh sách tất cả các quy tắc CSS hợp lệ của họ sẽ có ích.

Các trình chỉnh sửa mã tương tác cho hoạt động được hiển thị trong cột giữa. Bạn sẽ nhập mã HTML và CSS của mình trong các trình soạn thảo trên cùng và dưới cùng. Bạn có thể nhận thấy rằng khi bạn thực hiện các thay đổi trong một trong các biên tập viên và sau đó nhấp vào nó, trang web xem trước trang web trên cột bên phải được tự động cập nhật để phản ánh mã mà bạn đã nhập. Và các biên tập viên sẽ tự động lưu tiến trình của bạn, vì vậy đừng lo lắng nếu bạn phải rời khỏi hoặc làm mới trang. Bạn luôn có thể quay lại và hoàn thành mọi thứ sau này.

Đi trước và bắt đầu với Bước 1 dưới đây:

Bước 1: Thêm tiêu đề trang

Thêm một phần tử tiêu đề 1 vào đầu trang với văn bản "Nghị quyết năm mới của tôi".

+ Hiển thị gợi ý #1

Một thẻ 1 đầu là

. Hai thẻ.+ Hiển thị gợi ý #2 Bạn nên có mã sau bên trong hộp trình soạn thảo HTML:

My New Year's Resolutions

• My first resolution
• My second resolution
• My third resolution

Đặt màu nền phần yếu tố của cơ thể trang (gợi ý) thành

DarkslateBlue

và màu văn bản của nó đểelement on a webpage and click “Inspect Element” in the menu that appears. (And would you look at that…you’re already utilizing your new knowledge, since you now know that any component of a webpage — be it a piece of text, a button, or a container — is, or is part of, an HTML element.)

Trắng

.

Với toàn bộ HTML & NBSP; của trang mà bạn đang xem có thể nhìn thấy trong bảng điều khiển dưới cùng, bạn có thể chuột qua bất kỳ phần tử HTML nào và bạn sẽ thấy chúng được tô sáng (thường là màu xanh mờ) trên màn hình của bạn. Nhấp vào một trong số chúng trong bảng dưới cùng đó cũng sẽ hiển thị tất cả các thuộc tính kiểu CSS tương ứng của nó trong cột bên phải của bảng công cụ nhà phát triển.

Ngoài ra, bạn có thể chỉnh sửa bất kỳ thuộc tính HTML và CSS trực tiếp & nbsp; trong bảng dưới đó. Đó là một cách tuyệt vời để bạn có được một trò chơi xung quanh với các yếu tố khác nhau và tài sản của chúng và cảm nhận về một số điều mới mà bạn có thể chưa từng thấy trước đây. Và đừng lo lắng về việc làm rối tung bất cứ điều gì - không có thay đổi nào bạn thực hiện trong bảng điều khiển dưới cùng đó sẽ ảnh hưởng đến trang web thực tế! Bạn sẽ nhận thấy rằng nếu bạn làm mới trang của mình sau khi thực hiện các thay đổi mà nó sẽ trở về trạng thái ban đầu.

Để biết tổng quan ngắn gọn về các công cụ nhà phát triển cho các trình duyệt khác nhau, hãy tham khảo các liên kết sau (mặc dù tôi khuyên bạn nên sử dụng Chrome):

• Chrome: CodeSchool - Khám phá Devtools (Chỉ Chương 1)(Chapter 1 only)
• Firefox: Thanh tra trang Firefox
• Tức là: gỡ lỗi HTML và CSS với các công cụ nhà phát triển

Cập nhật trang web của riêng bạn

Nếu bạn đã có trang web hiện tại của riêng bạn - tuyệt vời! Bây giờ bạn nên có một sự hiểu biết thậm chí còn tốt hơn về cách mọi thứ chơi cùng nhau. Hãy tiếp tục và thực hiện một vài bản cập nhật mà bạn đã giữ lại hoặc có thể cập nhật một số màu hoặc phông chữ của bạn. Bạn có sức mạnh!

Tạo một trang web mới cho chính bạn!

Bạn đã thấy việc tạo một trang web đơn giản ở trên dễ dàng như thế nào, vậy làm thế nào về việc tạo ra một trang web của riêng bạn? Tất cả những gì bạn cần là: một vài phút; Một trình soạn thảo văn bản đơn giản (Textedit trên Mac hoặc Notepad trên Windows hoạt động hoàn toàn tốt); Và một mong muốn để có được bàn tay của bạn bẩn. Tôi đã tạo ra một bộ dụng cụ khởi động siêu đơn giản để giúp bạn bắt đầu. Chỉ cần giải nén tệp đó, mở ra

body {
  background-color: Sienna;
  font-family: "Helvetica Neue Light", Helvetica, sans-serif;
  font-weight: 300;
  text-align: center;
}

body {
  background-color: Sienna;
  font-family: "Helvetica Neue Light", Helvetica, sans-serif;
  font-weight: 300;
  text-align: center;
}

body {
  background-color: Sienna;
  font-family: "Helvetica Neue Light", Helvetica, sans-serif;
  font-weight: 300;
  text-align: center;
}

Alex Coleman giúp những người khác học cách xây dựng các ứng dụng web với Laravel. Các bài viết và khóa học của ông đã giúp hơn 10.000 nhà phát triển tăng cấp kỹ năng phát triển web PHP của họ và học cách xây dựng và khởi chạy các ứng dụng web của riêng họ ra thế giới. Nếu bạn thích bài viết này, thì hãy tham gia bản tin miễn phí của anh ấy. helps others learn to build web applications with Laravel. His articles and courses have helped over 10,000 developers level-up their PHP web development skills and learn to build and launch their own web applications to the world. If you enjoyed this article, then join his free newsletter.