背景・目的
こんにちは.プログラミング初心者です.現在私は大学生で,インターンシップ型アルバイトに参加させていただいており,その中でAngulrを用いたアプリケーション開発をすることとなり,急遽HTML/CSS, JS, Angulrの勉強をすることになりました.
社会に出たら今までやってきたこととは違うことなんていくらでも挑戦するよなということで,さっさと切り替えて勉強していきましょう.
とりあえず今回の目的は,HTMLの軽い実装と基本的(ド偏見)なことを図書館で借りてきなtextを中心に分からないことなどを適宜,web情報で学んでいくものとします.
使用環境
Windows11
VScode
※VS環境は昔html/cssは触ったことがあり,構築済みだったのでここでは省略します
参考文献
学んだ内容
HTML
- 基本文法
- タグ
- テーブル
- 入力ボックス
HTML
基本文法
基本的にはタグという,日本語の会話文でいうところの括弧(「」)の様なものを挟むことにより,コードは構築されている.さらにタグの中に,属性,値と呼ばれる要素があり,基本的には入れ子構造である.
イメージとしては重箱です.タグについては後程記述しますが,タグで構成された重箱,その中に一段目は
タグ
- 見出しタグ
<h1> ここに記述 </h1>
これは見出しタグで,numberには1~6まで入る
- メタ要素タグ
<meta>
これはメタ要素を記述するタグで,終了タグは無い.
このタグの目的は,ブラウザなどに伝える情報を記述する際に用いる.具体的な例を出すと,文字コードや検索画面で表示される文章や検索の際に対象となる為の単語などを既述する
- 段落タグ
<p></p>
段落をひとまとまりにして表示するコード
- 画像タグ
<img src="カレントディレクトからの相対パス",alt="画像表示できない場合の例外時の出力">
上のコードは画像を出力するためのコードで,srcの値に画像のパスを記述する.なおaltの例外処理を忘れないように注意.画像の処理がダメなのか,webのビルド自体が上手くいかなかったのかわからなくなった.
なお,終了タグは無いので注意
- listタグ
<lo>
<li>番号付きlist</li>
</lo>
<ul>
<li>箇条書きlist</li>
</ul>
テーブル
テーブルのイメージは下記のとおりです.灰色の部分は非表示で,<tr>は行を表します.第一行には
が来て各列の見出しとなるセルをあらわす.<td>は表データを表す.<table border="1">
<tr>
<th>列名1</th><th>列名2</th><th>列名3</th>
</tr>
<tr>
<td>1<td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
入力ボックス
これはメタ要素タグと同じで終了タグがないタイプ
<input type="text">
これで土台は完成.ここからtypeの値を変えていったり,属性を足すことで変更できるみたい.
結論
改めて,今までやってきた言語と毛色が違う.初心者はこの言語から始めるのはやめとけって言われるのにも納得が出来る.
とりあえずタグの概念と,属性,値の考え方さえ掴んどけば,何とかなりそうな言語だと感じた.