テキストエディターでホームページを作成してみよう

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回のメルマガでは
テキストエディターを使った
「ホームページの作り方」について
お話させて頂きます。

前回、テキストエディターの
お話をさせて頂きましたが
もう一度復習したいと思います。

パソコンがwindowsでしたら「メモ帳」が既に入っていると思いますので
そちらをお使い頂いても良いですし、
他に無料のテキストエディターなどをインストールして
お使い頂いても良いと思います。
下記の「TeraPad」はおすすめの1つです。

TeraPad
http://www.forest.impress.co.jp/library/software/terapad/

macをお使いの方は「テキストエディット」というのが最初から入っていると思いますが、
それを使って頂いても良いですし、無料のテキストエディターなどをインストールして
お使い頂いても良いと思います。
おすすめは下記の「CotEditor」です。

CotEditor
http://coteditor.com/

テキストエディターの準備は出来ましたでしょうか?

では、始めますね。

まず、「html」って何?
という疑問をお持ちだと思います。

HTML(エイチティーエムエル)とは
「HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)」の略で、
ウェブページを作成するために開発された言語です。

HTMLの仕様は、W3C(World Wide Web Consortium)という団体が定めており、
そのルールに則ってホームページの構築を行っています。

まあ、何だか説明ばかりになると訳が分からなくなるかもしれませんが、
ホームページを作るには

——————————————————–

・htmlファイルというのを作成する

・htmlファイルはテキストエディターで作成できる

・書き方にはルールがある

——————————————————–

というのを頭に入れておいて頂ければと思います。

では、早速書いてみましょう。

テキストエディターで新規ページを作成して下さい。

このページに「タグ」というのを打ち込んでいきます。

html文章を構成するパーツは「要素」と呼ばれ、
「head要素」と「body要素」で構成されています。
この2つを合わせたものを「html要素」と言います。

「タグ」というのは要素の名前を山括弧( < > )で囲んだものです。

この「タグ」というのは、基本的に「開始タグ」と「終了タグ」という
2つのタグをセットで使います。

この様に、開始タグは<body>
終了タグは(/)が付き</body>となります。

では、実際に新規ページに記述してみましょう!

まずは、上記を真似して書いてみて下さい。
コピーはせずに自分で打ち込んでみて下さいね(笑)

m4_4

 
打ち込んだらファイルを保存します。
名前はとりあえず「index.html」としておいて下さい。
保存場所はご自身のPCの任意の場所で大丈夫です。
 
m4_1

 
保存したら、index.htmlを右クリックしてブラウザを選んで下さい。
(ブラウザ上にindex.htmlファイルをドラッグ&ドロップしてもOKです)

そうすると選んだブラウザ上でこの様に表示されると思います。
画像はgoogle Chromeでの表示です。
 
m4_2

 
どうですか?無事に表示されましたか?

このindex.htmlをサーバーにアップロードすれば
色んな人がこのページを見ることが出来ます。

ちなみに、ブラウザのソースを表示というのを選ぶと
この様に、このページの構成を見ることができます。
 
m4_3
 
m4_5

 
では、今回使ったタグの説明をしますね。

まずは、一番最初に<html>と書きます。
そして、最後に</html>と書きます。

そして、この
<html>と</html>の中に<head></head>と
<body></body>を書きます。

<head></head>内に書かれた情報は
基本的にはブラウザの画面上には表示されません。

ただし、<title>タイトル</title>の部分は
ブラウザのページタイトル部分に表示されます。

 
このhead要素内には、他にどの様な事を書くのか
については、今後順次ご紹介していきたいと思います。
 
<head></head>の次に
<body></body>と書きました。

<body></body>内に書かれた物が
ブラウザ上に表示されます。

今回は<p></p>というタグを使いました。
このタグは段落を示すタグです。

ですので、基本的には本文を打つ時に
<p></p>タグを使っていきます。

今回はこの様に2つの段落を表示させた形になります。

<p>信号は青色黄色赤色です。</p>
<p>手を上げて横断歩道を渡りましょう。</p>

<p></p>タグ内の文章をご自身で何か書いてみて下さい。

長い文章を書いて保存し、ブラウザで再度確認すると
段落が分かりやすいと思います。

 
今回はとっても簡単に最低限のタグだけを使って
htmlファイルを作ってみました。

次回から、少しづつ色々なタグの使い方などについて
ご紹介していきたいと思います。

では、また来週お会いしましょう。

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ