初心者向けHTML入門の決定版:タグHTML

簡単なルールを決めておこう

Facebook にシェア
このエントリーをはてなブックマークに追加
Tweet

ルールを決めておく

Webサイトを始めるにあたって、簡単なルールを決めておきましょう。事前に混乱の元を防ぐことは大切です。

1人で作業を行うならともかく、複数人で作業を並列的に勧めるには、ルールの明確化が必要になります。制作の最終段階になってからの大騒ぎは避けたいものです。

Webサーバの階層

XHTML文書を公開するためには、作成物をWebサーバにアップロードする必要があります。Webサーバのファイル階層構造は事前に決めておきましょう。XHTML・CSSコーディングにも影響します。

  • htmlファイルはドキュメントルートの下に置く
  • cssファイルは、ドキュメントルートの下にcssフォルダを作り、その中に置く
  • JavaScriptファイルは、ドキュメントルートの下にjsフォルダを作り、その中に置く
  • 画像ファイルは、ドキュメントルートの下にimgフォルダを作り、その中に置く

今回借りたfc2無料ホームページサービスのWebサーバにおいて、上記の設定に従い準備をします。ファイルマネージャー機能を利用してフォルダを作成しましょう。

fc2ファイルマネージャー画面

文書作成のルール

どのように文書を書くかについても、決めておくとよいでしょう。

  • 文字コードはUTF-8とする。
  • 要素・属性などはXHTML仕様に従って全て小文字で書く。
  • フォーマット調整にはタブを使う。タブは半角スペース4つ分とする。

コミュニケーション

意外と忘れがちにされるのがコミュニケーションルールです。

複数人で作成する場合は、お互いの作業状況がわかるような仕組みを用意しましょう。疑問点があったら遠慮なく確認しあえる関係が大切です。リーダは制作現場の雰囲気作りにも配慮する必要があります。

個人で作成する場合は、独りよがりにならないように注意しましょう。実際に誰かに口を挟まれることはありませんが、「もし他人の立場だったらどう思うか」という俯瞰的視点は重要です。


< 実際に作ってみよう 準備編コーディング前に構想を練る >

実践講座

  • 実際に作ってみよう 準備編
  • 簡単なルールを決めておこう
  • コーディング前に構想を練る
  • コーディング開始
  • head要素内を記述する
  • body要素内を記述する
  • 構造化を進めよう
  • 装飾する(body全体部分)
  • 装飾する(header ロゴ部分)
  • 装飾する(header メニュー部分)
  • メインビジュアルの設定
  • 装飾する(main部分 サービス)
  • 装飾する(main部分 リンク、お知らせ)
  • 装飾する(footer部分)

HTML要素(タグ)一覧

a  abbr  acronym  address  applet  area  b  base  basefont  bdo  big  blockquote  body  br  button  caption  center  cite  code  col  colgroup  dd  del  dfn  dir  div  dl  dt  em  fieldset  font  form  frame  frameset  h1 - h6  head  hr  html  i  iframe  img  input  ins  isindex  kbd  label  legend  li  link  map  menu  meta  noframes  noscript  object  ol  optgroup  option  p  param  pre  q  s  samp  script  select  small  span  strike  strong  style  sub  sup  table  tbody  td  textarea  tfoot  th  thead  title  tr  tt  u  ul  var  <!-- --> 

ブロックレベル要素一覧

p  h1-h6  ul  ol  dir  menu  pre  dl  div  center  noscript  noframes  blockquote  form  isindex  hr  table  fieldset  address 

インライン(テキストレベル)要素一覧

フォントスタイルに関するもの
tt  i  b  big  small
フレーズ・句に関するもの
em  strong  dfn  code  samp  kbd  var  cite  abbr  acronym
特別なもの
a  img  object  br  script  map  q  sub  sup  span  bdo
フォームに関するもの
input  select  textarea  label  button 

  • sitemap
  • 運営者情報
  • 免責事項
designed by ホームページ制作のササエル
Copyright © tagHTML All Rights Reserved.