プログラミング未経験者のための学習ロードマップ【初級者プラン】を無料公開中!詳しくはこちら

まずはHTMLで「Hello World!」と表示してみよう!

htmlでHello World

こんにちは。どうも都内でフロントエンドエンジニアしているレオ(@petasojp)です。
独学でプログラマーを目指している方に向けて有益なことをつぶやいているので良かったら僕のTwitterをフォローしてやってくださいな。

今回はエンジニアの誰しもが通る道、「Hello World!」をWeb上に表示してみようと思います。
凄くすごーく簡単なので、これからエンジニアを目指す方は是非チャレンジしてみてください。

 

HTMLを書く前に準備してほしいもの

まず「Hello World!」とWebに表示する為に必要なものが下記になります。

  • パソコン
  • テキストエディタ
  • ブラウザ(オススメはGoogle chrome)

 

パソコンはMacでもWindowsでもどちらでも良いです。
好きな方を選んで頂ければと。でもエンジニアに多いのはMacだったり…

そして次にテキストエディタが必要です。
無料のもので全然問題ありません。
Windowsだと「メモ帳」だったりMacだったら「mi」が標準でインストールされていたハズ。

でもテキストエディタは実際にコードを記述していく必須ツールなので、これからガリガリコードを書いていきたい!という方はこの段階で本格的なテキストエディタをインストールしておいても良いと思います。

僕も愛用しているエディターは「Atom」です。
無料なのに実務レベルでも使用できる最強エディターだと思います。
インストールも簡単なので下記サイトからインストールしておきましょう!

参考 AtomAtom

そしてお次はブラウザ。
皆さんの中にはSafariだったりfirefoxだったりInternetexplorerだったり色々だと思うんですけど、この際エンジニアにも人気なGoogle chromeをダウンロードしてメインブラウザにしておきましょう。

なんでエンジニアに人気なのかって言うとGoogle chromeの「デベロッパーツール」がとても使いやすいからです。
始めのうちはそんなに使用することも無いかもしれませんが、最初から慣れておくことで後々楽だと思います。

他のブラウザでもデベロッパーツールを使用することは出来ると思いますが、ここは王道を走っておきましょう。

 

HTMLで「Hello World!」と表示してみよう!

さて、いよいよコーディングタイムです!
と、その前に実際にどんな表示がされるかコードと一緒に見てみましょう。

See the Pen Hello World by LEO (@leo199009) on CodePen.

左側が実際のHTMLコードで右側がWebで表示された状態です。

レオ

どうですか?簡単でしょ?

正直、左側のコードをコピペしてhtmlファイルにしてブラウザで表示すれば終わりです。
でももうちょっと手順など深堀りしますね。

htmlファイル作成からWebで表示するまで

まず手順として下記のようになります。

  1. html記述
  2. index.htmlで保存
  3. Google chromeで表示

 

ではやってみましょう!
まずはテキストエディタを開いて先程のhtmlコードを記述してみてください。

ポイント
ここで一つポイントになるのがコードをそのままコピーせずに、コードを見ながら実際に手を動かして入力すること

そのままコピーするのも悪くないですが、それだと何も身になりません。
コードは書いて覚えるものなので、始めからコピペに慣れてしまわないようにしましょう。

コード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!と表示してみよう</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

こいつを記述したら次は「ファイルの保存」。

「名前を付けて保存」で「index.html」という名前で任意の位置で保存しましょう。
今の段階なら保存場所はどこでも構いませんが、オススメは「study」など自分の好きな名前のフォルダを作ってその中に保存しておきましょう。

そしていよいよブラウザで表示します。
ブラウザでの表示の方法ですが、「index.html」をダブルクリックしてGoogle chromeで開くでもよし、ドラッグ&ドロップで表示してもいいです。

 

最後に

いかがでしたでしょうか。
無事にブラウザで表示出来ましたでしょうか?

もし、分からないことがあればツイッターでも気軽に訪ねてみてくださいね!
調子良ければ回答しますので。
ただ返答率は20%ぐらいかも…

では今回はこの辺で。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です