学科 HTML基礎①【オンライン】
今日のテーマ
WEB サイト（ページ）の制作について
お客様からWEBサイト（ページ）の制作を依頼されたっば制作を依頼された場合に必要となる作業を行程別に理解しよう
WEBサイト（ページ）の構成要素について
- HTML
- Webページ内の各要素の意味や文書構成を定義する
- CSS
- レイアウトデザインや各要素の装飾（色・サイズなど）を定義する
- JavaScript／jQuery
- 動きをつけたり計算などの処理を行う
one point
Webサイトを制作するには、HTML ,CSS ,JavaScript/jQuery,画像ファイルなど、複数のファイルを管理する必要がある。制作するWebサイト用の開発フォルダを作成すると同時に必要に応じてサブフォルダを作成して各ファイルを管理したほうが良い。
Webページ開発ツールについて
Webページ開発には、テキストエディタとブラウザが必要。Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能ですが、訓練校では、テラパッドとChromeを使用してWebページ開発を行う。Ter aPadとChromeは別途インストールが必要。
文字コードについて
日本語を使うための文字コードには、シフトJIS、EUC、UTF-8などがある。WEBページを作成するときの文字コードは、UTF-8N(UTF-8BOMなし)を使用する。
ファイルのパス指定について
ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法がある。それぞれの特徴を理解して使い分けよう。
HTMLの基本構造について
タグの構造
<要素名 属性=”属性値”>
- 要素名
- タグの種別を指定する。タグの名とも言われる。
- 属性
- 要素名に対して設定する属性名を指定する。属性が複数ある場所は、属性と属性値も組み合わせを空白で区切って複数指定することができる。
- 属性値
- 属性に対する値を指定する。一般的には、ダブルクォーテーション（”）で囲んで指定するが シングルクォーテーション（’）で囲むことも可能。属性値がない時は、イコール（=）以降が省略される。複数の属性を指定する時は、スペースで区切って指定する。
HTMLの基本構造
<!DOCTYPE html>
<html lang=”ja”>
<head>
（文書の情報を記述）
</head>
<body>
（文書の本体を記述）
</body>
</html>
- !DOCTYPE 宣言（ドキュメントタイプ宣言）
ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報です。HTML5 であれば<!DOCTYPE html>と記述します。
- HTML 要素（HTML の文書）
html 要素は、この文書が HTML の文書であることを表します。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。
- HEAD 要素（文書情報）
head 要素は、この文書のメタデータを記述します。例えば、<title>～</title>でその文書のタイトルを記述することができます
- BODY 要素（文書本文）
body 要素は、この文書の本文を記述します。この body 要素で囲まれた領域が Web ページとして表示されます。
doctype宣言とは？
HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良い。
DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となる。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合がある。 ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要がある。 主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モードとなる。
one point
楽天のショッピングサイトなどのテンプレートでは、DOCTYPE宣言がなく互換モードになり、CSSが思うように使えなくなる場合がある。その場合やを得ず、違う方法を使わなければならない場合があるので、お仕事で担当した時は、DOCTYPE宣言は必ず確認しておく。