【今日学んだこと】HTML CSS Webデザイン

今日は、Webデザインの勉強をしました。

今日も、重要だと思ったことをまとめていきたいと思います。

★重要だと思ったポイント

HTMLは、Webページの土台となるファイルを作成する言語で、コンピュータがそのページの構造を理解できるようにするのが役目。表示したい文章などを「<」と「>」で挟まれた「タグ」と呼ばれる特殊な文字列で囲んで書いていく。

〇HTMLのファイル名のルール
ファイル名には拡張子を付ける
・拡張子とは、そのファイルの種類を表す文字列のこと
日本語は使えない
使えない記号に注意
・基本的に「-」と「_」以外は使わないようにする
空白は使えない
小文字に統一する
ホームページは「index.html」にする
・Webサイトにアクセスし、一番はじめに表示されるページには「index.html」という名前で保存するのが基本

<!DOCTYPE html>は、ドクタイプ宣言といい、そのページがどのバージョンのHTMLで、その仕様に合わせて作られているのかを書いている。

<html>～</html>は、これはHTMLの文書だということを表している。

<head>～</head>は、ページの情報を記述。

<title>～</title>は、ページのタイトルを記述。

<body>～</body>は、HTMl文書の本体部分。

「<」「>」で囲まれた最初に書かれるタグを開始タグという。

「</」「>」で囲まれた最後に書かれるタグを終了タグという。

開始タグから終了タグまでの一つのかたまりを要素という。

〇タグを書く時のルール

半角英数字で書く

・タグに全角文字を使うことはできない

大文字と小文字の区別はない

・バージョンによっては小文字で記述する必要がある場合もあるので、小文字で統一するといい

開始タグから終了タグの間に別のタグを入れる書き方を「入れ子」という。

開始タグの中にそのタグについての付加情報を書くこともある。この情報の種類のことを「属性」という。その情報の内容のことを「値」という。

見出しタグには、<h1>～<h6>まである。<h1>は一番大きい見出しで、数字が大きくなるほど小さい見出しになっていく。

見出しタグは、<h1>から順番に使っていく。文字の大きさなど、見た目を理由に突然<h5>などを使ってはいけない。

大見出しとなる<h1>は基本的に一つのページにつき一度の利用がいいとされている。

<p>タグは文章の段落を表すタグ。

囲まれた文章が段落になり、ブラウザーの表示でも段落ごとに改行され、段落の間には少しスペースができる。

画像を挿入するには、<img>タグを使う。終了タグはない。

〇<img>タグを使うときに必ず必要な属性

・src属性。場所を指定する属性。どの画像を表示するのか指定する。

・alt属性。Webブラウザで画像がうまく読み込めなかった場合に、画像に代わって表示するテキストを指定。

ファイルパスとは、ファイルを呼び出すために、それらのファイルがどこにあるのかを指定するためのもの。呼び出し元のファイルから見て、対象のファイルの保存場所を書く。

相対パス・・・呼び出し元のファイルから見た、対象のファイルの位置。

絶対パス・・・保存されている位置は関係ない。どこから指定しても同じ。

リンクを作るには、リンクにしたい部分を<a href="">と</a>ではさむ。

リンク先はhref属性で指定。

別のWebサイトのURLを指定する場合は、絶対パスで指定。プロトコルを忘れないように注意。

<img>タグを<a>で囲めば画像をリンクにできる。

メールアドレスへリンクをはるときはhref属性に「mailto:」と記述し、続けて送り先のメールアドレスを入れる。

箇条書きリストを表示するには<ul>タグを使う。<ul>タグ内に<li>タグヲ使ってリスト項目を追加していく。

番号の付いたリストを表示するには<ol>タグを使う。<ol>タグ内に<li>タグでリスト項目を追加していく。

リスト項目は何個でも入れられる。

以上です！