プログラミング初心者へのWebデザイナー攻略サイト

パソコンが苦手でプログラミング自体何も知らなかった自分が1ヶ月でWebデザイナーになる方法

【超基本!】HTMLとは??

 

こんにちは、ゆうきです。

 

突然ですが、人間が生きていくのに一番大事なものは何だと思いますか??

 

これに対する答えは「血液」や「酸素」など人それぞれだと思いますが、僕は心臓だと思います。(血液や酸素も心臓と同じくらい大事ってねw)

 

ではさっそく本題に入っていきます。

 

Webを作成するのにHTMLは必要不可欠です。なぜなら、HTMLはWeb上に表示させたい文字や、構造を作れるからです。

 

Webを作るのにHTMLがどれだけ重要なのかというと、人間が生きていく上でとても重要な「心臓」であったり「血液」や「酸素」くらい大事なんです。

 

今回はそんなWebを作成したいが、HTMLの書き方が分からない人のために、基本的な書き方について説明していきます。

f:id:programmingkun:20201014215655p:plain



 

 

HTMLの書き方【基盤】

 

まず、HTMLを書く際の基盤について説明していきます。

 

実際にHTMLの基本構造を書くと、下図のような構造になっています。

f:id:programmingkun:20190721215039p:plain

 
  • <!DOCTYPE html> は「今からHTMLを使うよ!」という宣言をするコードです。必ず一番初めに書かないといけないコードです。
  • <html>~</html> はHTML文書の範囲を示します。
  • <head>~</head> はページのヘッダー情報の範囲を示します。
  • <title>~</title> はページのタイトルを示す範囲を指定します。また、<head>タグ内で使用します。
  • <body>~</body> はブラウザ(Webに表示させる本文的なところ)に表示する内容を記述する範囲を指定します。
  • <p>~</p> は段落を示します。
 

これがHTMLで書く際の基盤となっていきます。

f:id:programmingkun:20190721213305j:plain

HTMLのタグの書き方

 

タグを書く際はまず「< >」を書き、その間に性格を指定する要素名を入れ、「<要素名> <要素名>」と、2つ並べます。

 

それから、2つ目の「< >」に「/」を加え、「<要素名> </要素名>」という形にします。このとき「<要素名>」を開始タグ、「</要素名>」を終了タグといいます。

 

そして、文字列は開始タグと終了タグのあいだに書くようにしてください。

 

例えば、文書の中に「HTMLの書き方」という見出しを作りたいときは、「hタグ(h=headerの意味)」を使って次のように書くことができます。

 

f:id:programmingkun:20190721214715p:plain

 

要素とは

 

HTML要素には、現在100を超える種類があります。代表的なものをいくつか紹介しましょう。

 

  • h1 - 見出し(h1,h2,h3,h4...と、数が大きくなるにつれて見出しは小さくなります。)
  • a - リンク(表示させたい画像や動画のURLを書くことによって表示させることができる)
  • ul,li - 箇条書き

 

HTMLを書く上で気をつけること

 

HTMLを書く際は全角文字がNGなので、コードは必ず半角英数字で書く必要があります。

 

同じく、全角スペースもエラーの原因となるため、コードを書く際は気をつけましょう!

 

f:id:programmingkun:20190827162223j:plain

まとめ

 
HTMLの超基本的な書き方について説明しましたが、実際にあなたがコードを書いてWebを制作してみないとHTMLを習得することは出来ません。
 
でも、どうやって自分一人でWebを制作していけばいいのか分からないですよね。
 
そこで!
ちょうど現在、プログラミング初心者の方限定でたった2週間でHTML・CSSを習得したい人を募集しています。
*ただし本気で取り組む方のみ
 
詳しくはこちらの記事をご覧ください。