ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

Webデザイン勉強41日目の成長報告!

こちらのWebサイトは移転しました。


[ピュアチャ〜ジ]

はいどうも!

 

昨日でPhotoshop講座を終えて、今日からHTML座に突入しました!

 

今日はHTMLの概念と簡単な決まりについて勉強しました〜

6年前に簡単なHPは作ったことがあったのでなんとなく分かってましたが、あたらめて勉強しました!

 

 

【HPの種類】

従来型HP=更新頻度の少ないHPに適している(会社概要、お問い合わせフォーム等)

ブログ型HP(CMS)=更新頻度の多いHPに適している。古いページを遡って見ることが難しい。

 

最近だと、従来型HP×ブログ型HPのMIXしたHPが多く使われているみたいです!

 

【HTMLとは】

Hyper Text Markup Language

拡張子=html

タグをの役割を持ち、構造を構成することが可能

 

Sublime textのインストール】

Sublime textっていうアプリでHTMLテキストを入力し、ブラウザで出力し確認するのでこのアプリのインストールを行いました。

 

【Webページの表示にはブラウザが必要】

ブラウザの種類

Google chrome 
Safari 

Internet Explorer

・Fire fox

Opera

 

【HTMLタグの種類】

140種類

意外と少ないような気がしました!笑

 

【タグの入力の仕方】

開始タグと終了タグの間に要素を入力

 

【ブラウザによってフォントが異なる】

今日見たサンプルだとChromeだとゴシックですが、Safariだと明朝になっていました。

※自分で入力したやつは、Safariだと文字化けしてしまったのですが、これはどうやらSublime textの影響もあるようなので、一旦無視しました。w

 

各ブラウザに正しく表示されるか確認することをクロスブラウザ対応と言うようです!

 

【DOCTYPEとは】

HTMLのバージョンの宣言の意味でした!

HTMLの一番先頭にDOCTYPEを入力することで、宣言することができます!

 

一番最新のHTML5だと

<!DOCTYPE html>

と表示します!

また、DOCTYPE宣言をしないとCSSが読み込めないケースがあります。

CSS反応しないのはいかんですね。

 

【HTMLの基本構造】

<!DOCTYPE html>

<html>

<head></head>   ・・・・・・目に見えない部分 CSSJavascript

<body></body>   ・・・・・・目に見える文字や画像 

</html>

 

 

 

【文字のエンコードとは】

どの文字を記すか、と言う意味。

迷ったらUTF−8を選んでおけばいいっぽいです!

エンコードはheadタグに入れます!

<meta charset="UTF-8">

 

metaタグは終了タグがいらないコードです!こちらも宣言なので、headタグに入れておけばOKです!

 

【入力したタグ】

(headタグ内)

 

<title>ここにタイトルが入ります。</title>

 サイトのタブのタイトル、サイト検索結果のタイトル、お気に入りの名前

<meta name ="description" content="サイトの説明分が入ります。">

 サイト検索結果の説明文

<meta name="keywords" content="キーワード1,キーワード2">

 ※keywords  サイト検索の際のキーワード、コンマでキーワードを区切ることができる

<meta name="author" content="著者名">

  著者名(サイト作成者)

 

ファ〜新しいことやったので疲れました!

今日はここまで!