プログラミング

プログラミングについて「学ぶ」② ~HTMLタグとimgタグについて~

自己紹介

41歳公務員 係長hiroです。

現在、日々公務員ワークをしていますが・・・

・上司および部下との人間関係に疲れ
・係長になっても給料上がらず、責任は増え
・退職年齢が60→65歳に伸びることが予想され

こんなつまらない仕事を65歳まで続けたくありません!

公務員を辞めるためのスキル取得として「2021年3月までにプログラミングで月3万円副業で稼ぐ」を目標にしていますが、このブログでは、学習した事をノート代わりにアウトプットして公務員を辞めるまでの道のりを実体験記としてつづるブログです。

 

 

本日から具体的に「ドットインストール」で学んだ内容を、ブログでアウトプットしていきたいと思います。

ドットインストールは、HTMLやCSSのマークアップ言語を始め、JavaScriptやPHP、Pythonなど主要なプログラミング言語を学べるインターネット教材です。

1授業2分前後に細分化しコードの意味など分りやすく解説しております。一部無料で閲覧することが可能ですが、詳しく学ぶためにはプレミアム会員になる必要があります。

 


※ドットインストールのトップページ画像です。

 

 

HTMLタグについて

HTMLを学ぶ際にまずは「タグ」について知る必要があります。

上記は「google Chrome」のトップページのソースを表示したものですが、見て分るとおり文字列は<>(タグ)で囲まれています。

HTMLタグは、「見出し」や「説明文」、「リンクを貼る」など全ての文字列にタグが使われます。

上記図のとおり、開始タグと終了タグでコンテンツを囲って要素を作る事を「マークアップ(言語)」といいます。h1は「見出しの大きさ」を表します。

上記の言語の意味は、h1の大きさの見出しは「公務員を辞める」になります。

この言語を組み合わせて使っていくことによりWEB等の構造を作っていくことになります。

 

 

imgタグについて

imgタグは画像を配置する時に使用しますが、imgタグの場合、囲うべきコンテンツが無いので、終了タグは必要ありません。開始タグ内に属性を入れていきます。

srcはsource(ソース)の略で、情報源という意味です。

文書内に埋め込む画像のURLを指定します。

上記の言語の意味は「画像はimgフォルダにあるkoumuin画像データを文書内に埋め込みます」になります。

フォルダの区切りは「/」をつける必要があります。

属性の値は””(ダブルクォーテーション)で囲うのが一般的です。

 

 

画像の大きさの指定(widthとheight)

width(ワイズ)横の幅を指定します。数値のみ入れた場合はピクセル設定になります。

height(ハイト)縦の幅を指定します。須知のみ入れた場合はピクセル設定になります。

 

 

まとめ

本日は以上になります。

HTMLタグとimgタグは基本となる部分なので時間を掛けて勉強しました。

やはりアウトプットしながらの学習は、より知識の理解度が高い感じがします。

今後慣れていくにつれて、学習スピードも上がってくるものと思われますので、徐々に上げていけたらと思っております。

 

%d人のブロガーが「いいね」をつけました。