はじめに
学習中のHTML/CSSについて学んだことをアウトプットしていきます。
HTML/CSSの概要
HML(Hyper Text Markup Language)
Webサイトに表示される情報を記載する言語。
〇〇.htmlという名前のファイルに記述する。
CSS(Cascading Style Sheet)
HTMLに装飾を加えるための言語
〇〇.cssという名前のファイルに記述する。
拡張子
拡張子はファイルに記載される言語の種類を識別するためにファイルの末尾につける文字列のこと。
HTML/CSSの関係性
HTMLはWebブラウザに状に表示するための言語であるため、HTMLだけでも上表を表示することは可能となる。しかし、CSSを用いることで装飾を加えることができ、ユーザが見やすい形にWebサイトを装飾することができる。
要素
<>と>に囲まれ箇所1つ1つをHTMLの要素という。
そして<>・・・>はタグと言い、要素はタグに囲まれて表現される。
タグには要素の始まりを示す開始タグと終わりを示す終了タグがある。なお、終了タグがない要素も存在する。
HTMLの構成
HTMLはhead要素とbody要素の2つで構成される。
head要素
webサイトの情報や、装飾のCSSファイルの情報を記載する部分。head要素に記述した情報は画面上に表示されない、webページの情報を記載する、Webページの情報とは以下である。
・Webページのタイトル
・装飾のためのCSSファイルの指定
・外部のファイルの読み込み
body要素
画面上に表示したい情報を記述する部分。HTMLを記述する際はをファイルの先頭に書きます。これは「これはHTMLを記載したファイル」という宣言です。
この宣言に続けて、HTML文章の始まりと終わりを示す要素であるhtml要素を記述します。
DOCTYPE
DOCTYPEは「ドキュメントタイプ」の略で、この文章がHTML文章であることを宣言する要素です。終了タグはありません。実際に記述する場合は、と記述する。
html
HTML文章の始まりと終わりを示す要素でありHTML記述に必要となる。
head要素
meta要素
HTML文章に関する情報を指定する場合に使用する。charaset=meta要素の属性です。
属性
属性は要素に情報を付け加える役割を持つ。属性の後には属性値が続く。
属性値
属性値とはどのような属性なのかを示す値を属性と呼ぶ。
charset属性
メタ要素にて、どのような文字コードを用いるか示すことができる属性です。
titleタイトル要素
Webサイトのタイトルを指定する要素です。title要素内にタイトルを記述してもウェブサイトの画面上には表示されません。
body要素
h1~h6要素
hはHeadingの略で、hから始まるh1/h2/h3/h4/h5/h6の要素は文章の見出しを作るための要素です。
p要素
pはParagraphの略で、文章の段落を表す要素です。
...
で囲むとひとかたまりの段落として認識されます。Webページ内では、見出しを除くテキストのほとんどが、このp要素を使って作られます。br要素
brはLine Breakの略で、テキストを改行するための要素です。br要素をテキストの中で用いることで、改行ができます。br要素は終了タグが不要です。
b要素
bはBoldの略で、文字でを太くする要素です。...で囲まれている部分だけ太字になります。
a要素
aはAnchorの略で...で囲ったテキストをリンクにすることができます。a要素をクリックすると特定のページに移動します。aタグのhref属性に、移動させたいページのURLを指定します。
href属性
hrefはHyper Referenceの略で、href属性でリンクの移動先を指定します。
属性値としてURLや移動させたいページのHTMLファイルが置いてあるフォルダの場所を指定することで、特定のページへのリンクが作成できます。