Nagashima Laboratory

HTMLタグ

ここでは基本的なHTMLタグを解説しています。HTMLタグは<body>と<body>の間に記述します。基本的なHTMLの構造は下記のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<p>：段落
<br>：改行

フォルダ名：html_sample_02、ファイル名：index.html

  • <p>タグの文章が2つありますが、1つ目はキーボードのエンターキーで改行、 2つ目の文章では、途中に<br>を挿入してください。
<h1>段落</h1>
<p>ここには文章が
はいります</p>
<p>ここには文章が<br>はいります</p>
  • 2つの文章の表示の違いを確認してください。
  • HTML内で改行をしたいときには、改行用のタグ<br>を入れます。

<h1>〜<h6>：見出し

フォルダ名：html_sample_03、ファイル名：index.html

  • h1～h6の6種類　数字が小さい方から大見出し、中見出し…になります
  • 論文の章・節・項のように、構造に合わせて使います
  • 太字にしたいときに使うタグではないため、太字にすることが目的の場合はCSSで装飾します
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

<ul><ol><li>：順序あり（なし）リスト
<dl><dd><dt>：説明リスト

フォルダ名：html_sample_04、ファイル名：index.html

  • <ul> : Unordered List　順番のない箇条書き。順番を入れ替えても意味が変わらないリスト。
  • <ol> : Ordered List　順番のある箇条書き（デフォルトでは数字連番）。連番の付けられたリスト。入れ替えると意味が変わってしまうリスト。
  • <li> : List　リスト項目。<ul>や<ol>と一緒に使います
  • <dl>：Description List / 説明リスト。各項目が用語（term →dt要素）と説明（Description→dd要素）のペアになっている形式のリスト。「用語とそれを定義する文章」や、「質問と回答」などに使用します
<h1>様々なリスト</h1>
<h2>ul</h2>
<p>好きなたべもの</p>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<h2>ol</h2>
<p>好きなたべものベスト3（好きな順）</p>
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

<h2>dl</h2>
<p>よくある質問</p>
<dl>
  <dt>Q:</dt>
  <dd>A:</dd>
  <dt>Q:</dt>
  <dd>A:</dd>
</dl>

<a>：アンカー（リンク）

フォルダ名：html_sample_05、ファイル名：index.html

<h1>リンク</h1>

<ul>
  <li><a href="https://google.com">リンク</a></li>
  <li><a href="https://google.com" title="Google検索">マウスをのせるとタイトル表示</a></li>
  <li><a href="https://google.com" target="_blank">別タブ表示</a></li>     </ul>

<pre>：整形済みテキスト

フォルダ名：html_sample_06、ファイル名：index.html

  • <pre>：ファイル内でのレイアウトをそのまま反映させます
  • <code>：プログラムのソースであることを表します。<pre>タグとセットで使用します
<pre><code>この文章はそのままの見た目で表示されます。
&lt;br&gt;がなくても改行できます。</code></pre>

<table>：表

フォルダ名：html_sample_07、ファイル名：index.html

  • <table> 表
  • <tr> 行
  • <td> セル（thはヘッダー列・行に使います）
<h1>表</h1>
<table>
  <tr>
    <th>名前</th>
    <th>月</th>
    <th>火</th>
    <th>水</th>
  </tr>
  <tr>
    <td>Aさん</td>
    <td>○</td>
    <td>×</td>
    <td>○</td>
  </tr>
  <tr>
    <td>Bさん</td>
    <td>×</td>
    <td>×</td>
    <td>○</td>
  </tr>
</table>

<img>：画像

フォルダ名：html_sample_08、ファイル名：index.html

<h1>画像表示</h1>
<img src="images/sample.png" alt="画像">

<audio> : 音声
<video>：動画

フォルダ名：html_sample_09、ファイル名：index.html

  • 音声データmp3や、動画データmp4の埋め込み。動画については容量が大きくなるため、直接埋め込むのではなく、動画共有サイト（Youtube、Vimeoなど）にアップロードした上で、埋め込む、という手法もよく使われます（後述のiframe）
  • サイト上で突然音が流れると閲覧者を驚かせてしまうことがあるため、音が出ることを予め表示することや、ボタンを押してから音が流れるようにするよう、配慮します
  • 予めmediaフォルダにリンクしたいデータを入れておきます
<h1>メディア</h1>

<h2>音声</h2>
<audio src="media/sample.mp3" controls></audio>

<h2>動画</h2>
<video src="media/sample.mp4" width="480" controls></video>

<iframe>：フレーム

フォルダ名：html_sample_10、ファイル名：index.html

  • 他のウェブページのコンテンツを埋め込みます。
  • 下記コード内の※印の部分は削除してください
<h1>インラインフレーム</h1>
<h2>YouTube</h2>
※ここにYoutubeの埋め込みタグを挿入

<h2>GoogleMap</h2>
※ここにGoogleMapの埋め込みタグを挿入
  • Youtubeは、好きなYoutubeコンテンツのタグを挿入してください。
  • GoogleMapは、Map上で埋め込みをしたい場所を選び、タグを挿入してください
    • 埋め込みタグの確認方法：地図上で場所をクリック　共有＞地図を埋め込む　HTMLタグをコピー

FORM：フォーム

フォルダ名：html_sample_11、ファイル名：index.html

  • 入力フォームを作成します。実際にフォームとして使う（データを送信する）には、HTMLだけでなく、プログラム実装が必要です。

《主なタグ》

  • form　フォーム関連要素をとりまとめる
  • input　type属性で指定したキーワードによって様々な種類の入力・部品となる要素
    • text　テキスト入力
    • email　メールアドレス
    • file　送信するファイルの選択
    • checkbox　チェックボックス
    • radio　ラジオボタン
    • date　日付
    • time　時刻
    • number　数値
    • range　スライダー（大まかな数値）
    • password　パスワード
    • submit　送信ボタン
  • textarea　複数行のテキスト入力フィールド。要素の内容に入れたテキストは、予め入力された状態で表示される（入力例を示すのに使える）
<h1>フォーム</h1>
<form action="" method="">
NAME : <input type="text" name="name"><br>
E-mail : <input type="email" name="email" size="40"><br>
MESSAGE : <br>
<textarea name="message" rows="4" cols="40">ここにメッセージを入力して下さい。</textarea><br>
FILE : <input type="file" name="file"><br>
CHECK : <input type="checkbox" name="check" value="1">A
<input type="checkbox" name="check" value="2">
B<input type="checkbox" name="check" value="3">C<br>
RADIO : <input type="radio" name="radio" value="1">合格<input type="radio"   name="radio" value="2">不合格<br>
DATE : <input type="date" name="date"><br>
TIME : <input type="time" name="time"><br>
NUMBER : <input type="number" min="0" max="10" name="num"><br>
RANGE : <input type="range" min="0" max="100" name="range"><br>
PASS : <input type="password" name="password" value="******"><br>
<input type="submit" name="submit" value="送信"><br>
</form>
<p>サンプルです。送信しても何も起こりません.</p>

() Category: 資料 Tags: