HTML là trái tim của toàn bộ web. Bất cứ nội dung nào chúng tôi thấy trực tuyến đều dựa trên HTML. Nếu bạn chỉ cần nhấp chuột phải vào bất kỳ trang web nào và nhấp vào xem nguồn, bạn sẽ có thể thấy vô số thẻ, trang đầu tiên có nghĩa là tài liệu là tệp HTML. & NBSP;
Cấu trúc cơ bản của HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the page</title>
</head>
<body>
<form action="some_action" method="POST">
</form>
</body>
</html>
Những gì mong đợi từ các dự án HTML?
Cùng với HTML, bạn sẽ có thể nắm bắt một chút (hoặc rất nhiều) CSS và JavaScript. Tất cả ba công nghệ đi đôi với các dự án dưới đây; Mặc dù bạn sẽ cần bất kỳ kinh nghiệm nào trước đó với CSS hoặc JavaScript. Đây là những dự án đơn giản nhưng mạnh mẽ sẽ cung cấp cho bạn nhiều kinh nghiệm học tập.
Các tính năng của HTML
Trước khi chúng tôi nhận được các dự án, chúng tôi hãy nhanh chóng tóm tắt lại những điểm nổi bật:
Ngôn ngữ đánh dấu độc lập với nền tảng.
Dễ sử dụng và học hỏi.
Không cần bất kỳ thiết lập hoặc cài đặt.
Liên kết, hình ảnh, video, âm thanh, hình ảnh động có thể được thêm vào với rất ít mã hóa.
Không nhạy cảm trường hợp.
Dễ dàng viết mã tùy chỉnh bằng các ngôn ngữ khác và tích hợp với HTML.
Được hỗ trợ bởi tất cả các trình duyệt.
Free!
Tại sao các dự án HTML?
Các dự án là cách thực tế nhất để học bất kỳ ngôn ngữ nào và HTML cũng không ngoại lệ. Để xây dựng bất kỳ trang web nào, bạn cần hiểu cơ bản về HTML và nếu bạn muốn các trang web tùy chỉnh tương tác, chỉ cần biết bảng gian lận là không đủ - bạn sẽ có thể thực hiện kiến thức của mình một cách thực tế.
10 dự án HTML tốt nhất cho người mới bắt đầu
Bây giờ chúng ta hãy xem các dự án HTML tốt nhất để tăng cường kỹ năng phát triển web của bạn. & NBSP;
1. Mẫu khảo sát
Mẫu khảo sát là một trong những dự án HTML đơn giản nhất mà bạn có thể bắt đầu. Trong dự án này, chúng tôi sẽ tạo một mẫu khảo sát đơn giản và sau đó gửi thông tin được ghi lại. Bạn có thể mở bất kỳ trình soạn thảo văn bản nào để viết mã của bạn và lưu tệp của bạn bằng tiện ích mở rộng .html. Ví dụ: Survey.html
Bạn sẽ tìm hiểu về các thẻ đầu vào cơ bản, tạo hình thức, nút radio, hộp kiểm, v.v.
Dưới đây là mã nguồn cho dự án với các giải thích cần thiết của các thẻ. Bạn có thể thêm từng phần tử một để xem cách chúng hoạt động. & NBSP;
Mỗi tệp nên bắt đầu với thẻ và kết thúc bằng thẻ cuối. & Nbsp;
<!DOCTYPE HTML>
<!-- This is how HTML comments look like -->
<html>
<!-- the title will appear on the page-->
<head>
<title>Employee Interests Survey</title>
</head>
<body>
<!-- as it is a survey form, we will need to submit the details, hence we use form -->
<!-- We can give absolute url, or relative url like /nextpage.jsp, and specify POST or GET method -->
<form action="http://google.co.in">
<!-- If we remove this, every thing will move to the left of the page-->
<div align="center">
<!--Adds a heading to the form-->
<h2>Employee Interests Survey form</h2>
Enter your name:
<!-- Input type text for small texts, specify size -->
<input type="text" name="UserName" size=35 maxlength=35 value="">
<!--Adds spaces - remove and see what happens -->
</br></br>
Enter your department:
<input type="text" name="Deptt" size=35 maxlength=35 value=""> </br> </br>
Tell us a little about yourself:
<!-- For writing lot of text like descriptions with text wrapping,
if you dont want text wrapping, you can add wrap = "off" (horizontal scrollbar -->
<textarea name="Comments" cols=30 rows=4></textarea> </br> </br>
Do you exercise at home?
<!-- Radio buttons help you choose one out of the many values -->
<input type="radio" name="exe" value=1>Yes
<input type="radio" name="exe" value=2>No
</p>
How do you like to read about your favorite topics?
<p>
<!--Checkbox lets you select multiple options -->
<input type="checkbox" name="Books">Books
<input type="checkbox" name="Web">Online resources
<input type="checkbox" name="Phone">Phone apps
<input type="checkbox" name="Magazines">Magazines
</p>
What genre of movies do you like?
<!--Select box lets you choose one of the multiple dropdown options-->
<select name="moviepref" ><option>
<option value=1 selected = "true">comedy
<option value=2 >romance
<option value=3 >thriller
<option value=4 >horror
<option value=5 >biopic
</select>
</br></br>
<!--submits the information entered in the form by the user -->
<input type=submit value="Submit form">
</div>
</form>
</body>
</html>
Đây là cách trang của bạn sẽ trông như thế nào: & nbsp;
2. Hiển thị sản phẩm trang web & NBSP;
Hiển thị sản phẩm hoặc trang đích sản phẩm là một dự án thú vị, nơi bạn sẽ tìm hiểu cách các sản phẩm được hiển thị trên một trang web, tương tác nhất.
Video dưới đây hiển thị nhiều sản phẩm, từng sản phẩm. Bạn sẽ ngạc nhiên về cách trang hoàn toàn được chuyển đổi bằng cách sử dụng kiểu dáng CSS đơn giản.
Hiển thị các sản phẩm cạnh nhau
Trong một video khác được đề cập dưới đây, bạn sẽ tìm hiểu cách tạo thẻ sản phẩm, tức là thông tin chi tiết về sản phẩm.
Thẻ sản phẩm hiển thị thông tin sản phẩm
Hai dự án tuyệt vời này, qua đó bạn sẽ học được HTML và CSS dễ dàng đi đôi với việc tạo ra UI đẹp.
3. Trang tài liệu kỹ thuật
Mỗi ngôn ngữ, phần mềm, phần cứng, vv đều có tài liệu kỹ thuật để biết thông tin và trợ giúp. Dưới đây là cách bạn có thể tạo một trang tài liệu đơn giản, với liên kết nội bộ từ điều hướng bên trái đến nội dung ở bên phải của trang. Bạn có thể kiểm tra tài liệu cho Python, Java, Arduino, v.v. để tham khảo về cách các trang này trông như thế nào. Hầu hết các tài liệu kỹ thuật có nhiều hệ thống phân cấp và trang; Tuy nhiên, để đơn giản, chúng tôi đã tạo ra một dự án đơn giản để bắt đầu. Bạn có thể mở rộng nó hơn nữa và thêm nó theo mong muốn của bạn. Tài liệu kỹ thuật có thể là một dự án HTML có lợi nếu bạn chỉ bắt đầu với sự nghiệp HTML của mình.
<html>
<!--This example uses the default bootstrap stylesheet-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!--provides a full-width container that can expand or collapse based on the size of viewport-->
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-12 col-xs-12">
<nav id="navbar">
<h3>Technical Documentation</h3>
<!--content stacking for smaller screens-->
<ul class="nav nav-pills nav-stacked">
<!--internal linking to the respective sections-->
<a class="nav-link" href="#Introduction" rel="internal">
<li>Introduction</li>
</a>
<a class="nav-link" href="#What_you_should_already_know" rel="internal">
<li>What you should already know</li>
</a>
<a class="nav-link" href="#About_Topic" rel="internal">
<li>About the topic</li>
</a>
<a class="nav-link" href="#Topic_1" rel="internal">
<li>Topic 1</li>
</a>
<a class="nav-link" href="#Topic_2" rel="internal">
<li>Topic 2</li>
</a>
</ul>
</nav>
</div>
<div class="col-md-10 col-sm-12 col-xs-12">
<main id="main-doc">
<section class="main-section" id="Introduction" >
<!--basic styling for the headings, better practice to do the same in a css file as the styling is same for all headers-->
<h3 style = "background: black; color: white">Introduction</h3>
<article>
<p>Some content about the main topic, for example Java documentation introduction about the language
</article>
</section>
<section class="main-section" id="What_you_should_already_know">
<h3 style = "background: black; color: white">What you should already know</h3>
<article>
<p>Background information before getting into the topic:</p>
<!--creating list using html-->
<li>Some list content</li>
<li>Prerequisites.</li>
<li>Workings and assumptions</li>
<p>Any other content to be covered before learning this topic</p>
</artice>
</section>
<section class="main-section" id="About_Topic">
<h3 style = "background: black; color: white">About topic</h3>
<article>
<p>More lines about the topic. For example, how the basic functionality works, features etc...</p>
<p>
Technical documentation should be thorough and to the point
</p>
<p>
Write about features, comparisons with other languages etc
</p>
</article>
</section>
<section class="main-section" id="Topic_1">
<h3 style = "background: black; color: white">Topic 1</h3>
<article>
Getting started with the actual documentation content
<code>This would come in a different color and font indicating lines of code
</code>
</article>
</section>
<section class="main-section" id="Topic_2">
<h3 style = "background: black; color: white">Topic 2</h3>
<p>
Another topic about the main topic, for example, if the topic is Java, this could be variables or data types in Java
</p>
</section>
</main>
</div>
</div>
</div>
</html>
Bạn sẽ nhận được một trang như thế này:
4. Thêm hoạt hình
Trong dự án này, chúng tôi sẽ tạo một trang đơn giản, nơi một chiếc xe sẽ xuất hiện để di chuyển trên một con đường. Dự án đơn giản là một ví dụ hoàn hảo về cách hoạt hình có thể được thực hiện dễ dàng và nhanh chóng. Xem ra cho việc sử dụng thẻ để tạo hình ảnh động đơn giản này. Hãy thử thêm nhiều đối tượng hơn và làm cho chúng di chuyển theo các hướng khác nhau để thú vị hơn. & NBSP;
Hoạt hình đơn giản sử dụng marquee
5. Trang chủ trang web hoạt hình
Trong dự án này, chúng tôi sẽ tạo một trang chủ sẽ hiển thị logo và một số mục menu. Bạn cũng có thể có một số niềm vui với thẻ KeyFrames cho hình ảnh động. Lưu ý cách phân tách menu điều hướng và phần còn lại của trang bằng thuộc tính chiều cao. Bạn có thể áp dụng một hình ảnh nền và thay đổi chiều cao thành 85VH hoặc 100VH và thấy sự khác biệt mà nó tạo ra.
<html>
<head>
<title></title>
<!-- Apply styles to html elements -->
<style>
*{
margin:0; padding:0; boxsizing:border-box;
}
header{
width: 100%; height: 100vh;
background-color: white;
background-repeat: no-repeat;
background-size: cover;
}
nav{
width: 100%; height: 15vh;
background: black;
display: flex; justify-content: space-between;
align-items: center;
}
nav .mainmenu{
width: 40%;
display: flex; justify-content: space-around;
}
main{
width: 100%; height: 85vh;
display: flex; justify-content: center;
align-items: center;
text-align: center;
}
section h3{
letter-spacing: 3px; font-weight: 200;
}
section h2{
text-transform: uppercase;
}
section div{
animation:changeborder 10s infinite linear;
border: 7px solid red;
}
@keyframes changeborder{
0%
20%
40%
}
</style>
</head>
<body>
<!--Let us create a simple menu using the navigation tags-->
<!--Use header to indicate that manu will be a part of header -->
<header>
<nav>
<div class = "logo" <h3 style="color:white;">MYLOGO</h3></div>
<!--Lets define the menu items now-->
<div class = "mainmenu">
<a href="https://hackr.io/tutorials/learn-html-5">Home</a>
<a href="https://hackr.io/tutorials/learn-html-5">About Us</a>
<a href="https://hackr.io/tutorials/learn-html-5">Contact Us</a>
</div>
</nav>
<!--Let us create the main section now, if you are not using html5, use div tags-->
<main>
<section>
<!--Check out the styling elements for this div class - change_text -->
<div class = "change_text"><b>WELCOME TO XXX ELECTRONICS</b></div>
<!--make text italic-->
<p><i>All your electronics needs in one place</i></p><br>
<!--create a button, if there is a form, you can specify an action on click-->
<input type = button value = "view more">
</section>
</main>
</header>
</body>
</html>
Mã trên sẽ tạo ra đầu ra sau. Màu sắc của hộp sẽ thay đổi.
6. Trang web nền video
Dự án này giải thích với mã nguồn đầy đủ, cách chúng tôi có thể thêm nền video vào trang web. Tiền cảnh chứa một số văn bản. Dự án sử dụng HTML5. Người nói cũng cho biết một mẹo đơn giản để tránh Scrollbars. Bạn cũng sẽ học cách thêm văn bản đi đầu và tạo kiểu nó để xuất hiện ở trung tâm của trang. Nếu bạn thay đổi kích thước trang, video thay đổi kích thước và theo kích thước màn hình bằng cách đặt các giá trị CSS đơn giản. Video trong nền có thể mang lại hiệu ứng đáng yêu cho trang web của bạn và làm cho nó tương tác. Xem hình ảnh nền video cho mã và giải thích.
7. Tạo một thanh trượt hình ảnh & nbsp;
Hình ảnh thanh trượt hoặc trình chiếu là một chức năng phổ biến mà hầu hết các trang web hiển thị ngày hôm nay. Trong bất kỳ trang web nào, ví dụ, thời trang, thực phẩm, dịch vụ, v.v., bạn có thể quan sát rằng hầu hết các nội dung được hiển thị thông qua nhiều hình ảnh. Nếu bạn biết cách hiển thị hình ảnh dưới dạng trình chiếu, nội dung khác có thể được phát triển bằng cách sử dụng đầu vào đơn giản và các loại dữ liệu khác. Toàn bộ dự án đã được thực hiện chỉ bằng cách sử dụng HTML và CSS và không có JavaScript, do đó tránh mọi vấn đề về trình duyệt chéo. Người nói giải thích chi tiết chức năng ở đây. & NBSP;
8. Trang web nhà hàng tương tác
Trong dự án này, chúng tôi sẽ tạo ra một trang chủ tương tác của một nhà hàng, nơi hình ảnh nền sẽ thay đổi khi chúng tôi di chuột qua một tùy chọn menu. Ví dụ: nếu bạn di chuột qua điều hướng menu, nó sẽ hiển thị một thẻ menu, nếu bạn di chuột qua nhà, nó sẽ hiển thị mặc định. Bạn phải đặt tên và địa điểm hình ảnh của bạn để việc này hoạt động. Chức năng này được thực hiện thông qua jQuery. Tương tự, nút ‘Đặt hàng ngay bây giờ sẽ tiếp tục nhấp nháy. Chúng tôi đã thực hiện điều này bằng cách sử dụng chức năng @KeyFrames mà chúng tôi đã sử dụng trong dự án trang web hoạt hình của chúng tôi. Đây là mã cho điều này: & nbsp;
Khi lơ lửng trên điều hướng menu, trang sẽ trông giống như:
9. Hệ thống bỏ phiếu điện tử
Trong dự án này, bạn sẽ học cách lấy nhiều đầu vào khác nhau từ người dùng cho một hệ thống bỏ phiếu điện tử, bao gồm cả ngày, được hiển thị dưới dạng lịch. Kiểu dáng đã được thực hiện bằng CSS. Bạn cũng sẽ học cách gửi biểu mẫu và chuyển hướng đến trang tiếp theo. Dự án cho thấy cách thêm các phần tử HTML khác nhau như hộp đầu vào, nút radio, thả xuống, v.v .; Tuy nhiên, bạn có thể thêm nhiều chi tiết để xây dựng một biểu mẫu chính thức trên và trên mã được đưa ra trong video dự án. Xem video ở đây để tìm hiểu làm thế nào để tạo trang này và gửi thông tin.
10. Bố cục trang web đáp ứng lưới
Đây là một trang web một trang bao gồm nhiều thành phần HTML và CSS. Một dự án phức tạp nhỏ, nhưng ở cuối của nó, bạn sẽ có thể tự tạo một trang với lưới CSS. Người nói sử dụng các yếu tố HTML và CSS đơn giản với các giải thích tốt. Bất cứ điều gì bạn đã học trong các dự án khác, bạn sẽ có thể áp dụng tất cả những điều đó và hơn thế nữa trong dự án này. Dự án cũng bao gồm cách làm cho trang thân thiện với thiết bị di động. Trang cũng sử dụng một số kỹ thuật mới như truy vấn Flex và Media. Kiểm tra video:
Sự kết luận
Trong bài viết này, chúng tôi đã thảo luận về một số ý tưởng dự án HTML cơ bản mà bạn có thể thử, nhưng việc học không kết thúc ở đây. Bạn có thể làm việc trên vô số các dự án tương tác khác và thêm độ phức tạp cho các dự án này, kết hợp bất kỳ dự án nào trong số này để làm cho nó và chơi xung quanh với các thẻ khác nhau. Xây dựng các trang web trong thế giới thực đáp ứng với HTML5 và CSS3 là một khóa học tuyệt vời để tăng cường học tập HTML của bạn. Kiểm tra thêm các hướng dẫn miễn phí và trả tiền ở đây.
Bạn đã thử xây dựng một cái gì đó của riêng bạn? Chia sẻ kinh nghiệm của bạn dưới đây.
Mọi người cũng đang đọc:
Các khóa học HTML tốt nhất
Chứng chỉ HTML tốt nhất
Câu hỏi phỏng vấn HTML hàng đầu
Câu hỏi phỏng vấn HTML5 hàng đầu
Tải xuống bảng cheat HTML
Làm thế nào để trở thành một nhà phát triển web?
IDE phát triển web tốt nhất
Khung phát triển web tốt nhất
Kiến trúc phát triển web là gì?
CSS vs CSS2
Biên tập viên CSS tốt nhất
Các loại CSS
Tôi chỉ có thể làm gì với HTML?
9 điều thú vị bạn có thể làm chỉ với HTML..
Hình ảnh.Thẻ cung cấp cho các nhà phát triển web linh hoạt hơn trong việc chỉ định tài nguyên hình ảnh.....
Người chọn màu.....
Tiêu đề Tooltip.....
Nội dung có thể chỉnh sửa.....
Làm mới trình duyệt.....
Danh sách dữ liệu.....
Tiến triển.....
Meter..
Bạn có thể xây dựng gì chỉ với HTML và CSS?
Chỉ riêng với HTML và CSS, bạn có thể làm những việc như xây dựng các trang web nhiều trang tĩnh, mẫu email, thiết kế giao diện người dùng đẹp và làm việc với các nhà phát triển khác trong các dự án lớn hơn.static multi-page websites, code email templates, design beautiful user interfaces, and work with other developers on larger projects.
Bạn có thể xây dựng phần mềm với HTML không?
Electron có thể được sử dụng để xây dựng các ứng dụng máy tính để bàn với HTML, CSS và JavaScript.Ngoài ra, các ứng dụng này hoạt động cho nhiều nền tảng như Windows, Mac, Linux, v.v.Electron kết hợp crom và nodejs thành một thời gian chạy.Điều này cho phép chúng tôi chạy mã HTML, CSS và JavaScript dưới dạng ứng dụng máy tính để bàn.. Also these apps work for multiple platforms like Windows, Mac, Linux and so on. Electron Combines Chromium and NodeJS into a single Runtime. This enables Us to run the HTML, CSS and Javascript Code as a desktop application.
