ウェブデザインA 第04回

ウェブデザインA 第04回

2024年10月25日 /最終更新:2024年10月25日

フォルダやファイルの準備を行いましょう。そしてまずは必須内容のコーディングを行ってHTMLファイルの基本形を作ります。

ウェブデザインA 第04回

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

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

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

といった内容でしたね。

今回は実際にhtmlコーディングに入っていきます。
これを記述しておかないと正常に表示がされないという必須の内容を、
記述を行ないながら学んでいきましょう。

コーディングの基礎 「内側・外側」「囲う」という言葉の意味

前回同様に重要なポイントからお話しましょう。
絶対に念頭に置いてほしい最低限の概念として「内側・外側」「囲う」の意味を理解してください。

[コーディングの基礎] コーディングの概念

フォルダ・ファイルの準備

次にコーディングに進むため、各フォルダや「htmlファイル」「cssファイル」などの準備を行いましょう。

なお、この作成するフォルダ・ファイルのデータは本講義の最後まで毎回使いますので、
管理しやすくデータが消えないUSBメモリなどにフォルダとファイルを作るようにして、
講義の度に持参してください。

では下記の記事をCtrl + クリックください。

[コーディングの基礎] フォルダ・ファイルの準備

繰り返しますが、次回以降も忘れないように持参してください。
このデータがないと授業が進められません

コーディングの基礎 htmlファイルの基本的な構成

htmlファイルには必ず記述しなければいけない4つのブロックがあります。記述しながら解説します。

[コーディングの基礎] htmlファイルの基本的な構成

課題の提出

今回は課題提出として、この講義でコーディングを行ったデータの提出を行います。
「html」フォルダのデータを提出しましょう。

提出用に「html」フォルダをまるごとzip形式で圧縮してください。

「html」フォルダをzip形式で圧縮

まず、「html」フォルダ圧縮の手順は以下。

  1. 「html」フォルダを右クリックして、「送る」→「圧縮(zip形式フォルダー)」を選択してzipファイルを作る。
  2. 圧縮したzipファイルのファイル名を「あなたの学籍番号_html01.zip」に変更する。

以上です。
なお、こちらのフォームに提出できるのは「zip形式で圧縮したファイルのみ」です。zip形式ではないファイルだと送信の際にエラーが出て送信ができませんので、必ず「html」フォルダをまるごと圧縮してzip形式で提出してください。

またファイル名を変更せず提出扱いになりません。(これ、かなり多いです。)
特に日本語のファイル名は提出時に文字化けしてしまうため、必ずファイル名を「あなたの学籍番号_html01.zip」に変更しましょう。

ウェブデザインA 第04回htmlファイル課題提出フォーム

課題の提出ができたら今回の講義は終了です。