· 

書いたら変わるよHTML〜お子さまから、高齢者さんまで対象です〜

HTML
HTML

HTMLとは、ホームページの構造そのもので、基礎となる、骨格・骨組み・土台です。

基礎を作るためには意味付けが必要です。

 

実は本動画中、誤字がありました。

大変申し訳ありません。

ダンボールフリップの修了」は「終了」の間違いです。

ご迷惑をおかけしました。

HTMLタグ

HTML

HTML:手を動かして覚えよう!

コードは、実際に手を動かして覚えるのが一番です!

手を動かしながら、覚えましょう!

※動画を5〜10回観ると、頭の中でシミュレーション出来てしまうこともあるよ。

歴史苦手だった、筆者がクラスで歴史一番の子に教えてもらった勉強方法は、教科書を10回以上読むだったけど、実際その子を抜いてしまった。

タグについて

<開始タグ>内容<終了タグ>はキホンの「キ」

この形でそれぞれの文字や文章に意味付けをしますが、この形を要素と呼びます。

要素がいっぱ〜い集まって、ホームページができます。

実際にやってみましょう!

HTML

テキストはこちらからどうぞ

上記の文章を実際HTMLに変えてみましょう。

Windowsとメモ帳を使用します

Windouwsとメモ帳とCotEditor

今回はWindowsとメモ帳を使用します。

(Macの方はCotEditor)

メモ帳にテキストを書きます。

このテキストをHTMLに変えて行きます。

1.見出し(h1)を作る

「クマのプロフィール」という部分を見出しにしてみましょう。

見出しはh1〜h6まであります。

h1は大見出しになります。

この時注意するのは、必ず半角(これ大事)を使います。

大文字、小文字どちらでもいいのですが、統一することです。

2.ファイルをホームページ用に変身

ファイルメニューに名前をつけて保存します。

ファイル名は、例えばkuma.html のように書き換えましょう。

拡張子は、常に表示させてください。

Google chromeを開き、kuma.htmlのファイルをドラッグして持って来て手を離します。

「わかんな〜い」という方は、動画を確認してくださいね。(4分30秒のところから)

ここで諦めたらダメよ。

結果を見ないでやめたら、大損だよ!

HTML

クマのプロフィールが太く、大きな文字に変身しています。

3.本文(文章)をブラウザに伝えましょう

ここまで来たら、同じように、タグを変えて行きましょう。(7分くらいからです)

<p>本文</p> は段落を意味します。

<strong>文章</strong> は強調です。

「ほんとうはサケが好きです」を強調させて見ましょう。

出来たら、上書き保存です。

ページの再読み込みをして見てみましょう!

HTML

4.お問い合わせをお問い合わせページに誘導

aのタグと、お問い合わせページのURLが必要です。(8分30秒位から)

お問い合わせページは今後の課題です。

<a href="URL">終了</a>

青文字になりアンダーラインがつきます。

3.と同じように、上書き保存です。

ページの再読み込みをして見てみましょう!

まとめ

このように、ブラウザと意志の疎通をするのがHTMLのコーディングです。

枠も画像もないですが、これがホームページのキホンのキです。

ホームページの第一歩クリア完了です。