ウェブデザインA 第03回

まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。

前回の講義内容覚えてますか??

• ウェブサイトが表示される仕組みは、
  PCやスマートフォンを使って検索やクリックなどの方法でウェブサーバーにリクエストを送り、
  ウェブサーバーが応答して表示されるというもの。
• htmlファイルの役割は他の言語の受け皿で最終的な表示用ファイル。
  cssファイルの役割はhtmlへデザインを反映させること。
  JavaScriptファイルの役割は表示状態などの変更をリアルタイムで処理すること。

といった内容でした。またpaizaラーニングでは基本部分のhtmlコーディングを行いましたね。
今回は実際にhtml・cssコーディングに入る前に、htmlタグの役割の解説とコーディング前の下準備を行います。

前回の復習(paizaラーニング)

おそらくほとんどの人がhtml・cssコーディングに触れるのが初めてであるため、
前回の内容を理解できていない人がたくさんいるはずです。
そこでまずはpaizaラーニングの前回の演習課題の復習を行いましょう。

早速paizaラーニングへのログインを行ってください。
ログインできたらページのタブを閉じましょう。

paizaラーニングログイン

今回は前回行った以下の演習課題の復習を行いたいと思います。
ひとまず最初の演習課題のページを開きましょう。

• 演習課題「Hello paiza ラーニングと表示」
• 演習課題「日本語で表示」
• 演習課題「間違い探し その1」
• 演習課題「間違い探し その2」
• 演習課題「間違い探し その3」

コーディングの基礎 htmlタグについて

htmlファイルを構成しているのは「htmlタグ」ですが、なぜhtmlタグを使う必要があるのか、
使用頻度の高いhtmlタグにはどういったものがあるのかを解説していきます。
下記の記事を別タブで開いてCtrl + クリックください。

[コーディングの基礎] htmlタグについて

テキストエディタ

以後の講義、および後述する手順の中で「テキストエディタ」、もしくは「エディタ」という呼び方をするものについて説明しておきます。
下記の記事を別タブで開いてCtrl + クリックください。

テキストエディタとは

本日のまとめ

• ネット上のWebサイトの情報を集める仕事は、各検索エンジンのクローラーと呼ばれる検索ロボットが行っている、
• 人間が見るWebサイトと、クローラーが見るWebサイトは違い、クローラーは文字情報だけを見ている。
• htmlタグを使うのは、クローラーにページの構成や内容を判別させるため。
• クローラーが収集してきた情報をもとに、検索エンジンが表示順を決定する。
• 表示順を少しでも上に持っていくために行うのがSEOと呼ばれる手法。
• htmlタグには開始タグと終了タグがあり、文字を囲うことで使用する。
  またimgタグなど、中には閉じタグが存在しないhtmlタグもある。
• divタグは箱のようなもので、いろいろな要素を入れることができる。
• hタグは見出しで、数字が少ないほど重要な見出しになる。
• pタグは段落で、最も使用頻度の高いhtmlタグ。
• imgタグはページに画像を読み込むhtmlタグで、終了タグが必要ない。