NPO法人 eふぉーらむのブログ

ウェブサイト作成講座（その１２）ブラウザで表示する

eforum21 — Fri, 17 Feb 2012 06:15:56 +0000

作成したHTMLファイルをブラウザで表示してみましょう。保存したHTMLファイルをダブルクリックするとブラウザ（Internet Explorer等）で表示されます。

または、ブラウザを起動してから [ファイル(F)]→[開く(O)...]→[参照(R)...] で、

表示したいHTMLファイルを選択して [開く(O)] ボタンを押してください。

〜に記述した文字列の表示が確認出来ます。

これで、とりあえずは、ホームページを作ったということになります。

ただし、超小さい最初の一歩ですが、、、。

↑↑コチラのボタンを”ポチッ”と応援クリックお願いします。

ウェブサイト作成講座（その１１） HTMLファイルの作り方

eforum21 — Tue, 14 Feb 2012 07:20:18 +0000

HTMLは、テキスト（文字列）のみで構成されています。

ここに好きなタイトルを書いて下さい

ここに内容を書いて下さい。

自由に文字列を書いてみましょう。

上のソースコードの～までをコピーして下さい。
デスクトップに戻り右クリックでメニューを開き、新規作成からテキストドキュメント（普通のメモ帳）を選んで下さい。
ファイルを作ったら、先ほどコピーしたソースコードを貼りつけて上書き保存して下さい。
これがHTMLファイルになります。

HTMLファイルを作ったとき、どんなファイル名にすればいいか迷ってしまう場合があります。
ここでHTMLのルールを一つ。

HTMLファイルの拡張子は“.html”です。

テキストファイルを作成して、拡張子を「.html」に変えるだけ

そして、インターネット上に公開するウェブサイトのトップページとなるファイル名は、必ず“index”インデックスという名前で作って下さい。（必然的にindex.htmlというファイル名になります。）

トップページ以外のファイル名は、半角英数字であれば何でも大丈夫なのですが、トップページだけは“index.html”にしなければなりません。

↑↑コチラのボタンを”ポチッ”と応援クリックお願いします。

ウェブサイト作成講座（その１０）　ドキュメントタイプの宣言

eforum21 — Thu, 09 Feb 2012 07:28:05 +0000

はタグではないです。

HTMLは、バージョンごとにそのバージョンで使用できる要素（タグ）や属性の名前と、それらの配置の方法について厳しく決められています。

はHTML 文書ファイルの先頭に記述し、その HTML ファイルで使用している HTML のバージョンを宣言します。

HTML 4.01 Strict の場合

“http://www.w3.org/TR/html4/strict.dtd”>

HTML 4.01 Transitional の場合

“http://www.w3.org/TR/html4/loose.dtd”>

HTML4.01 Frameset の場合

HTML5 の場合

この宣言でCSSの反映とかに影響があることもあるようです。

↑↑コチラのボタンを”ポチッ”と応援クリックお願いします。

ウェブサイト作成講座（その９）ヘッダー情報について

eforum21 — Tue, 07 Feb 2012 03:42:16 +0000

ヘッダー（〜の部分）に記述する情報はSEO（検索エンジン最適化）の観点からも重要です。

↑↑コチラのボタンを”ポチッ”と応援クリックお願いします。

ウェブサイト作成講座（その8）HTMLの基本構造２

eforum21 — Fri, 03 Feb 2012 02:30:42 +0000

その６で必要最低限のソースコードを記述しましたが、
HTMLの構造を理解することが大切なので復習します。

HTMLは大きな箱をイメージすると分かりやすいと思います。
HTMLと書いてある大きな箱の中にHEADと書いてある箱と
BODYと書いてある箱があるイメージです。
その箱の中身を詰めていく事がウェブサイトを作成するというコトになります。
この画像を見てからソースコードを見るとheadやbodyが発見出来て、
HTMLの構造が理解出来ると思います。

↑↑コチラのボタンを”ポチッ”と応援クリックお願いします。

ウェブサイト作成講座（その７）TeraPadのインストール

eforum21 — Tue, 31 Jan 2012 02:21:01 +0000

TeraPadとは無料のテキストエディタです。

以下のURLからダウンロード可能です。

http://www.forest.impress.co.jp/lib/offc/document/txteditor/terapad.html

動画を参考に設定してみて下さい。

メモ帳よりも便利に使えると思います。

↑↑コチラのボタンを”ポチッ”と応援クリックお願いします。

ウェブサイト作成講座（その６）HTMLの基本構造

eforum21 — Mon, 23 Jan 2012 06:26:15 +0000

HTMLの基本ベースは以下のようになります。

～

～

これがホームページのすべての要素を取り払った必要最低限の骨組みです。

この時点でも～内にデータを記述すればブラウザで閲覧する事が出来ます。

それぞれの意味は以下のとおりです。

html要素：～の部分。

その範囲の文書がHTML形式で記述されていることを宣言します。

head要素：～の部分をヘッダと呼びます。

文書の情報を示す範囲です。（基本的にこの中に書いた情報はブラウザには表示されません）

ヘッダ部にはページタイトルや、またブラウザ上では表示されない情報（）などを記述します。

～部分にタイトルを書きます。

このタイトルはブラウザのタイトルバーに表示され、また検索エンジンの検索結果として表示されるので必ず記入しましょう。

body要素：この中に書いた情報がブラウザに表示されます。

↑↑コチラのボタンを”ポチッ”と応援クリックお願いします。

ウェブサイト作成講座（その５）動画講座の紹介

eforum21 — Thu, 19 Jan 2012 00:59:54 +0000

ウェブサイト作成に関する知識や技術は必須ですが、ウェブサイトを作って「何をしたいのか？」はもっと大切です。

以下の動画では、ホームページで収入を得る仕組みに注目して説明がされています。

ウェブサイト作成に関する解説は今後も続けていきますが、全体像（最終目標）を把握することも大切なので紹介しました。

具体的な作成の流れというよりは、ウェブサイト作成の目標設定とその方法を学んでみて下さい。

↑↑コチラのボタンを”ポチッ”と応援クリックお願いします。

ウェブサイト作成講座（その４）HTMLのソースコードを見る

eforum21 — Tue, 17 Jan 2012 06:43:42 +0000

ブラウザメニューの「表示」から「ソース」（または右クリックメニューの「ソースを表示」）を選んでみて下さい。

ソース（source)というのは情報などの出所。情報源を意味する言葉です。

沢山の文字が並んだテキストファイルが表示されたはずです。

これが表示されているページのもとになる文字列です。

コンピューターがこの文字列を読み取って、自動的に画像を表示したり、文字に色を付けたり、フォントを変えたりしてくれます。

この文字列の中に“<”と“>”でくくられているタグを見つける事が出来ると思います。

これこそがHTMLです。

文字列の一番上の辺りにという文字列があると思います。

これを「宣言」と言い、『ここからHTML文法を始めます』ということをコンピューターに知らせています。

このタグの中の命令には様々な種類があり、それをいくつも使ってHTMLを作っていきます。

↑↑コチラのボタンを”ポチッ”と応援クリックお願いします。

ウェブサイト作成講座（その３） HTMLに関するウェブサイト

eforum21 — Fri, 13 Jan 2012 05:41:46 +0000

HTMLに関するウェブサイトを紹介します。

初心者のブログ作成 HTML研究所！

http://www4.plala.or.jp/htmltag/

HTMLのタグを完璧に覚えるというのではなく、使用するHTMLタグの効果を理解するようにして下さい。

使用頻度の高いタグは必然的に覚えてしまうと思います。

言葉と一緒ですね。

HTMLタグ使い方（メモ帳の使い方・コピー・貼り付けのやり方について）
http://www4.plala.or.jp/htmltag/newpage58.html

を参考にして、HTMLタグ練習ページでHTMLタグの結果（効果）を確認してみて下さい。

メモ帳の使い方

メモ帳はお使いのＰＣ（Windowsの場合）のスタート>>プログラム>>アクセサリー>>メモ帳で出せます。

メモ帳を起動したら書式の設定を右端で折り返すにしておくと便利です。

↑↑コチラのボタンを”ポチッ”と応援クリックお願いします。

NPO法人 eふぉーらむのブログ

ウェブサイト作成講座（その１２）ブラウザで表示する

ウェブサイト作成講座（その１１） HTMLファイルの作り方

テキストファイルを作成して、拡張子を「.html」に変えるだけ

ウェブサイト作成講座（その１０） ドキュメントタイプの宣言

ウェブサイト作成講座（その９）ヘッダー情報について

ウェブサイト作成講座（その8）HTMLの基本構造 ２

ウェブサイト作成講座（その７）TeraPadのインストール

ウェブサイト作成講座（その６）HTMLの基本構造

ウェブサイト作成講座（その５）動画講座の紹介

ウェブサイト作成講座（その４）HTMLのソースコードを見る

ウェブサイト作成講座（その３） HTMLに関するウェブサイト

初心者のブログ作成 HTML研究所！

メモ帳の使い方

ウェブサイト作成講座（その１０）　ドキュメントタイプの宣言

ウェブサイト作成講座（その8）HTMLの基本構造２