HOMEへ   ホームページを作ろう |レンタルサーバいろいろ
TOPB B SScriptPCMY-LOG
Click Here!

作 成

作 成 2

基礎知識

装 飾 術

<<前へ  |1234567891011121314151617|  次へ>>

★月々263円からオンラインショップを運営!高機能カート・クレジット決済が簡単導入 [PR]

● マークアップ

具体的にHTMLファイルとはどのような物なのでしょう?。
このページ上で右クリックをし、『ソースを表示』(I.Eの場合) というのを選んでみてください。 『メモ帳』というアプリケーションソフトが開き、文字の書かれたウィンドウが表示されます。
その内容は『<』『>』という記号とアルファベットで構成される『タグ』と、 それに、このページの記事そのままの文字が書かれているでしょう。
この開いているファイルが、ウェブページを表示するために創られたデータ(『ソース』という)であり、 コレと同じようなものを作れば、ウェブページを表示するためのデータになるということです。
これが、HTMLファイル (HyperText Mark−up Language)と呼ばれ、 ウェブページとして表示されているデータです。

このファイルとは、テキスト(ワードや一太郎などで加工されていない素の状態の文字)データに 『タグ』と呼ばれる印付け(マークアップ)を行って作成されたファイルです。
つまり、文書の構造や修飾を決めるための印を付けた、単なるテキストファイルなのです。
(このような記述言語をマークアップ言語といいプログラム言語とは分けて考えられています。 そのため、HTMLの記述はプログラミングとは言えないようです。) また、ウェブサイトの公開はHTML文書(ウェブページ)の出版という考え方がされて、 HTMLは、World Wide Webで使われる出版用の言語とされています。

では、このようなファイルを実際に作るにはどうしたらよいのでしょう。 HTMLファイルはワードや一太郎を使って文書を書き、 それぞれの『名前をつけて保存』にある保存形式で、『web形式』とか『HTML形式』で保存すれば、 それが、ウェブページ(web公開)用のファイルになります。
※ただし、一太郎やWORDはあくまで文書作成ソフトであり、HTML書き出し機能は付録だと思って下さい。 ソースがあまりにもお粗末で、ウェブサイトに公開するには適していません。
それ以外にもホームページ作成にはそれ専用のアプリケーションソフトが販売されていますが、 ウェブページはWindws付属のメモ帳でも簡単に作成することができます。
今度は、メモ帳を起動させ、以下の三行をメモ帳にコピーしてみてください。
=≫メモ帳について /  =≫コピーについて

Yahoo! JAPAN http://www.yahoo.co.jp/

Vector http://www.vector.co.jp/

gooの便利ツール http://dictionary.goo.ne.jp/cgi-bin/ej-top.cgi

これを適当な名前・・・『home』とでもして保存します。
そして、このファイルの拡張子『txt』を、『html』(『htm』でも可)に書き換え『home.htm』とすればブラウザで開くことができます。
=≫拡張子について
なお、一度作成したファイルを編集するには以下のようなやり方があります。
もう一度拡張子をtxtに戻し、メモ帳で開く
メモ帳を立ち上げ、ファイルメニューの『ファイルを開く』から、 『すべてのファイルを選ぶ』にし『HTMLファイル』を選択する
ブラウザで開いて右クリックメニューの『ソースを表示』(I.Eの場合)でファイルを開き編集する
ブラウザの設定より、編集ボタンを表示さて、 そのボタンでファイルを開き編集する=≫編集ボタン
編集後は上書きをし、(拡張子を元に戻した後)ブラウザの『更新ボタン』(F5)を押せば、 すぐに編集後のデータで表示されてページを確認できます。

.htm.html
この拡張子はそのファイルの規格HTMLから来ていることは一目瞭然だと思います。 ただ、昔のパソコン(MS-DOSやWindows 3.1)は拡張子が3文字と決まっていたため『.htm』ができてしまいました。
しかし、HTMLを記述したファイルは、ファイル内でHTMLであることを宣言しており、拡張子は特に定められているわけではありません。 ただ、検索サーチンの検索ターゲットが、htmやhtml (あとpdf、txt、cgi、phpもかな)など、決められたファイルだけの可能性があります(未確認)。 コレを逆手にとって、検索に引っかけたくないページを、 ワザと違う拡張子にするという方法もあるのかもしれませんが、成功したら教えてください(笑。

さて、作成したファイルはいかがでしょう?
・・・こんなのでは何の役にも立たないですね。
しかし、ガッカリしないでください。
ここで肝心なのは『メモ帳で書いた文字を、ブラウザで表示させられた』ってことでなのです。

・・・本当のホームページ

HTMLファイルに記述される『タグ』は、 『<』『>』という記号と、アルファベットで記された『要素』、 その要素に付加する情報項目を『属性』、 その属性に設定される値『属性値』によって成り立ち、 意味が与える記事やイメージである『内容』を囲むようにマークします。
※属性や内容は必要に応じて使用します。全てのタグに必ずあるものではありません。

○タグの記述
<要素 属性="属性値">・・・内容・・・</要素>
※左側を開始タグ、右側の『/』が付いたタグを閉じタグまたは終了タグと言います。

もし、このタグが無ければたとえ記述上は改行していても、ブラウザでの表示では改行されることはありません。 改行が必要ならば改行を意味するBR要素(Breakの略)を 『<』『>』という記号で囲んだ 『<BR>』を改行箇所に記述しなければなりません。
※BR要素は改行を意味するたけなので内容がありません。
先ほど 作成したファイルでは、この改行記号が無かったためあのように表示されたのです。
ではこれをマークアップして少でもウェブページのようにしてみましょう。 リンクを設定する要素は『A』であり、 そのリンク先を『href』属性で設定して以下のように記述します。
※なお、ここでは要素を大文字で書いていますが、小文字でも何の問題もありませんし、 属性を小文字で書いていますが、大文字でも何の問題もありません。 見分け易いからです。ただし、XMLでは要素も属性も小文字で記述することとされています

Yahoo! JAPAN<BR>
<A href="http://www.yahoo.co.jp/" style="font-style:italic">http://www.yahoo.co.jp/</A><BR>
Vector<BR>
<A href="http://www.vector.co.jp/" style="font-style:italic">http://www.vector.co.jp/ </A><BR>
gooの便利ツール<BR>
<A href="http://dictionary.goo.ne.jp/cgi-bin/ej-top.cgi" style="font-style:italic">http://dictionary.goo.ne.jp/cgi-bin/ej-top.cgi </A><BR>

このように編集することで、 こんな感じになります。
このようなページをブラウザの『ホームページ』に設定すると、便利な『ホームページ』になるのではないでしょうか(笑?
※実際、こういうのを作成するフリーソフトがいくつか有りました。
vector』サイトから( リンクページ参照)=≫『Windows』または『Macintosh』=≫『インターネット&通信』=≫『Web用ユーティリティ』=≫『ブックマーク&お気に入り
・・・を探せばありますので、興味のある方は探してみてください。

<<前へ  |上へ|  次へ>>
1234567891011121314151617

中古スマホ・ガラケーなどのモバイル製品をお探しなら電脳プラザで!
 
常時2,000台以上の在庫を取り揃え!最短即日出荷に対応!

TOP] [HOME

更新日時:2014/08/09