HTML01

HTML全4回レッスン用 テキスト_01

レッスン素材のダウンロードをして、ご自身の作業スペースに移動→VS Codeでフォルダを開きましょう。

ディレクトリとURLについての解説

ディレクトリとURLについての解説は下記ページをご覧ください。

あわせて読みたい
ディレクトリとURLについて ご自分のパソコンで作成しているWebサイト、サーバーにアップロードしたらどんなURLになるか想像できていますか? https://webtan.tech/と、https://webtan.tech/index....

HTMLファイルをブラウザで見てみよう

フォルダ内のindex.htmlファイルを確認します。
Finderでindex.htmlをダブルクリックしてブラウザで表示してみよう。

次に、titleタグを変更してブラウザを更新してみましょう。

titleタグを下記のように変更して「GoLive」を押してみよう。

<title>野菜市創業イベント、高リコピントマトの収穫体験</title>

デフォルトのブラウザをGoogle Chromeにしておきましょう

HTMLをどんどん書いていこう

実際に画面に表示される部分をHTMLでマークアップしていきましょう。
bodyタグの中に書いてください。

<header>
    <h1>有機野菜 収穫体験</h1>
</header>

header
導入的なコンテンツ、導入やナビゲーション等のグループ

h1 h2 h3 …
headingのh、見出し

有機野菜 収穫体験という文字がすごく大きく表示されています。
これはブラウザが「h1は大切な部分だから大きく表示する」と気をきかせてくれたのです。

CSSファイルをフォルダに入れて、index.htmlに読み込む

<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">

css/xxxxというパスは、cssフォルダ内の、という意味です。