【HTML入門】ゼロから始めるWebページ作成

Web

こちらの記事から読み始めることをおすすめします。

【Web入門】Web技術 基本のき
Webは、World Wide Web(ワールドワイドウェブ)のことで、様々な文章(Webページ)を世界中で共有することを目的に作られました。ここではWebの基本の基本について簡単に解説していきます。

HTMLとは?

HTML(エイチティーエルエム)は、Hyper Text Markup Languageの略で、Webページを構成するためのマークアップ言語です。

マークアップ言語は、簡単に言うとタグを使ってデータ構造を表す言語です。HTMLの場合は、タグを使ってWebページの構造を作ります。

では簡単な使用例を見てみましょう。

タグ使用例表示例
<b>これは<b>太字</b>です。これは太字です。
<u>これは<u>下線</u>です。これは下線です。
<s>これは<s>取消線</s>です。これは取消線です。
<br>これは改行<br>です。これは改行
です。

タグには大きく2種類あり、<b>のように文字(データ)を囲むものと、<br>のようにそれだけで意味のあるものとがあります。

HTMLの基本構造

HTMLは主に次の3つのタグで構成されます。

タグ意味
<html>HTMLであることを示す。
<head>HTMLのヘッダー部分であることを示す。
Webページの情報やデザイン(CSS)、動作(JavaScript)を設定する。
<body>HTMLのコンテンツ部分であることを示す。
実際にWebページとして表示される文章を設定する。

実際にHTMLで表すと次のようになります。

<html>
  <head>
    <!-- Webページの情報を設定 -->
  </head>
  <body>
    <!-- Webページのコンテンツを設定 -->
  </body>
</html>

HTMLファイルを作ってみよう

では実際にHTMLを作ってみましょう。

このブログでは、Visual Studio Code というエディタを使います。

使ったことがないという人はこちらの記事を参考にしてみてください。

【Visual Studio Code】インストールと使い方についてサクッと解説
Visual Studio Code(VSCode)は、Microsoftが開発したソースコードエディタで、最近人気が急上昇しているエディタです。使いやすく、見た目も良いので初心者にオススメのエディタなので一度インストールしてみてはいかがでしょうか。

まずVSCodeで「index.html」というファイルを作りましょう。拡張子が「.html」のファイルがHTMLファイルとなります。

ファイルを作ったら、次のようにファイルを編集してください。

<html>
  <head>
    <title>はじめてのページ</title>
  </head>
  <body>
    <h1>はじめてのページ</h1>
    <p>これは私がはじめて作ったページです。</p>
    <img src="https://b1tblog.com/wp-content/uploads/2019/09/undraw_web_development_w2vv.png">
  </body>
</html>

編集したらファイルを保存し、ブラウザで開いてみましょう。次のようなページが表示されれば完成です。

タグの属性について

先程のサンプルでは、画像を読み込むために<img>を使用しました。

<img src="https://b1tblog.com/wp-content/uploads/2019/09/undraw_web_development_w2vv.png">

<img>を見ると、src=”https://…” という文字があります。

これは属性といって、<img>のsrc属性の場合はどの画像を表示するかを指定します。

属性は、属性名=”値”で指定し、タグごとに違った属性があります。

まとめ

HTMLはWebページを作る上では欠かせない技術です。

まずはHTMLの基本を覚えて、いろいろなWebページの構造を作れるようになりましょう。

 

- Webのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました