HTML言語でホームページを作ろう

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
  • 0
ネットで稼ぐための実践講座年間30,000円稼げる!「LV1 ネットで稼ぐための第一歩」へ
この記事の所要時間: 731

HTML言語でスキルアップ

無料ブログやWordpressなどのCMSは
本文の文章を書くだけで記事を載せたホームページが完成します。

しかし、雛形のテンプレートの仕組みが分かっていれば、
自分の無料ブログやWordpressをカスタマイズして、
好きなレイアウトに構成することも可能です。

HTML言語をひとつひとつを理解し、習得していくことは
自分自身のスキルアップにつながりますし
SEO(検索エンジン最適化)をより理解することが可能です。

さらに、お小遣いを稼ぐためにも重要な事です。

最終的にはHTMLとCSSを利用してメモ帳で
ホームページをかけるくらいにスキルアップを狙いましょう

HTML言語の初歩

HTML言語は、ページの構造や性質を表していきます。

簡単に説明すると、文字を太くしたい場合は
<b>お小遣いを稼ぐ</b>
と記述します。
すると、ホームページでは「お小遣いを稼ぐ」と太くなります。

この記述を太くする<b>をbタグ、b要素といい、
また<b>を開始タグ、</b>を終了タグといいます。

さらに、リンクを行いたい場合は
「<a href=”https://pointgetmoney.com”>ネット副業でお金を稼ぐ</a>」
と表記すれば
ネット副業でお金を稼ぐ
とホームページでは表現することができます。
このリンクは、当サイトトップへのリンクを表しています。

このときa要素の中にあるhrefを属性といいます。

HTMLの表記は、特定要素内でしか使えないタグがあります。

例えばtitle要素のタグは、head要素の中でしか使えません。

HTML言語は、マークアップ言語とも呼ばれていて
この要素と属性をあわせたタグを使って
色々なページを作っていくことができます。

一般的なHTMLの構造

<!DOCTYPE><html><head>

(ページの設定を記載する…head要素)

</head>

<body>

(ページの内容を記載する…body要素)

</body>

</html>

一般的なページのHTMLの構造はこんなかんじになっています。

一番最初の!DOCTYPEはDOCTYPE宣言と呼ばれていて、必ず一番上に記述します。

以前のHTML4以前は、DOCTYPE宣言に
・Strict(厳密型)
・Transitional(移行型)
に分かれていましたが、

現在のHTML言語の主流はHTML5では、DOCTYPEと宣言するだけで、
このページはHTML5に対応していることがブラウザに伝わるようになっています。

現在の主流はHTML5ですが
2016年移行はHTML5.1が使われるようになります

HTMLを勉強して、スキルを上げることがお小遣いを稼ぐためにも必要です

続いて、head要素とbody要素で使われるタグについて説明しましょう

head要素で使われるタグ

head要素にはそのページの設定を行います。
大きく分類すると

  • title要素
  • meta要素
  • link要素
  • script要素

に分けることになります。

(1)title要素

title要素は、まさにページのタイトルなので
ページごとに設定します。
検索結果でもタイトルが表示されるので
要素の中でも一番大事な要素になりますので
検索キーワードを含めた上でよく検討します。
<使用方法>

<title>HTML言語でホームページを作ろう</title>

(2)meta要素

ページの詳細とキーワードを主に指定します。
ページの詳細が記述されていれば、
検索結果にタイトルとともに表示されます。

最近ではname属性にkeywordを設定し
検索キーワードを羅列する方法は
スパムとみられる可能性が高いため、
最近では重要視されなくなっています。

<使用方法>

<meta name="description" contennt="サイトの詳細を記述">

(3)link要素

rel属性の中身をstylesheetにすることで
外部のCSSを利用することができるようになります
<使用方法>

<link rel="stylesheet" href="default.css" type="text/css"/>

(4)script要素

Javascriptを利用したいときに使います
<使用方法>

<script type="text/javascript" src="test.js">

body要素で使われるタグ

(1)div要素

div要素は「コンテンツの一部をブロックとして定義する」
のでサイトのレイアウトをCSSと組み合わせて構成する上で
もっとも重要な要素になります。

div要素と次のp要素は似て異なる動きをしますので
サイトのコンテンツのレイアウトを構成する上で
div要素をお使いください。
<使用方法>

<div> </div>

<DIV>タグと<P>タグ
⇒divを用いたページレイアウトの例
⇒twitterのbootstrapのレイアウト例

(2)p要素

コンテンツ本文の段落に使用します。
<使用方法>

<p> </p>

(3)br要素

改行を意味します。
終了タグがないので /(バックスラッシュ)を入れます
<使用方法>

<br />

(4)hx要素

h1タグはコンテンツの大見出しに使います。
h2タグからh6まであります。

hxタグはSEO上最重要になるタグです

h1タグだけはページで1つしか使えません
注意してください

titleタグと全く同じにしてしまうと
スパムになる傾向が強いので、ある程度工夫します。

h2タグやh3タグは多用しても問題ありません

<使用方法>

<h1>sample</h1>

(5)strong要素

意味通り、「強調」を意味します。
同じb要素は「bold」を意味しますので、推奨しません。
当サイトでは、太字にすることで閲覧者が見やすくなるので
ユーザビリティの観点から使用しています。
<使用方法>

<strong>sample</strong>

(6)img要素

画像を挿入したいときに使用します。
alt属性にキーワードを入れることで
検索エンジンに画像の内容を教えることができるので
SEO的には良い結果が生まれるそうです
<使用方法>

<img src="" alt="" />

(7)箇条書き要素

CSSと組み合わせることで
表やレイアウトなど多彩に使えます。
<使用方法>

<ul>
<li>sample</li>
<li>sample2</li>
</ul>

(8)テーブル要素

コンテンツの本文に表が必要なときに
使います。
<使用方法>

<table>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

HTMLを更に知ろう

HTML言語の情報を解説していくと
1つのコンテンツが出来てしまうほど莫大な量があります。

このページでは基本的なことだけに触れています。

HTMLの詳細を知るために
とほほのWWW入門
HTML5とCSS3の辞典[やさしいタグ入門辞書]

基本的に使うタグは決まってくるため
すべてのタグを覚える必要はありません。

これからWebサイトを構築してお小遣いを稼ぐためにも
どんなことができるのを知るためにも見ておいたほうが良いと思います。

レンタルサーバーを借りなくても
メモ帳さえあれば、HTMLの勉強は
自分のパソコンで、できるので
やってみてはいかがですか。

■ 次ページCSSの基本を知ろう

アフィリエイトに戻る

スポンサーリンク

モッピー
モッピー!お金がたまるポイントサイト

2016年も元気なモッピー!ダンゼン稼ぎやすいので、まだ登録していないなら是非登録しておきましょう

ポイントタウン
ポイントでお小遣い稼ぎ|ポイントタウン

無料で遊べるゲームでポイントが大量に稼げるのはポイントタウンが最高!まだ登録していないなら、登録しておきましょう

ブログじゃ言えない本気で稼ぐためのビックの無料メール講座

儲かる副業ランキング10選

儲かる副業ランキング10選

ネット副業でお金を稼ぐ

ネット副業でお金を稼ぐ

無料メール講座

無料メール講座
「ネット副業でお金を稼ぐ方法」に来られた方は、今以上の生活を求める向上心のつよい素晴らしい方だと思います。そんな方にこそ、無料メール講座を購読して頂き、稼ぐためのヒントを掴んでいただきたいと考えています。私の経験したお金を稼ぐ喜びを実感してみませんか

 当フォームから無料メール講座に登録してくださった方に、プレゼント「成功者と一般人のタイムマネージメントの相違」無料配布中です。

無料メール講座

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください