【HTML】HTMLのコードの書き方
こんにちは。ダイスケです。
本日はHTMLを使って、
簡単なウェブサイトの作成を行っていきたいと思います。
本日の内容
本日のゴール
"HTMLのコードを書いてウェブサイトに文字を書くことができる" です。
コードの書き方を書いていきます。
この記事を読んでいただけたら、
ウェブサイトに文字を書くことができるようになります。
ぜひトライしてみてください！
HTMLの仕組み
始めに、HTMLの仕組みを理解するところから始めていきます。
HTMLはタグ：<h1>~</h1> というものを書いてサイトを構成します。
このタグには様々な種類があり、文字や画像を記入する印となっています。
セレクタ名の種類を変えることで、文字や画像をウェブサイトに記入できます。
例えば、<p></p>というタグには文字があるよ！と記す印の意味があり、
<p>プログラミング</p>とエディターに記入すると、
ウェブサイト上には→プログラミングと表示されます。
表示されるのはタグで囲った中だけです。
コードの書き方
実際に書いてみましょう！
文字をサイトに反映させるためのアプリ(エディター)、Atomを開きます。
↓Atomのダウンロード方法はこの記事を参考にしてください。
開いたら、次の画面が出てくるので下のコードをコピーして貼り付けてください。
＜コード＞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>練習サイト</title>
</head>
<body>
<h1></h1>
</body>
</html>
貼り付けたら、左上のファイル→別の名前で保存をクリックし、
practice.htmlと入力してドキュメントに保存しましょう。
ファイルに保存したら、ファイルからpractice.htmlをブラウザで開きます。
すると真っ白なサイトが出てきます。
次の作業はAtomで行います。
<h1></h1>のタグの中に、画像のように"プログラミング"と入力しましょう。
入力したら、Ctrlキー+sキーを同時に押して上書き保存をします。
操作が終わったら先ほど開いたサイトを更新してみましょう。
画像のように文字が出てきたと思います。
<h1></h1>の中の文字を変えれば他の文字を表示することができます。
終わりに
ここまでの過程でウェブサイトに文字を表示することができました。
HTMLには他にも様々な機能があります。
僕の記事でも少しずつ紹介していきますので、
知識を一緒に増やしていきましょう！
最後までご購読ありがとうございました！
