【在宅ワーク・副業したい初心者向け】HTMLを学ぼう！基礎

前回はPHPを使ってのホームページを作るという企画をやりました。

今回はHTMLの使い方！という企画をやります。

在宅ワーク・副業したい初心者向けのみなさんに読んでもらいると嬉しいです。

そもそもHTMLとは何？

HTML(HyperText Markup Language)はWebページの基礎を作るための言語です。

表示したい文書や画像などの情報を専用のタグと呼ばれるものに囲って記述していきます。

では詳しく説明していきます。

サンプルページでイメージする

まず、サンプル画像を準備しました。

最終的にこんな感じのウェブページが出来上がります。

イメージが大事ですね。

用意するもの

テキストエディタ

画面に表示したい情報（文書や画像など）を記述するのに使います。

Windowsではsakuraや秀丸などがありますが僕はsakuraを使用しています。

MacではCotEditorやmi、有料のものですとCoda。

お好きなものをダウンロードして使用してください。

WEBブラウザ

レンダリングエンジンと呼ばれるブラウザに備わった機能でHTMLで書かれた文書を解析し画面に表示するものです。

Google ChromeやSafari、firefoxなど普段使用しているブラウザで問題ありません。

おすすめはGoogle Chromeです。

HTMLをブラウザで表示してみる。

下記コードをエディタに記述してみてください。

記述したらそのファイルを保存してください。

ファイル名はなんでもいいですが、拡張子（ファイル名の末尾）は「.html」とします。
（例：index.html）

次に画像ファイルをサーバーにアップ（格納）します。

上記ファイル（index.html）と同じ階層に「img」というフォルダを作成してください。

次に、下記画像を「img」というフォルダの中に入れてください。

（画像ファイル名は「top-img.jpg」とでもしておいて下さい。）

ブラウザ表示させてみる。

下記のように作成したファイルをブラウザにドラッグ&ドロップする

サンプルページと同じものが表示されたと思います。

それでは以下解説していきます。

解説

コードをみてみると<かっこ>で囲まれたものがたくさんあります。

これがタグと呼ばれるもので表示したい情報をこのタグで囲むのが基本です。

タグにも種類がありますが、よく使うものを書いておきますので覚えておいてください。

HTMLの基本

次回はHTMLに記述するタグについて説明していきます。