初心者「が」教える 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. sikis izle より:

    I wish I had a dime for every bad article I ave read lately. I also wish other writers had your talent and style. Thank you. Madge Roderigo Akela

  2. yabanci より:

    You can think of it as a preview before you take them into privates. Moyna Chet Burnie

  3. turkce より:

    Really appreciate you sharing this blog post. Much thanks again. Really Cool. Rosalinde Franchot Ilysa

  4. yabanci より:

    My partner and I stumbled over here by a different website and thought I might check things out. Thelma Peterus Sianna

  5. 720p より:

    Great, thanks for sharing this blog article. Really thank you! Awesome. Cristy Brose Stephenie

  6. yabanci より:

    My brother suggested I might like this website. He was entirely right. Katee Cyrillus Pleione

  7. download より:

    I feel that is among the such a lot vital information for me. Junina Rance Elmajian

  8. web-dl より:

    If you want to take much from this piece of writing then you have to apply these methods to your won weblog. Korie Avigdor Bat

  9. bedava より:

    Pretty! This was an extremely wonderful post. Thanks for supplying this info. Christabel Wade Kuhlman

  10. web-dl より:

    I visited various sites but the audio feature for audio songs current at this web site is in fact superb. Renate Byram Braynard

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