HTML で Web ページをデザインする

HTML はハイパーテキスト マークアップ言語として知られ、Web ページのデザインやコンテンツの構造化に使用される最も一般的な言語の 1 つです。 HTML は、タグ、要素、画像、およびいくつかの最新コンポーネントを使用して、Web ページをより魅力的でユーザーフレンドリーなものにします。

HTML と CSS を組み合わせることで、Web ページの外観を簡単にカスタマイズできます。 HTML は、World Wide Web 上で Web ページを適切に構造化する上で重要な役割を果たします。シンプルなテキストエディタを使用して編集できるため、ユーザーはいつでも必要に応じて変更を加えることができます。

HTML で Web ページをデザインするには? (ステップバイステップ)

ステップ 1: プロジェクトをセットアップする

• Web ページのファイルを保存する新しいフォルダーをコンピューター上に作成します。

• HTML コードを作成するには、メモ帳、Sublime Text、Visual Studio Code などのテキスト エディターを開きます。

ステップ 2: HTML 構造から開始します

• HTML ファイルの先頭に 宣言を追加します。これにより、HTML5 を使用していることがブラウザに伝えられます。
• HTML の開始タグと終了タグを作成します: .
• HTML タグ内に、head の開始タグと終了タグを作成します: .
• head タグ内に、タイトルの開始タグと終了タグを追加します: 。ここにウェブページのタイトルを書きます。

ステップ 3: 本文にコンテンツを追加する

• head の終了タグの後に、body の開始タグと終了タグを作成します: 。ここに、Web ページに表示されるすべてのコンテンツを配置します。
• body タグ内で、見出し、段落、画像、リンクなどの要素の追加を開始できます。
• 見出しを追加するには、メイン見出しに
  タグを使用し、
  、
  など、小見出しが続きます。
• 段落を追加するには、

を使用します。
• 画像を追加するには、 を使用します。タグを使用するには、src 属性を指定する必要があります。これには、画像ファイルの場所を指すファイル パスまたは URL が含まれている必要があります。
• リンクを追加するには、 タグと URL を指定する href 属性を使用します。

理解を深めるために、コードを次に示します。

<title>My First Web Page</title>


<h1 id="Unlock-the-Power-of-Online-Learning">Unlock the Power of Online Learning</h1>
<p>Master 1000+ Tools & Technologies.</p>
<img  src="/static/imghwm/default1.png" data-src="C:\Users\Demo2\Desktop\HTML\webimage.PNG" class="lazy" alt="HTML で Web ページをデザインする" >

• Python
• Artificial Intelligence
• Java

View All 1000 Skills

ステップ 4: HTML ファイルを保存します

• 以前に作成したフォルダーに、 .html 拡張子 を付けてファイルを保存します。
• my web page.html (通常、Web サイトのメイン ページとして使用されます) など、ファイルにわかりやすい名前を選択します。

ステップ 5: Web ページを表示する

• Chrome、Firefox、Safari などの Web ブラウザで HTML ファイルを開きます。

• 追加したコンテンツを示す以下の Web ページがブラウザに表示されるはずです。

出力:

ステップ 6: Web ページの強化を続ける

• 追加の HTML タグと属性を調べて、Web ページの構造とデザインをさらに強化します。
• Web ページのスタイルを設定し、視覚的に魅力的なものにするための CSS (カスケード スタイル シート) を学びます。
• フォーム、テーブル、マルチメディア要素など、より高度な HTML 機能を試してみましょう。

Web デザイン用の HTML タグと要素

ここでは、HTML で Web ページをデザインする際に重要な 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

Create structured tabular data
Define the table header section
Define the table body section
Define the table footer section
Define a table row
		Define a table data cell
	Create input forms
	Create different types of form input fields
	Create a dropdown menu for selecting options
	Define individual options within a dropdown menu
	Define the header section of a web page
	Define the navigation section of a web page
	Define a generic section within a web page
	Define an independent, self-contained content within a page
	Define content that is tangentially related to the main page
	Define the footer section of a web page

Examples of Design Web Pages in HTML

Let’s create some web pages to see the resultant web page.

Example #1: Travel Webpage

Here, 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:

<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>


<h2 id="Places-to-Visit-in-Switzerland">Places to Visit in Switzerland</h2>
<div class="card">
<h1 id="b-Explore-Switzerland-b"><b>Explore Switzerland</b></h1>
<h3 id="Starting-from-CHF">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>

Output:

Example #2: Feedback Form

We will build one Feedback form in the form of a web page in this example.

<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>


<h3 id="We-Value-Your-Suggestions">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>

Output:

Example #3: OTT Platform Homepage

In this example, we will create another web page that showcases an amazing homepage for an OTT platform.

HTML Code:

<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>


  <header>
    <h1 id="Welcome-to-My-OTT-Platform">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 id="Trending-Now">Trending Now</h2>
    <div class="video">
      <div class="thumbnail">
        <img src="/static/imghwm/default1.png" data-src="video5.jpg" class="lazy" alt="Video 5">
        <div class="title">Movie1</div>
      </div>
      <div class="thumbnail">
        <img src="/static/imghwm/default1.png" data-src="video6.jpg" class="lazy" alt="Video 6">
        <div class="title">Movie2</div>
      </div>
      <div class="thumbnail">
        <img src="/static/imghwm/default1.png" data-src="video7.jpg" class="lazy" alt="Video 7">
        <div class="title">Movie3</div>
      </div>
    </div>
    <h2 id="Top-Shows">Top 3 Shows</h2>
    <div class="video">
      <div class="thumbnail">
        <img src="/static/imghwm/default1.png" data-src="video8.jpg" class="lazy" alt="Video 8">
        <div class="title">Show1</div>
      </div>
      <div class="thumbnail">
        <img src="/static/imghwm/default1.png" data-src="video9.jpg" class="lazy" alt="Video 9">
        <div class="title">Show2</div>
      </div>
      <div class="thumbnail">
        <img src="/static/imghwm/default1.png" data-src="video10.jpg" class="lazy" alt="Video 10">
        <div class="title">Show3</div>
      </div>
    </div>
    <h2 id="International-Movies">International Movies</h2>
    <div class="video">
      <div class="thumbnail">
        <img src="/static/imghwm/default1.png" data-src="video11.jpg" class="lazy" alt="Video 11">
        <div class="title">Movie1</div>
      </div>
      <div class="thumbnail">
        <img src="/static/imghwm/default1.png" data-src="video12.jpg" class="lazy" alt="Video 12">
        <div class="title">Movie2</div>
      </div>
      <div class="thumbnail">
        <img src="/static/imghwm/default1.png" data-src="video13.jpg" class="lazy" alt="Video 13">
        <div class="title">Movie3</div>
      </div>
    </div>
  </main>
  <footer>
    <p>© 2023 My OTT Platform. All rights reserved.</p>
  </footer>

Output:

Example #4 Newsletter Subscription Page

In this example, let’s create a simple subscription page where users can subscribe to a newsletter.

Join our Newsletter!

Name:

Email:

Interests: Technology Fashion Food Travel Sports

Subscribe Now!

Output:

Example #5: Guess the Number Game

In this instance, we will design a simple game where users have to guess the number generated by the system.

<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>


<h1 id="Guessing-Game">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>

Output:

Conclusion

From 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 で Web ページをデザインするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。