HyperText Markup Language로 알려진 HTML은 웹 페이지를 디자인하고 콘텐츠를 구성하는 데 사용되는 가장 널리 사용되는 언어 중 하나입니다. HTML은 태그, 요소, 이미지 및 일부 최신 구성 요소를 사용하여 웹 페이지를 더욱 매력적이고 사용자 친화적으로 만듭니다.
HTML과 CSS를 결합하면 웹페이지의 모양을 쉽게 맞춤설정할 수 있습니다. HTML은 World Wide Web에서 웹 페이지를 적절하게 구성하는 데 중요한 역할을 합니다. 간단한 텍스트 편집기를 사용하여 편집할 수 있으므로 사용자는 필요할 때마다 변경할 수 있습니다.
더 나은 이해를 위해 코드는 다음과 같습니다.
<!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>
출력:
다음은 HTML로 웹페이지를 디자인하는 데 중요한 필수 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>로그인 후 복사 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>로그인 후 복사 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>로그인 후 복사 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> 로그인 후 복사 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>로그인 후 복사 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. 위 내용은 HTML로 웹 페이지 디자인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요! 원천：php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환
<style>html { 글꼴 크기: calc(100vw / 3.75); }body { 글꼴 크기: 0.16rem; }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다.
그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법
Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법
다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
관련 주제
더>
|
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
