【HTML】簡単!HTMLファイルを作成して動かしてみる!

HTML/CSS

こんにちは!maythamです!

みなさん、HTMLは知っていますか?

HTMLって聞いたことはあるけど、実際に作るにはどうやったら良いかが分からない、、と思っている方は多いと思います。

今回は、簡単なHTMLファイルを作成して、実際に動かしてみるところまでをやっていきます。

ぜひ参考にして、一緒にHTMLファイルを作成してみましょう!

HTMLとは?

まず、HTMLとは何なのかを簡単に理解するところから始めましょう!

HTMLとは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略で、ウェブサイトを作成するために誕生した言語です。

ウェブサイトの見た目は、このHTMLCSSを組み合わせて作られます。

皆さんが普段見ているGoogleやYahoo!も、このHTMLCSSを組み合わせたものとなります。

実際に簡単なHTMLファイルを作成してみる

簡単なHTMLファイルを作成する

HTMLについて簡単に理解ができたところで、次は実際にHTMLファイルを作成して動かしてみましょう!

まず、デスクトップ上に空のテキストファイルを用意します。

用意ができたら、そのテキストファイルに、以下をコピペして、拡張子を「.html」にして保存します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTML作成</title>
  </head>
  <body>
    <h1>HTMLを作成しています</h1>
  </body>
</html>

※ここで、文字コードを「utf-8」にしていない場合、実行時に文字化けします。。

デスクトップに、以下のように作成ができれば完了です!

今回は、「HTML練習」というファイル名で作成しています。

実際に動かしてみる

それでは、実際に作成したHTMLを動かしてみましょう!

動かし方は簡単です。先ほど作成したHTMLファイルをダブルクリックしてみてください。

すると、

このように、既定のブラウザで作成したHTMLを開くことができます!

あとがき

HTMLってなんか難しそう、、って思ってた人も、これくらいの簡単なHTMLならすぐに作成して動作させることができてしまいます。

みなさんが普段見ているウェブサイトも、すべてこの書き方が基本となっています。

HTMLには、ここで作成したもの以外にも様々な種類のタグが存在しています。

それを独自に組み合わせて動かしてみるのも楽しいかもしれませんね!

コメント

タイトルとURLをコピーしました