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

記事

IT・テクノロジー

今回はWebサイト制作のはじめの一歩、.htmlのファイルを一緒に作って、ブラウザで表示させてみます！

ページを作ってみよう！

まず、テキストエディタを開いて、下記コードをコピペしてください。そして、index.htmlなどと名前をつけて保存します。

<!DOCTYPE html>

<html>

<head>

<title>My first site</title>

</head>

<body>

<p>ページへようこそ！</p>

</body>

</html>

テキストエディタとは、文字を入力・編集するためのソフトのこと。Windowsならメモ帳、Macならテキストエディットとか。

Dreamweaver、ホームページビルダー、Visual Studio CodeやSublime TextでもOKです。

今作ったindex.htmlをブラウザ（Google ChromeとかEdgeとか）で開いて表示を確認してみましょう。ダブルクリックまたはファイルをブラウザにドラッグで開きます。

タブのところに表示されているのは、<title>タグ内に書いた文字です。ブックマーク保存するときに表示される部分にもなります。

<body>タグの中に書いたものがブラウザ上に表示されます。

<p>ページへようこそ！</p>の下に、

<img src="cat.jpg" alt="ミーティング中の猫">

と書いてみました。（index.htmlと同じところ（同じフォルダ内とか）に画像を置いた設定。）

▼ブラウザ結果

▼コードはこんな感じ。

このようにしてサイトを作っていきます。

今回は以上になります。

お疲れ様でした★