皆さんこんにちは！gulaです(^^)
桜も満開を迎え、新１年生や新社会人など始まりの季節になりましたね。
実はgulaも、４月から所属がDTPからWEBに変わり、WEBクリエイター１年生として新しくスタートを切りました(*￣ー￣)ｖ
今回は自身の復習も兼ねて、学んだ事を掲載したいと思います。
HTMLとは？
ホームページを作っていくための言語で、GoogleやFaceBookなど、ほぼ全てのサイトがこれを基に作られています。
下記が基本の型。これはHTML5の基本形です。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>○○○○○</title>
<link rel=”stylesheet” href=”Lesson1.css”>
<link rel=”shorcut icon” href=”favicon.ico”>
</head>
<body>
</body>
</html>
HTMLは大きく分けて<head>と<body>の２つに分かれていて、<head>には文字コード、CSSの読み込み、検索エンジンにヒットするキーワードの設定等、ホームページには表記されないシステム的な設定をします。
<body>には、ホームページに表記されるものを書いていきます。
CSSとは？
HTMLとセットでホームページを作る技術。
HTMLではホームページの中身を作るのに対して、CSSは見た目を整えるのが役割です。
枠線を付けたりボックスの位置を決めたり文字のポイントを変えたり等できます。HTMLの<head></head>の中で読み込むことでHTMLに反映されます。
例えば
１年生です
という文字が span {color:red;} と書くことにより、
１年生です
と変化します。
色々なタグ
HTMLは様々なタグで出来ており、HTMLを覚えるというのはタグを覚えていくことと言っても過言ではありません。
基本となるタグ
<div>,<span>：特定の範囲を指定して、スタイルを付けるためのタグ
また<div>や<span>は一つのホームページに多数出てくるので、識別するためのタグとしてid，classがあります。
idは文書内に一つしかない要素で、classは複数ある要素です。
（例）<div id=”（id名）”>あああ<span>いいい</span></div>
リストタグ：<ul>,<li> or <dl>,<dt>,<dd>
箇条書きやメニューを作るタグです。簡単な例ですが、
<ul>
<li>うまい</li>
<li>やすい</li>
<li>時々遅い</li>
</ul>
と書けば、
・美味い
・安い
・時々遅い
と表記されます。
<dl>,<dt>,<dd>は定義型のリストで<dl>でリスト本体を定義し、<dt>でリストの項目を定義し、<dd>にそのリストの内容を記述します。
項目名 内容
という時に使います。
floatタグ
ボックスを左右に寄せ、テキスト等を回り込ませるタグ。
floatで指定したボックスや画像を右、左寄せにし、続くテキストなどをfloatで指定したボックスや画像の反対側に回り込ませることが出来るタグです。
これはレイアウトにとても重要で、特に苦労しているタグです(ＴｍＴ)
その辺はまた次回書いていきたいと思います。
今回はこれぐらいで。ちなみにホームページは右クリック→ページのソースを表示をすれば、そのホームページの中身を見ることができるので、作り方の参考にできます。
かっこいいページを作ろうと思うと、覚えなければいけないことが沢山あって大変ですね(;^_^A
gulaはまだ凝ったものは作れないので、基本的な事を中心に学習中です。
早く次の段階にステップアップできるよう頑張ります！(＾▽＾)/
コメント