Reka Bentuk Halaman Web dalam HTML
HTML, dikenali sebagai HyperText Markup Language, ialah salah satu bahasa paling popular yang digunakan untuk mereka bentuk halaman web dan menstruktur kandungan. HTML menggunakan teg, elemen, imej dan beberapa komponen terkini untuk menjadikan Halaman Web lebih menarik dan mesra pengguna.
Dengan menggabungkan HTML dengan CSS, penampilan halaman web boleh disesuaikan dengan mudah. HTML memainkan peranan penting dalam menstrukturkan halaman web dengan betul di World Wide Web. Ia boleh diedit menggunakan editor teks ringkas, membolehkan pengguna membuat perubahan bila-bila masa diperlukan.
Bagaimana untuk Merekabentuk Halaman Web dalam HTML? (Langkah demi Langkah)
Langkah 1: Sediakan Projek Anda
- Buat folder baharu pada komputer anda untuk menyimpan fail bagi halaman web anda.
- Buka editor teks seperti Notepad, Teks Sublime atau Kod Visual Studio untuk menulis kod HTML anda.
Langkah 2: Mulakan dengan Struktur HTML
- Mulakan fail HTML anda dengan menambahkan pengisytiharan di bahagian atas. Ini memberitahu penyemak imbas bahawa anda menggunakan HTML5.
- Buat teg HTML pembuka dan penutup: .
- Di dalam teg HTML, buat teg kepala pembukaan dan penutup: .
- Dalam teg kepala, tambahkan teg tajuk pembukaan dan penutup:
. Di sinilah anda akan menulis tajuk halaman web anda.
Langkah 3: Tambahkan Kandungan pada Badan
- Selepas teg kepala penutup, buat teg badan pembukaan dan penutup: . Di sinilah anda akan meletakkan semua kandungan kelihatan halaman web anda.
- Di dalam teg kandungan, anda boleh mula menambahkan elemen seperti tajuk, perenggan, imej dan pautan.
- Untuk menambah tajuk, gunakan tag untuk tajuk utama dan , , dan seterusnya untuk subtajuk.
- Untuk menambah perenggan, gunakan
- Untuk menambah imej, gunakan
Dalam
tag, anda perlu menentukan atribut src, yang sepatutnya mengandungi laluan fail atau URL yang menunjuk ke lokasi fail imej.
- Untuk menambah pautan, gunakan teg dengan atribut href yang menyatakan URL.
Untuk pemahaman yang lebih baik, berikut ialah kodnya:
<!DOCTYPE html> <html> <head> <title>My First Web Page</title> </head> <body> <h1>Unlock the Power of Online Learning</h1> <p>Master 1000+ Tools & Technologies.</p> <img src="C:\Users\Demo2\Desktop\HTML\webimage.PNG"> <ul> <li>Python</li> <li>Artificial Intelligence</li> <li>Java</li> </ul> <a href="https://www.educba.com">View All 1000 Skills</a> </body> </html>
Langkah 4: Simpan Fail HTML anda
- Simpan fail anda dengan sambungan .html dalam folder yang anda buat sebelum ini.
- Pilih nama deskriptif untuk fail anda, seperti halaman web saya.html (yang biasa digunakan sebagai halaman utama tapak web).
Langkah 5: Lihat Halaman Web anda
- Buka fail HTML dalam penyemak imbas web seperti Chrome, Firefox atau Safari.
- Anda sepatutnya melihat halaman web di bawah dipaparkan dalam penyemak imbas, menunjukkan kandungan yang kami tambahkan.
Output:
Langkah 6: Teruskan Meningkatkan Halaman Web anda
- Teroka teg dan atribut HTML tambahan untuk mempertingkatkan lagi struktur dan reka bentuk halaman web anda.
- Ketahui CSS (Cascading Style Sheets) untuk menggayakan halaman web anda dan menjadikannya menarik secara visual.
- Percubaan dengan ciri HTML yang lebih maju seperti borang, jadual dan elemen multimedia.
Teg HTML dan Elemen untuk Reka Bentuk Web
Berikut ialah senarai teg HTML penting dan elemen yang penting untuk mereka bentuk halaman web dalam HTML.
| HTML Tag/Element | Purpose | |||||||||||||||||||||||||||||||
to |
Define different levels of headings | |||||||||||||||||||||||||||||||
| Define paragraphs of text | ||||||||||||||||||||||||||||||||
| Create line breaks | ||||||||||||||||||||||||||||||||
| Create an ordered list | ||||||||||||||||||||||||||||||||
| Create an unordered list | ||||||||||||||||||||||||||||||||
| Define items within a list | ||||||||||||||||||||||||||||||||
| Create hyperlinks | ||||||||||||||||||||||||||||||||
| Insert images | ||||||||||||||||||||||||||||||||
Examples of Design Web Pages in HTMLLet’s create some web pages to see the resultant web page. Example #1: Travel WebpageHere, we will create an amazing travel webpage showcasing places to visit in Switzerland. We will set one background image and add some text using HTML Code and Styling. HTML Code: <head>
<style>
.card {
max-width: 380px;
margin: auto;
text-align: center;
}
#main {
background-image: url('switzerland.jpg');
background-repeat: no-repeat;
background-size: cover;
}
.price {
color: #f1294a;
font-size: 18px;
}
.card button {
padding: 10px;
color: white;
background-color: #f1294a;
text-align: center;
}
</style>
</head>
<body id="main">
<h2 style="text-align:center">Places to Visit in Switzerland</h2>
<div class="card">
<h1><b>Explore Switzerland</b></h1>
<h3 class="price">Starting from CHF 2000</h3>
<h2>
<ul>
<li>Zurich</li>
<li>Geneva</li>
<li>Lucerne</li>
<li>Interlaken</li>
<li>Zermatt</li>
</ul>
</h2>
<p><button>Book Here</button></p>
</div>
</body>Salin selepas log masuk Output: Example #2: Feedback FormWe will build one Feedback form in the form of a web page in this example. <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, sans-serif;
}
input[type=text], select, textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 4px;
margin-bottom: 10px;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 8px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.container {
width: 80%;
max-width: 500px;
margin: 0 auto;
border-radius: 6px;
background-color: #F2F2F2;
padding: 20px;
}
h3 {
text-align: center;
}
label {
font-weight: bold;
}
textarea {
resize: vertical;
}
/* Optional: Add additional styles to make it more visually appealing */
.container {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
input[type=submit]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h3>We Value Your Suggestions!</h3>
<div class="container">
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Enter your name">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Enter your last name">
<label for="email">Email</label>
<input type="text" id="email" name="email" placeholder="Enter your email here">
<label for="subject">Suggestion</label>
<textarea id="subject" name="subject" placeholder="Provide your suggestion" style="height: 100px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>Salin selepas log masuk Output: Example #3: OTT Platform HomepageIn this example, we will create another web page that showcases an amazing homepage for an OTT platform. HTML Code: <!DOCTYPE html>
<html>
<head>
<title>My OTT Platform</title>
<style>
/* CSS styles for the website */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #000;
color: #fff;
}
header {
background-color: #e50914;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
font-size: 28px;
text-transform: uppercase;
color: #fff;
}
nav {
background-color: #000;
padding: 10px;
text-align: center;
}
nav a {
text-decoration: none;
margin: 10px;
color: #fff;
font-weight: bold;
}
main {
padding: 20px;
}
footer {
background-color: #e50914;
padding: 20px;
text-align: center;
}
.video {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
}
.video .thumbnail {
position: relative;
width: 250px;
height: 140px;
margin: 10px;
overflow: hidden;
transition: transform 0.3s;
background-color: #333;
}
.video .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.video .thumbnail:hover {
transform: scale(1.1);
}
.video .title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 10px;
margin: 0;
font-weight: bold;
}
/* Additional styles for Netflix-like appearance */
header, nav, main, footer {
max-width: 1200px;
margin: 0 auto;
}
.video .thumbnail {
width: 275px;
height: 155px;
}
.video .title {
font-size: 14px;
padding: 8px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My OTT Platform</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Movies</a>
<a href="#">TV Shows</a>
<a href="#">Documentaries</a>
<a href="#">My Account</a>
</nav>
<main>
<h2>Trending Now</h2>
<div class="video">
<div class="thumbnail">
<img src="video5.jpg" alt="Video 5">
<div class="title">Movie1</div>
</div>
<div class="thumbnail">
<img src="video6.jpg" alt="Video 6">
<div class="title">Movie2</div>
</div>
<div class="thumbnail">
<img src="video7.jpg" alt="Video 7">
<div class="title">Movie3</div>
</div>
</div>
<h2>Top 3 Shows</h2>
<div class="video">
<div class="thumbnail">
<img src="video8.jpg" alt="Video 8">
<div class="title">Show1</div>
</div>
<div class="thumbnail">
<img src="video9.jpg" alt="Video 9">
<div class="title">Show2</div>
</div>
<div class="thumbnail">
<img src="video10.jpg" alt="Video 10">
<div class="title">Show3</div>
</div>
</div>
<h2>International Movies</h2>
<div class="video">
<div class="thumbnail">
<img src="video11.jpg" alt="Video 11">
<div class="title">Movie1</div>
</div>
<div class="thumbnail">
<img src="video12.jpg" alt="Video 12">
<div class="title">Movie2</div>
</div>
<div class="thumbnail">
<img src="video13.jpg" alt="Video 13">
<div class="title">Movie3</div>
</div>
</div>
</main>
<footer>
<p>© 2023 My OTT Platform. All rights reserved.</p>
</footer>
</body>
</html>Salin selepas log masuk Output: Example #4 Newsletter Subscription PageIn this example, let’s create a simple subscription page where users can subscribe to a newsletter. <form action="newsletter.php" method="post" style="background-color: #f2f2f2; padding: 20px; border-radius: 10px;"> <h2 style="color: #333;">Join our Newsletter!</h2> <div class="form-group"> <label for="name" style="color: #333;">Name:</label> <input type="text" id="name" name="name" placeholder="Enter your name" required style="padding: 5px; border: 1px solid #ccc; border-radius: 5px;"> </div> <div class="form-group"> <label for="email" style="color: #333;">Email:</label> <input type="email" id="email" name="email" placeholder="Enter your email" required style="padding: 5px; border: 1px solid #ccc; border-radius: 5px;"> </div> <div class="form-group"> <label for="interests" style="color: #333;">Interests:</label> <select id="interests" name="interests" multiple style="padding: 5px; border: 1px solid #ccc; border-radius: 5px;"> <option value="technology">Technology</option> <option value="fashion">Fashion</option> <option value="food">Food</option> <option value="travel">Travel</option> <option value="sports">Sports</option> </select> </div> <button type="submit" style="background-color: #04aa6d; color: #fff; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Subscribe Now!</button> </form> Salin selepas log masuk Output: Example #5: Guess the Number GameIn this instance, we will design a simple game where users have to guess the number generated by the system. <!DOCTYPE html>
<html>
<head>
<title>Guessing Game</title>
<style>
body {
text-align: center;
padding-top: 100px;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333333;
}
p {
color: #666666;
}
input {
padding: 10px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #cccccc;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border-radius: 4px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Guessing Game</h1>
<p>Guess a number between 1 and 10:</p>
<input type="number" id="guess" min="1" max="10">
<button onclick="checkGuess()">Submit</button>
<p id="result"></p>
<script>
function checkGuess() {
var guess = parseInt(document.getElementById("guess").value);
var randomNumber = Math.floor(Math.random() * 10) + 1;
if (guess === randomNumber) {
document.getElementById("result").innerHTML = "Congratulations! You guessed the correct number.";
} else {
document.getElementById("result").innerHTML = "Wrong guess. The correct number was " + randomNumber + ".";
}
}
</script>
</body>
</html>Salin selepas log masuk Output: ConclusionFrom all the above discussion, we can say that Web pages are created by using HTML code in a very simplified manner. Just simply put your HTML code in any one editor, save it with the .html extension, and open it within any browser. Atas ialah kandungan terperinci Reka Bentuk Halaman Web dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP! Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Alat AI Hot
Undresser.AI UndressApl berkuasa AI untuk mencipta foto bogel yang realistik 
AI Clothes RemoverAlat AI dalam talian untuk mengeluarkan pakaian daripada foto. 
Undress AI ToolGambar buka pakaian secara percuma 
Clothoff.ioPenyingkiran pakaian AI 
Video Face SwapTukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami! 
Artikel Panas
Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?
3 minggu yang lalu
By DDD
Bagaimana untuk memperbaiki KB5055518 gagal dipasang di Windows 10?
3 minggu yang lalu
By DDD
<🎜>: Rails Dead - Cara menjinakkan serigala
4 minggu yang lalu
By DDD
<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap
2 minggu yang lalu
By DDD
Tahap kekuatan untuk setiap musuh & raksasa di R.E.P.O.
4 minggu yang lalu
By 尊渡假赌尊渡假赌尊渡假赌
Alat panas
Notepad++7.3.1Editor kod yang mudah digunakan dan percuma 
SublimeText3 versi CinaVersi Cina, sangat mudah digunakan 
Hantar Studio 13.0.1Persekitaran pembangunan bersepadu PHP yang berkuasa 
Dreamweaver CS6Alat pembangunan web visual 
SublimeText3 versi MacPerisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Tutorial Java
1657
14
Tutorial CakePHP
1415
52
Tutorial Laravel
1309
25
Tutorial PHP
1257
29
Tutorial C#
1230
24
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML. 
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya. 
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing. 
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian. 
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output. 
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing 
Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
Feb 07, 2025 am 11:57 AM
Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data 
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara. 
|
