【独学で学ぶHTML5/CSS3】HTMLの基本を学ぼう! 1日目【初心者】

2020年5月7日WEB

そもそもHTML5/CSS3って何??

HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、マークアップとは機械が理解できるようルールに従って文章を記述することです。
そのHTMLで記述したものをCSSで装飾する。
他にも色々な言語がありますが、こちらがWEBページ作成の基本の言語となっています。

TechAcademyの無料体験

最初から実際にコードを打っていこう!

説明少な!!と僕も思いますが、父に効率の良い学習方法を尋ねたところ
とにかく手を動かすこと』これしか言われません(汗
本を見て一生懸命にノートにまとめている僕に『そんなの今覚えなくてもコードを打っていくうちに覚える。必要なのは実際にコードを打つこと!』と学習初日にやり方を全否定されました。

最初は僕も少しは知識付けてから実際にコーディングに入らないと意味がない!!と思ったのですが、Udemyでの学習を進めていくうちに少しづつ動画と同じ速度でコーディングできるようになってきて『とにかく手を動かすこと』の意味がわかりました。

これから本気で学習を始める方、どんどん実際にコーディングしていきましょう!!
そしてわからないことはすぐにググる!!(Google検索)
絶対答えが載ってます!絶えず進化していくIT業界、自分で調べて解決・吸収することが求められるとのこと。
基礎知識を身に付けながら+αもどんどん取り入れていきましょう!

要素・タグ・属性を知ろう!

・要素って何?

HTMLを構築しているもの。100種類以上ものたくさんの種類がある!
基本的にはhead要素・body要素の2つに分かれています!

〈head要素〉…実際のページ上には表示されないが、そのページの情報を入力。
〈body要素〉…実際のWEBページに表示される部分。表示したい情報を入力します。

・タグって何?

記述したい内容を〈〉ここに内容〈/〉このように挟むことでその中に意味を持たせます。

〈p〉……〈/p〉で挟むと段落という指定ができ、ひとつの文章の塊であることを表します。

文章だけではなく、リストを作成できるものや、画像を表示させるものなどたくさんのタグがあるので、これらを組み合わせていきページを作成します。

・属性って何?

タグの情報を細かく表すために利用するものです。
必要に応じてタグに属性を付与し、効果を指定したり、細かい指示を与えることができます!

早速HTMLを書いていこう!

準備するのもはテキストエディタとブラウザだけ!
Udemyの動画で案内された『SublimeText』というエディタをインストールしました。
ブラウザは『Chrome』を使用しています。

それでは早速、コーディングしていきます!

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
</head>

<body>

</body>

</html> 

まずは基本となるこのコードを入力。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>ワンニャン園|全国ペット里親募集</title>
  <meta name="description" content="保護している動物たちの里親を募集しています。">
  <meta name="keywards" content="ワンニャン園,犬,猫,ペット,里親">
</head>

<body>

</body>

</html> 

☆ タグを使って、サイトの情報を入力しよう!
今回作成するページのタイトル、サイトの情報を入力していきます。
ペットの里親募集のページを作成するため、サイトの名前、キャッチコピーをtitleに入力します。
さらにサイトの説明文、キーワードをmetaタグに入力します。
name属性を利用し、説明文は”description”キーワードは”keywards”を使って表し、内容の入力にはcontent属性を利用します。

このようになります。
1度この状態で保存し、ブラウザでWEBページの確認を行います。
head要素に記述した内容は実際のWEBページには反映されないため、この時点ではまだ何もWEBページには反映されません。
しかし、ブラウザのタブのところにtitleに入力したサイトの名前が反映されています

WEBページ作成の第一歩完了!!
次回はbody要素の作成に進みます!!

僕が学習しているのは、Udemyオンライン学習コースです。
初心者用のコースなら数千円からと、とてもお手頃で始めやすいため、興味があるけど一歩が踏み出せずに悩んでいる方は是非覗いてみてください!

SPONSORED LINKS

WEBHTML,CSS

Posted by jinya