初心者「が」教える 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. My partner and I stumbled over here coming from a different
    web address and thought I should check things
    out. I like what I see so now i am following you. Look forward to finding out about your web page
    yet again.

  2. dominoasia より:

    It’s awesome to pay a quick visit this website and reading the views of all colleagues on the topic of this article, while I am
    also keen of getting know-how.

  3. 1win より:

    Были проблемы со выводом средств, посторонней в течении 4 дней, не кинули.

    Here is my blog 1win

  4. I loved as much as you’ll receive carried out right here.
    The sketch is attractive, your authored material stylish. nonetheless, you command get bought
    an edginess over that you wish be delivering the following.
    unwell unquestionably come further formerly
    again as exactly the same nearly a lot often inside case
    you shield this hike.

  5. muaoffice365 より:

    I’d like to find out more? I’d love to find out some additional information.

  6. roblox song より:

    Very good post. I’m facing a few of these issues as well..

  7. After I originally commented I seem to have clicked the -Notify me when new comments are added- checkbox and from now on every time a comment is added I receive 4 emails with
    the exact same comment. There has to be an easy method you are able to remove me from that service?
    Many thanks!

  8. Right away I am going to do my breakfast, once having my breakfast
    coming yet again to read additional news.

  9. ชาบู より:

    I am regular reader, how are you everybody? This
    post posted at this site is in fact nice.

  10. Report より:

    Thanks for sharing your thoughts on HTML. Regards

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