コース

HTML

Web ページの骨組みをつくる言葉。すべての入口です。

はじめよう

HTMLって何?

HTML・レッスン 1 / 26

はじめの一歩全9レッスン

  1. 01HTMLって何?
  2. 02タグって何?<p><strong>
  3. 03属性って何?hrefsrcalt
  4. 04HTMLファイルの全体の形<!DOCTYPE html><html><head><body>lang
  5. 05見出しと段落を書いてみよう<h1><h2><h3><p>
  6. 06リストで箇条書き<ul><ol><li>
  7. 07リンクで他のページへ<a>hreftargetmailto:
  8. 08ページ内リンクidhref="#profile"
  9. 09画像を表示しよう<img>alt

文章にひと工夫全5レッスン

  1. 10文字を強調しよう<strong><em>
  2. 11改行と区切り線<br><hr>
  3. 12特殊文字(実体参照)&lt;&gt;&amp;&copy;
  4. 13コメントでメモを残そう<!-- -->
  5. 14引用をあらわそう<blockquote><q><cite>

情報を整理する全3レッスン

  1. 15表をつくろう<table><tr><th><td>colspan
  2. 16まとまりを作ろう(divとspan)<div><span>
  3. 17用語と説明のリスト<dl><dt><dd>

ページ全体を組む全2レッスン

  1. 18ページの骨組みをつくろう<header><nav><main><footer><section>
  2. 19headの中身をそろえよう<head><title>charsetviewportdescription

画像とメディア全3レッスン

  1. 20画像に説明を添えよう<figure><figcaption>
  2. 21動画と音声を置こう<video><audio>
  3. 22埋め込み(YouTubeや地図)<iframe>srctitleallowfullscreen

入力を受け取る全4レッスン

  1. 23ボタンと入力欄<button><input>placeholdervalue
  2. 24いろいろな入力欄type="password"type="email"placeholder<textarea>
  3. 25選ぶ入力(チェックボックス・ラジオ・セレクト)type="checkbox"type="radio"<select><option>checked
  4. 26フォームで入力をまとめよう<form><label>actionmethodsubmit

このコースについて

HTMLは、ページの「骨組み」を決める言葉です。ここは見出し、ここは段落、ここは画像——そう伝えるための札(タグ)を付けていく作業だと考えると分かりやすいです。色や余白の指定はまだしません。それはCSSの仕事です。

タグ・属性・入れ子という基本の考え方から始めて、見出し・段落・リスト・リンク・画像・表・フォームまで、実際のページで使うものを一通り扱います。丸暗記はしません。「そのタグが何を意味しているか」を毎回添えてあるので、迷ったときに自分で選べるようになります。

学び終わるころには、文字と画像とリンクでできた作品「しまちゃんの自己紹介ページ」の土台が完成します。この作品はCSS・JavaScriptのコースでそのまま育てていくので、ここで作ったファイルは消さずに残しておいてください。