はじめの一歩

準備

師匠

ほな、いくでー。

弟子

はい。

師匠

必要なもの。

師匠

まず、パソコン
これから、Windows を使った話すんで。
Macでも ええねんけどな。

弟子

スマフォでも良いですか?

師匠

スマフォや タブレットは、難しいやろなー。
知らんわ。

師匠

次に、ブラウザ
とりあえず、いつも使ってんのを 使えばええねん。

師匠

次は、テキストエディタ
メモ帳 とか Word は、あかん。
入ってへんかったら、無料の Notepad++ でも入れときやー。

弟子

他には?

師匠

とりあえず、パソコンブラウザテキストエディタ だけでええでー。

とりあえず、書いてみる

師匠

まず、テキストエディタ 開いて
この先は、Notepad ++ を前提で説明するでー。

師匠

ファイル新規作成 や。
そこに 下のコードを書き写してみ

<!DOCTYPE html>
<html>
	<head>
		<title>
			Sample
		</title>
	</head>
	<body>
		Hello!
	</body>
</html>
師匠

コピペでも ええねんけどな。
このサイトのコードは、ダブルクリックすると 全選択するようしといたから、コピぺしやすいで。
ワイは 意外に親切なんやん。

師匠

上のコードの SampleHello! の部分は 好きなように変えてもええねんでー。
ただし、文字化けする可能性があるから 日本語はアカン

師匠

ここで、 注意点!
ファイルのエンコードは、UTF-8(BOMなし)で編集&保存すること。
それ以外やと、日本語を使うようになったときに、文字化けするかもせーへんで。

師匠

写し終わったら、ファイル名前を付けて保存 や。
保存する場所は どこでもええねん。
ファイル名も、何でもええでー。
拡張子は .html.htm で。

師匠

ここの説明では、fisrt.html にしとくわ。
ファイルの種類を、 Hyper Text Markup Language file ... にすると、自動的に拡張子が付与されんねん。

師匠

ファイルを保存すると、下の図みたいに、コードに色が付いて表示されんねん。
「HTML言語で書かれている」と、テキストエディタが認識したからや。

とりあえず、実行してみる

師匠

保存した場所に行って 保存したファイル (fisrt.html) をダブルクリックすると、ブラウザが開くで。 ( 実行例
Sample はタブに、 Hello! は本文に表示されてるやろ。

弟子

表示されました!

師匠

下の3枚の図は、それぞれ ChromeFirefoxMS Edge で表示した例や。
この例やったら ほとんど同じやけど、ブラウザによって表示のされ方が 結構違うねん。
Webプログラミングをやるには、いろんな種類のブラウザをインストールしといて、その表示結果を確認した方がええ。

師匠

Macや iOSや Androidでも、表示のされ方が異なるから、本格的にやるなら そういうテスト環境も準備しといた方が ええで。

師匠

下は、 fisrt.html右クリックした図や。
他のブラウザをインストールしとくと、プログラムから開く で ブラウザを切り替えられるねん。
あと、Edit with Notepad++ をクリックすると、Notepad++ で編集ができる。

師匠

実行したHTMLコードの説明は、次のページや。

<!DOCTYPE html>
<html>
	<head>
		<title>
			Sample
		</title>
	</head>
	<body>
		Hello!
	</body>
</html>

復習

  • 必要な物は3つ = パソコン / ブラウザ / テキストエディタ。
  • UTF-8(BOMなし) で保存する。
  • 拡張子は、 .html or .htm