職業訓練日記 -HTMLとは-

HTML/CSS

こんにちは!ゆきまさです!!(@yyykms

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

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

Webの仕組み

静的なページの表示


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

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

復習ポイント
正直サーバーに対しての認識が甘かったが今回の授業で割と理解した。
身近なサーバーで例えるとビールサーバーとかはそれらにビールなどを格納しておく。それと同じようにwebサーバーはサイトを表示するためのデータを格納しメールサーバーはメールを格納している

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

Webページを製作するには

1. テキストエディタ

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

2. サーバー

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

3.ドメイン

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

4. FTPソフト

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

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

5. ブラウザ

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

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

HTMLの基本

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

HTMLとは?

HyperText Markup Language

HyperText : すごいテキスト
Markup : 印をつける
Language : 言語

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

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

例えば

HTMLの復習

HTMLとは?

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、ハイパーテキストを記述するためのマークアップ言語の1つである。

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

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

<h1>HTMLの復習</h1>
<h2>HTMLとは?</h2>
<p>HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、ハイパーテキストを記述するためのマークアップ言語の1つである。</p>

HTMLタグの記述方法

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

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

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

 要素名 意味づけの対象 /要素名

記述例▼

h1 HTMLの復習 /h1

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

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

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

HTMLタグに属性を追加する

 要素名 属性名="属性値" … /要素名

記述例▼

 h1 style="color:red;" … /h1

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

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

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

終わりに

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

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

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