こんにちは、ゆーすけです。

今回の記事では、
実際にあなたに、
HTML言語を書いていただきます！

「え、HTML言語ってなんなの？」

って思われた方もいるかもしれませんので、
説明しますと、

HTMLとは、「Hyper Text Markup Language」の略称で、
ホームページ（ウェブページ）を記述するための言語

です。

このアメブロも、実は、
HTML言語で書かれてるんですよ！

なので、もしあなたがHTMLをかけるようになれば、

アメブロのこのページとかを
自分で作ったりデザインしたりできるように
なっちゃうわけです！

それではまず、実際にアメブロがどのような
コードを書かれているかを見てみましょう！

この画面をまず右クリックしてみてください。

そしたらメニューがいくつか出てくると思いますが、
そのなかで、

「ソースを表示」
「ページのソースを表示」

などのメニューがあるはずです。

それをクリックしてみてください！

できましたか？

こんな画面が見れれば成功です！

このように、タグと呼ばれる、
<>で囲まれたものを駆使して書くのがHTML言語です！

しかし、アメブロは1000行近く書いてありますね。

おそろしや。。。

安心してください！

あなたはこんなに書く必要は全然ありません！

100行程度あればよくある一般のホームページは作れたりします！

今日はそのお試しお触りタイムとして、
実際に一緒に書いていってみましょう！

やり方を書いていくので、
絶対に一緒にやっていってくださいね！

ここで自分でやってみるかやってみないかで、
理解度が大きく変わっていってしまいます。

ここで、めんどくさがる人は、
絶対にできるようになりません。

逆に、ここをしっかりやる人は、
今後絶対にできるようになります。

それではいきます。

まず、新しいテキストファイルを作ってみてください！

名前は、「test.txt」でお願いします！

そして中身に、

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

と書いてください！

できましたか？

では、これをブラウザ(Chrome など)に
ドラックアンドドロップしてみてください！

もし「ドラックアンドドロップ」というワードがわからなければ、
Googleなどで、「ドラックアンドドロップとは」と打って調べてみてください。

このように表示されれば成功です。

では、次に、
ファイル名を、「test.txt」から「test.html」に変更してみてください！

そして同様にブラウザにドラックアンドドロップしてみてください！

できましたか？

さっきとは違い、
何も表示されなければ成功です！

そうなんです、HTMLだとこれだけじゃなにも表示されないんです！

不思議でしょう～笑

これで、あなたもHTML言語を
実際に書いてみることができました！

「え、まだなにも表示されてないよ！？」

いいんです。

今回は、なにも表示されないけど、
一番重要な部分を書きました。

つまり、あなたはHTMLの一番詰まるポイントを
いつの間にか乗り越えたと言っても過言ではありません！

、、、さすがに過言ですね。。。笑

しかし、重要なのは間違いないので、
今日書いたものは、
“魔法の言葉”として絶対に覚えておいてください！

また、この「test.html」は今後も使っていくので、
そのまま置いておいてください。

今回はここまでです。

最後まで読んでくださって
ありがとうございました。

次回も楽しみにしていてください！

とにかく実際にHTML言語を書いてみよう！〜１〜最初に知っておくべきHTMLの不思議