【勉強ノート】ドットインストール② 「はじめてのHTML」（無料コース）学習で、できる事、調べた事　まとめ

異業種からITエンジニア、ブロガー転換を目指す４０歳おじさんの勉強ノート。

スキル書き溜めとして、簡潔まとめ。

レッスン内容

プロフィールサイトを作ってみよう

ブラウザに名前を表示しよう

タグでマークアップしてみよう

imgタグで画像を表示しよう

全角文字に気をつけよう

文書全体につけるタグを見ていこう

文書に関する情報を設定しよう

文書の本文を書き込んでいこう

コメントタグを使ってみよう

header、footerタグを使ってみよう

sectionタグを使ってみよう

ulタグでリストを表現してみよう

外部サイトへのリンクを設定してみよう

HTMLの仕様を確認してみよう

ドットインストール　はじめてのHTML　より

身につくスキル（これが出来る）

HTML

  • ローカル環境において、シンプルなWEBページが作成できる
  • ブラウザ上に文字を表示できる
  • 文字を「見出し」と「本文」に分けて表示できる
  • ブラウザ上に画像を表示できる
  • 画像の表示サイズを調整できる
  • ブラウザにファビコンとタイトルを表示できる
  • コメント（ブラウザ上に表示されないメモ書き）が書ける

VS Code

  • エディタのエクスプローラ画面を開く
  • エディタのエクスプローラ画面から新規ファイルを作れる
  • エディタのショートカットキーが使える
「操作」「MAC」「Windows」
字下げTABTAB
字下げをもどすSHIFT＋TABSHIFT＋TAB
文字列を移動するOPTION＋↑↓ALT＋↑↓
文字列の複製を作るSHIFT＋OPTION＋↑↓SHIFT＋ALT＋↑↓
文字列をコメントにするCommand＋/Ctrl＋/
（VS Codeショートカットキー まとめ）

勉強になったこと

① VS Code

エディタのエクスプローラ画面でファイルを参照できるので、エディタとフォルダを見比べる作業が必要ない。

さらにエディタのエクスプローラ画面でファイルの作成まで出来る。

画像ファイルやハイパーリンクのパスがエディタ上で参照できるのは非常に便利。

② コーディング

タグに関する記号や文字は「半角」であること。

特に空白は見た目で判別しづらいので注意。（プログラミング用フォントの設定が重要）

ブラウザ上の表示がおかしい時は、タグや空白に全角が混ざっていないか疑うこと。

文字コードはUTF-8に統一されつつある。

③ HTMLタグ

headタグとheaderタグ・異なるもの。
headタグ・文書全体に対する情報を記述する。
headerタグ・bodyタグの中で使うヘッダー的な要素を記述する。
footerタグ・コピーライトなどを記述する。
sectionタグ・文書の単位ごとをマークアップする。
画像を横並びにする場合・箇条書きのタグでマークアップする。
・文書の意味を考えて、適切なタグでマークアップすること。
リンク先を別タブで開く場合・target属性で設定する。
・target = "_blank"
（HTMLの要点 まとめ表）

覚え方、要点

① HTMLの全体

<!DOCTYPE html>
<html lang = "ja">
 <head> </head>
 <body> </body>
</html>

② タグの意味や読み方

見出しタグH1,H2,,Headhingの略
段落タグpParagraphの略
ソースsrcSource
読み方widthウィス
読み方heightハイト
箇条書きタグulUnordered Listの略
箇条書きタグliList Itemの略
（用語の覚え方 ポイント）

勉強不足だと思ったこと、調べたこと

① 文字コードとは？

ブログGiXoさんの記事「文字コードとは？　データ分析用語を解説」で学べる。分かりやすい。

② ファビコンとは？

ウィキペディア「 Favicon」より

Favorite Icon（フェイバリット・アイコン：お気に入りアイコン）が縮約された単語のこと。

③ headタグとheaderタグの違い

③−１ headタグ

ブラウザには表示されない情報。

  • 文字コードの宣言
  • 言語の宣言
  • WEBページのタイトル
  • ファビコン
  • CSSファイルの指定

参考：MDN web docs「head 文書メタデータ」

③−２ headerタグ

ページとヘッダーと記事のヘッダーに使われる。

ページのヘッダー

コンテンツと区別するために使われる。

  • 記事のメインタイトル
  • 記事に関するイントロダクション
  • 目次、など
記事のヘッダー

文書ごとのタイトルに関する情報を記載する。

参考：MDN web docs「header」

③−３ footerタグ

記載する内容

  • 著作権に関する情報
  • 関連文書へのリンク
  • 著作権情報等

参考：MDN web docs「footer」

-プログラミング