はじめに
<対象とする人>
・プログラミングを勉強していきたい
・プログラミングが全くの未経験
・パソコンが好きだし、プログラミングやってみよかな〜
そんな方のための記事。(ちなみに、筆者自身も今年の2月ごろからプログラミングを始めた初心者です)
そんなのを書いていきますね〜。
この記事ではHTMLの基本的なことを記事に書き、
webページに自分が書いたものを表示できるようにしたいと思います。
HTMLってなんなの????
一言で言うと・・・・
「ホームページを作るときに使う言語」
です。
めっちゃざっくりとした説明ですので、詳しく知りたい方は、googleで「htmlとは」とググれば詳しくでてきます。
htmlとは、「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略で・・・・
みたいなのでてくるのでそちらをみてみてください。
(この記事では、簡単なことだけ説明をしていきます。)
習うより慣れろ
実際にhtmlを書いていったほうが頭に入りやすいと思うので、早速書いていきましょう。
「sublimeText」
を使って進めていきますので、ダウンロードしましょう。
〜ダウンロード後〜
その1
Sublime textを起動してください。
その2
ファイルを新規作成
ctrlキー + n を押すと、ファイルを新規作成できます。
その3
・beginner.htmlという名前でファイルを保存します。デスクトップに保存しましょう。
ctrlキー + sを使えば保存ができます。
そして、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ページに表示させるものを変えることができます。
ここでは、例として「プログラミングの勉強頑張ろう!」を「プログラミングって楽しい!」に変えてみようと思います。
<!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ページに表示されます。
というわけで・・・
お読みいただきありがとうございました。
間違い等ございましたら、ご指摘いただけると嬉しいです!