初心者「が」教える HTML の書き始め方

HTML

こんにちは!みかん星人です。

前回は、「 HTML の始め方」について書きました。
そして今回は、中身を書いていく「 HTML の書き始め方」について現初心者超初心者目線で書いていこうと思います。

では中身を書いていきましょう!

ここに…

こうじゃ!!!

よし!これで保存して…

アレ…?何も表示されない…どうして…?

HTMLちゃん
HTMLちゃん

  どこに書いとんねんボケ  

HTMLちゃん、おこ。
ナゼなのか説明します。

これもまた前回同様、作文でたとえ話をしようと思います。

こんな感じで、いくら作文用紙を用意したとて、マス目を無視し書くべきところに書かないと怒られます

じゃあHTMLでいう「マス目はドコか」というと…

<body> と </body> で囲まれたここです!!!!が書いてある場所。
HTMLの本文は基本ここに書きます。

ではそこに書いてみましょう。

よし! <body> と </body> の中に書いたぞ!表示されたか見てみるかぁ!

あれ?改行されてない…なんで?

HTMLちゃん
HTMLちゃん

  なんか文句あんのか  

これも作文同様、ちゃんとした書き方をしないとダメなのです。
今の HTML を作文で表現するとこんな感じ ↓

書いてはいるが、作文の書き方ではない。
ただ書いてあるだけって感じ

じゃあどうするか、
ここで登場「タグ」と呼ばれるもの。

  なにそれ?分かんねぇ詰んだわ…  

詰んでません!!タグというのは<body></body><title></title>とかの今まさにメモ帳に書いてあるソレです!!

実はこのタグにはいろいろ種類がありまして、
一番分かりやすいのは<title></title>←これ
このタグは「タイトル」を書くためだけのタグ。

それと似た感じで「文字」を書くためだけのタグも複数存在します。
結構よく見るような画像で説明しますと… ↓

こんなやつ、文字の大きさが全て違います。
ですがこのタグたち「文字の大きさが違う」が目的のタグではないのです。
むしろ文字の大きさの違いを出すためには使いません。

  じゃあどう使うの?  

文字で説明するより画像で見てもらった方が早いかもなのでまずは下の画像をご覧ください ↓

こんな感じで h1 の下に h2 の下に h3…そして一番下になるところに p を入れてあげます。
上の画像の一番最後に書いた通り


  • h~類は見出しを書くときに使う
  • p はその前に書いたh~の説明を書くときなどに使う

そんな感じで文字の大きさ目的では使いません
正直 h6 なんかはめったに使わないです。使ったことないです。むしろ使ってみたい。
ただ、そんなに見出しが多いと見ている方も混乱してしまうし何より見づらくなってしまうこと間違いなしなので使いたくありません。(どっちだよ)

まぁとりあえずタグを使ってさっきの HTML を完成させてみましょう。

見出しか?アレ。
正直こんな文は全部<p></p>でもいける。

せっかくなのでこれも作文で表現してみます。

おぉ~…。


最後に文字だけど文字じゃないようなものも紹介しておきます。
<a></a>というもの。
これを簡単に説明するとリンクを作れるものです。
良い機会なので僕のTwitterのリンクを張っておきます。
みかん星人のTwitter

なんか青色になる。
そして、しれっと出てきている「 href 」ってなんだよと思われるかもしれないがそう書かないとナゼかリンクが張れなくなるのでそういうものと覚えるしかないです…。
文字の色を変えたりリンクの下にある謎の線を消したりもできますが今回は「 HTML の書き始め方」というタイトルでやっているのでまたの機会に!

では今回はここで終わりにしたいと思います!
次回予告的なのしときます。

次回! CSS の始め方!!

  なにそれ?  

先ほど書いた「文字の色を変える」や「リンクの謎の下線を消す」などができるすごいやつのことです!
次回も同様「メモ帳」を使って解説をしていく予定なのでよろしくお願いします!では!

コメント

  1. Joker123 より:

    Have you ever thought about adding a little bit more than just your
    articles? I mean, what you say is important and everything.
    However just imagine if you added some great pictures or videos to give your posts more, “pop”!
    Your content is excellent but with images and video clips, this site could undeniably be one of the
    very best in its field. Superb blog!

  2. roblox song より:

    Hi there, just wanted to mention, I enjoyed this article.
    It was inspiring. Keep on posting!

  3. More and more people rely on mail orders to meet
    their prescription drug needs.

  4. iclub88 より:

    I just like the helpful info you provide to your articles.
    I’ll bookmark your blog and take a look at again right here frequently.
    I’m moderately certain I’ll be informed plenty of new stuff right here!
    Good luck for the following!

  5. Hi, I log on to your blog daily. Your humoristic style is awesome,
    keep it up!

  6. supertotobet より:

    It’s appropriate time to make some plans for the future
    and it is time to be happy. I’ve read this post and if I could I want to suggest you some interesting
    things or suggestions. Maybe you can write next articles referring to this article.
    I wish to read more things about it!

  7. buy ghb online より:

    I pay a quick visit each day some web pages and websites to read articles, but this web site presents feature based articles.

  8. It’s going to be ending of mine day, except before end I am reading this enormous piece of writing
    to increase my know-how.

トップへ戻る
タイトルとURLをコピーしました