初級者向 初めてのホームページ作りEX


htmlタグ辞典から検索

Html

<!DOCTYPE~>

<html>


色見本

カラーリファレンス


Head系

タイトルをつける

文字コードを示す

制作者・内容紹介・キーワードを入れる

スタイルシートやスクリプトの言語を示す

基準URLを設定する

自動的にページを読み込む


Body系

全体の文字を設定

全体の背景色

全体の背景画像


文字系

文字サイズと文字色

文字の基本サイズを指定

コメントアウト

連絡先を示す

強調する

出典(参照先)を示す

略語を表す

追加したことを示す

削除したことを示す

プログラム関連のテキストを示す

ルビをふる

テキストのスタイルを指定する

特殊文字


見出し・段落

見出しをつける

段落をつける

改行させる

センタリング

行揃えを指定する

空白や改行を表示させる

横罫線を入れる

マーク付リストを作る

番号付リストを作る

用語と説明のリストを作る


画像系

画像を張る

画像とテキスト位置関係1

画像とテキスト位置関係2


リンク系

リンクを張る

特定の位置にリンクする

リンク部分の文字色を指定

リンクした画像の枠

イメージマップを指定

リンクでメールソフトを起動


テーブル系

表の基本形

表にタイトルをつける

表の大きさを指定する

セルの大きさを指定する

セルを連結する

セルの間隔を指定する

セルの枠と内容の間隔を指定する

セル内で縦横の位置を指定する

セル内で改行を禁止する

セル内で背景色を指定する

表やセルの背景画像を指定する

表をセンタリングする

表にテキストを回り込ませる

表の回り込みを解除する

表と回り込ませたテキストの間隔を指定する


フォーム系

フォームを作る

送信ボタンを作る

リセットボタンを作る

ボタンを作る

画像でボタンを作る

1行の入力フィールドを作る

複数行の入力フィールドを作る

パスワードの入力フィールドを作る

非表示のフィールドを作る

ラジオボタンを作る

チェックボックスを作る

メニューを作る

メニューの選択肢をグループ化する

リストボックスを作る

ファイルの選択機能を付ける

項目をグループ化する

フォームの内容がメールで届くようにする


フレーム系

フレーム全体の構造を指定する

フレーム表示方法を指定する

フレーム枠の表示・非表示

フレーム枠を消す

フレーム非対応用の内容を作る

フレームターゲットを指定する

インラインフレームを設置する



CSSガイドEXHTMLタグ辞典PHPを学ぼう!

 

 

 Start 1   Start 2   Step 1   Step 2   Step 3   Step 4   Tip 1   Tip 2   Tip 3   Tip 4 

TAG(タグ)を整理しよう

ホームページ(サイト)を制作するときに検索されやすい構成にする必要があります。

検索されやすい構成にするにはCSS(スタイル)を使ってデザインするのが一番ですが、ここでは初歩的に注意したい部分を紹介します。

検索エンジンのロボットに評価されるには、タイトル、メタタグ(meta)、見出し、段落を整理することが重要です。

タイトルはページタイトルのことで、 <title> ~ </title> の間に入れ、ページがどういう内容であるかを示します。
このサイトを例にしますと、


「ページタイトル - 初級者向 初めてのホームページ作りEX / Present by ex-mode.net」


としています。
/ Present by ex-mode.net は必要ないかもしれませんが、ページのタイトルとホームページのタイトルは入れるようにしています。

メタタグは、 <head> ~ </head> の間に入れるタグです。

<meta name="description" content="サイトの紹介文">
<meta name="keyword" content="キーワード1,キーワード2,キーワード3">

を入れます。
サイト紹介文、キーワード共に大手検索エンジンにクロールされ検索結果に反映されます。

[記入例]

<head>
<meta name="description" content="サイトの紹介文">
<meta name="keyword" content="キーワード1,キーワード2,キーワード3">
<title>ページタイトル - サイト名</title>
</head>


見出しとは、

<h1> ~ </h1>
<h2> ~ </h2>
<h3> ~ </h3>
<h4> ~ </h4>
<h5> ~ </h5>
<h6> ~ </h6>

<h1> は大見出し、 <h2> は見出し、 <h3> は小見出しのような使い方をすると、評価されやすくなります。
目次をイメージするとわかりやすいでしょう。
上から順番に重度が下がっていきます。


[記入例]

<h1>大見出し</h1>
  <p>紹介文</p>

  <h2>見出し</h2>
    <p>本文</p>

    <h3>小見出し</h3>
      <p>本文</p>

段落は、
<p> ~ </p>

で囲みます。
段落は、文章の段落ごとに設定することでサイトが整理され、キーワードや段落が検索されやすくなります。

スタイルシートが設定されていないと、ブラウザの初期値の表示となります。


[表示例]

  ・<h1>見出し1</h1>

   見出し1

  ・<h2>見出し2</h2>

   見出し2

  ・<h3>見出し3</h3>

   見出し3

  ・<p>段落</p>

   段落

ここではスタイルシートの説明は省略し、個々にスタイルを設定する方法を紹介します。


[記入例]

・<h1 style="font-size:14pt; color:#FF3300; marin-top:0px; margin-bottom:0px; ">
見出し
</h1>

・<p style="font-size:11pt; color:#FF3300; marin-top:0px; margin-bottom:0px; ">
段落
</p>

それぞれのパラグラフに記入例のとおり、 style を追加し、その行に対してスタイルを設定することができます。
この場合、フォントサイズとフォントカラー、上段のマージン、下段のマージンを設定し、ページのデザインを損ねない表示をさせます。


最近では、 html5.0 に対応したブラウザが普及してきています。
html5.0のDTD宣言は、 <!DOCTYPE html> とシンプルに宣言するだけでよくなりました。
文字コードの指定は、 <meta charset="UTF-8"> となります。

html4.0 以前の「文章型宣言」を使用した場合、 html5.0 対応ブラウザはその書式を読みこきますのでこれまで通りに制作できます。

また <html> タグは  <html lang="ja"> とし、 <br> や <img> のように文字を挟まないタグ(シングルタグ)は <br /> 、 <img src="" / > のように " /" を追加することを推奨しています。

・<!DOCTYPE>を詳しくみる


 Start 1   Start 2   Step 1   Step 2   Step 3   Step 4   Tip 1   Tip 2   Tip 3   Tip 4 


 

最優秀旅館・ホテル予約!

旅のるるぶ、全国テル予約!




▲UP

ex-mode.net | ツールEX | 素材EX | アフィモール | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード | 気のみ気のままなブログ
PHPを学ぼう! | CSSガイドEX | ホビ★コレ | 班長日記!

Copyright (C) ex-mode.net 2017 . All Rights Reserved.