HTMLを学ぼう!基礎

副業

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

2019年2月6日

前回は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」とでもしておいて下さい。)

表示画像

格納先

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

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

ブラウザ表示

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

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

解説

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

ソースコード解説1

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

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

・画像表示する場合はimgタグ
・リンク(ジャンプ)する場合はaタグ
・段落はpタグ
・見出しはh1〜h6

HTMLの基本

ソース解析1

ソース解析2

ソース解析3

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

-副業

© 2020 楽するわーく