HTMLの基本的な構造

1月 19th 2012

ホームページのタグをいくら覚えても使い方をわかっていないとどうにもなりません。

やはりまずは、HTMLの基本をマスターしておきましょう。

 

HTMLの基本的な構造は

 

<div class=”sample”>よろしくお願いします。</div>

 

div　→要素名

sample　→値

<div class=”sample”>　→開始タグ

</div>　→終了タグ

よろしくお願いします。　→要素内容

 

 

このようになります。

 

こんな風にHTMLタグが形成しているかたまりのこと要素と呼びます。

要素はブロックレベル要素とインラインレベル要素の２つに大きく分類されています。

他の要素を内容に含めることができるのかは決まりごとがあります。

例えば、インラインレベル要素の中にブロックレベル要素を入れたりすることはできないのです。

 

 

ブロックレベル要素は、見出しや段落などひとつのまとまりを構成する要素です。

「ul,table,p,ol,h1～h6,div,center,menu」などです。

 

インラインレベル要素は、文字と同じレベルで扱う要素です。

「a,font,iframe,img,small,spam,strong」などです。

 

HTMLタグを並べて文章の論理構造を示すものでツリー構造のかたちになります。

通常は<html>タグの下には<head>タグと<body>タグがあり、<body>タグの下にはその文書に応じたツリー構造が展開されます。

 

このツリー構造で１番外側にある要素を親要素といいます。反対に親要素からみてその内側ぶ含まれる要素は子要素になります。

親要素の中に子要素が展開されているのです。ツリー構造の出発点であるhtml要素はルート要素といいます。

またＨＴＭＬ文書の中で使用するタグや要素名、属性、スタイルシートの設定などは大文字や小文字の区別をしませんので大文字でも小文字でもいいのですが、ＸＨＴＭＬがすべて小文字で各ことを定義しているのでこれからは小文字で表記することを心がけましょう。

 

おすすめサーバーは、クラスC分散サーバー！！

by ホームページビギナー


コメントは受け付けていません。

見出しタグについて

11月 22nd 2011

ホームページタグ　今回は見出しタグに関してです。

見出しタグは、自分の作成したホームページを上位表示させるためにもとても大事なタグになります。

見出しタグはh1～h6まであって、大見出し、中見出しなどと呼ばれています。

大見出しのh1タグはそのページで1回しか使用できません。

見出しは名前のとおり、タグの羅列をわかりやすくするために、ここはこの内容について書かれてあるという見出しに使います。

本と同じ理屈です。

また、自分のホームページがヒットしたいキーワードを見出しに含めるようにすることはホームページの上位表示のテクニックにひとつになります。

 

数字が小さいほど重要な見出しとなります。

このホームページはこの内容について書かれているのですよと検索エンジンのクローラーに情報収集してもらうために重要になってきます。

 

見出しタグを設定するには<body>と</body>タグのなかに<h1>●●●●</h1>と記述します。

その際に、例えば自分のページが「料理　レシピ」で上位表示したいと考えているのならば、<h1>料理のレシピ大全集</h1>となります。

 

中見出し、小見出しはいくつ使用しても構いません。

 

これだけがタグを使用する上でのSEO対策になるわけではありませんが、タイトルタグや、メタタグ同様、とても重要になるので、覚えておいてくださいね。

by ホームページビギナー


コメントは受け付けていません。

文法をチェックしましょう。

9月 28th 2011

ネットサーフィンしていると、本当にいろんなホームページがあります。
これは訪問した人がわかりやすいページだなとか、見た目のデザインがとってもキレイで素敵なホームページだなとか、コンテンツの内容がとても良いのに、デザインがいまいちだかな・・・とか、いろいろあなたもいろんなサイトをみて感じていることでしょう。
自分のホームページを客観的に見ることはとても大事です。
自分では良うホームページだなと自己満足しているだけではいけないと思います。

またホームページのタグを自分では合っていると思いこんで使用してしまうことも多々あります。
一度目を通して、これでOKと思っていても間違ったタグを使っていることも結構あります。
HTMLの文法が合っているのかどうかを確認してくれるサイトがありますので、利用するのもいいですね。

http://htmllint.itc.keio.ac.jp/htmllint/htmllintl.html

こちらで文法のチェックができます。
あなたのホームページを採点してもらいましょう。
いかがでしたか?
100点満点とまではいかないとしても、マイナス●点なんてことのないようにしておきたいものですね。
今の時点でのHTML文書はW3CによってHTMLの仕様が変更になる可能性がありますので、現在使用できているタグが使えなくなるなんてこともあります。
ですから自分が作成したHTML文書は文法的にはどうなのか？もしかしたら推奨されていないタグを使って作成しているかもしれません。

検索エンジンによってはHTMLタグが間違っていると正しし情報として収集されない場合もあります。
もちろん、ブラウザのよってもホームページの表示がおかしくなっている場合も。
一度あなたのホームページもチェックしてみるといいですね。

by ホームページビギナー


コメントは受け付けていません。

タグの整理

7月 27th 2011

インターネット利用者が増加し、ホームページも大幅に増えつつある今日、ホームページを作成する側にとってもデザインや使いやすさなど利用者にわかりやすく訪問、利用してもらえるホームページ作りが求められている。
今では、こったサイト作りをされる方が増えていますので、CSSやJavascriptは必ずといっていいほど必要です。

HTMLにはたくさんのタグが羅列されていますが、検索エンジンが情報を収集するときに、ページの冒頭にJavascriptやCSSの内容が記述されていますと、コンテンツまで読み込みのに時間がかかってしまう。
JavascriptやCSSは外部化することによって検索エンジンにきちんと登録されるようにしておくことが大事になってくる。

HTMLタグでデザインの部分を指定してあげても本来は構いませんが、スタイルシートを外部化することで、ホームページの更新などの作業がぐっと簡単に行える。
たとえば、見出しのタグを指定して、その部分のカラーを全ページ違う色にしたいなと思ったら、スタイルシートで指定してあげれば、全ページの書換は不要となってくる。
検索エンジン対策だけでなく、ホームページを維持更新する作業のことも考え、JavascriptやCSSは外部化して一括して管理が行えるようにしましょう。

タグをきれいにする整理するということも頭の中に入れておくといいですね。
また、出来上がったHTMLを確認してムダなタグや必要のないタグがないか整理することも大事です。タグを一度見直してみましょうね。

by ホームページビギナー


コメントは受け付けていません。

本を利用

5月 30th 2011

ホームページのタグについていろいろ書いていますが、すべてのホームページを作成するに必要なタグを覚えるのはとても大変です。
なにしろ数も相当数ありますし、すべて丸暗記して覚えるという必要はありません。
もちろん、一通りのタグの使い方やそのタグを並べることでどんなことが出来るのかを知っておくことはとっても大事なことではありますが、すべてを使いこなしている方はホームページ制作を仕事にしていらっしゃる方でもいないそうです。
主要なタグ、頻度の高いタグは覚えてしまった方が作業はスムーズにはかどると思いますが、滅多に使わないようなタグはこういうことをしたいんだけど・・・・と思ったときにいろいろ使ってみて覚えていけばいいと思います。
以前にご紹介したホームページの作り方やHTML・スタイルシート関連の書籍を一冊用意して、またいまはインターネットにはたくさんの情報がありますので、ほとんどのことは検索エンジンで検索すると欲しい情報が見つかると思います。
基本的にホームページを作るのに、お金はほとんどかかりませんね。
ブラウザとテキストファイルとそのファイルをアップロードするソフトさえあれば誰でも作成することが可能です。
とくに、高額なソフトを購入しなくてもタグを覚えて並べて記述すればいいだけです。
今このサイトを閲覧していらっしゃる方ならOKなわけです。
なんだかホームページの制作なんて難しそうなんて、よく言われますが、構造さえ理解できればあとはマスターしたタグを記述するだけで簡単なんですよ！

by ホームページビギナー


コメントは受け付けていません。

目的意識

3月 15th 2011

ホームページのタグを覚えて、HTMLを作成するということは、勉強することで誰にでも出来ることですね。
ただ、ホームページのタグを覚えるよりも大事なこともあるかと思います。
あなたがホームページを公開したいと思ったのはどのような理由からでしょうか。
自分の趣味を誰かに見てもらいたい。
誰かと交流を持ちたい。
何かを記録として残したい。
ネットショップを持ちたい。
理由はいろいろあるかと思います。
最近、大学受験の試験問題で掲示板で質問をして大きな社会問題となった事件がありましたね。
そういった問題は、インターネットとどのように付き合っていくべきか改めて考える良い機会になったと思います。
インターネットはとても便利なものでたくさんのホームページの中からたくさんの情報を得ることが出来ます。
良い面はもちろんたくさんあるのですが、情報の扱い方はとっても慎重に行うことが必要です。
あたなの発信した情報は、世界中の誰もが見ることができるわけですね。誰が見ているのかわからないということです。
そういった自覚を持ってホームページを作成すいることを心にとどめておく必要があるかと思います。
インターネットは楽しいものですが、反対に怖いものだということは頭に入れておくべきでしょう。
閲覧する側でなく情報を発信する側となるなら、責任もつきまといます、
言論の自由を勘違いして情報を発信することでトラブルが生まれることも。
自分の公開する内容には責任を持たなくてはいけません。
ホームページのタグも大事ですが、今一度そのことを考えてみてくださいね。

by ホームページビギナー


コメントは受け付けていません。

スタイルシート

1月 12th 2011

現在ではHTMLとデザインの部分はスタイルシートに記述するのが一般的になっていますと前回も少しお伝えしましたが、HTMLには本来公開したい情報を効果的に伝えるために、そのホームページの構造の部分をきちんと記述します。
そのHTMLに、色などのデザインの情報を記述すると情報がはっきりしなくなってしまいます。
ですからスタイルシートにデザインの部分を記述して定義することでHTMLを簡潔にしきちんとした情報を提供することができます。
また検索エンジンのロボットにも情報を読み込んでもらうのにも効果的です。
またスタイルシートに定義したデザインの部分の内容はどのファイルにも適用できますので、何回もHTMLに記述する必要もなくなりますし、ホームページ全体に統一したデザインを構築することも可能で、ホームページを更新する作業も簡単に出来るようになります。
また、スタイルシートに記述することでより多くのデザインなり表現を作り出すことも可能です。
ホームページの持ち主はもちろん、訪問者にも利用しやすくなると思います。
外部ファイルによってスタイルを記述する場合、そのファイルはテキストファイルであって.cssという拡張子を使用します。
外部ファイルによるスタイルシートを利用する場合にはhead内の要素に記述します。
その場合のタグは、

などと書き込みます。
このようにlinkの要素を使用することで、外部ファイルをwebで読み込むことが可能です。
読み込まれたスタイルシートがHTMLに適用されることでデザインが反映されます。

by ホームページビギナー


Category: CSS
コメントは受け付けていません。

本の紹介

11月 12th 2010

こんにちは。
ホームページを作成しようと思ったら、HTMLやスタイルシートの基本をまずは理解することからはじまりますが、みなさんはどうやって勉強していますか？
インターネットで検索すれば、様々なホームページの作り方や、タグなんかの説明もしてありますね。
なんでも、検索すればわかる時代ですが、私はやはり、気に入った本を一冊手元においておくことをおすすめします。

今回は初めてホームページを作成するにあたって、HTMLとは？スタイルシートとは？タグって何？という初心者の方におすすめの本をご紹介します。

現在ではHTMLとデザインの部分はスタイルシートに記述するのが一般的になっています。
ですから、それに対応した本がいいですね。

「ホームページ作成マスターブック HTML&スタイルシート基本編 改訂第2版」
この本はホームページを作成するのに必要な知識、HTMLとスタイルシートの基本がわかる一冊です。初心者の方に1からホームページ作りを支援してくれます。ホームページ以外にもブログやアフィリエイトのことにもふれていますので参考にしてみてくださいね。
順を追って、説明されていますので、大変わかりやすく親切な本だと感じます。
基本となる部分はすべて書かれていますので、はじめてホームページを立ち上げようと思った人にも本のとおりにしていけば、ホームページを作成して公開することができるでしょう。
おススメの本です。
どうぞ参考にしてみてくださいね。

by ホームページビギナー


コメントは受け付けていません。

「class属性」

9月 13th 2010

こんにちは。

今回は<div>についての説明です。

ホームページをレイアウトするには、スタイルシートで指定してあげますが、その際、HTMLで<div>タグを使用します。

そして　class　で名前をつけて、スタイルシートにデザインしてやります。

例えば「サイドバー」のデザインを指定するとします。

その場合は、

<div>見出し</div>とHTMLで記述します。

スタイルシートには、

.sede{

width : 752px;

background-image: url(‘img/side.gif’);

color: #666999;

}

などと指定します。

この場合は、幅は752pxで画像はimgファイル内の「side.gif」を、文字の色はカラー666999というデザインということになります。

スタイルシートに記述する場合は

.sideのように始まりに「..」をつけ好きな名前（クラス名）をつけます。

「｛｝」の中にはデザインのすべてを記すことで、それぞれ<div>へと反映されるわけです。

そのつけた名前と同じものを、HTMLには「<div」とクラス名を記し、「”  “」内に入れて指定します。

そうすることで、デザインの同じものは同じクラス名で呼び出してあげれば、いいですし、違うのであれば、それぞれのクラス名でデザインを指定してあげて、それぞれ呼び出してあげることになります。

今ではデザインはスタイルシートに記述することを推奨していますので、このようにデザインの部分はスタイルシートで記述してそれぞれをHTMLで呼び出す方法が一般的です。

「id属性」は同じページに何回も使用することはできませんが、「class属性」は何回使用しても構いません。

使用頻度によって、id属性とclass属性を使い分けて、上手にホームページをデザインしてあげましょう。

by ホームページビギナー


コメントは受け付けていません。

ホームページタグ　　meta name=”robots”

8月 6th 2010

先日はホームページのタグの基本構造をお伝えしました。
それぞれのタグにはどんな意味があるのか、そこには何を記述するのかを簡単にお伝えしておりましたが、今回は、<head>～</head>の<meta>タグで検索エンジンに呼びかける方法をお伝えします。

検索エンジンとはYahoo！やgoogleなどのサイトになります。
それぞれ独自のロボットをしようしてホームページの情報を収集していきます。
ですから、<META>タグにはURL収集の可否や、キーワードを指定したり、このサイトの紹介をしたりすることができます。

それでは、ホームページのインデックス登録をしてもらいたいまた、してもらいたくないという告知の方法をご紹介します。

<meta name=”robots” content=”index,follow”>
このページを登録します。ページ内のリンク先を巡回します。
※もちろん、特に何のシ指定もせずにいた場合は同様の設定となります。

<meta name=”robots” content=”noindex,follow”>
このページを登録しません。ページ内のリンク先を巡回します。

<meta name=”robots” content=”index,nofollow”>
このページを登録します。ページ内のリンク先を巡回しません。

<meta name=”robots” content=”noindex,nofollow”>
このページを登録しません。ページ内のリンク先を巡回しません。

これらの検索エンジンの巡回に対するメタタグが記述されていない場合は、<meta name=”robots” content=”index,follow”>
と同じく、すべて巡回してくれるわけです。

しかし、この記述も絶対とは限りません。
私のサイトでも無視して登録されているもの過去にはありました。
現在では性能もよくなってきているので、どうかはわかりませんけどね。

by ホームページビギナー


コメントは受け付けていません。