htmlの基本構造とタグのおさらい

ワードプレスのテーマの変更も出来ます。フォントも好きに変えられるし、ソーシャルブクマボタンも設置したし、マルチサイト化も、子テーマの設定の仕方もわかりました。
これだけでも充分カッコイイデザインにカスタマイズ可能ですが、これからは今注目の
html5css3
を勉強しながら、もっとオリジナルなサイト作りに挑戦していきたいと思います。

今は誰かの作ってくれたテーマをお借りしている状態ですが、最終的にはオリジナルのテーマを作るのが目標です!

hml5とcss3を勉強する前に、まずはhtmlとcssの基本をおさらいします。

htmlとcssって何が違うの?

簡単に言うと「htmlでサイトの基本の枠組みをつくり、cssでデザインを加えていく」、です。

1.ブラウザfirefoxとアドオンfirebugをインストールする

コーディングを勉強するのに欠かせないブラウザがfirefoxです。まず、firefoxをインストールしましょう。
インストールしましたら、これまた欠かせないアドオン、firebugをインストールします。

firefoxをインストール
firebugをインストール

2.htmlファイルを作る

メモ帳など、適当なテキストエディタで書いたものを名前を付けて保存する際に、html形式で保存します。(ファイル名のあとの拡張子を.htmlにします。)
これで、このファイルをブラウザで開く事が出来る様になりました。

3.htmlの基本的な構造、基本となるタグを覚える

htmlは入れ子構造になっています。開始タグ< >と終了タグ</ >がワンセットです。改行の<br>タグなどの一部例外を除いて、必ず最後に</ >で閉じる、という事を覚えておきましょう。結構こういった簡単なミスで、表示されない〜っ(><)!とかいうことがよくあります。 それでは、htmlの基本の構造を記します。 **********************************

<html> 
 
<head>  headタグ内にはサイトのタイトルや文字コード等、サイトに関する情報を入力します。
        ブラウザでは表示されません。     
<title> ブラウザのタイトルバーに表示されます。検索にも使われるので重要なタグ。
</title>                
</head>	

<body> bodyタグの中に書いた内容がブラウザに表示されます。
<h1></h1> 見出しタグ。hの次の数字が小→大で、大見出し→小見出しとなります。
          <h6>まであります。
          これも検索に使われるので、キーワードに注意を払います。
<h2></h2>
<h3></h3>
<p></p> 囲んだ文章をひとつの固まりにします。

<ul> 箇条書きのリストを作る時に使う。このタグで囲った範囲がリストです。
    (<ul>の代わりに<ol>を使えば、項目が1、2、3…と表示されます。)
<li></li> リストの中のひとつの項目。先頭に●が付きます。
<li></li>
<li></li>
</ul>

<table> 表を作成する。
<tr>  <td></td>  <td></td> <td></td> </tr>  (<tr>とは表の中のひとつの行)
<tr>  <td></td>  <td></td> <td></td> </tr>  (<td>とは行の中のひとつのセル)
<tr>  <td></td>  <td></td> <td></td> </tr>
</table>

その他、頻繁に使われるタグ
<a></a> 囲んだ文字列にリンクを設定します。	
<br> 改行タグ。終了タグは無し。	
<img> 画像を表示させます。終了タグは無し。	
<!– 表示させたくないコメントはこの中に書きます。 –>

</body>	

</html>

**********************************



以上、簡単ながらhtmlの書き方の基礎のおさらいでした。この基本タグと構造が頭に入っていれば、これから勉強していくhtml5への理解もスムーズ…な筈(^^;?

次回はcssの基本と書き方をおさらいします!

コメントを残す