0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

HTMLについて調べてみた

Posted at

背景・目的

 こんにちは.プログラミング初心者です.現在私は大学生で,インターンシップ型アルバイトに参加させていただいており,その中でAngulrを用いたアプリケーション開発をすることとなり,急遽HTML/CSS, JS, Angulrの勉強をすることになりました.
 社会に出たら今までやってきたこととは違うことなんていくらでも挑戦するよなということで,さっさと切り替えて勉強していきましょう.
 とりあえず今回の目的は,HTMLの軽い実装と基本的(ド偏見)なことを図書館で借りてきなtextを中心に分からないことなどを適宜,web情報で学んでいくものとします.

使用環境

Windows11
VScode
※VS環境は昔html/cssは触ったことがあり,構築済みだったのでここでは省略します

参考文献

https://x.gd/7CFdo

学んだ内容

HTML

  • 基本文法
  • タグ
  • テーブル
  • 入力ボックス

HTML

基本文法

 基本的にはタグという,日本語の会話文でいうところの括弧(「」)の様なものを挟むことにより,コードは構築されている.さらにタグの中に,属性,値と呼ばれる要素があり,基本的には入れ子構造である.
イメージとしては重箱です.タグについては後程記述しますが,タグで構成された重箱,その中に一段目は

タグ,二段目にタグなど大まかに構成され,各階層にはそれぞれまた複数のタグで構成されている.イメージとしてはおかず(タグ同士)が混ざりあわないように仕切りの役割を兼ねているという意解釈です.属性はいわば,おかずの特徴を示すタグで,形容詞的なイメージで,値はおかずの備考となる情報.食材の原産地を=で結ぶ感じです.分かりにくいですが,以下みたいなイメージでいいと思います.
image.png

タグ

  • 見出しタグ
<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>

image.png

入力ボックス

これはメタ要素タグと同じで終了タグがないタイプ

<input type="text">

これで土台は完成.ここからtypeの値を変えていったり,属性を足すことで変更できるみたい.

結論

改めて,今までやってきた言語と毛色が違う.初心者はこの言語から始めるのはやめとけって言われるのにも納得が出来る.
とりあえずタグの概念と,属性,値の考え方さえ掴んどけば,何とかなりそうな言語だと感じた.

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?