HTMLの学習

概要｜HTMLの学習｜CSSの学習｜ JavaScriptの学習｜JavaScript(canvas)の学習｜ JavaScript(レベルアップ編)の学習｜サイトマップ｜ホーム




モード：パソコン／スマホ

HTML（HyperText Markup Language）は、Webページの文書などの構造 （段落、見出し、表、画像、動画などを定義）を形作るための言語です。

この学習では、文字表示、リスト表示、テーブル表示、画像（写真）表示、音を鳴らす、動画表示などを学習します。 参考でHTMLの要素とタグ一覧を掲載しておりますので、ご覧ください。

Step1 基本形

HTMLドキュメントの基本形です。

  • <!DOCTYPE html>このドキュメントの始まりです。
  • HTMLの定義（<html>～</html>）をします。
  • その中にヘッダー部（<head>～</head>）と
    ボディ部（<body>～</body>を書きます。
  • 表示する内容はボディ部の中に記述します。

上記のソースコードはそのままの記述します。（おまじないです。）下記に、そのソースを示します。
実行ボタンを押すと、その内容が表示されます。

HTML　ソース　

Step2 文字表示

HTMLは<タグ>で書きます。終了タグは</タグ>で書きます。下記は一例です。

  • 見出し：<hn>～見出し～</hn>、nは1～6
  • 段落：<p>～段落～</p>
  • 範囲指定：<div>～範囲（ブロック）～</div>、<span>～範囲～</span>
HTML　ソース　

Step3 リスト表示

リスト表示のタグを使って書いてみましょう。

  • <ul>:順序のないリストを表示します。
  • <ol>:順序のあるリストを表示します。
  • <li>:リストの項目を記述します。
HTML　ソース　

練習問題１

  1. 順序のあるリスト表示に変更しましょう。
  2. リストの行を追加しましょう。

Step4 テーブル表示

テーブル表示のタグを使って書いてみましょう。

  • テーブルの基本的な構造は、<table>～</table>で定義します。
  • 上記の中に<tr>～</tr>で表の横一行を定義して
  • さらにその中に<th>～</th>や<td>～</td>でセルを定義します。
    <th>は見出しを定義するヘッダセル、 <td>はデータを定義するデータセルです。
  • テーブルのキャプション（表の見出し）は<caption>で指定します。
HTML　ソース　

練習問題２

  1. 項目見出しのセルをデータセルに変更しましょう。
  2. 行を追加しましょう。
  3. 列を追加しましょう。

Step5 画像（写真）表示

  • src="画像（写真）ファイル名"、設置場所がこのhtmlが書かれているファイルと同じディレクトリの場合は、"ファイル名"で指定します。異なる場合は”ディレクトリ名/ファイル名"で指定します。
  • width="表示幅" height="表示高さ"をピクセル数で指定します。
    指定しない場合は、画像（写真）ファイル内の縦横ピクセル数が採用されます。
HTML　ソース　

練習問題３

  1. 縦、横の表示サイズを色々と変更しましょう。
  2. 縦横指定をしない場合の表示を確認しましょう。

Step6 音（音楽）を鳴らす

  • src="動画ファイル名"、
    設置場所がこのhtmlが書かれているファイルと同じディレクトリの場合は、
    "ファイル名"の指定、異なる場合は”ディレクトリ名/ファイル名"で指定します。
  • controls指定は、操作パネルを表示します。
  • autoplay指定は、自動再生します。
HTML　ソース　

練習問題４

  1. 自動再生しない指定を確認しましょう。
  2. 操作パネルを表示なしに変更しましょう。

Step7 動画表示

  • src="動画ファイル名"、
    設置場所がこのhtmlが書かれているファイルと同じディレクトリの場合は、
    "ファイル名"の指定、異なる場合は”ディレクトリ名/ファイル名"で指定します。
  • controls autoplay
    指定しない場合は、画像（写真）ファイル内の縦横ピクセル数が採用されます。
  • width="表示幅" height="表示高さ"をピクセル数で指定します。
    指定しない場合は、動画ファイル内の縦横ピクセル数が採用されます。
HTML　ソース　

練習問題５

  1. 縦、横の表示サイズを色々と変更しましょう。
  2. 縦横指定をしない場合の表示を確認しましょう。

Step8 その他の指定

  • <a href="https:～">～</a>は、ハイパーリンク（インクするURL）を指定します。
    target=は、リンク先の表示方法を指示します。
    指定省略または_self指定は、現在のウィンドウでリンク先を開きます。
    _blank指定は新しいタブやウィンドウでリンク先を開きます。
  • <mark></mark>は、該当テキストを目立たせる箇所を指定します。
  • <br>は、改行する箇所を指定します。
HTML　ソース　

練習問題６

  1. ハイパーリンクの指定を、現在のウィンドウで開く指定に変更しましょう。
  2. リンク先を変更しましょう。
  3. 改行タグの位置を変えて、改行状態を確認しましょう。

Step9 まとめ（総合練習）

今までの学習内容を参考にして、下記の内容を作成しましょう。作成したソースは、下記のテキストボックスに張り付けて実行しましょう。

目次

  • リスト表示
  • テーブル表示
  • 画像（写真）表示
  • 音（音楽）を鳴らす
  • 動画再生

テーブル表示

学習スケジュール
メニュー　開始時間　学習時間
HTMLの学習　　９：００　２０分
CSSの学習　　９：３０　４０分
JavaScriptの学習　１０：３０　６０分

画像（写真）表示

音（音楽）を鳴らす

動画表示

HTML　ソース　

総合演習問題の解答はここのテキストにあります。 上のテキストボックスに貼り付けて、実行してください。

概要｜HTMLの学習｜CSSの学習｜ JavaScriptの学習｜JavaScript(canvas)の学習｜ JavaScript(レベルアップ編)の学習｜サイトマップ｜ホーム