オンライン完結型のプログラミングスクール『テックアカデミー』。
『テックアカデミー』のYoutubeチャンネルで、プログラミングの基礎学習ができます。
まずはHTML/CSSの無料動画講座で学びましょう。
- 1 はじめてのHTML入門講座
- 1.1 1.HTMLとは何か?
- 1.2 2.マークアップ
- 1.3 3.HTMLの基礎構造
- 1.4 4.よく使われるタグ
- 1.5 5.見出し・段落
- 1.6 6.強調・区切り線
- 1.7 7.引用
- 1.8 8.略語・名前の特記・住所表現
- 1.9 9.コード、改行、プリフォーマット
- 1.10 10.リスト項目
- 1.11 11.定義リスト
- 1.12 12.アンカータグ
- 1.13 13.相対パスと絶対パス
- 1.14 14.画像
- 1.15 15.ファイルの読み込み
- 1.16 16.iframe
- 1.17 17.コメント
- 1.18 18.行とセル
- 1.19 19.テーブルのヘッダーとフッター
- 1.20 20.テキスト入力
- 1.21 21.ラジオボタンとチェックボックス
- 1.22 22.ドロップダウンメニュー
- 1.23 23.フォームのグルーピング
- 1.24 24.ボタンと送信
- 2 テックアカデミーの無料動画《はじめてのHTML入門講座》まとめ
はじめてのHTML入門講座
4分〜7分くらいの動画があります。全24本。
ひとつづつ見て、HTMLの基礎を固めましょう↓
1.HTMLとは何か?
【学習ポイント】
●HTMLとはWebブラウザに文字を表示させるための言語
●テキストエディタでHTMLを書く
2.マークアップ
【学習ポイント】
●HTMLタグで<ここから></ここまで>とコンピュータに伝える
●コードを書く時は半角英数字
●タグにはそれぞれ意味があり、コンピュータ命令できる
【使用タグ】
- h1 大見出し
- p 段落
3.HTMLの基礎構造
【学習ポイント】
●HTMLに必要なタグを知っておこう
●インデント(字下げ)を使おう
【使用タグ】
!doctype どのようなHTMLバージョンで書かれてるか伝えるタグ
html このタグの内側がHTML文書であることを伝えるタグ
head HTML文書を解釈するうえで必要な情報をかく場所
body HTMLファイル文書の内容。見える部分
4.よく使われるタグ
【学習ポイント】
●ブロック要素とインライン要素について理解しよう
【使用タグ】
- meta 文書の情報を伝えるタグ。セットじゃなくひとつで使う
- title 文書のタイトルを伝える
- div ひとつのカタマリを示す。ブロック要素。
- span 文書の一部を示す。インライン要素。
5.見出し・段落
【学習ポイント】
●見出しと段落を理解して表示させよう
【使用タグ】
- p 段落
- h1〜h6 大見出し〜小見出し
6.強調・区切り線
【学習ポイント】
●強調と区切りのタグを知ろう
【使用タグ】
- em 強調。車体で表示される
- Strong 重要なことを示す。太字表示される。
- hr 区切り
7.引用
【学習ポイント】
●引用について知っておこう
【使用タグ】
- blockquote まとめて引用
- q 一部を引用
- cite=”◯◯“ 引用元を表記する。属性
8.略語・名前の特記・住所表現
【学習ポイント】
●どういった意味合いを持った言葉なのかタグ付けしよう
【使用タグ】
- abbr 略語であることを示す
- title属性 略語の元の言葉を伝える
- cite 名前であることを伝える
- address 住所であることを伝える
9.コード、改行、プリフォーマット
【学習ポイント】
●コードタグ、改行、プリフォーマットタグを知っておこう
【使用タグ】
- code プログラム用語・コンピュータ用語であることを示す
- br 改行。セットじゃなくひとつで使うタグ
- pre プリフォーマット。入力したとおりに表示させるタグ
10.リスト項目
【学習ポイント】
●リストを作るタグを知っておこう
【使用タグ】
- ol 番号をふったリストを作るタグ
- ul 番号のないリストを作るタグ
- li リストの項目を記入するタグ
11.定義リスト
【学習ポイント】
●情報がセットになったリスト(例:質問&答え)を作るタグを知っておこう
【使用タグ】
- dl 情報がセットになったリストを作るタグ
- dt リスト情報の項目名
- dd リスト情報の内容
12.アンカータグ
【学習ポイント】
●リンク先を指定するアンカータグについて知ろう
【使用するタグ】
- a アンカータグ
- href属性 リンクがとぶ先のページを指定するための属性
- Id属性 ページの中にある部分に名前をつける属性
13.相対パスと絶対パス
【学習ポイント】
●場所を指定する「相対パス」と「絶対パス」について知ろう
14.画像
【学習ポイント】
●画像の貼り方を知ろう
【使用するタグ】
- img 画像を表すタグセットじゃなくひとつで使われる
- alt 属性 画像の代わりに読み上げられる
- title属性 画像のタイトルを伝える
15.ファイルの読み込み
【学習ポイント】
●ファイルの読み込み方について知ろう
【使用するタグ】
- link スタイルシートやCSSやFaviconを読む込む時に使うタグ
- script JavaScriptを読み込む時に使うタグ
16.iframe
【学習ポイント】
●iframe(インラインフレーム)について知ろう
●iframeとは、特定のファイルをページの一部に表示させること
【使用するタグ】
iframe 画像を表すタグセットじゃなくひとつで使われる
src属性 ファイルの場所を指定するタグ
width属性 インラインフレームの幅を指定するタグ
height属性 インラインフレームの高さを指定するタグ
17.コメント
【学習ポイント】
●コメントについて知ろう
●コメントとは、プログラミングなどで、読み返す時に内容をわかりやすくするためのプログラムじゃない表記。コメントアウト
【使用するタグ】
<!– –> コメントを書く時に使う
18.行とセル
【学習ポイント】
●テーブル(表)の作り方を知ろう
【使用するタグ】
- table テーブル(表)のタグ
- tr 行のタグ
- td セル(1マス)のタグ
- th テーブルのヘッダーセルのタグ
- table border テーブルの罫線を入れるタグ
19.テーブルのヘッダーとフッター
【学習ポイント】
●テーブルヘッダーとフッターを使い分けよう
【使用するタグ】
- thead 表のヘッダータグ
- tfoot 表のフッタータグ
- tbody 表のボディタグ
- td colspan セルを結合するタグ
20.テキスト入力
【学習ポイント】
●テキスト入力欄の作り方を知ろう
【使用するタグ】
- input type=”text” 1行タイプのinputタグ。
- input type=”password” パスワードタイプのinputタグ。文字を黒く隠して入力できる
- textarea 複数行入力できるようになるタグ
- name 名前を付けるタグ
- raws=”◯◯” 記入できる行数を変えられるタグ
- cols=”◯◯“ 記入できる横幅を変えられるタグ
21.ラジオボタンとチェックボックス
【学習ポイント】
●テキスト入力欄の作り方を知ろう
●ひとつしか選択できないのがラジオボタン/ドロップダウンメニュー
●複数選択できるのがチェックボックス
【使用するタグ】
- input type=”radio” name属性が同じものの中でひとつしか選べない。value属性で送信する値を指定する
- input type=”checkbox” name属性が同じものがひとまとまりのデータをして扱われる。value属性で送信する値を指定する
22.ドロップダウンメニュー
【学習ポイント】
●選択肢から選ぶドロップダウンメニューの作り方を知ろう
【使用するタグ】
- select 1行タイプのinputタグ。
- name属性 selectタグに対して指定する
- option 項目ごとに内容を指定するタグ
- value属性 optionタグに対して送信する値を決める
- optgroup 複数のoptionをグルーピングする。メニューの種類分けをするタグ
23.フォームのグルーピング
【学習ポイント】
●フォームのグルーピングをして入力しやすい入力欄にしよう
【使用するタグ】
- fieldset 複数の入力欄をまとめるタグ。
- legend fieldsetタグでまとめた項目の説明を書く
- label 入力欄のラベルとして使う。入力欄のidに対してfor属性で指定する
24.ボタンと送信
【学習ポイント】
●ボタンの設置と送信について知ろう
【使用するタグ】
- input type=”submit” 入力したデータを送信するときに押すボタン
- button Javascriptなどを使って処理を実行するきっかけに使うボタン
- POST データを裏でまとめてる方式
- GET URLの一部としてデータを送る方式
- form 入力フォーム全体を囲んで、ひとつのデータとして送る単位を示すタグ
テックアカデミーの無料動画《はじめてのHTML入門講座》まとめ
見てくだけでだいぶHTMLがわかりますね。
自分で手を動かせば出てきたタグも覚えられそう。
引き続き『はじめてのCSS入門講座』でお勉強しましょう↓
【関連記事】>>>はじめてのCSS入門講座《テックアカデミーの無料動画で基礎を学ぼう》