<注意点> ・一部リンクは学内専用のリンクとなっております。学外の方は閲覧できないリンクとなっております。ご了承ください。
HTML(HyperText Markup Language)とは
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>段落のテキスト</p>
<img src="画像のURL" alt="代替テキスト">
<a href="リンクのURL">リンクテキスト</a>
<table>
<tr>
<th>ヘッダセル1</th>
<th>ヘッダセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
</body>
</html>
この例では、<!DOCTYPE html>
は文書のタイプをHTMLであることを示し、<html>
要素はHTML文書全体を囲んでいます。<head>
要素はページのメタ情報やスタイルシートのリンクを含み、<body>
要素は実際のコンテンツを含みます。<h1>
や<p>
は見出しや段落のテキストを表し、<img>
は画像、<a>
はリンク、<table>
は表を表します。
HTMLを使用することで、ページの構造やレイアウト、テキストのフォーマット、画像やリンクの挿入など、基本的な要素を作成することができます。また、CSS(Cascading Style Sheets)やJavaScriptなどと組み合わせて、ページのデザインや動的な機能を追加することもできます。
html:5
と入力見出し Headline
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
段落 Paragraph
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
段落1
段落2
段落3
リスト Unordered List, Ordered List
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
リスト1
リスト2
リスト3
アンカーリンク Anchor Link ブログ
<a href="./index.html">ホーム</a>
<a href="<https://fast5-blog.com/>" target="_blank">ブログ</a>
画像 Image
<img src="./images/icatch.png" alt="画像です">
入れ物 Division=分割→グループ化
<div>
<h1>タイトル1</h1>
<p>段落を表しています。</p>
<p>段落を表しています。</p>
</div>
<div>
<h1>タイトル2</h1>
<p>段落を表しています。</p>
<p>段落を表しています。</p>
</div>
入れ物 span=範囲→一部分のみ
<p>
こんにちは、今回は<span
style="color: red">タイピング練習</span
>を<br />していこうと思います。
</p>
こんにちは、今回はタイピング練習を していこうと思います
太字、下線、イタリック、等
<p>
<b>こんにちは!</b>、<u>今回</u>は<small>タイピング</small><i>練習</i>を<b
><i><u>していこう!!!</u></i></b
><small>と思います。</small>
</p>
Input
<form action="./index.php" method="post">
<label for="name">名前:</label>
<input type="text" name="" id="name" />
<label for="pass">パスワード:</label>
<input type="password" name="pass" id="" value="password" /><br />
<input type="range" />
<label for="dore">どれ</label>
<input type="checkbox" name="" id="dore" />
<label for="id">それ</label>
<input type="radio" name="re" id="id" />
<label for="id_2">あれ</label>
<input type="radio" name="re" id="id_2" />
<label for="iro">色:</label>
<input type="color" name="iro" id="iro" /><br />
<input type="button" value="ボタン" />
<input type="button" value="ボタン" disabled />
<input type="submit" value="送信する" />
<input type="file" name="" id="" /><br />
<input type="email" name="" id="" placeholder="@がないとエラー" />
<input type="number" name="" id="" readonly />
<input type="date" name="" id="" />
<input type="hidden" name="secret" value="秘密だよん" /><br />
<select name="" id="">
<option value="">あああああ</option>
<option value="">い</option>
<option value="">う</option>
<option value="" selected>えええ</option>
<option value="">おーん</option>
</select>
</form>
table
<table>
<tr>
<th>ヘッダセル1</th>
<th>ヘッダセル2</th>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
<tr>
<td>データセル1</td>
<td>データセル2</td>
</tr>
</table>
F12