Gieer講座へようこそ!
まずはWEBエンジニアの入り口、HTMLから始めていきます。

本講座ではHTMLを用意してブラウザで表示するところまでをやってみます。

HTMLとは?

最初にHTMLという用語について軽く触れておきましょう。

HTMLとはいわゆるホームページを作るために必須となる言語で、これをコンピュータに読ませることでページが構築されます。
「HyperText Markup Language」の頭文字を取ってHTMLを呼んでいます。
「単なる文章を超えた、コンピュータが理解可能な言語」という感じでしょうか。(不安)

HTMLを用意しよう

HTMLを用意するため、実際に書いてみましょう!

HTMLのH「HyperText」からも分かるように、基本はテキストです。
つまり、テキストを書いて保存できるソフトであれば何でもHTMLを書けてしまいます。

Windowsに標準搭載されているメモ帳でも書けるのですが、ここではテキスト編集に特化したソフトを使ってみましょう。

テキスト編集ソフトの準備

Gieerではまず、私も愛用していたTeraPadを使っていきます。

TeraPadのダウンロード(Vector) ※ インストール不要のzip版がおすすめです

ダウンロードが完了したらTeraPadを起動してみましょう。
以下のような画面が立ち上がります。

TeraPad起動画面

HTMLを書く

TeraPadに以下のテキストを打っていきます。

今は特に何も考えず、同じように打ってみてください。

<!doctype html>
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
</body>
</html>

HTMLとして保存

コンピュータにHTMLとして認識させるためには、拡張子を.htmlにして保存します。

最初にGieer講座用のフォルダgieerをわかりやすい場所に作っておきましょう。

フォルダを作成したら今度はTeraPadから、ファイル > 名前を付けて保存、gieerフォルダを選択してindex.htmlという名前で保存します。

html保存

保存するとTeraPadがHTMLファイルとして認識し、記述に応じた色が付くようになります。

htmlハイライト

テキスト編集に特化したソフトには、このような便利な機能がたくさん付いています。

表示確認

保存したHTMLファイルをブラウザで表示してみましょう。

gieerフォルダを開き、index.htmlをダブルクリックします。

はじめてのHTML

ブラウザが立ち上がり、このように表示されれば正しく記述・保存されています。

まとめ

WEBエンジニアの世界へようこそ!
あなたは間違くなく正しいHTMLを書くことができました!

本講座では

  • テキスト編集ソフトの準備
  • HTMLの記述と保存
  • HTMLの表示

を行いました。

これで本格的に講座に入っていくための準備が整いました。
ここからどんどんWEBエンジニアとしての力を付けていきましょう!

次の記事

これまでの記事

隠します!
Loading...