超シンプルなHTMLを書いて表示だけしてみる

TOP
完全未経験での「Webサイト制作」と「公開」
超シンプルなHTMLを書いて表示だけしてみる

2020/08/05

まずはHTMLというものでWebサイトを作成していきます。

HTMLの役割としてはWebサイトの構成を記述することで、「どこ」に「どういう情報」が書かれているのかを示すものです。

例えば、サイト上部にはメニューがって、真ん中に記事があって、記事は序論、本論、結論のような構成となっていて....といったような構成をHTMLで記述します。

HTMLを書いてみる

HTMLの記述は簡単で、以下のようになります。

<h1>こんにちは</h1>

<h1></h1>というのがタグと呼ばれ、<h1>がタグの始まり、</h1>がタグの終わりになり、このタグに囲まれた「こんにちは」がタグの影響範囲となります。

ここだとh1というタグを使ってるので「こんにちは」にはh1が適用されるということになります。ちなみにh1は見出しです。

タグは入れ子にできる

タグは入れ子にすることができます。

<div>
  <h1>こんにちは</h1>
</div>

divというのは特に意味がないタグで、特定のまとまりを示したいときに使ったりします。

基本情報を盛り込んだHTMLにする

HTMLにはページのタイトルや、日本語向けの記事であることの明記をしたりします。

よく使うであろう基本的な構成を下に記述しておきました。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルサイト</title>
</head>
<body>
  <div>
    <h1>こんにちは</h1>
  </div>
</body>
</html>

bodyと呼ばれるタグ内に記述したものがサイトの内容になります。

ブラウザで表示すると以下のように表示されます。ブラウザで表示するには作成したファイルをダブルクリックすれば開きます。

本来はbodyというタグ内にいろいろなタグを配置してWeb制作していきます。

このシリーズの目的はインターネットに公開することなので、詳しいタグの説明や、どういう構成が適切かなどは省略します。

次回はデザインの部分を作成していきます。

2020/08/05