まずは基本:HTML【マークアップ】

Pocket

まずはwebの基礎中の基礎から。
コレ知らないなんてアリエナイ!な内容をボソボソと。

◉HTMLって何ぞな?
HTML(HyperText Markup Language)はWebページを作成する時に使用される言語の一つ。HTMLを使用して文書を作成することで、文書の構造を明確にしたり文書の中に画像や動画などを配置できる。

つまり、コンピュータに「ここが本文、ここが段落、ここは表」というように文章の構造をタグでマークアップしてコンピュータがわかる言語で伝えるってことですかね。
2003年くらいまではwebサイトの制作はデザインを優先したtableレイアウトが主流だった。
けれど、これではコンピュータは「ページがどのような構造を持つか」を判断できなかった・・・。
そこで2004年頃からWeb標準に準拠し、
  • HTMLで文書構造を指定する
  • CSSでレイアウトする
という現在の流れができた。らしい。
基本的に<デザインのためにHTMLを変更とかしない>こと。

◉マークアップ上の注意点
■テキストエンコーディング→UTF-8
文字コード(charset)は日本語では「UTF-8」「Shift_JIS」「EUC-JP」などが汎用的。
ちなみに、楽天にUPするページは「EUC-JP」じゃないと化けまする。
※プログラムやサーバーの関係で使用するエンコーディングは変わるので事前にチェック!!

■改行コード→CR+LF
テキストファイル中で改行を意味する文字コードのこと。
正確には、改行してカーソルを行頭に復帰する動作を指示するコードのことです。
改行コードは以下の3種類。
  • LF…UNIX系OS
  • CR…Mac
  • CR+LF…Windows
CR+LFを使用するのが一般的?

<ポイント>
  • 開始タグと同時に終了タグも同時に入力すること
  • インデントするときはスペースではなくタブを使用
  • 文章を構造化し、レイアウトに関する指定をHTML上で行わない ←超重要!!

<h1>HTML1日目</h1>/*...A*/
<font size="6"><b>HTML1日目</b></font>/*※fontタグは非推奨...B*/

上記の表記は人にとっては同じに見える。
でもコンピュータは以下のように解釈してしまう。
  • Aはページ内で最も重要な見出し
  • Bはただのテキスト
また、文字を強調するのであれば<b>の文字を「太字」にするタグではなく<strong>や <em>の「強調」を意味するタグをつけたほうがヨロシス。
(構造的に整理された文書って意味で)

<まとめ>
webデザインは正しいマークアップが全ての基本!
まずコンピュータに対してデザイン(htmlで正しくマークアップ)
それから人へのデザイン(cssで正しくデザイン)

Pocket

This entry was posted in web.

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>