見出し画像
Photo by voice_watanabe

36歳建設業がプログラミングを始めてみる　2. HTML vol.1

ヘルメットAtsuBo



2-1 HTMLとは何か？

一旦インターネットのことは学んでみたので、さっそくそのプログラムの中を見ていく。

まずそもそもHTMLとはなにか？
HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つで、プログラミング言語ではない。主にWorld Wide Web（WWW）において、ウェブページを表現するために用いられる。

えーHTMLってよく聞くが、そもそもプログラミング言語じゃないんかい！
プログラミング言語の定義ってなんでしょう？

マークアップ言語　：HTMLのようにタグを使って、文字情報をクラス名などでマークする言語のこと
プログラミング言語：プログラム上で動作処理が行われる言語のこと

( ,,`･ω･´)ﾝﾝﾝ？何やら難しいが、とりあえず文字情報はマークアップ言語で、仕組みを作ったり、裏側で動いてもらう際に使う言語がプログラミング言語というばっくりした理解で良さそうだ。


2-2 HTMLの学び方

どうやって勉強しようか、、と言った場合に、今オンラインスクールに通うなどあるが出来る限りお金をかけたくない。

「お金をかけてせっかく買ったから、、、」と頑張れるタイプではない人間と知っているからだ。別に潤沢にお金があるわけでもない。となると、無駄遣いになるので安くて良い。

調べてすぐ出てくる簡易の「Progate」を行い、まずは手を動かしながら基礎を勉強することにする。合わせてCSSも学べるようだ。

2-3 プログラミングの前提ルール

まず英語が出来ない自分にとってはここからがハードルなわけさ。
プログラミング書くぞー！と言っても？？？なわけですよ。

まず前提を理解する必要がある。
なんでもそうだが日本語と一緒で主語、目的語、動詞などルールがあり、それを使っているはずである。

  1. 基本は半角英数字
    これ重要である。一太郎から始まった私はまず全角にする癖がついているので

  2. 〈〉やまかっこ＝タグ　で囲う必要があるらしい
    <a>～</a> のように 開始タグ(start tag) と 終了タグ(end tag)と呼び 表示したいものを囲んだりするらしい。終了タグは　/ スラッシュ　が必須

  3. HTMLの要素
    html要素の中に head要素と body要素があり、head要素の中には title要素が、body要素の中には h1要素と p要素があり…わからん分からん(笑)

<html>　
　<head>　
　　<title>～</title>
　</head>
　<body>
　　<h1>～</h1>
　　<p>～<span>～</span>～<strong>～</strong>～</p>
　</body>
</html>

色々読んでわかったのは、結局グループ分けされていてそれぞれ要素を持っているらしい。家で例えるとこうだ

<家>　
　<土台>　
　　<基礎>
　　　<ベタ基礎>～</ベタ基礎>
　　</基礎>
　<躯体>
　　　<柱>～</柱>
　　　<梁>～</梁>
　</躯体>
　<屋根>　　
　　<金属屋根>～</金属屋根>
　</屋根>
</家>

んーなんか違う、、ｗ

<家>　
　<LDK>　
　　<キッチン>
　　　<IHコンロ>～</IHコンロ>
　　</キッチン>
　　<リビング>
　　　<ソファ>～</ソファ>
　　</リビング>
　</LDK>
　<トイレ>
　　<ウォシュレット>～</ウォシュレット>
　</トイレ>
  <浴室>
　　<ユニットバス>～</ユニットバス>
  </浴室>
</家>

んー、、、ひらめいたと思って書いてみたが、違う気がして仕方ない、、、まぁイメージは湧いたということにしよう(笑)

また、開始タグと終了タグの関係を間違えないように、HTMLを記述する際にインデント(行の先頭のスペース)をつけることをするようだ。スペースを空けることでわかりやすく、ゾーニング（グループ分け）してあげるということみたいだ。

2-4 div,span,p,a…

一応ググったものを掲載しておく。。。

・div = division（段とか仕切りの意味）
・特徴：前後に改行が入ります。
・divは空白行が入るがpは入らない。
・ブロックレベル要素としてグループ化を行いますので、見出しや段落、リストなどとしてみなされ前後に改行が入ります。
・pブロックタグは「一つのかたまりとして認識される要素」です。対して、インライン要素は「文章の一部として扱われる要素」です。
・divタグは「division（仕切り）」の「div」なので、ページ内にブロックを作りたい時に使用。

・<span>は、「しばらくの間」の意味の「span」なのでしばらくの間文章あるいは何か要素を装飾したい時に使用。
・インライン要素です。
・div要素とは似た役割を持っていますが、違いとしては改行が入らないことです。
・改行はさせたくないけど、文書の途中で一部だけスタイルを変更したい場合とかに使えます。
・div要素やp要素の中にspan要素を使ったりする事が多い。
・spanタグはdivタグの懐に入り込めるけど、divタグはspanタグの中に入り込めない。
・単体では特に意味を持たないタグですが、<span>～</span>で囲った部分をインライン要素としてグループ化することができるタグです。
・グループ化することで、指定した範囲にスタイルシートを適用したりすることができます。
・インライン要素で文章の一部として利用されますので前後に改行は入りません。
・文字を装飾したい時によく使われるタグです。
・spanタグはdivタグの懐に入り込めるけど、divタグはspanタグの中に入り込めない。

・p = paragraph
・特徴：pを使うと、改行 & 1行空白が入る。
・「p」は、一つの段落であることを表す際に使用する要素。
・<p>～</p>で囲まれたテキストは1つの段落であることを示します。
・p要素同士の間隔を調整するにはCSSのmarginプロパティを使用。

・「a」とは、「Anchor（アンカー）」の略で、リンクの出発点や到達点を指定するタグです。
・リンクの出発点を示す場合は、href属性でリンク先を指定し、到達点を示す場合はname属性やid属性を使用し、その場所の名前（識別子）を指定します。

一応文字では呼んだが、絶対に覚えられない。結局どう使われるかイメージが無いからだ。結局ここら辺は暗記するのではなくて、実際に手を動かして覚えることにする。

▲まずは初級編クリア　CSSも含んでいるので難しい💦

まとめると

「HTML」とは、文字を記入するだけのマークアップ言語であり、呪文の様に見えるものは、タグというグループを駆使して作っていくという結構地道な作業である。

家づくりと一緒でいろんな要素があって多重階層になっているだけで一つ一つはタグで囲んだ要素ということであるようだ。

つづく

この記事が気に入ったらサポートをしてみませんか？