HTML Tutorial その１#

Author : Yosuke Tsuchiya (Fablab Kamakura)
Date created : 1/24/2025

HTMLの基本チュートリアルです。全くの初心者を対象としています

2025 Fab Academyの変更点#

ドキュメンテーションのWebサイトをHTMLで制作することを推奨（MkDocsが使えないわけではない）
各受講生のデフォルトのリポジトリはHTMLのテンプレート
FA2025 Tutorial DocumentのHTML Basicの項目

Webの仕組み#

サーバーとクライアント
World Wide Web
HTTP/HTTPS
Apache / Nginx
- Webシステムを動かすためのソフトウェア（サーバー側）
HTML5
- Webサイトを記述する言語 Hyper-Text Markup Language ver.5
Web ブラウザ
Internet Explorer
Safari / chrome /Firefox
CSS
JavaScript
FTP/FTPS

HTML:文法#

タグ#

HTMLは下のような「タグ」によって構成される。

タグの種類によって、<タグ>と</タグ>の間に書かれた文章や文字が、多彩にホームページ上で表現される。

ほとんどのタグには「開始タグ」と「終了タグ」がある。「終了タグ」は省略してはいけない。

属性#

開始タグの中でスペースで区切られた後に文字がある場合は、そのタグの属性を表す。

属性は、タグの役割を細かく指定するために使われる。通常、属性名の後に「＝」が続き、”　”の中に何らかの文字や数値である「属性値」が入る。

ルール#

HTMLを記述する際のルールとして、以下が挙げられる。

ファイル名は半角英数文字のみを利用しなければならない（必須）。絶対に、ファイル名に日本語やスペースを絶対に使わない。 画像とか日本語になっていたり、スペースなどが入っている場合は**必ずファイル名を半角英数文字に変更する**こと。
タグは半角英数で記述すること。
css, JavaScript, image それぞれ機能別にフォルダを作り、対応する形式のファイルを保存するようにする。
表示したい/読み込みたいファイルへのリンク（パス）は相対パスで記載する

HTMLファイルの構造#

とりあえず、リポジトリ内にtest.htmlというファイルを作って、以下を記述する

注）コピペしないこと（写経の重要性）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fab Academy 2025</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is the template site.</p>
  </body>
</html>

DOCTYPE #

DOCTYPE・・・ドキュメントタイプ宣言：このファイルはHTMlファイルであると宣言する

<!DOCTYPE html>

HTMLタグ #

HTMLの始まりと終わりを定義

<html>
~~(中略)~~~
</html>

HTML文書は、HTMLが「どこから開始するか」、そして「どこで終了するか」を定義しなければならない。それを指定するのが<html>~</html>タグ。
HTML文書が開始する場所に<html>タグを書き、終わる場所に</html>を書く。

HEAD部分 #

<head>
~~(中略)~~
</head>

以下のように、<head> から </head> で囲まれたところはそのHTMLのヘッダー部分である。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fab Academy 2025</title>
  </head>

<head> 〜 </head>は、そのページの概要や、データの構成、CSSやJavaScriptを記述するための箇所である。
<head> 〜 </head>に記述された内容自体はブラウザには表示されない。必ず、HEAD部分が「どこから始まるか」を<head>タグで指定し、「どこで終わるか」を</head>で指定する。
HEADに必要な情報を<head> 〜 </head>の中に記述する。

meta #

HEAD部分の以下の記載はmetaタグである。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

文字コードを指定する #

 <meta charset="utf-8">

この記述で文書の文字コードを指定する。charset属性に文字エンコーディングを指定する。文字エンコーディングとしてはUTF-8,Shift-JIS, euc-jpなどが挙げられる。

viewportを指定する #

<meta name="viewport" content="width=device-width, initial-scale=1">

この記述でHTMLファイルをスマートフォン等のサイズでも見られるように表示サイズを変更する。

Title #

ヘッダー部分の以下の記述は文書のタイトルを指定する。

<title>Fab Academy 2025</title>

タイトルは、ブラウザのツールバー、履歴(お気に入り)メニュー、検索エンジンの検索結果などで表示される。Titleタグは省略できない、head内部に必ず記述しなければいけないタグである。

link #

以下のように記述することで、外部ファイルを文書に読み込むことができる。 Webサイトデザインのフレームワーク（Bootstrap）のスタイルシートファイルを読み込んでいる。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

- rel=”stylesheet” で、読み込んでいるファイルがスタイルシートであることを明示する。 - href=”XXX”で、読み込むファイルのパスを指定する。

Script #

script タグを使って、文書にJavScriptを読み込んだり直接記述することができる。以下のように記述することで、外部のJavaScriptファイルを読み込むことができる。ここでは、Webサイトデザインのフレームワーク Bootstrap のJavaScriptファイルを読み込んでいる

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>

以下のように、関連するjQueryというJavaScriptのファイルをインターネットから読み込むこともできる。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

あるいは、以下のように直接JavaScriptを記述することができる。以下の例は、d1 という idを指定したところに、現在の時刻を表示する。

<div id="d1"></div>
<script>
document.getElementById("d1").innerHTML = new Date().toLocaleString();
</script>

=== (中略) ===
<p id="di"></p>

BODY部分 #

<body> タグから </body> タグまでの間には、実際にブラウザに表示される文書の本体を記述する。ここで文書に対して章と節の区分（Heading）、リスト表示、パラグラフ表示などの様々な指定を行い、ブラウザ上にて表示する。

以下が、index.htmlのbody部分である。

<body>
    <header>
      <div id="Header"><</div>
    </header>
    <h1>Hello World!</h1>
    <p>This is the template site.</p>
  </body>

見出しタグ（h1,h2,h3…）#

以下の記述は、文章の見出しを設定している。H は Heading(見出し)の意味。文章の見出し(章題)を記述する。

<h1>Hello World!</h1>

見出しのレベルは h1～h6 まであり、h1 が一番大きな見出し、h6 が一番小さな見出しになる。

<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>

実際の見え方は以下のようになる（heading.html）

段落タグ（p)#

以下の記述は、文章の段落を設定している。p.html srcp は Paragraph(段落)の略。<p>～</p> で囲まれたところが、１つ段落として示される。

<p>This is Yosuke Tsuchiya Website.</p>

<p>I am working as research associate (just became from this April) in a university located in Tokyo. 
In the university, my research interest is how to apply recent ICT movement (including digital fabrication, 
civic tech and so on) to issues in regional development. 
I have been conducting practical research in various regional town in Japan. 
I belong to the department of information system and works as manager of campus network and education system.</p>

実際の見え方は以下のようになる。(p.html)

画像を挿入するタグ(img)#

以下の記述は、画像の挿入を指定している。imgはIMAGE（画像）の略である。

<img src="./img/sample.jpg" width="70%">

実際の見え方は以下のようになる。

挿入できる画像形式は、JPEG(.jpg)、PNG(.png)、GIF（.gif）である
挿入する画像の拡張子は全て小文字にすること（小文字でないと画像を正しく認識しない）
src=”XXX” で、表示する画像のファイルパスを指定する。
普通はimgというフォルダを作り、その中に画像を保存して、そこまでのパスを記載する。パスを記載する際は相対パスで記載する
width=”XXX”で、画像の横幅をピクセル（px）もしくはパーセンテージで指定する

リストタグ（ul）（li）#

箇条書きを表示したい場合は以下のように記述する。(li.html src)

<ul>
    <li>リスト１</li>
    <li>リスト２</li>
        <ul>
            <li>リスト2-1</li>
            <li>リスト2-2</li>
        </ul>
    <li>リスト３</li>
</ul>

以下のように表示される。(li.html)

ul は Unordered List(順序の無いリスト)の略。順序の無いリストを記述したいばあいは、<ul> から </ul>の間に、リストの各項目を <li> で記述する。
li は List Item の略。<ul> から </ul>の間に、リストの各項目を記述する際に使う。
リストの中にサブのリストを表示する場合は、li の中にさらにulタグを記述する。

リンクを貼るタグ（a）#

他のWebページへのリンクを貼りたい場合は、以下のように記述する（a.html src）。

<ul>
    <li><a href="https://www.aoyama.ac.jp">青山学院大学のホームページ</a></li>
    <li><a href="https://www.gsc.aoyama.ac.jp">地球社会共生学部のホームページ</a></li>
</ul>

以下のように表示される。(a.html)

絶対パスと相対パス#

絶対パス：もっとも上位の位置から、全てのフォルダ名を指定して、絶対的にファイルの所在を示すパス。他のサイトの場合は、そのサイトのURLが絶対パスとなる。
相対パス：現在いるフォルダ、現在開いているファイルを基準として、フォルダ名、ファイル名を指定して、相対的に場所を特定し記述するパス
HTMLにフォルダの区分は / (スラッシュ)を使う

相対パス記載のルール

現在の位置： . (ピリオド)　⇒　現在いるフォルダ　./
一つ上の位置： ..（ピリオド２つ）　⇒　一つ上のフォルダ ../

例1）index.htmlからalbum.htmlにリンクを貼る

絶対パス：<a href=”https://fablabkamakura.fabcloud.org/FabAcademy/html-template/data/album.html” > album.html </a>
相対パス：<a href=”./data/album.html”>album.html </a>

例2) page2.htmlにphoto2.jpgを貼り付ける

絶対パス：<img src=”https://fablabkamakura.fabcloud.org/FabAcademy/html-template/images/photo2.jpg">
相対パス：<img src=”../../image/photo2.jpg”>

Webサイト制作時はファイルへのパスは相対パスで記述する。

ソースコードを表示する(pre,code)#

HTMLなどのソースコードを表示する場合は、<pre>タグと<code>タグを組み合わせて使う。
特にHTMLのソースコードを表示する場合は、特殊文字のエスケープ（変換）を行わなければいけない
- 特殊文字を自動変換するツールを使って変換する

<pre>
    <code>
        &lt;body&gt;
            &lt;h1&gt;ソースコードの表示&lt;/h1&gt;
            &lt;p&gt;通常の表示：body{ background-color:#008b8b; }&lt;/p&gt;
            &lt;p&gt;codeタグ使用：

            &lt;code&gt;body{ background-color:#008b8b; }&lt;/code&gt;
            &lt;/p&gt;
        &lt;/body&gt;
    </code>
</pre>

実際の見え方


<body>
<h1>ソースコードの表示</h1>
<p>通常の表示：body{ background-color:#008b8b; }</p>
<p>codeタグ使用：
<code>body{ background-color:#008b8b; }</code>
</p>
</body>

テンプレートのすすめ#

Freeのテンプレート

授業で紹介されていたリンク
フリーで使える
既存のテンプレートをこれに置き換えることもいいかも