レンタルサーバーを徹底比較!エックスサーバーやロリポップなど主要レンサバのランキング!

レンタルサーバー徹底比較!目的別であなたに一番合ったレンサバをご紹介!

Webサイト作成の環境整備と覚えておきたいHTMLのルール

Webサイト作成の基本

Webサイトをつくるためには特に何も用意したり購入する必要はなく、ネットにつながったパソコンさえあればOKです。(当サイトではWindowsPC向けに解説していますが、Macでも基本的には同じです。)
とはいえ、パソコン内の環境を整えることで作業の効率がよくなり、より短い期間でホームページ作成をマスターすることができます。まずはWebサイト制作の準備として環境の整備をしていきましょう。

 

 

Webサイト作成の基本的な流れ

まずはホームページ作成の基本的な流れを解説します。まだ一度もやったことがないという方は、この機会に必ずご自身でやってみてください。
大事なのは実践することです。実践しさえすれば、1~2か月後にはご自身のホームページを運営されていることでしょう。

 

  1. まずはインターネットを見るためのブラウザ(インターネットエクスプローラー、Google chromeなど)、文章(テキスト)を書くためのテキストソフト(メモ帳など)への“ショートカットキー”を、デスクトップ画面に用意します。ブラウザは最初からショートカットキーがあるでしょうか。メモ帳は、「スタート」→「すべてのプログラム」→「アクセサリ」にあります。右クリックして「ショートカットの作成」をクリックしましょう。Windows8では、「Windowsボタン」→「左下の“↓”矢印」→右の方にある「メモ帳」を右クリック→「スタート画面にピン止めする」、です。
  2. メモ帳をひらいて「こんにちは」と入力し、好きな名前をつけてデスクトップ上に保存します。
  3. 保存したテキストファイルをブラウザで開きます。やり方は、 ファイルの上で右クリック→プログラムから開く→Internet Explorer(Google chrome) です。

 

インターネットをするときの画面がひらき、入力した「こんにちは」という文字が画面に表示されたら成功です!
あなたは今まさに、ホームページ作成の記念すべき第一歩を踏み出しました!
 
今はまだ「こんにちは」という文字が表示されているだけですが、ここにHTMLタグを盛り込んでいけば立派なHTMLサイトになるんです。
まだこの段階ではこのファイルはあなたのパソコンの中にある1ファイルに過ぎず、ネット上には存在しません。Webサイトとして公開するにはアップロードという作業をしなければなりませんが、これは後に解説しますのでご安心ください。
おさえておきたいのは「ブラウザ」ソフトがどんな働きをしているか、です。ブラウザの役目とは、テキスト(文字)で作られたファイルの内容を読み取って、ネット上でちゃんと見られる形に変換して表示することなんですね。
ですから、アップロードする前のファイルをブラウザで開くことで、このファイルをネット上に公開したら他の人からはこんな風に見えますよという確認をすることができるわけですね。

目次にもどる

 

作業しやすい環境を整えて、アナタもプロのWebデザイナー!?

つまりWebサイトは、テキストソフトでもとを作り、途中でブラウザで何度も開いて出来上がりを確認しながら修正を加え、完成してからネット上にアップロード、という流れで作成していくのです。
 
使うソフトはInternet Explorerとメモ帳でもよいのですが、使いやすさと見やすさを考慮して、ブラウザはGoogle chrome(グーグルクローム)、テキストソフトはTeraPad(テラパッド)をインストールしておきましょう。使えばわかりますが、作業スピードも覚える早さもまるで変わります。
 
Google chromeダウンロードページ(公式)
 
TeraPadダウンロードページ(作成者ページ)
 
TeraPadダウンロードページ(Vectorソフト)
 
上記のページは安全ですが、フリーソフトダウンロードサイトの中でも「Softnic」というところは利用を控えた方がよいかもしれません。
ダウンロードはできるのですが、同時に怪しいソフトが同時にインストールされるという声をよく聞きます。(管理人も経験ありです。)必ず上記のリンクからダウンロードするようにしてください。

目次にもどる

 

HTMLで覚えておくべきルール

HTMLタグを使うときは、<要素名>~</要素名>という風に「開始タグ」と「終了タグ」で囲みます。終了タグは“半角スラッシュ+要素名”です。例えばページタイトルをあらわすタイトルタグの場合、<title>~</title>といった具合です。
 
タグにはその種類をあらわす「要素」、その中で細かく指定する「属性」、属性の数値やリンク先のURLなどを指定する「属性値」の3つで構成されます。
<要素名 属性名="属性値">~</要素名>
という形ですね。
 
例えば

<font size="1">小さい文字</font>
<font size="6">大きい文字</font>

と書くと、

小さい文字
大きい文字

という具合に文字の大きさを変えられるわけです。
 
基本的なルールとして、
HTMLタグは半角小文字の英数字で記述します。
要素と属性の間のスペースも半角スペースにします。
1つの開始タグに対し、必ず1つの終了タグを忘れずに使いましょう。
 
HTMLの解説サイトによっては、タグを<TITLE>~</TITLE>のように大文字で記述しているところもありますが、これは控えましょう。
この記述のしかたは「HTML4」までの古いバージョンの書き方で、現在の主流ではありません。
 
また一部の、「終了タグ」が存在せず単独で機能するタグは、<タグ名 />のような書き方をします。
(例:改行タグ<br />)

目次にもどる

 

この記事に関連する記事一覧

comment closed