【HTMLの基礎知識】初心者向けHTMLホームページ作成ガイド Chapter1

HTMLはウェブページの構造を定義するためのマークアップ言語です。以下では、HTMLの基本的な構文と要素について解説します。

HTML文書は<!DOCTYPE html>から始まり、<html>要素で全体が囲まれます。ページのタイトルは要素で指定し、実際のコンテンツは<body>要素内に追加します。HTML要素は開始タグと終了タグで囲み、要素には属性を追加することができます。
このガイドでは、HTMLの基本構造と要素の使い方を具体的に説明していきます。

・HTMLってどうやって書くんだろう。初めて触るので不安だ。
・ウェブページの基本構造や要素がよくわからない。どこから始めたらいいのか迷っている。

こんな質問に回答します。

このブログの対象者
　・HTMLの基礎知識を学び、ホームページの作成方法に興味がある人
　・自分のアイデアや情報をオンライン上で共有したいと考えている人
　・テキスト、画像、メディアなどを使って魅力的なコンテンツを作りたい人
　・ウェブサイトを検索エンジンで上位表示させるための最適化方法に関心がある人。

リンク

Contents

HTML文書の基本構造
HTML要素とタグ
属性と値
まとめ

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円で受講できるチャンスです。エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

HTML文書の基本構造

HTML文書は以下のような基本構造を持ちます。必要なソフトのインストールなど下記を参考にしてください。
事前に Live serverをinstallすると、Go Liveと表示され、htmlをブラウザ表示したものを確認することができます。（導入方法は下記リンク参照）

Visual studioなどで、!+Enterを記入すると、下記コードがすべて自動で記入されます。
このファイルをindex.htmlで保存します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
</head>
<body>
    
</body>
</html>

この状態でGo Liveをクリックします。下記のようにtitle タグで囲んだページのタイトルと記載されます。

下記タグで過去まれたものが、表示されます。

<!DOCTYPE html>：HTML文書のバージョンを宣言します。
<html> : HTMLコードのルート要素であり、文書全体を囲みます。
<head>: ページのメタデータや外部スタイルシートのリンクを含むセクションです。
<title>: ブラウザのタイトルバーに表示されるページのタイトルを定義します。
<title> : ページの実際のコンテンツを囲むセクションです。

HTML要素とタグ

HTMLでは、要素をタグによって表現します。要素は開始タグと終了タグの間にコンテンツを含む形で定義されます。

例えば、段落を作成するには、<p>タグを使用します:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
</head>
<body>
    <P>これは段落です</P>
</body>
</html>

<p>: 段落を定義する要素です。開始タグ <p> と終了タグ </p> の間にテキストを入力します。例えば、上記htmlでGo Liveを起動すると、これは段落ですと表示されます。

属性と値

HTML要素は属性を持つことができます。属性は要素に関する追加情報を提供し、要素の動作や表示を変更します。例えば、リンクを作成するには、<a>タグとhref属性を使用します。

<body>
    <P>これは段落です</P>
    <a href="https://example.com">サンプルリンク</a>
</body>

<a>: リンクを作成する要素です。
href: リンク先のURLを指定する属性です。値としてURLを指定します。
こちらのコードで、Go liveを押し、Live serverを起動すると、下記のように、リンクが表示されます。リンクをクリックすると、https://example.comのページに移動します。現在は、このページはからなので、表示されませんが、実際にyahoo.co.jpなどにすることで、リンクに移動することができます。