WEB系転職 スキルアップ ドットインストール プログラミング ホームページ制作・WordPress

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

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

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

レッスン内容

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

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

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

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タグの違い

③−1 headタグ

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

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

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

③−2 headerタグ

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

ページのヘッダー

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

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

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

参考:MDN web docs「header

③−3 footerタグ

記載する内容

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

参考:MDN web docs「footer

-WEB系転職, スキルアップ, ドットインストール, プログラミング, ホームページ制作・WordPress

© 2020 中堅サラリーマン・コツコツ頑張るブログ