【実は超簡単】ホームページは自分で作るのが一番でしょう その2

 

前回の続きです。

【実は超簡単】ホームページは自分で作るのが一番でしょう - ホーリーの普通の日記

 

HTMLって言葉、知ってる人は多いと思うんですが、なんか小難しいやつってイメージはありませんか?

実はHTMLは超簡単です。これを使えるようになると、自分でホームページを作ることが出来るので、ちょっとやってみましょう。

 

最低限やることは以下の5つ。

 

テキストエディタを用意する→はじまりの呪文を書く→本文を書く→HTMLって書いて保存する→そのファイルをブラウザ(グーグルとかヤフーの画面)に突っ込む

 

まあこれだけですね。微妙に多いように見えますが、ここまで10分で終わります。

これをスマホで見てる人は後で、パソコンで見てる人は今すぐ一緒にやりましょう。

これで?ってくらい簡単に出来ますから。

 

☆☆☆

 

まずはテキストエディタを用意しましょう。文字を書くやつですよ。

多分ワードとは違うんじゃないですかね。ワードをよく分かってないんですが、多分微妙に違うやつです。Windowsだとメモ帳になるんですかね?

 

ちなみに僕はMacなんですが、「mi」ってやつを使ってます。Macの人はこれをダウンロードしてもいいですね。

またWindowsだとTeraPadっていうのがいいとかなんとか。手元にある本にはそう書いてます。

 

すでにテキストエディタを知ってて、それが手元にある人は、それを使いましょう。

ない人は上記のどちらかをダウンロードしてください。

 

☆☆☆

 

自分の手元にはmiがあるんで、ちょっとこれでやっていきます。

(miは初期のフォントサイズが小さいので、大きくした方がいいかも。僕は14にしてますよ。ドキュメントから変えて)

 

ファイル→新規→HTML

 

まずはこれを選択して、新規ファイルを作りましょう。

mi以外のテキストエディタでやってて、新規ファイルの項目にHTMLがないよって方は、そのままで構いません。最終的にhtmlって拡張子で保存すればOKですから。

 

f:id:gevvoihorry:20160422060134p:plain

 

ここではじまりの呪文を書きます。

 

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

</body>

</html>

 

コピー&ペーストでいいので、まずはこれを書きましょう。

これがはじまりの呪文になります。

 

んで、もうこれが書けたらHTMLが出来たも同然です。

この<body>~</body>の間に文字を書いてみましょう。

 

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

HTML出来たよ。

</body>

</html>

 

「HTML出来たよ」って書いてみました。

そうしたらこれを保存ですね。どこでもいいし、なんでもいいんですが、今回はmyPage.htmlって名前でデスクトップに保存しましょう。

 

☆☆☆

 

保存出来ましたか?そうしたら、そのファイルをブラウザに突っ込みます。

なんでもいいんですが、じゃあGoogleのページを開いて、そこに突っ込んでみましょう。

https://www.google.co.jp/

 

f:id:gevvoihorry:20160422062022j:plain

 

ドラッグアンドドロップですね。初めてプログラミングをやったときはこれが分からなかったんですが、大丈夫でしょうか?出来ましたか?

 

そしたらビックリ。こんな画面になってるかと。

 

f:id:gevvoihorry:20160422055245p:plain

 

HTMLできたよ

 

って、表示されてるでしょう。画面の左上に表示されてるはずです。

 

出来た、出来ましたね、HTML、超簡単でしょ?

 

ん?とりあえず表示されたけど、これが何になるの?

普段見るホームページからは、ほど遠い状態なんだけど。

 

って疑問を持った人もいるかと思います。

でもホームページっていうのは、文字と画像で出来ています。

今回は文字を表示させることが出来たので、もう半分出来たも同然なんですよ。

 

えー、そんなわけで、これで終わろうと思ってたんですが、もう1回だけ書いてみます。次回へ続け。

 

P.S.

miの場合、わざわざブラウザに突っ込まずに、command+Rでブラウザに表示させることが出来ます。他のテキストエディタでも、そういうショートカットがあるはずなので、探してみてください。

また嫁のWindowsでちょっとやったら、デスクトップのファイルをダブルクリックするだけで、ブラウザ表示することが出来ました。なんか方法は色々あるみたいですね。