Skip to main content

HTML をブラウザに表示しよう

目標#

「index.html」というファイルをブラウザに表示すること（以下のようになります）

手順#

  1. Glitch で『New project』をクリックし『glitch-hello-website』をクリック

  2. 左のファイル名が並んでいる一覧からindex.htmlをクリック

  3. index.html 内に書いてある HTML を全て削除し、↓ のコードをコピーしてペーストする。

<!DOCTYPE html><html lang="ja">  <head>    <meta charset="utf-8" />    <meta      name="viewport"      content="width=device-width, initial-scale=1, shrink-to-fit=no"    />    <meta name="theme-color" content="#000000" />    <link rel="stylesheet" href="style.css" />  </head>
  <body>    <h1>世界の女性リーダーたち</h1>    <a      href="https://www.forbes.com/sites/avivahwittenbergcox/2020/04/13/what-do-countries-with-the-best-coronavirus-reponses-have-in-common-women-leaders/?sh=3c1d6b2a3dec"      ><p>        source: What Do Countries With The Best Coronavirus Responses Have In        Common? Women Leaders      </p></a    >    　    <div class="marin">      <h2>フィンランドのマリン首相</h2>      <p>2019年、34歳で当時世界で最年少の首相として就任した。</p>      <p>フィンランドでは3人目の女性首相。</p>      <p>閣僚のジェンダーバランスもよく、世界から注目されている。</p>      <p>        参考：<a href="https://courrier.jp/news/archives/194898/"          >「首相は34歳女性、閣僚の4人が35歳未満」のフィンランドから学べること</a        >      </p>    </div>    <img      src="https://docs.waffle-waffle.org/img/logo.png"      alt="waffle logo"      border="0"    />  </body></html>

  1. 保存する。(Windows の場合は『Ctrl ボタン+s』, Mac の場合は『Command ボタン+s』)

  2. ナビゲーション右側の『Share』ボタンをクリック

  3. 『Live site』という文言横の URL をコピーする

  1. Web ブラウザの URL を打つ欄にペースト

  2. 完成！目標にしたウェブサイトは表示されたかな？

自分の Web サイトの URL を zoom のチャットに送ろう！

応用#

index.html に以下のエレメントを付け加えてブラウザに表示させましょう。

<div class="about-me">  <h2>自分の名前またはニックネーム</h2>  <p>自己紹介を書いてみよう！</p></div>