【パート4】初心者必見!html入門① ど素人がプログラミング始めてみた

【パート4】初心者必見!html入門① ど素人がプログラミング始めてみた

こんにちはk-hippoです。プログラミング始めてみた【パート3】でhtmlの大まかな流れが理解できてきたので、それを紹介させていただきます。私は完全な初心者で0からプログラミングを始めました。パート0からご覧になる方は以下の記事から読んでみてください。

完全に経験ゼロからスタートして、副業として収益化するまでいけるか!?を身を以て実践しています。

今回の記事ではHTMLファイル作り方、書き方を一部紹介します。今回の記事を見ることで、htmlでwebに文字を載せるための最低限の方法を理解できると思います。初心者・入門のかた、まだエディタになにを書いていいかわからないという方は必見です!

この記事では文系でもプログラミング副業で月10万円稼ぐ!の本とyoutubeの動画を参考にさせていただき、より簡単にわかりやすく解説していきます。

筆者が参考にしたHTML作成の動画 24本

この記事を読むにあたって

この記事を読むにあたって、PCで見ている方であればwindowsであれば「メモ帳」、MacOSであれば「テキストエディット」を起動し、必ずこれらにプログラムを入力しながら理解していく方がいいです。

移動中などでスマートフォンなどで見ている方は、家に帰ってPCが開ける環境になったら、もう一度記事を見ながらPCで入力しながらやってみましょう。

「見るだけ」と「実際やる」では理解度の進み方が全く違いますので!

HTMLとはなにか?

HTML(HyperText MarkupLanguage):Webブラウザに文字を表示させるための世界共通言語。ハイパーテキストとはお互いにジャンプしあえる機能のこと、マークアップとは「タグ」と呼ばれる世界共通で決められた文字をつかって、ブラウザが理解できるようになること、ランゲージとは「言語」の意味。です。

とこれだけ説明されてもなんのことかわからないですが、簡単にいうとWebブラウザに表示されてる文字はHTMLで作られているということ。HTMLだけで作られたWebページはほぼ存在しませんが、これに他の言語(CSSやJava scriptなど)を組み合わせてページが完成します。綺麗なページの「文字」の部分の役割を担っているのがHTMLと理解しておけば今のところ十分でしょう。

わからなかったら、なんとなく頭に入れただけで先に進みましょう。プログラミングを行うなかで1つ1つの言葉を全て意味から理解しようとしたら、かなり回り道になると思うので、まずは作業し進めることを意識していきます。

HTMLファイルを作るためのルール

HTMLファイルを作るためのルールは2つです。

  • ファイル名の最後に「.html」とつける(拡張子)
  • テキストエディタで書く(Windowsならメモ帳、MacOSならテキストエディットが初期から使えます)

この2点です。

拡張子については、このファイルがHTMLで書かれていますよと認識させるためですので、これは必ずつけてください。

ファイル名をつけるためのルールもいくつかあります

  • 英数字の小文字に統一する
  • 全角文字、半角カナは禁止
  • 空白(スペース)は入れない
  • 使えない記号がある
  • できるだけ途中で変更しない

これらを守ればHTMLファイルは作成できます

実際にHTMLファイルを作ってみましょう

まず、テキストエディタを開きます。私はMacOSですので、テキストエディットを用いて説明させていただきます。【メモ帳でも同様に行えると思いますが、微妙にOSによって誤差がある部分に関してはググってみて下さい。】

テキストエディタを開いたら、まず「hello world」と打ってみましょう。そのファイルを保存します。保存の時には上記のルールを守り、拡張子には「.html」と入れます。名前はなんでも構いません。ここでは「index.html」としています。そしてエンコーディングというものがありますが、ここでは深く説明しません。まず「UTF–8」を選択して下さい。Windowsの方は文字コード「UTF-8」にしていただけたらと思います。

これで最も簡単なファイルができました。ファイルを開くとブラウザが立ち上がり、真っ白のページに「hello world」という文字が表示されたと思います。それができていれば成功です。

ではプログラムを打ってみましょう

ここから先はとりあえず真似をしてやってみて下さい。表示されている文字の意味は随所で解説しますので、まずは以下の画像のように入力してみましょう。

このようにエディタに入力して、先ほどの方法で保存すると、

ブラウザが立ち上がり、このようなページが開かれると思います。

これがWebに文字を載せる最も基本的な情報を載せたプログラムになります。それでは1枚目の画像の説明をしていきます。

<>で作られるタグで役割を決める

エディタで記載した中で<>で囲まれた文字をたくさん打ったと思います。これが「タグ」と言われるものです。このタグで囲まれたなかに特定の言語を打つことで、そのタグ以降のものは「〜〜ですよ」と役割を持たせることができます。

たとえば<title>プログラミング始めてました</title>と囲まれている部分はwebが開いた時に、タブに表示されるそのページのタイトルを担います。

このように<>で作られるタグと呼ばれるもので役割を決めていきます。少しだけタグの説明をしていきます。

よく使われる「タグ」

全てを覚える必要はありません。作業していれば徐々に記憶されていきます。最初のうちは調べつつ、打っていくので問題ありません。

基本構造を示すタグ

  • <!DOCTYPE>:これからHTMLを使うという宣言
  • <html>:htmlというものを作る枠組
  • <head>:コンピューターへ教える情報を指定する
  • <body>:人へ伝える情報を指定する

コンピューター用の情報

  • <meta>:htmlの追加情報を指定する
  • <title>:ページのタイトルを指定する
  • <header><main><footer>:人に伝える情報を3つに分ける

人が見たとき用の情報【上記のプログラムではまだ使用していませんが紹介だけ】

  • <h1>~<h6>:文字の重要度を指定する
  • <p>:段落を指定する
  • <br>:改行する
  • <blockquote>,<q>:引用する
  • <big><small><strong>:文字の大きさや太さを変える
  • <ul>:箇条書きにする
  • <img>:画像を表示する
  • <a>:別のページへジャンプする
  • <div>:「見栄えの領域」を指定する
  • <input type=”button”>:プログラムを動かすきっかけを与える

などたくさんのタグがあります。入門・初心者の方々はここでフリーズしますので、覚えることはやめましょう(笑)とにかくやりながら覚えることでOKです!

では話を戻して、先ほど入力したhtmlテキストの解説をします

前後の黄色のくくりの中に「コンピューターへの情報=<head>」と「人への情報=<body>」を入力する

ここを基本として、残り様々なタグを用いて文字を装飾していきます。文字の配置やデザインなどはCCSと言われるデザインを担当する言語で作っていきます。これはまた別の記事でUPします。

終わりに

  • まずPCを用意し、テキストエディットまたはメモ帳を起動する
  • HTMLを作るルールを理解する(真似する)
  • 実際にhtmlテキストを打ってみて、感覚を覚える
  • htmlの構成をある程度理解する
  • タグは今は覚えなくていいから真似をする

とりあえずここまでを「html入門1」とします。ここからも続きを掲載して、読んで頂ける方々と一緒にhtmlを習得できるようにしていければと思います。