メモ帳で書けるhtml

はじめに

ホームページを作りたいんだけど・・
特別な環境とかって必要なんですかね?
特別な環境は必要ないですよ!
お使いのパソコンにメモ帳は入っていますか?
メモ帳ですか・・・
メモ帳なんかでホームページなんて作れるんですか?
メモ帳があれば簡単なものでしたら作ることができますよ
先生!メモ帳を用意しました!
ではメモ帳を使ったホームページ制作の基本について触れて行きましょう。

HTML基礎(Hello World!)

用意はするものリスト

  • メモ帳
  • 確認用のブラウザ(Google Chrome,Safari,IE,FireFox,etc)

ホームページを作成するためには、HTMLと呼ばれるウェブページを作成するために開発された言語を使用する必要があります。まず、今回の記事では、ブラウザに「Hello World!」と表示させることを目的とします。サンプルコードは次のようなものとなります。

<!DOCTYPE html>
 <head>
   <title>HTML Sample(Hello World)</title>
  </head>
  <body>
    <p>Hello World!</p>
  </body>
 </html>

上記のコードをメモ帳に書きましたら、それをブラウザで表示させて見ましょう。

メモ帳で保存する際には、index.htmlという名前にして保存してください。「.html」という拡張子をつけることでブラウザがこれはホームページだと認識しますので、名前の変更を行ってください。「.html」より前の名前はお好きなもので構いませんが、今回はindex.htmlとさせていただきます。

サンプル

サンプル画像で、ブラウザのタブの箇所に「HTML Sample(Hello World)」と書かれているのがわかるかと思います。
その設定が、<head>タグの中にある次のコードになります。

<title>HTML Sample(Hello World)</title>

「<head>」の中には、ホームページの中の設定を決める要素を設定することができます。
後のブログで紹介させていただく、デザイン周りの設定(CSS)や、動作などを設定(Javascript)するために必要な要素などを記述する箇所になって来ます。

Hello World!と表示されている箇所は、次のコードになります。

<p>Hello World!</p>

<body>で囲まれている領域は、基本的にホームページの中に表示される要素になります。今回は、こちらのbodyの中にHello Worldと書いてあるため、ブラウザがその文字を認識して表示しています。

上記のコードをメモ帳に書いてブラウザで表示することでこのように簡単に文字を表示することができます。メモ帳があれば簡単なホームページを作ることができますね。

関連記事

  1. ふりがなの付け方

  2. HTMLでラジオボタン を作ってみよう

  3. リンクの貼り方

  4. videoタグを使って動画を埋め込んでみよう

  5. HTMLで画像表示してみよう

  6. HTMLでテーブルを作ろう

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930