Webサイトを作るのに絶対に必要なもの、それは「HTML」です。
HTMLはなんとなく聞いたことはあるケド使い方や基本知識は全くわからない、というHTML初心者は多いのではないでしょうか？
そこで、HTML超初心者の方でもWebサイトが作れるように基本知識を交えて説明していきます。
▼HTMLについてよく知らない人はコチラの記事をチェック！
チェック【Webデザイン超初心者向け】HTMLとCSSとは？
目次
Webサイトを作るには環境構築が必要？
Webサイトを作るには、HTML文書作成の環境構築を整えなければなりません。
そこでまずHTML文書作成の環境構築に必要なものは、テキストエディターです。
- テキストエディターをインストールする
- テキストエディターでHTML文書を作成する
- HTML文書をhtmlファイルとして保存する
- 保存したhtmlファイルをサーバーにアップロードする
たったこれだけで、Web上にサイトを公開することができます。
テキストエディターさえインストールすれば、HTMLの使い方を覚えるだけです。
おすすめはMicroSoft社で提供しているVisual Studio Codeです。
使い方は下記記事を参考に。
なお、ここでは②のHTML文書の作り方の基本について説明していきます。
HTML文書の基本は「タグ」
HTMLの基本はタグです。
＜〇〇＞〜〜＜/〇〇＞HTMLがどのような内容で表記されるかがタグとしての約割になります。
HTMLの基本的な構成
一般的に用いられるHTMLの構成です。
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>それぞれの基本的なタグの意味と使い方について説明します。
①！DOCTYPE html
<!DOCTYPE html><!DOCTYPE html>とは、この文書はHTMLで構成されていると宣言することです。
②html
<html> </html><html>とは、囲っている間がHTML文書であることを表します。
③head
<head> </head><head>とは、簡単にいうとhtmlファイルの情報を宣言するものです。
基本的に、htmlタグの後bodyタグの前に設置します。
④body
＜body＞ ＜/body＞<body>とは、本文のことでWeb上に表示される部分です。
実際にWeb上に表示されるのはこのbodyタグの間の部分です。
HTML文書はどんな見え方をするの？
では実際にHTML文書がどのように表示されるのかを確認してみます。
テキストエディターで下記のコードを入力してみます。
<!DOCTYPE html>
<html>
<head>これはサンプルです。</head>
<header>HTMLの基本</header>
<h1>HTMLでWebサイトを作りたい！</h1>
<body>
HTMLの基本はタグです。
</body> </html>ファイルを保存して、ファイルをクリックしてgooglechromeのブラウザで開くと以下のように表示されます。
このHTML文書にCSSでスタイルを変更することでキレイなWebサイトを作ることができます。
あわせて読みたい
気になるWebサイトのHTMLソースコードの確認方法
ブラウザなどで表示されるWebサイトのHTMLソースコードは、じつはカンタンに確認できます。
やり方は、
- Webサイトのページで右クリックし
- 「ページのソースを表示」を選択する
たったこれだけです。
気になるWebサイトのソースコードを眺めるだけでも、良い勉強になります。
HTMLでのWebサイトの作り方についてまとめ
HTMLでWebサイトを作る方法について再度まとめると以下のようになります。
- テキストエディターをインストールする
- テキストエディターでHTML文書を作成する
- HTML文書をhtmlファイルとして保存する
- 保存したhtmlファイルをサーバーにアップロードする
①と③はそれほど難しくはありません。
②が少し難関ですが、HTMLとCSSでHTML文書さえ作ることができれば、カンタンにWebサイトを作ることができます。
まずはHTMLの基本的なタグと、文書構成を覚えていきましょう。
HTML学習のおすすめ本
