[初心者向け]htmlについて知ろう！

4029 ワード
HTML 未経験 未経験エンジニア プログラミング初心者 HTML テキストリンク

はじめに

＜対象とする人＞
・プログラミングを勉強していきたい
・プログラミングが全くの未経験
・パソコンが好きだし、プログラミングやってみよかな〜

そんな方のための記事。（ちなみに、筆者自身も今年の2月ごろからプログラミングを始めた初心者です）

そんなのを書いていきますね〜。

この記事ではHTMLの基本的なことを記事に書き、
webページに自分が書いたものを表示できるようにしたいと思います。

HTMLってなんなの？？？？

一言で言うと・・・・
「ホームページを作るときに使う言語」

です。

めっちゃざっくりとした説明ですので、詳しく知りたい方は、googleで「htmlとは」とググれば詳しくでてきます。

htmlとは、「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で・・・・
みたいなのでてくるのでそちらをみてみてください。
（この記事では、簡単なことだけ説明をしていきます。）

習うより慣れろ

実際にhtmlを書いていったほうが頭に入りやすいと思うので、早速書いていきましょう。

「sublimeText」
を使って進めていきますので、ダウンロードしましょう。

sublimeTextのダウンロードページ

〜ダウンロード後〜
その１
Sublime textを起動してください。

その２
ファイルを新規作成
ctrlキー + n を押すと、ファイルを新規作成できます。

その３
・beginner.htmlという名前でファイルを保存します。デスクトップに保存しましょう。
ctrlキー + sを使えば保存ができます。

そして、beginner.htmlに

beginner.html
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8" />
  <title></title>
</head>
  <body>
    プログラミングの勉強頑張ろう！
  </body>
</html>

をコピペしちゃってください。
そして、また保存してください。

最後にデスクトップにある、beginner.htmlをダブルクリックします。
すると、

こんなWebページを表示することができました！！！！
やったね。

無事、「プログラミングの勉強頑張ろう！」が表示できたかと思います。

違う言葉を表示させよう

先ほどコピペしたものの中に
＜body＞
と
＜/body＞
というのがあったと思うですが、htmlではその＜body＞と＜/body＞の中に色々と書くことでWebページに表示させるものを変えることができます。
ここでは、例として「プログラミングの勉強頑張ろう！」を「プログラミングって楽しい！」に変えてみようと思います。

beginner.html
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8" />
  <title></title>
</head>
  <body>
    プログラミングって楽しい！
  </body>
</html>

と書いて、
ctrl + s で編集した内容を保存。
そして、beginner.htmlのページで、「F5」を押してwebページの更新。
そうすると、
プログラミングって楽しい！
がページに表示されたかと思います。

まとめ

細かい説明は飛ばしたのですが、これで、Webページに自分が書いたものが反映されたかと思います。
基本的にプログラミングは、
Webページに表示したいことを「sublimeText3」のようなテキストエディタに書く。コードを書いていく。
↓
Webページに表示できているか確認
↓
よっしゃ表示できてるやん！嬉しい！！

こんな流れになります。
今回は、その「よっしゃできてるやん！嬉しい！！」
の部分を知ってもらえたらなーと思い、この記事を書きました。
お疲れ様でした。

補足

細かい説明をすっとばしちゃったんで、一応、少し書いておきますね。

＜!DOCTYPE HTML＞
この文章はHTMLの文章ですよ！
っていう宣言の文です。記述がないと、文字が表示されなかったりします。

＜head＞
サイト自体に関する情報を定義する部分。
webページの見た目にはあんまり関係がないです。

＜meta charset="UTF-8" /＞
文章に関する情報を指定しています。
記述しない場合、文字化けをしてしまうことがあります。

＜body＞
ここに記述されたものがwebページに表示されます。

というわけで・・・

お読みいただきありがとうございました。
間違い等ございましたら、ご指摘いただけると嬉しいです！