はじめてのHTML入門講座《テックアカデミーの無料動画で基礎を学ぼう》

オンライン完結型のプログラミングスクール『テックアカデミー』。

『テックアカデミー』のYoutubeチャンネルで、プログラミングの基礎学習ができます。

まずはHTML/CSSの無料動画講座で学びましょう。

ヤドロク

無料動画で「はじめてのHTML入門講座」が見れるよ！

はじめての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入門講座』でお勉強しましょう↓

Twitter（@saisei_to_hakai）では、気になるカルチャーについてつぶやいています。レアな情報を流したりするのでフォローしといてください。