とにかく実際にHTML言語を書いてみよう!〜1〜最初に知っておくべきHTMLの不思議 | 超初心者専用、超実用プログラミング講座〜ゴリ押しプログラミング〜

超初心者専用、超実用プログラミング講座〜ゴリ押しプログラミング〜

超初心者でも大丈夫!今日初めてパソコンを触った人が3ヶ月後には自分のホームページをデザインして作って、なおかつお小遣いを稼げるほどにまで成長できる最強webアプリケーション講座


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



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




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



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



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




です。



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




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



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




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



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



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



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




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




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



できましたか?



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



ソース



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



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



おそろしや。。。



安心してください!



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



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



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



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



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




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



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



それではいきます。



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



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



そして中身に、



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




と書いてください!



できましたか?



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



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



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



html_head_body




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



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



できましたか?



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



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



不思議でしょう~笑



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



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



いいんです。



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




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




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



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



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




今回はここまでです。



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



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