dorayakiBlog

~絵など興味ある事について書いてます~

かんたんなウェブサイトの作り方

ホームページつまりウェブサイトを作るにはどうすれば良いのか?なお低いスペックでも構わないのでネット接続出来るパソコンとテキストエディタ(メモ帳で可)を用意。

①まずは自分で作ったホームページのファイルを置いておく場所を確保する。
自分のパソコン上にホームページを作っても自分のパソコンには誰も接続して見に来ないのでホームページを他の人が見れる場所に置く必要がありサーバーとなるコンピュータを用意する必要がある。自分でサーバーをいちから用意するのは手間がかかるのでウェブ上にある貸しサーバーをレンタルサーバーの会社から借りる。同時にホームページの住所となるwww.xxxxx.jpの様な自分のアドレスとなるドメインも取得する。サーバーをレンタルする際にドメインレンタルのサービスがあるサービスもあるのでそこで取得する。
↓有名なレンタルサーバーのサイト(有料)
・ロリポップ
・さくらインターネット
・fc2

②サーバーを借りて各種手続きを済ませたらそのレンタルサーバーのサイトのマイページのファイルをアップロードする為のコードを入力する画面にhtmlという書式の文書で入力する(ホームページ作成のパソコンソフトやウェブサービスもあるが後々自分でカスタマイズ出来る様になる為に生のコードを手書きで書いた方が良い)。
以下のコードを書く。ただの文書形式なので丸写しのコピペでも可。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>自分のホームページ名</title>
<meta name="description" content="サイトの説明" />
<meta name="keywords" content="サイトのキーワード" />
<link href="CSSアドレス.css" rel="stylesheet" />
<script src=jquery-1.8.0.min.js"></script>
<script src="javascriptのアドレス.js"></script>
</head>

<body>

<header>サイトのタイトル</header>

<h1>このページのタイトル</h1>

<div>
<p>
ここに文章を書く
</p>

<img src="画像のアドレス.jpg" />

<a href="リンク先のアドレス">
リンク先の名前
</a>

</div>

<footer>
サイトの終わりの下部パーツ
</footer>

</body>
</html>

ポイントとして、
・htmlコードではタグという入れ物に表示したい文や画像を入れないと表示されない。大きいくくり〜小さいくくりの入れ子状になっている。
・基本的に<body>〜</body>というタグの中に書きたい事を書く。
・<div>は基本的に何を入れても良い入れ物。
・<p>は文字や文章。改行したい所で<br>で改行。
・<a>は他のページやサイトへのリンクを貼れる。<a>内のhrefにアドレスを書く。
・<header>はサイトの頭部分のパーツを示しサイト名を入れたりする、<footer>はサイトの終わりの下部パーツを示す。どちらも任意で必須では無い。
・<h1>はページのタイトル、見出しを示す。h1〜2,3,4…とタグを増やせる。1が一番大きい見出しとなる。
・<img>で画像を貼る。srcにアップロードされている画像のアドレスを書く。アドレスの書き方はjpeg画像ならxxxx.jpg、画像ファイルをフォルダに入れた場合はフォルダ名/xxxx.jpg、表示させるサイトのファイルより上のフォルダにはある場合は../xxxx.jpgさらにフォルダに入っているなら../フォルダ名/xxxx.jpg。他にはhttp://ドメイン名/フォルダ名/xxxx.jpgと直接ウェブ上のアドレスでも指定出来る。アドレスの書き方は<a>でも同様。
・一番最初の<head>タグ内はサイトの説明と設定と形式的なものでおまじないの様なものでサイトの名前や説明をとりあえず書いておこう。<head>タグ内のCSSとjavascriptというタグは別ファイルのリンク先を示しそれらを書くときに使用する。CSSは色や大きさや順序・並び方等の指定をする事によりページの見た目を変える、javascriptはプログラムでページに動きを与える。両者ともhtmlと同じコード内に書く事も出来る。ここではまずはホームページを作る事が主な目的なのでここでは説明は省く。
・以上が主な基本的なもので他の出来る事は設定的なものや見た目を変えるものがほとんどなのでそれはおいおいその都度取り入れる事を推奨。

以上サイトで書きたい文章や画像を書いてアップロードしたらウェブ上に公開される。あとはGoogleやYahoo等の検索でアクセスされるのを待つかSNSで自ら宣伝したりするとページの存在が人に知られる事になる。アップロードしたら自身のパソコンやスマホでアクセスしてぜひ確認してみて下さい!パソコンならウェブブラウザの機能で自分のホームページのコードも確認する事が出来ますのでウェブ上に公開された事を実感してみて下さい!