初心者「が」教える 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. Undeniably believe that which you stated. Your favorite justification seemed to be on the web the simplest thing to be aware of.
    I say to you, I definitely get annoyed while people think about worries that they
    just do not know about. You managed to hit the nail upon the top and defined out the whole thing without having side effect , people can take a signal.

    Will likely be back to get more. Thanks

  2. The Dog Foods より:

    What’s up, after reading this awesome paragraph i am as well cheerful to share my knowledge here with friends.

  3. slot online より:

    Write more, thats all I have to say. Literally, it seems as though you relied on the video
    to make your point. You definitely know what youre talking about,
    why throw away your intelligence on just posting videos to your site when you could be giving
    us something enlightening to read?

  4. I am curious to find out what blog system you happen to be utilizing?
    I’m experiencing some small security problems with my latest blog and I would like to find something more safe.
    Do you have any solutions?

  5. supertotobet より:

    I think what you composed was very logical.

    But, think on this, what if you wrote a catchier title?

    I mean, I don’t want to tell you how to run your blog, however suppose you added a headline to possibly get people’s attention? I mean 初心者「が」教える HTMLの書き始め方
    | みかん星人blog is a little vanilla. You ought to
    peek at Yahoo’s home page and see how they create news headlines to get
    viewers to open the links. You might try adding a video or a related picture or two to get people excited about
    everything’ve got to say. In my opinion, it might bring your posts a
    little bit more interesting.

  6. Read More より:

    My brother recommended I might like this website.
    He was totally right. This post truly made my day.
    You can not imagine simply how much time I had spent for this information! Thanks!

  7. Wow, marvelous blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your web site is wonderful, let alone the content!

  8. I’d like to find out more? I’d like to find out more details.

  9. hi!,I really like your writing so a lot! share we be in contact more approximately your article on AOL?
    I need a specialist on this area to resolve my problem. May be that’s you!
    Taking a look forward to peer you.

  10. This is a topic that’s near to my heart… Best wishes!
    Exactly where are your contact details though?

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