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 ページに表示されるすべてのコンテンツを配置します。
<!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>
ログイン後にコピー
ステップ 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.
In 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:
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
