職業訓練日記 -HTMLとは-

こんにちは！ゆきまさです！！（@yyykms）

とうとうHTML/CSSの授業が始まりました！！

今後は授業でやった内容を自分の復習がてらまとめていきたいと思います！

Webの仕組み

静的なページの表示

クライアントはIEやGoogleChromeなどのブラウザを指します。

サーバーはクライアントからのリクエストによってhtmlファイルなどを渡します。受け取ったファイルなどをクライアントが処理をしてサイトを表示させる仕組みです。

サーバーについてのわかりやすい記事がるので詳しくはこちらをみた方がいいでしょう。

Webページを製作するには

1. テキストエディタ

まずページの内容を書くために必要なのがテキストエディタで、これでHTMLやCSSを記述していきます。

2. サーバー

1のテキストエディタでデータを作ったので、これを公開するにはサーバーを用意する必要がある。

3.ドメイン

サーバーを借りるだけではなくドメインの取得も必要となる。

4. FTPソフト

File Transfer Protocol（ファイル・トランスファー・プロトコル）の略で、簡単にいうとファイル転送ソフトです。

自分で作ったデータをパソコンからサーバーにアップロードするのに必要になります。

5. ブラウザ

アップロードされたらそのURLを入力してブラウザで見ることができます。

この辺りの流れはこの記事がわかりやすいです！

Webサイトの仕組みは？Webページの作成〜公開までの流れ

HTMLの基本

とうとう突入したHTMLです。意外と忘れちゃってるところとかがあるかも！？

HTMLとは？

「印をつけてすごいテキストにする言語」

直訳するとこんなですが、簡単にいうとWebページを作成するためのMarkup（マークアップ）言語であり文章の構造を定義する言語です。

例えば

この文章を見てどの部分が見出しなのか、段落なのかを即座に判断して読むことができるが、コンピューターは判断することができません。

そのため以下のような記述をすることによってコンピューターにも見出しや段落を理解させることができます。

HTMLタグの記述方法

HTMLタグを記述するときのルール

• 半角文字で入力する
• 小文字で記述する

開始タグと終了タグで囲んで要素を作る

<要素名>見出し</要素名>

記述例▼

<h1>見出し</h1>

HTMLは「<（小なりカッコ）」と「>（大なりカッコ）」で要素を囲んで作ります。終了タグには「/」をつけます。

開始タグと終了タグに囲まれたかたまりを要素と呼ぶ。

しかし<br>や<img>タグなどのように終了タグがない場合もある。

HTMLタグに属性を追加する

<要素名 属性名="属性値">タイトル</要素名>

記述例▼

<h1 class="title">タイトル</h1>

要素に詳しい情報を追加するときに仕様するのが属性で、開始タグに「属性名 = “属性値”」の形式で記述する。

style 属性はデザイン定義を行う属性で他にも種類がある。

この場合は要素の文字の色が赤になります。

終わりに

ほんとはサーバーとかネットワークのことをもっと知りたかったけど、短期間だからか割とトントン拍子で進んでしまいます。

今日授業うけて感じたことは個人的に勉強進めていかないと置いていかれますね笑

次からは見出しとか段落とかのタグを勉強していきます。