PR/BLOG

広報・ブログ

はじめてのWebサイト!~第1回目~

2020年より新しく技術開発推進部に仲間入りした女性社員3人が、ゆりちゃんに代わって情報処理技術についてはじめての方にも分かりやすく説明します。

えりちゃん
寝るときは横向きタイプ

ゆいちゃん
消しゴム・メモ帳マニア

ともちゃん
苦手なもの ハイネック

リーダー橋本氏
今回の講師

はじめに

リーダー橋本氏

今回からは、「はじめてのWebサイト」をテーマに、3回に分けて学んでいくよ!
・第1回目 「HTMLとDNSサーバーを学んでWebページを作成しよう!」
・第2回目 「CSSとJavaScriptを学んで、Webページをレイアウト・デザインしてみよう!」
・第3回目 「PHPとWebサーバーを学んで、Webサイトを完成させよう!」

ともちゃん

最後にWebサイトが完成するの、とても楽しみです♪
今回は第1回目の「HTMLとDNSサーバーを学んでWebページを作成しよう!」ですね!

えりちゃん

Webサイトは、これから学ぶWebページの集合体で複数のWebページ同士が連携して情報を発信しているんですよね!

ゆいちゃん

Webページのデータは、「HTMLファイル」と「HTMLファイル」に関連づけられた、
「CSSファイル」「画像ファイル」で構成されていますね。

リーダー橋本氏

そうだね!まず最初に「HTML」について学んでいこうね!

「HTML」について

HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)。
「印(マーク)を付ける」ための言語。
HTMLタグと呼ばれる予約語をテキストファイルの中に埋め込むことで、文書全体を構造化された情報として発信することが可能。
アンカーというタグを使うと、他のWebページへのリンクを設定することができWebページ同士を関連付けできるのが大きな特徴。

えりちゃん

普段見ているページは、こんな風に書かれているんですね!

リーダー橋本氏

次に、Webページが表示されるまでの仕組みについて学んでいくよ!

「Webページ」の仕組み

Webサーバーは基本的には要求されたファイルを渡すのみ。
データの整形などはWebブラウザにて実行される。

ともちゃん

Webブラウザは、URLを受け取ってから画面に表示するまで一瞬で複数の処理を行っているんですね。

リーダー橋本氏

次に、「DNSサーバー」についてもう少し詳しく学んでいくよ。

「DNSサーバー」について

Domain Name System(ドメイン・ネーム・システム)。
ドメインを運用・管理する役割。
コンピュータの住所である「IPアドレス」を、人が理解しやすい文字列へと変換するための情報を保持し仕組みを提供する。

ゆいちゃん

1枚のWebページを表示するために、普段意識しないところで複雑な処理が行われていたんですね。

リーダー橋本氏

そうだね!
実際には問い合わせを受けた「キャッシュDNSサーバー」が過去に問い合わせがあったドメイン名とIPアドレスの組み合わせを、
一定時間保存(キャッシュ)しているから、毎回このような処理が実行されるわけではないんだよ。

おわりに

えりちゃん

「今回学んだHTMLの代表的なタグ以外にも理解を深めていきたいと思います!

ともちゃん

そうですね!
パンの味がいまいちだったので、Webサイトが出来上がるまでにパン作りの腕前もあげておかなきゃですね!

ゆいちゃん

今回作成したHTMLファイルを表示するとこんな感じなんですね!

リーダー橋本氏

どんどんコーディングして理解を深めていこうね!
次回は、今回HTMLで作成したページのレイアウトやデザインについて学んでいくよ!

  • 当ページの人物画像はNIGAOE MAKERで作成しました。
一覧に戻る
ゆりちゃん

技術開発推進部ゆりちゃんからのお願い顔マークを押して、技術ブログの
感想をお聞かせください^^