はじめてのHTML入門講座(TechAcademy)をやってみた。| マナブさんを真似(マネ)ぶ


マナブさんの【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】をやっています。

まず最初はTechAcademyのはじめてのHTML入門講座です。

C言語はキツいのでWeb系から入る。

いいですね。

挫折しにくいです。

そしてこの教材良いと思います。

良質な素材を利用して勉強するのが無駄が無いですね。

HTMLの知識は全くのゼロでは無かったですが、何となくタグを調べて文字を囲んで何となくうまく表示できた。

みたいな感じでやってました。

これを見るともう少ししっかりした骨組みが理解できると思います。

1本が短いので苦になりません。

解説している方は話し方が丁寧です。

以下はお奨めの方法です。
1回目は1.25倍速。
2回目は1.5倍速。

はじめてのHTML入門講座リスト

Chapter 題名 時間
1-1 HTMLとは何か?(はじめてのHTML) 6:19
1-2 マークアップ(はじめてのHTML) 4:16
1-3 HTMLの基礎構造(はじめてのHTML) 4:47
1-4 よく使われるタグ(はじめてのHTML) 5:24
2-1 見出し・段落(HTMLのテキスト) 5:10
2-2 強調・区切り線(HTMLのテキスト) 4:28
2-3 引用(HTMLのテキスト) 4:29
2-4 略語・名前の特記・住所表現(HTMLのテキスト) 4:30
2-5 コード、改行、プリフォーマット(HTMLのテキスト) 4:22
3-1 リスト項目(HTMLのリスト表記) 4:38
3-2 定義リスト(HTMLのリスト表記) 3:28
4-1 アンカータグ(HTMLのリンク) 5:42
4-2 相対パスと絶対パス(HTMLのリンク) 7:53
5-1 画像(HTMLのオブジェクト) 4:28
5-2 ファイルの読み込み(HTMLのオブジェクト) 7:47
5-3 iframe(HTMLのオブジェクト) 3:46
5-4 コメント(HTMLのオブジェクト) 4:05
6-1 行とセル(HTMLのテーブル) デザインに使わない暗黙のルール 6:37
6-2 テーブルのヘッダーとフッター(HTMLのテーブル) 4:34
7-1 テキスト入力(HTMLのフォーム) 5:30
7-2 ラジオボタンとチェックボックス(HTMLのフォーム) 6:41
7-3 ドロップダウンメニュー(HTMLのフォーム) 7:12
7-4 フォームのグルーピング(HTMLのフォーム) 6:39

1回やれば直ぐに分かる所もあれば、自分のスキルとして理解するレベルにするには
何度もやらなければいけない箇所が見つかりました。

真似は大事ですが、思考を停止しての真似は厳禁ですね。

どのように使うのかイメージしながらやる必要があります。

以下は私が知らなかった、不完全だった、これを機に覚えたいものを載せていきます。
100%自分自身に対するものです。

自分自身に対して教えてながら、説明しながら書いていきます。

思考を停止しちゃ駄目です。

Lorem ipsum(lipsum)/リプサム

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

意味の全くない文字の羅列としてLorem ipsumという文章を利用するらしい。
初めて知った。

こちらはWikipediaからの引用になります。

<blockquote cite=”https://ja.wikipedia.org/wiki/Lorem_ipsum/”></blockquote>
htmlのソースを表示させればどこから引用しているのか分かりますね。

引用のタグは下記の形になります。
<blockquote></blockquote>

ちなみにこうやってWordpress上でタグ自体を打ち込んでしまうと、
タグの機能が有効になってしまうのでタグの構文自体を
説明できなくなってしまいますね。

その場合は下記の様に打ち込んでタグ自体の機能をエスケープさせます。

ここの講座から外れてしまいましたが、
こうやって肉付けしながらプラス@していきます。

略語・名前の特記・住所表現

・略語の説明
TGIFという文字の所にカーソルを置いて少し待って下さい。

フィリピンでは金曜日になるとTGIFという単語をよく使います。

TGIFが何の略語か分かりましたね。

下記の構文になります。
<abbr title=”Thanks God.It’s Friday”>TGIF</abbr>

コード、改行、プリフォーマット

preタグを使えば他のタグを使わなくても、
入力した通りの状態で表示されます。

先にソースを見せます。

空白や改行、インデントなどのタグを入れていなくても下記の様に表示されます。
(下の様に青く囲まれているのは私の環境によるものみたいです)

    この様に
     入力したままの
      状態で表示される

定義リスト(HTMLのリスト表記)

・dtタグ
情報がセットになったリスト全体

・dtタグ
情報の項目名

・ddタグ
情報の内容

ここでは講座の説明を引用します。

こっちはdt
これはdd

構文
<dl>
<dt>こっちはdt</dt>
<dd>これはdd</dd>
</dl>

アンカータグ(HTMLのリンク)

Excelのハイパーリンクみたいな感じです。
id属性で設定した所に飛ぶタグです。

はじめてのHTML入門講座リストに飛ぶリンクを作成します。

はじめてのHTML入門講座リストへJump!

書き方はこうなります。

・飛ばし先に下記のタグを書きます
<a id=”html_list”></a>

・飛ばすためのリンクはこう書きます。
<a href=”#html_list”>はじめてのHTML入門講座リストへJump!</a>

半分終わったので次回に続きます。

特にChapter7のラジオボタンやドロップダウンメニューなどは、
しっかり整理しなくてはいけない所ですね。


スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク