＜広告＞

HTML

HTML作成－３つの基本中の基本！

Webサイトを作る時に必ず必要になってくるのが「HTML」！

基本中の基本がわかっているとWebサイトが作れます！

どこかのWebサイトのソースをコピペして使ってもいいですが、HTMLを理解していると

  • 自分でイチからWebサイトが作れる
  • トラブル時に自分で対応できる

などのメリットがあります！

今回は、HTMLの基本中の基本をご紹介します。

投稿者「みか」自己紹介

  • パソコンとデータベースが大好き
  • 自社でネットワーク・システム・機器管理、Webサイト構築
  • 自社向けのシステムをMicrosoft AccessやPHPで多数構築
  • Excelでの作業はVBAを使って効率化
  • ロックバンド「VARS」でベース担当
  • 「VARS」のWebサイト、ブログも構築
  • 「VARS」のライブを観に来てね！https://vasofatum.jp/live/

HTMLとは？

「HyperText Markup Language」（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページコンテンツの構造を定義する「マークアップ言語」のこと。

じゃあ、「マークアップ言語」とは、「タグ」を使ってテキストデータの構造をコンピュータが理解できるようにする言語のこと。

ようは、Webサイトを作るためのプログラムみたいなもの。

じゃあ、「マークアップ言語」と「プログラム言語」の違いは？みたいなことになると思いますが、そこはまたの機会に記事にします。

HTML作成－３つの基本中の基本

HTMLを作成するにあたって、必ずやることは以下の３つ。

  • テキストエディタでHTMLを書く
  • ファイルを「.html」の拡張子で保存する
  • ブラウザで表示する

テキストエディタでHTMLを書く

テキストエディタの選択

Visual Studio Code

私は、Windowsを使っているので、HTMLを作る時は、もっぱら「Visual Studio Code」を使っています。

「Visual Studio Code」は、階層構造（ツリー構造）がわかりやすいので、ファイルやフォルダを整理・管理しやすいです。

▼「Visual Studio Code」のインストールはこちら▼

メモ帳

Windowsは、メモ帳でもできますが、ファイルの構造がわからないので、ファイル数が多くなると不便です。

HTML要素の基本

HTMLは、「開始タグ」、「終了タグ」、「コンテンツ」の要素で構成します。

例：開始タグ ＝ <body>

　　終了タグ ＝ </body>

　　コンテンツ ＝ ブラウザに表示されるもの

基本中の基本のHTMLを書いてみます。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>html書き方！基本の基本</title>
</head>
<body>
    <h1>htmlの基本の基本</h1>
    <p>ここがbodyの中身</p>
</body>
</html>

<!docutype html> ＝ DOCTYPE宣言（文書型宣言）といい、HTML文書の先頭に記述する宣言文で、その文書がどのバージョンのHTMLで書かれているかをブラウザに伝えるものです。

<html lang="ja"> ＝ HTMLドキュメントの主な言語が日本語であることを示すためのHTML属性です。

<html></html> ＝ Webページのすべてのコンテンツを囲む要素です。

<head></head> ＝ この部分は人間からは見えない部分で、検索エンジン（GoogleやYahooなど）向けのキーワードやページの説明（ディスクリプション）を設定したり、ページのスタイルを決定するCSS、ページを動的に動かすためのJavascriptなどを読み込む部分です。

<meta charset="utf-8"> ＝ Webページが「UTF-8」という文字コードで記述されていることをブラウザや検索エンジンに伝えるタグです。「UTF-8」にしておいた方が文字化けなどのトラブルが起こりません。

<title></title> ＝ ブラウザのページのタブに表示されるWebページのタイトルです。

<body></body> ＝ 人間が見える文字、画像、動画、音声などのコンテンツを書きます。

ファイルを「.html」の拡張子で保存する

HTMLファイルは拡張子を必ず「.html」にします。

特にメモ帳の場合、ファイルを保存するときは、何も考えずにファイルを保存すると、拡張子が「.txt」になります。

メモ帳で保存する時は、「ファイルの種類」「ファイル名」「エンコード」に気をつけます。

ファイルの種類：すべてのファイル

ファイル名：拡張子を「.html」

エンコード：UTF-8

ブラウザで表示する

作成したhtmlファイルをダブルクリックすると、ブラウザが開いてWebページが表示されます！

＜広告＞

-HTML
-, ,