LogoMark.png

Webデザイン/2020/0602

第5回 HTML入門 その1

Webデザイン/2020造形短期大学部|2020.06.02

第5回目の展開と要件


以下、順に説明しますので、お読み下さい。



本日のメニュー


はじめに

1. Webサイトフォルダについて

folder.jpg

受講生のみなさんは、第3回の演習で、すでにお手元にひとつのフォルダが存在し、第4回の演習で、それと同じものを GitHub 上のリポジトリにもアップロードしている・・と思います。


注)フォルダ名、ファイル名は必ず半角英数で
images page01.html page-01.html page_01.html logoMark.jpg など、
Webサイトを構成するフォルダやファイルの名称は、すべて英字ではじまる半角英数で命名します。日本語や特殊記号、またスペースも不可です。




2. HTML

2.1. HTMLとは

HTML(HyperText Markup Language)とは、ページの内容を記述するためのマークアップ言語です。文章や画像はもちろん、リスト表記や表組み、他のドキュメントへのハイパーリンクも設定できます。
 HTMLファイルは、ごく普通のテキストファイル(文字が並んだだけのもの)なので、テキストエディタ(メモ帳のようなもの)で書いて、保存するだけで完成します。

2.2. HTMLのソースコード

今、みなさんのお手元にある index.html というファイルをテキストエディタで開くと、以下のようなコードが見えるはずです。これを HTML のソースコードと言います。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Sample Site</title>
</head>

<body>

  <div id="container">

    <header>
      <h1>Sample Page</h1>
    </header>
 
    <nav>
      <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="gallery.html">gallery</a></li>
        <li><a href="links.html">links</a></li>
      </ul>
    </nav>

    <main>

      <section>
        <article>
          article 01
        </article>
        <article>
          article 02
        </article>
      </section>

      <aside>
        aside
      </aside>

    </main>

    <footer>
       &copy; http://www.example.com
    </footer>

  </div>

</body>
</html>


2.3. HTMLをブラウザで表示するには

このHTMLのソースコードは、ブラウザというWeb閲覧ソフトによって画面上に描き出されます。index.html の表示を確かめるには、ブラウザのウインドウに、当該ファイルをドラッグ&ドロップしてみて下さい。

第3回の授業では、見出しや文章を適当に書き変えて「保存」。その後、ブラウザの「更新」を行うと、変更が反映されることを確認していただきました。

2.4. きれいなソースコードを書くために

3. HTMLタグ 概観

はじめに、HTMLの全体像を概観していただきます(この節は読むだけです)。

3.1. HTMLタグとは

以下、よく使うHTMLタグを列挙します。


3.2. その他のHTMLタグ

よく使う HTML タグを以下にまとめています。どのタグがどんな機能を持つかについて、一通りご覧下さい。(読むだけでOK。覚える必要はありません)。




4. 基本要素

では HTML タグの基本機能を確認していきましょう(この節は読むだけです)。

第1回の授業で、MediaWiki の執筆の基礎として体験していただいた、見出し・本文・箇条書きの使い方、そして第2回の最初に体験していただいた 内部リンク、外部リンクについて、HTMLでのコーディングを確認します。

これらを正しく、使って記事情報を構成することができれば、Webページに必要な情報の7割は掲載できると思ってください。

4.1. H*|見出し

h1 ~ h6 の6種類の大きさで、見出し文字として強調表示されます。
h : Heading

<h1>大見出し</h1>

一般的には、このタグで囲まれた文字は本文より大きな太字で、
上下に1行分のスペースがとられます。

4.2. P|本文段落

4.3. UL/LI|リスト


4.4. A|リンクの設定

5. 演習

はじめに

/*
* {
   margin: 0;
   padding: 0;
   list-style: none;
   text-decoration: none;
}
*/


以下、本日のタグの機能を試すための3つの演習です。


5.1. 演習1|見出しと本文段落


5.2. 演習2|箇条書き

5.3. 演習3|リンク

6. 本日の成果をGitHub にアップロード


第5回目は、以上をもって終了とします。お疲れ様でした。



APPENDIX

第6回は、HTML入門その2です。MediaWikiで体験した順番どおり、動画の掲載と画像の掲載、その他について体験していただきます。



PAGES

GUIDE

DATA

Last-modified: 2020-06-02 (火) 10:49:17