第４回 HTML入門 その１
Webデザイン基礎B/2020｜造形短期大学部｜2020.10.05｜遠隔
情報共有シート｜特設サイト
AGENDA
- 以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。
情報共有シート - 今回から、HTMLの文法について学びます。
- 最後に GitHubへのアップロードを求ています。
以下、LIVE動画をご覧下さい。記事に沿って解説しています。
記録動画の公開は７日（水）までとします。早めの確認をお願いします。
本日のメニュー
はじめに
特設サイトの編集について
- 特設サイトは「ログイン」しないと編集できません。
- ログイン用のID, PW は初回授業でお伝えしましたが、念のため、連絡通知でも送っています。ご確認の上、忘れないようメモして下さい。
- 編集方法について再度説明します。
特設サイト ブックマークしておいて下さい。
GitHub アカウントについて
- 自力でのアカウント取得が難しいと思われる方は、個別に対応しますので、本日のこの説明の後、または、来週の同時間帯に、17号館６Fの研究室をお尋ね下さい。ゼミ室のPCを使いますが、ノートPCをお持ちの方は持参が望ましいです。
- 今回の授業内容については、GitHubのアカウントは必須ではありませんので、ご安心下さい。
今後の展開
- 中間発表の第10回と最終発表の第14回のみを対面とし、今回以降の大半を当初の予定どおり遠隔で行います。
- 実習室はそのまま利用できますので、前後の授業との関係や、自宅の環境がない場合などは、実習室で説明を視聴・演習を行なって下さい。
- 今回から２回、第４・５回で、HTMLの書き方について学びます。
- CSS については、第６・７回で説明しますので、お手元のフォルダの中にある、style.css は、そのままフォルダ内に置いたままでお願いします。
1. Webサイトフォルダについて
- 一般にWebサイトは複数のファイルから構成されます。web制作では、はじめにWebサイト用のフォルダを作り、関連するファイルを、すべてそのフォルダで管理するようにします。
- 1ページ = 1ファイル（〜.html）が基本です。
- 写真やイラストなどの画像は imagesフォルダで管理します。
受講生のみなさんは、第２回の演習で、すでにお手元にひとつのフォルダが存在し、第３回の演習で、それと同じものを 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>
© http://www.example.com
</footer>
</div>
</body>
</html>
2.3. HTMLをブラウザで表示するには
このHTMLのソースコードは、ブラウザというWeb閲覧ソフトによって画面上に描き出されます。index.html の表示を確かめるには、ブラウザのウインドウに、当該ファイルをドラッグ＆ドロップしてみて下さい。
- アドレスバーに表示されるURLの違い
- 通常のWeb接続の場合： http：// www.example.com/index.html
- ファイルを直接表示した場合： file：//・・・・ /index.html
第３回の授業では、見出しや文章を適当に書き変えて「保存」。その後、ブラウザの「更新」を行うと、変更が反映されることを確認していただきました。
2.4. きれいなソースコードを書くために
- TAB, 半角スペースでインデントをとってHTMLを見やすくしましょう。
- TAB, 半角スペースは表示上は無視されます。
- 要素間の「余白」は CSS でコントロールするのが一般的です。
全角スペースを利用した余白や、<br>タグによる連続強制改行は様々なトラブルのもとになるので、避けましょう。
3. HTMLタグ 概観
はじめに、HTMLの全体像を概観していただきます。
3.1. HTMLタグとは
- HTMLは、情報要素を以下のようなタグでくくる形で記述します。
<◯◯> 〜 </◯◯> ← 前者を開始タグ、後者を終了タグといいます。
- HTMLタグは頻繁に使うもので 20 〜 30 程度です。書式を丸暗記する必要はありません。必要に応じてコピペすればいいので、どのタグがどんな役割であるかを経験的に知っていくようにして下さい。
以下、よく使うHTMLタグを列挙します。
- HTML文書の基本構成
- 文書の全体：<html> 〜 </html>
- ページに関する前置き情報：<head> 〜 </head>
- ブラウザの主画面に表示される情報：<body> 〜 </body>
- セクション
- 汎用区画：div, section, article, aside,
- ヘッダー：header
- ナビ（メニュー）：nav
- メイン：main
- フッター：footer
- 見出し：h1, h2, ・・, h6
- 文章段落：p
- 強制改行：br ← 段落内での改行に使用します。
- リンク：a
- 内部リンク（サイト内にある別のhtmlファイルへのリンク）
<a href="gallery.html">（リンク文字、画像）</a>
- 外部リンク（外部サイトへのリンク）
<a href="http://www.abc.com">（リンク文字、画像）</a>
- 内部リンク（サイト内にある別のhtmlファイルへのリンク）
- 箇条書き： <ul>と<li>
<ul> <li><a href="index.html">home</a></li> <li><a href="gallery.html">gallery</a></li> <li><a href="links.html">links</a></li> <li><a href="about.html">about</a></li> </ul>
3.2. その他のHTMLタグ
よく使う HTML タグを以下にまとめています。どのタグがどんな機能を持つかについて、一通りご覧下さい（丸暗記する必要はありません）。
4. 基本要素
では HTML タグの基本機能を確認していきましょう（この節は読むだけです）。
第１回の授業で、MediaWiki の執筆の基礎として体験していただいた、見出し・本文・箇条書きの使い方、そして第２回の最初に体験していただいた 内部リンク、外部リンクについて、HTMLでのコーディングを確認します。
これらを正しく、使って記事情報を構成することができれば、Webページに必要な情報の７割は掲載できると思ってください。
4.1. H*｜見出し
h1 ～ h6 の６種類の大きさで、見出し文字として強調表示されます。
h : Heading
<h1>大見出し</h1>
一般的には、このタグで囲まれた文字は本文より大きな太字で、
上下に1行分のスペースがとられます。
4.2. P｜本文段落
- pタグは段落を指定します。複数の行が含まれる領域になります。
- p : Paragraph
<p>段落を指定します</p>
- 編集画面内での改行は画面には反映されません。連続する文章は一つの段落内に連続する文字列とみなされ、文章の幅はウインドウの幅に応じて変化します（リキッドレイアウト）。
- 強制的に改行を行う場合は、行末に <br> タグ（br : Break）を書きます。
4.3. UL/LI｜リスト
- ulタグとliタグでリストを作成できます。デフォルトでは黒丸の付いたリストになります。
- ul : Unordered List / li : List
<ul> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ul>
- olタグとliタグで番号付きリストを作成できます。
- ol : Ordered List / li : List
<ol> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ol>
4.4. A｜リンクの設定
- aタグに囲まれた内容がリンクのボタンになります。
- a : Anchor
<a href="Sample.html" target="_blank">サンプルページへ</a>
- href属性には以下のような設定ができます
- 他のサイトへのリンク href = "http://www.kyusan-u.ac.jp"
- サイト内の他のページへのリンク href = "gallery.html"
- ページ内のアンカーへのリンク href = "#ID名" → <a id = "ID名">
- ファイルへのリンク href = "sample.zip" ← ダウンロードはこの方法
- メールの宛先を指定してメールソフトを起動 href = "mailto:xxx@xxx.xx"
- target属性には以下のものがあります
- _self：自分自身のウィンドウを上書きして表示します（デフォルト）。
- _blank：新規のウィンドウを開いて、そこに表示します。
5. 演習
はじめに
- H* タグ、Pタグ、LIタグ、そしてAタグ。これらのタグの機能を確認するサンプルを作成します。動作確認ができればよいので、記載の方法は自由です。
- はじめに、本日の演習の完成イメージをご覧下さい。
https://koichi-inoue.github.io/SampleSite01/- これは、以下、5.1. 〜 5.3. の３つの演習を行なった後のものです。
- 見出しや、本文の文章、またリンク等は任意に変更して下さい。
- HTMLの動作を確認するために、CSS の一部を無効化する必要があります。style.css の最初の数行（以下）をまるごとコメントアウトしてお試し下さい。コメントアウトは、ブロックの前後に、 /* と */ をつけうだけです。
/*
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
*/
以下、本日のタグの機能を試すための３つの演習です。
5.1. 演習１｜見出しと本文段落
- main > section > 最初の article に、以下のコードを挿入してみて下さい。
<h1>PとBR(改行の違い)</h1> <h4>brなし</h4> <P> 本文｜適当に文章を書いて下さい。 本文｜適当に文章を書いて下さい。 </P> <h4>brあり</h4> <P> 本文｜適当に文章を書いて下さい。<br> 本文｜適当に文章を書いて下さい。<br> </P>
- 見出しや本文は、適宜あなたのオリジナルに書き換えて下さい。
5.2. 演習２｜箇条書き
- main > section > ２つめの article に、以下のコードを挿入してみて下さい。
<h1>様々なリスト表示</h1> <h4>UL：Unordered List</h4> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> <h4>OL：Ordered List</h4> <ol> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol>
- 見出しや項目名は、適宜あなたのオリジナルに書き換えて下さい。
5.3. 演習３｜リンク
- main > aside の内部 に、以下のコードを挿入してみて下さい。
<h1>関連リンク</h1> <ul> <li><a href="https://www.kyusan-u.ac.jp">九州産業大学</a></li> <li><a href="https://www.example.com">EXAMPLE.COM</a></li> </ul>
- リンクに許諾は不要です。リンク先は自由に設定して下さい。
6. 本日の成果をGitHub にアップロード
- 本日手を加えた最新の Webサイト（HTMLのみ更新、CSSはそのまま）を GitHub で前回作成した リポジトリ（SampleSite ）にアップロード更新して下さい。
- 手順は以下です。
- GitHub で あなたの SampleSite リポジトリを開いてください。
- [File Upload] をクリックして下さい。
- 本日更新した、index.html、style.css の両方をドラッグ＆ドロップします
- [Commit Canges] をクリックすると、新しいファイルでリポジトリが更新されます。
- 特設サイト は、前回の段階で、以下のようになっているはずです。
== APPENDIX == ===公開リポジトリ=== * GitHub：https : // github.com/JaneSmith <br> ==GitHub Pages== * https : //JaneSmith.github.io/SampleSite <br>
- GitHub Pages のアドレスから、本日更新したWebサイトが閲覧できればOKです。
第４回目は、以上をもって終了とします。お疲れ様でした。
次回は、HTML入門その２です。動画の掲載と画像の掲載、その他について体験していただきます。