ウェブデザインA 第05回

前回は「内側・外側」「親要素・子要素」「囲う」という言葉の意味と、コーディングの省略記法であるEmmetの解説を行いました。
概念は最初の段階で覚えておいてほしいのですが、Emmetに関しては使いながら覚えていきます。
今回はCodePenから一旦離れ、Visual Studio Codeを使ってコーディングを行いましょう。

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

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

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

こちらは以下で課題提出を行います。

課題の提出

まずは提出条件です。

「index.html」ファイルの「titleタグ」で記述を行った「ウェブデザインA」を「自分の氏名 ウェブデザインA」と書き換える。

では「html文書ファイル基本構成」のコーディングを行ったindex.htmlが入った「html」フォルダのデータをまるごとzip形式で圧縮してください。

「html文書ファイルの基本的な構成」フォルダをzip形式で圧縮

まず、「html文書ファイルの基本的な構成」フォルダ圧縮の手順は以下。

1. 「html文書ファイルの基本的な構成」フォルダを右クリックして、
   「送る → 圧縮(zip形式フォルダー)」の順にクリックしてzipファイルを作る。
2. 圧縮したzipファイルのファイル名を次の③に変更する。(コピーペースト推奨)
3. html文書ファイル基本構成

以上です。

zip圧縮したファイルをフォームから送信

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

演習03 html文書ファイル基本構成課題提出フォーム

なお提出期限は、1週間後の授業開始前までとします。