重要な事は重複して記載致します
ウェブデザイン技術
この分野は難しいので詳しく時間をかけて記載いたします
試験では、JavaScriptの読み方や、camel caseのような書き方、イベントハンドラ、DOMの出題があるようです、HTML5やCSS3の問題も多く短いソースコードの誤り発見などが出ます
HTML
HTMLとは（<***>）
Webページの骨組みを作る言語、HTML4→HTML5→HTML Living Standardに変化しています
HTMLの仕様
W3C（HTML 4.01→）→ISO-HTML（ISO/IEC 15445-2000）→JIS-HTML（JIS X 4156:2000）
タグ一覧
| タグ | 意味 | 例 |
| <html> | HTML文章の開始 | 全体を囲む |
| <head> | 頭の情報（表示させない） | タイトルや文字コード |
| <body> | 画面に表示させる部分 | 本文、画像など全部ここに |
| <title> | ブラウザのタブ名 | <title>テスト</title> |
| <h1>～<h6> | 見出し | <h1>大見出し</h1> |
| <p> | 段落（パラグラフ） | <p>文章です</p> |
| <a href=””> | リンク | <a href=”https://～”>移動</a> |
| <img src=””> | 画像表示 | <img src=”inu.jpg” alt＝”犬”> |
| <ul> <li> | 箇条書きリスト | <ul><li>１つ目</li></ul> |
| <table> | 表（テーブル） | <table><tr><td>内容</td></tr></table> |
| <br> | 改行 | <p>1行目<br>2行目</p> |
| FTP | ファイルをサーバーとやり取りするルール | アップロード、ダウンロード、削除等 |
| href（属性名） | リンク先のURL | <a>（タグ） |
| alt（属性名） | 画像の代わりのテキスト | <img>（タグ） |
補足
hrefは、エイチレフと読みます（リンク先の参照情報）
brはブレイクの略で改行
<img>タグにalt属性は必須
<a>タグにhrefエイチレフ属性は必須
<a>タグの中に画像も入れられる
<table>タグは入れ子構造に注意、trが行、thが見出しセル、tbが普通セル
exampleイグザンプルは練習用に使用可能（たとえのページ）
タグに挟まれた部分をコンテンツと言います
要素（エレメント）タグとコンテンツを合わせた1式を言う
休憩画像
下記の重複するタグの説明は、重要な為（覚える為）重複して説明して居ますのでご了承ください
構造化
すべての文章に対してタグを付け役割を明確にする事をいう、（記述された物をソースコードと言う）
属性（タグだけでは足りない、属性でどうするかを指示）
<img src=”dog.jpg” alt=”柴犬画像” width=”300″>
上記には３つの属性がある（src.alt.width)
| 属性名 | タグ | 何を指定するか |
| href | <a> | リンク先URL |
| src | <img> | 画像のパス |
| alt | <img> | 画像の代替テキスト |
| type | <input> | 入力の種類（text,submitなど） |
| value | <input> | 入力欄の初期値 |
| action | <form> | フォームの送信先URL |
| method | <form> | データ送信方法（GET/POST) |
| neme | <input>,<form> | 項目の名前（サーバーに送り時のキー） |
空要素
要素は開始タグと終了タグで挟む形式が基本、中にコンテンツが要らないHTMLのタグの事、開くだけで意味が通じて、閉じタグ（</タグ名>）が要らないもの例として<br>が有名
| タグ | 用途 | 説明 |
| <br> | 改行 | 入力途中で改行したい時に使う |
| <hr> | 区切り線 | ページやセレクションの間に線を入れる |
| <img> | 画像表示 | 画像を表示させたい時に使う |
| <input> | 入力欄 | フォームに入力欄を作る時に使う |
| <meta> | 情報提供 | ページの情報（文字コードなど）を設定する |
| <link> | 外部ファイルの読み込み | CSSなどのファイルを読み込むときに使う |
| <src> | 画像のURL | <img>タグとよく使う属性HTMLで画像を表示する時に使う（表示したい画像のファイルやURLを指定する |
| <alt> | 画像の説明 | 代替テキストの意味、画像が見えない時に代わりに表示するテキスト |
コンテンツの種類（カテゴリー）
| 項目 | 読み方 | 意味 |
| フローコンテンツ | flow | ページに表示される要素 |
| フレージングコンテンツ | phrasing | テキスト内の小さな要素（強調など） |
| ヘッディングコンテンツ | heading | 見出し（ｈ１～ｈ６など） |
| セクショニングコンテンツ | sectioning | ページの構成を分けるブロック |
| エンベッテッドコンテンツ | embedded | 外部データを読み込む（画像、動画） |
| メタデータコンテンツ | metadata | ページ全体の情報（<title>など） |
| インタラクティブコンテンツ | interactiv | ユーザーが操作できる要素（ボタンなど） |
コメント
HTMLコードの中に書いても、ブラウザには表示されない部分（メモや説明、後で修正したい部分の目印に使う）HTMLとXHTMLの違いは無い
<!–から始まり–>で終わる
要素に関する注意点
blockquoteは、他人の文章や引用した長い文章を示すタグ（引用文）自分の文章でないと明示する
ブラウザでは文字を下げて表示される、文字下げ為だけの利用は出来ない、短い引用なら<q> </q>を使う
<table>は表（テーブル）を作る為のタグ、<thead>は票の見出し行をまとめるタグ、<th>は見出し用、<td>はデータ用、<tr>は表の１行
送信フォーム
| 項目 | 表現 | 説明 |
| <input> | インプット | ユーザーの入力欄（名前記入など） |
| <type> | タイプ | インプット欄にどの種類の入力化を指定する |
| <label> | ラベル | 説明や名前を付けるためのタグ |
| <type>(range) | レンジ | スライダーを使って数値を選ぶ入力欄 |
文章型の定義
DOCTYPE（ドックタイプ）とも言います、HTML文章がどのバージョンで書かれているかを伝えるための宣言です
<!DOCTYPE html>（これは、HTML5の文章型宣言です）大文字で有る事に注意してください
HTMLファイルの１番初めに書きます（ブラウザにHTMLのバージョンを伝える役目）
DTDの種類（ドキュメント、タイプ、ディフィニション）文章型定義
HTMLやXMLの文章構造ルール（どんなタグが使えてどんな並び順かなど）を定める定義書
HTML4のDTDの種類
ストリクト→古いタグが使えない、CSS前提
トランジショナル→古いたぐの一部が使える移行期向け
フレームセット→フレームページ用（非推奨）
ブラウザでは、indeex htmlと表示するが中身は(head. html,nevi.html,main.html)
HTMLの構造
Webページの骨組み（HTML）、家で例えると<!DOCTYPE>(ルール)、＜html＞（家の外枠）、<head>（見えない配線）、<body>（住む場所、部屋）
lang=”ja”→このページは日本語ですよと伝える設定（seoや読み上げソフトや通訳に活用）<
<meta>→ページに関する情報（メタ情報）をブラウザに伝えるために使う
charset（キャラセット）→なんの文字コードを使ってHTMLを書いているかを指定します
UTF-8→日本語、英語など世界中の文字を扱える文字コード（使わないと文字化けする）
<meta charset=”UTF-8″>の意味→文字化けを防ぐタグ(head内に置く)
XHTMLの記述
ＨＴＭＬをＸＭＬ（厳しいルール）に従わせたもの、厳しく正確に書くルール
タグは必ず閉じる必要がある、全て小文字のみ可、属性の値（必ずクォーテーションで囲む）、<br />と書く空要素でも/を付ける
３級学科試験HTMLの出題傾向
| 問題 | 回答 |
| <img>は空要素である | 〇 |
| HTML5以前の書き方は<div>を付けて書いていた | 〇 |
| HTML5で新しく追加されたセクショニング要素は<footer>である | 〇 |
| <footer>と<div id=”footer”>は同じ意味である | 〇 |
| articleは１つだけでも意味が通じる、ニュース記事などを言う | 〇 |
| <aside>関連する補足情報、サイドバーなどを言う | 〇 |
| <main>はページの中心内容、サイトの本文を言う | 〇 |
| <section>は、まとまった内容ページを複数のブロックに分ける時や問い合わせなどの区切りに使う（ｈ１などの見出しが必要） | 〇 |
| タグ名 | 説明 |
| <video> | 画像を埋め込む要素, 動画ファイル（src=”movie.mp4″), controls（再生ボタン） wide,height（サイス指定） |
| <audio> | 音声ファイルを埋め込む要素 src=”sound.mp3″（再生する音楽ファイル） controls（再生ボタン表示） |
| <controls> | プレイヤーの操作ボタンを表示する属性 |
| audioは機械、soundは音そのもの、musicは人間が制作した歌などを言う | audioのみタグがあります <audio> |
| ruby | 漢字の上にフリガナを表示するタグ |
| dialog | 対話的的な情報を表示するモーダルウィンドウを作る為のタグ（確認画面など） |
select要素内で選択できなくしたい項目は、option要素にdisabled属性を書く
video要素のposter属性には、ビデオが再生される前に表示される画像のURLを指定する
フォームコントロールやコンテンツのグループを表すにはfieldset要素を使用する
整形済のテキストをマークアップするには、pre要素を使用する
| 項目 | 説明 |
| disabled（ディスエーブルド） | 入力欄やボタンの無効化 |
| poster（ポスター） | 動画が再生前に表示される画像 |
| fieldset（フィールドセット） | 入力項目をまとめてグループする為の要素 |
| pre（プリ） | 空白や改行をそのまま表示するための要素 |
SVGのソースコード
SVGとは（スケーラブル、ベクター、グラフィックス）
画像形式の一つ、（JPGやPNGと違い、図形をXMLで描く）、拡大しても計算で書かれている為ぼやけない（ベクター形式）、アイコンやロゴなどに使われる
| 要素 | 説明 |
| <rect> （レクト） | 四角（ｘは横ｙは縦） |
| <circle> （サークル） | 円 |
| fill（フィル） | 中の色 |
| stroke（ストローク） | 線の色（ふち） |
コメント