見出し画像

サイトを作ろうと思ったらとりまHTML

Blue Note

アフィリエイトとかSEOとか先にやっちゃいましたがこっちを先にすべきでした！申し訳ありません！失念してました！

さて、世界中のサイトはHTMLなるものからできています。もちろん今見ているこの『note』もHTMLからできています。

最近では便利な物が沢山出てきてHTMLなんか全く知らなくてもいいやーと思っている方も多くいらっしゃると思います。

ですので私が今回書くHTMLもざっくばらんな説明のみになると思いますがわかりやすくかけるように努力しますね！

HTML学ぶならまずはこれをGETせよ！

よっしゃ！勉強するぞー！っと思い立った方はとりあえず『エディタ』なるものをダウンロードしましょう！プロも無料の物を使っている方が多いので何も気にせずにPCに入れちゃってください。

強いて言うなら・・・・
・Windowsはサクラエディタ（無料）がおすすめで
https://sakura-editor.github.io/download.html

・MacならSublime Text（無料）とかでいいんじゃないでしょうか？
http://www.sublimetext.com/

まぁそんな深く考える必要もありません。なんでも良いです。とか言いながら上の2つは自分なりのこだわりがあって現在仕事でも使っています。

とりあえず、皆さんに吐き気を覚えてもらいます

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="">
</head>
<body>
<!-- Place your content here -->
<!-- SCRIPTS -->
<!-- Example: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
</body>
</html>

上記はHTML5でスマホサイト作るときとかに使えそうなテンプレートです。ぶっちゃけどうですか？
やる気わきますか？ですよね！
なれない方が見ると？？？？です。
なんで上は気にしないでください！

<html>

    <head>
        <title></title>
    </head>

    <body>
    </body>   

</html>

どうですか？スッキリしませんでしたか？最初はこのくらいで大丈夫です！
では早速学習していきましょう！

HTMLは、<>で始まり</>で終わります。上を見てください！
<>これを開始タグって言います。
</>これを終了タグって言います。
でも覚えなくてもいいです。これの間に挟んだ日本語がとりあえず映るのです。


<html>で始まり</html>で終わっています。
ここの間に書くものがHTMLとなります。

その中にある<head></head>これがヘッダーといってそのサイトの情報を入れるところです。誰が作ったとかこのサイトのタイトルとか入れます。

<body>で始まり</body>で終わっています。
ここの間に書くものが人間の目に映る場所になります。

HTMLは小説で考えると非常にわかりやすくなります

HTMLはそもそも情報管理・整理が目的なため作られたので、当時は文書構造さえ記述できれば良かったんです。

なんでまさに考え方が本なんです。

<html>

<!--表紙-->
    <head>
        <title>私の人生の本</title>
    </head>
<!--中身-->
    <body>
        <!--表紙開いたらもっかいほんのタイトル書いてるから-->
        <h1>私の人生の本</h1>

    <!--やっぱり目次は大事ですよね-->
    <ul>
        <li>幼稚園</li>
        <li>小学校</li>
        <li>中学校</li>
    </ul>

    <!--目次にあったらその章が始まったら書きますよね？-->
    <h2>幼稚園</h2>
    <!--段落-->
        <p>幼稚園の頃はほとんど記憶にございません。</p>
        <p>寝てばかりいた気がする・・・</p>


    </body>   

</html>

上記のHTMLのソースは今頭の中で小説をイメージして書いたものです。ですのでこう書かなきゃ駄目ということは全くありません。
上のソースを画像にしてみると・・・

こんな感じの本になりました。これだけでもかけるようになるとあとは勝手にWebを調べて覚えていけると思います。

なんでHTMLを知っておくべきなのか？

それはですね、すこし知っておくだけでもワードプレスを改造するときやアフィリエイトコードを発行してサイトに貼る時などに役に立つからです！

Webをするなら本当に知っておくべき基本の要素だと思いますし、HTMLを覚えたら次にCSS、次にJavascript、次にPHP、次にMYSQL、次にLinuxとかこだわりを持ち出して勝手に覚えていくと思います。

なのでまずは簡単なものから覚えていきましょう！思い立ったら吉日ですよ！

今日のを偉そうにまとめてみる

HTMLはプログラムと言われる類のものではありません。俗に言うスクリプト言語です。またWebの基本で実を言うと最も多くのものに必要なものです。アプリを作るのにも覚えておくと意外なところで役に立ってくれます。

では最後に！Webをこれからやろうと考えている方へ
面倒くさい・・・難しそう・・・
また今度でいいや・・・もう若くないから・・・

って人間どうしてもそんな感じで考えがちですが（私はそうです）そんな事を思ったら心の中でつぶやいてください。

『あなたのこれからの人生の中で、今日が一番若い日。』

十年後の自分が胸を張って生活できるかは、これからの人生で最も若い今の自分が努力したかどうかだと私は常に考えています。


この記事が参加している募集

#はじめてのインターネット

2,697件

うちの熱帯魚ミッキーマウスプラティの『与助』さん夫婦の食費とヒーター代に・・・御慈悲を！！子供が爆殖しています。どなたか可愛がってくれる方いませんか？（送料に）