Skip to content

Latest commit

 

History

History
129 lines (102 loc) · 5.29 KB

what_is_html.md

File metadata and controls

129 lines (102 loc) · 5.29 KB
Raw

HTMLはじめのいっぽ

HTMLとは？

HTMLとは、ハイパー テキスト マークアップ ランゲージ(Hyper Text Markup Language）の略で、テキストをタグで整理するコンピューター言語です。 プログラミング言語と違って、とってもシンプルなので、ご安心を！

基本は、こちら「たいとる」というテキストをh1というタグでマークアップすることで大きく目立たせます。

<h1>たいとる</h1>

<と>で囲まれたものをタグと呼びます。 先頭に / （スラッシュ）が付いた、タグは通称「閉じタグ」と呼び、そのタグの範囲の終わりを意味します。

HTMLは基本的に大きく2つ、表示されないヘッダと表示されるボディに別れます

<html>
<head> 〜 </head>
<body> 〜 </body>
</html>

このようにタグは入れ子にすることができます。思ったとおりに表示されない時は、ちゃんと閉じタグになっているか、閉じタグを忘れてないか確認してみましょう。

HTMLには様々なバージョンがありますが、最新版のHTMLであることを表す1行を先頭に付けて、文字コードは utf-8 であることをmetaタグで記述して完成です！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>たいとる</title>
</head>
<body>
  <div>
  <h1>タイトル</h1>
  本文
  </div>
</body>
</html>

こちらを index.html と半角小文字で名前を付けて保存します。

ブラウザで開くか、ブラウザへドロップすると、カタカナで「タイトル」と書かれた超シンプルなページが表示できました！ ブラウザのタイトルは「たいとる」とひらがなで書かれています。上のHTMLと見比べてみましょう。

divタグ

このようにHTMLは、1ページに、1ファイル作っていきます。ページ内に書く内容は自由ですが、ページのタイトル、小見出し、それぞれの本文という形が多いですね。 HTML内の何らかの固まりを divタグ で囲み、その先頭に大目次から順に h1, h2, h3, h4 とタイトルを付けて、本文を書いていきます。

<body>
<div>
  <h1>大タイトル</h1>
  <div>
    <h2>中タイトル1</h2>
    本文1
  </div>
  <div>
    <h2>中タイトル2</h2>
    本文2
  </div>
</div>
</body>

1ページに書ける文章量に制限はありません。

改行したのに反映されない？ → HTMLでは改行したい時に <br> を使います。

aタグ

文章内の用語や、別途詳しく説明したい時、別のHTMLファイルを作って連携することができます。

・・・こどもパソコン<a href="https://ichigojam.net/">IchigoJam</a>を使って、はじめてのプログラミングに挑戦・・・

このように書くと、画面上では下記のように表示され、「IchigoJam」が色が変わってクリックできるようになります。これがリンクです！

・・・こどもパソコンIchigoJamを使って、はじめてのプログラミングに挑戦・・・

リンク先は、https:// でURLを書くこともできますし、同じフォルダ内であれば、ファイル名だけ指定すればOKです！ どんどんつなげてみましょう！

imgタグ

画像を使ってインパクトあるページをつくりましょう！

jpgかpngの半角英数小文字でファイルを用意し、画像を入れたいところに、次のように書くことで画像を表示できます。

<img src="image.jpg">

imgタグは、改行で使ったbrタグと同様、閉じタグがいらないタグです。

brタグ

テキストファイル上で改行しても、ブラウザでは改行されません。brタグを使いましょう。

改行されない。
改行される。<br>
ね！

< や > や & がうまくでない!?

HTML内での < や > は、タグと混ざってしまって表示されないことがあります。
「&lt;」や「&gt;」と置き換えると表示されます。 （& は、&amp; と置き換え！）

map-gsiタグ

HTMLタグは自由に拡張できます。例えば、国交省国土地理院がオープンデータとして提供する地図データを使ったmap-gsiタグを使えば、ページ内に地図を埋め込めます。

<script type="module" src="https://code4sabae.github.io/leaflet-mjs/map-gsi.mjs"></script>
<map-gsi>
  <map-gsi-icon ll="35.942795,136.198881" name="めがね会館" src="icon-meganekaikan.png" size=64></map-gsi-icon>
</map-gsi>

タブ区切りデータをHTMLテーブルに楽々変換、tsv-tableタグ! JS x WebComponentsはじめのいっぽ
https://fukuno.jig.jp/2897

かっこよく飾りたい？

HTMLを飾るための技「CSS」を使います → CSSはじめのいっぽ
https://github.com/code4sabae/website/blob/master/what_is_css.md

いろんなタグを調べる → HTML要素リファレンス
https://developer.mozilla.org/ja/docs/Web/HTML/Element

じぶんだけのウェブサイトがほしい → GitHub Pagesはじめのいっぽ
https://github.com/code4sabae/website/blob/master/README.md