前は「ＨＰ事前準備」
HTML とは？
https://abi.sakura.ne.jp/hpwg/sofar/socourse/ の後半
HTML は Hyper-Text Markup Language (ハイパーテキスト マークアップ ランゲージ) の略です。ウェブページを記述するための記述言語。
現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
ファイル名について
ホームページで作成する HTML文書や画像ファイルのファイル名の付け方
■ 基本的に 半角英数字 のみを用いる スペース文字を含んだファイル名は使用しない
■ 使用可能な記号はドット (.) 、ハイフン (-) 、アンダーバー (_)
■ 大文字・小文字をちゃんと使い分ける (小文字だけに統一すると良い)
拡張子
HTML文書の拡張子は .html です。Windowsでは以前のシステムで拡張子に3文字しか使用できなかったことから未だに .htm とする場合があります。
また、Windowsの設定で拡張子が非表示になっていたら、必ず拡張子を表示するに変更しておきます。
構造
HTMLは、 や などと <>(山括弧)で囲った タグ で構成されます。head や body などを タグ名 と呼びます。
HTMLのタグには href=”xxx.html” や target=”_blank” などの 属性((attribute) を指定することができます。
target の部分を 属性名、_blank の部分を 属性値 と呼びます。
HTML5の必要最小限の構造を示します。html5_minimum.html
演習11 Chromeでhtml5_minimum.htmlを開いて、ソースをTrePadで表示し保存してみよう
①Chromeでhtml5_minimum.html を開きます。
②ソースの表示 をして、名前を付けて保存。
保存先と名前は、\hpstudy2023\練習\html5_minimum.html
③ソースに注釈を付ける。 <!– ～注釈～ –>
各タグの意味を調べてコメントを付けよう。
編集が済んだら上書き保存
HTML文書
よく使われるタグ
ホームページ本文でよく使われるタグを示します。
p Paragraph 段落
ul,dl リスト li,dt,dd等と組み合わせ
h1~h6 heading 見出し
img Image 画像
a Ancho アンカー(指定先へジャンプ)
table テーブル(表) tr,td等と組み合わせ
div 汎用的なブロック要素 DIVision(区分)の略
他のブロック要素 section 章を記述, article 完結の記事
span インライン要素の汎用的なタグ
HTML5で追加された要素 – header, footer, main, nav, article, aside, section
HTML文書の手本
よく使われるタグを用いたHTML文書の手本を示します。html_example.html
演習2 IEでhtml_example.htmlを開いて、ソースをTrePadで表示し保存してみよう
①Chrome で html_example.html を開きます。
② ソースの表示 をして、名前を付けて保存。保存先と名前は、
hpwg2023\練習\html_example.html
③ ソースに注釈を付ける。各タグの意味を調べてコメントを付けよう。編集が済んだら名前を付けて保存
④ html_exampleサイトとソースを閉じて、保存したhtml_example.htmlを開きます。
画像がリンク切れになっているので、ダウンロードするか或いは、手持ちのjpgファイルを配置します。
レイアウト
スタイルシート
スタイルシート (CSS) とは？
CSS は Cascading Style Sheets の略です。スタイルシートは、HTMLで記述された Webページの見栄え・スタイルを効率的に定義するための技術です。
HTMLで文書のコンテンツ (内容・文書) を定義し、CSSでレイアウト (デザイン・見栄え) を定義することにより、内容と見栄えを分離することが可能となります。
スタイルシートの拡張子
スタイルシートのファイル名拡張子は.cssです。ファイル名は任意でかまいませんが通常style.cssが使われます。
基本的な書き方
スタイルシートはの基本書式 (詳細は[とほほのＷＷＷ入門]-[CSSリファレンス]-[CSS入門]参照)セレクタ { プロパティ : 値; }セレクタとは、どの要素に対してスタイルを適用させるか指定する部分です。
スタイルシートを適用させたいタグを書きます。
プロパティとは、セレクタで指定した要素に適用するスタイルの種類を示す部分です。
色を表す「color」やフォントサイズを表す「font-size」などを書きます。
これに続けて、「:」記号と値を書いてスタイルを設定します。
スタイルは「;」記号で区切っていくつでも書くことができます。
適用する主なセレクタ
■ タグ要素に適用する
タグ { プロパティ : 値 }
記述例 h1要素のフォントサイズを20ピクセルに設定し、色を赤にする。
h1 { font-size: 20px; color: red }
■ 特定のクラスを指定した要素にスタイルを適用する
.クラス { プロパティ : 値 }
セレクタ.クラス { プロパティ : 値 }
記述例 .class1 { color: red }
上記の例では、class属性に「class1」が指定されている要素の色を赤に設定します。
h1.class2 { color: red }
上記の例では、h1要素を持つclass属性に「class2」が指定されている要素の色を赤に設定します。
■ 特定のIDを指定した要素にスタイルを適用する
(クラスは複数の要素に対して指定できるが、idはその１つの要素に対してのみできる)
#id { プロパティ : 値 }
セレクタ#id { プロパティ : 値 }
記述例 #id1 { color: red }
上記の例では、id属性に「id1」が指定されている要素の色を赤に設定します。
h1#id2 { color: red }
上記の例では、h1要素を持つid属性に「id2」が指定されている要素の色を赤に設定します。
注釈
注釈」の記述は /* ～ */ となります。 (～が注釈部分)
スタイルシートのソースにコメント(注釈)を記述します。コメントはブラウザには解釈されません。
スタイルシートをHTMLで指定する方法
スタイルシート実装には次の3つの方法があります。
① リンク型スタイルシート：
別ファイルにスタイルシートを記述しHTMLのヘッダーから<link>で読み込む
<link rel=”stylesheet” href=”css/style.css” type=”text/css”>
② 埋め込み型スタイルシート：style属性を用いてタグに実装する
<p style=”color:blue; font-size:large;”>あいうえお</p>
③ 文書単位で埋め込む：<style>要素でまとめてその文書に適用する
<style type=”text/css”>
<!–
p {color:blue; line-height:1.5;}
–>
</style>
次は「ＨＰ演習」