【初心者】Webサイト作る

【初心者】Webサイト作る #2 「HTMLを学ぼう」

Youtube解説動画はこちら!!

チャンネル登録しておくと、見逃しませんね!

前回はインターネットについて学んだので、今回は実際にインターネットに公開できるHTMLを作成してみましょう

準備

まずは必要なものを揃えます

PC

パソコンはWindowでもmacでも構いません。頑張ればスマホだけでもできるかもですが、やめておきましょう。スマホで1つの事をしている間にPCでは10個の事ができます。

テキストエディター

HTMLを書く為のソフトウェアが必要になります。VSCode(Visual Studio Code)を使いましょう

他にも色々あるのですが、このシリーズでは一つしか使いません。慣れてきたら他のエディターも使っていいと思うのですが、VSCodeはFacebook、Googleでも使われているエディターでとても優れているので生涯変える必要はあまりないです。(たぶん)

Visual Studio Codeをダウンロード

VSCodeをインストールする方法
  1. Visual Studio Code←こちらのページにジャンプ
  2. “今すぐ無料でダウンロード”をクリック
  3. 環境(Windows/mac)に合わせたものをクリックしてVSCodeをダウンロード
  4. ダウンロードが完了すれば、後は実行してインストール(インストール先はそののままで大丈夫です)
拡張子が見えるようにする

Webエンジニアが一番する事はググることです。ググって拡張子が見えるようにしましょう

HTMLを書いてみる

インストールが完了したら早速HTMLを書いてみましょう

VSCodeを起動して、ファイルメニューから「新規ファイル」をクリック!

パソコンに、このファイルはHTMLと教えてあげる

  • ファイルメニュー「保存」をクリック
  • 保存先をデスクトップに変更して、デスクトップに[lec2]フォルダーを作る
  • ファイル名をindex.htmlに変更し保存

HTMLを書く

とりあえず下記をそのまま書きましょう

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World!!</h1>
</body>
</html>

書き終わったら、ファイルメニューから「保存」を押して保存してください。

見てみる

保存したindex.htmlをダブルクリックしてブラウザで見てみましょう

Hello World!!と出ていたら成功です🎉おめでとうございます。

タグ

HTMLはタグで構成されています。

タグとは <title> みたいに<と>で囲まれたものをいいます

実際にどのような構成になっているか見てみましょう

<title>Hello World!!</title>

この日本語訳は” ‘Hello World!!’はタイトルです “というふうになります。

ネスト(入れ子)

<head>
  <title>Hello World!!</title>
</head>

これはheadの中のtitleは”Hello World!!”ですよという意味になります。

属性

HTML の要素は属性を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes

色んな意味があるタグ

HTMLのタグの種類は凄いあります。全てを覚えるのは大変ですが覚えましょう

DOCTYPE

HTML において、 doctype はすべての文書の先頭に見られる “<!DOCTYPE html>” という必須の前置きです。その唯一の目的は、ブラウザーが文書をレンダリングするときにいわゆる「後方互換モード (quirks mode)」に切り替わるのを防ぐことです。つまり、 “<!DOCTYPE html>” という doctype は、ブラウザーがいくつかの仕様で互換性のない別のレンダリングモードを使用するのではなく、関連する仕様に従って最大限の努力を試みるようにします。

https://developer.mozilla.org/ja/docs/Glossary/Doctype

ようするに「これはHTMLです」と最初に宣言してあげるんです。

html

超意訳: ここからHTMLがはじまりますよ~

head

超意訳: このHTMLファイルの事前に知っておいたほうがいい情報はこちら!

meta

超意訳: このHTMLファイルの補足情報です!

title

超意訳: タイトル

body

この中が内容です

h1

一番大きな見出しです

宿題

次の講座を見る前にHTMLの基本をマスターしてください

マスターする内容は↓のMDNのサイトをチェック!!(めっちゃ他力本願!!)

https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/HTML_basics

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ