ホームページ作成スキル開発

****************
はじめに
基本構造
タグ?
テーブル
リンクさせる
パス?
公開方法
マナー
役立ちリンク
総合トップ
★☆★このページについて★☆★
私は独学・手打ちでこのホームページを作っています。
もちろんまだまだ分からないことだらけですが、
私程度の知識でこの程度のサイトは作成できます。
「千里の道も一歩から」と申します。
はじめの一歩にご利用下さい。
私もホームページ作成歴は半年ほどの初心者です。

はじめに
手打ちで作るホームページ。
なんとも難しそうな響きですが実は簡単です。
難しくはない、しかし面倒くさい。これが正しいでしょう。
しかし、人間、クリエイティブな作業はなかなか楽しいものです。
しかもネット上には親切な作成支援サイト様がたくさんあるので
カンニングしながら試験を受けるよな気軽さもあります。
まずは第一歩を踏み出しましょう!
****************
基本構造
手打ちで作るホームページ。
みなさんその存在はご存じかと思いますhtml。
一見難しいのですが、法則が分かればなんてことはありません。
タグではさむ!これが基本です。そしてほぼ全てです。
後述しますが「タグ」とはあのhtmlの英文みたいなやつです。
ハンバーガーのパンでもイメージすると良いかも知れません。
では、実例で行きましょう。

基本構造は以下の通りです。

<html>

<head><title><tite><head> <body> </body> </html>

もうイヤになりましたか?よ〜く見て下さい。「/」があるのとないのと
一つずつペアになってますよね。これがハンバーガーのパンの上と下です。
このパンに挟まれた部分にそれに応じた効果が出るのです。
*html・bodyの<>を半角で書くとここの無料サーバーでは自動でタグが挿入されるので、
あえて全角で記載しています。実際には半角で記載しないとタグとして認識されません。
ちなみに挿入されるのはページ1番したの小さな広告の分です。

もう少し詳しく見てみましょう。
ホームページは基本的に「html」で出来てます。
なので、最初と最後に「html」と「/html」があり、この間に入ってるのは「html」
の一部と定義されるのです。上記基本構造はhtmlを作る時は共通なので丸暗記、
すると良いでしょう。全部半角小文字で書くのがルールです。
ちなみに、各部分を解説すると

<head></head>
・・・・・ホームページ上には表示されません。基本設定みたいなものです。
<title></title>
・・・・これはブラウザの下のタスクトレイに書かれる名称です。
<body></body>
・・・・・このタグの間に入るのが実際に表示されるホームページの本体です。

基本は同じ、この効果を出すにはどんなタグが必要なのか?
それが分かれば良いのです。そしてそれはネットで簡単に見つかります。
暗記すべきタグなんてほんの少しだけですよ。
作ったファイルを保存する時は拡張子を「html」にして下さい。
アイコンが変わってhtmlファイルになります。
そしてトップページは「index.html」という名前にするのがお約束。

****************
タグ?
タグがあってのhtmlです。
得られる効果によって非常にたくさんのタグがありますが、
実際に使うもの、記憶すべきものは実は少しだけです。
はじめにタグの約束事をまとめてみます。
  • 半角英字であること(大文字小文字はタグでは区別ありません)
  • はじまりの<>と終わりの</>という形が基本(一部例外あり)
  • 「=”効果の中身”」・・・効果の中身はこの形式で指定する
大きくはこんなところでしょうか。難しくないですよね。
一部例外というのはとりあえず<br>と<p>だけ覚えればよいでしょう。
<br>は改行、<p>は段落(一行空いた改行?)。 少し覚えて来て画像を入れたくなったら<img src="画像ファイルの場所">と言うのもあります。

では、実際にやってみましょう。
タグにはさまれた部分に効果が現れます。と、言うことをふまえて
「赤」
この字を赤くしてみましょう。これをタグではさめば良いんです。

<font color="red">赤</font>

<font>のタグは文字に効果を与えます。
color=”red”は色をred(赤)にしますという意味になります。
そして</font>で閉めます。

このように赤くなりました。これが基本です。
どんなに複雑になってもこの形になっています(上記<br>等一部例外あり)。
手打ちするときは最初に<font></font>なんてセットで記述して
その後で間に挟むものを記述すると間違いが減らせます。

****************
リンクさせる
リンクさせるのももちろんタグを使います。
<a href=" URL ">文字</a>
これが基本。「””」の中にはURL(基本)、タグで挟んだ所にはリンク先名等任意。
<a href="http://yahoo.co.jp">ヤフー</a> 上記のように記述すると
ヤフー
と、なります。クリックするとヤフージャパンに行きますがブラウザの「戻る」で戻ってきて下さいね(^^;)
これができるとすごく上達した気分になれますね。
でも少しややこしい「絶対パス」と「相対パス」というのがあるので以下へつづく。

****************
パス?
ホームページのすごいところはリンクによって世界中とつながることですね。
ですが、いざリンクさせるとなると少しコツがあるのです。
絶対パスと相対パス。
初心者的知識としては絶対パスはよそのサイトへリンクするとき、
相対パスは自分のホームページ内のページの移動と思えば良いでしょう。
絶対パス:今の段階では「http://〜〜」のURLそのものと考えて良いです。
相対パス:同じフォルダ内にあるならファイル名(拡張子付き)だけでリンクできます。
もちろん上記、リンクさせるで紹介したタグの=””の中身に記述ですよ。
いろいろいじくってみるのが一番ですのでおためし下さいね。

****************
公開方法
ホームページを作ったら公開しましょう。
プロバイダーがスペースを用意している場合もありますが、
世の中には無料で公開してくれるところがあります。
ちなみに当サイトもそんな無料スペースを利用しています。
fc2web
簡単な登録ですぐ公開できます。
最初は無料ホームページで様子を見て良いと思いますが、
有料に移るメリットはものすごく大きいのでいずれは検討の余地ありです。

HTMLでは大文字・小文字の区別はないのですが、
アップロードするサーバーで区別される場合があります。
アップロード前は表示されていた画像が出ない!?
そんなときは大文字・小文字問題かもしれません。

****************
マナー
人として当然のマナーはもちろんですが、
著作権などは気をつけなければいけません。
イラスト、写真、文章などを自分のページに無断で利用するのはいけません。
利用するときは著作権者の許可を得たり、引用先を明記したりするのがマナーで、
もし万が一、掲載済みのものに物言いが付いたらお詫びして即刻削除しましょう。
他人のサイトへのリンクは法律的には問題ないようですがやはり一言伝えましょう。

****************
役立ちリンク
私自身も初心者です。まだまだ臀部に青さが残ります。
しかし、そんな私でもホームページを作ってみよう!と思い立ち、
満足とは言いかねますがこのように自分のページを公開できました。
それはひとえに無料で色んなページ作成のノウハウを授けてくれた
とてもありがたいサイト様のおかげです。
これからサイト公開を志すならば是非お立ち寄り下さい。
きっと暖かく迎えてくれるでしょう。本当に感謝です!
色んなサイト様をあっち行ったりこっち行ったり(失礼)でかなりのものができそうな気になってます(笑)


みんなのタグ辞書
HTMLタグを解りやすくシンプルに解説。HTMLタグ小技・雑学も豊富にあります。
ちょっとしたタグを探すのに何度も使ってしまうサイトです。


メモ帳で作れるシンプルなhtmlの研究をなさっているサイトです。
掲示板も助かりましたしずいぶんとお世話になりました。


JavaScript・DHTML・スタイルシートなどの高度な技をコピーペーストだけで利用できます。 管理人さんもお若い!


ホームページから優しい気配が漂ってます。管理人さんのお人柄でしょうか?(笑)
WEBCLICKERS.NET
アクセスアップの切り札!効果は劇的なのに無料!
お互いのページの見せあいっこのようなシステムです。
よそのサイトを見た分だけ訪問があります。
このバナーから登録すると最初から100アクセスプレゼントされます。

SEO [PR] おまとめローン 冷え性対策 坂本龍馬 動画掲示板 レンタルサーバー SEO