Skip to content

Latest commit

 

History

History
99 lines (86 loc) · 4.86 KB

main-html.md

File metadata and controls

99 lines (86 loc) · 4.86 KB
Raw

HTMLで簡単なページを作ろう

まずは簡単なページを作っていきます．

HTMLについて

HTMLはHyperText Markup Languageの略で，Webページのコンテンツの構造を定義するために使う言語です．コンテンツは，見出しや段落，箇条書きのリスト，画像，表などの組み合わせで構成されています．詳細はこちら．
それでは実際にHTMLを使ってみます．

HTMLファイルを作成する

基本的に1つのWebページにつき1つのファイルを作成します．

Important

  • ここからはVisual Studio Codeがインストールされている前提で話を進めます．インストール方法がわからない方はお近くのCore-teamメンバーにお声がけください．
  • Windows 11での操作方法しか記載していませんので，Windows 11以外を利用されている方はご自身の環境に合わせて操作してください．
  1. デスクトップに新しくwebdevというフォルダを作成します
  2. 作成したフォルダを開きます
  3. 右クリックして「Codeで開く」を選択
  4. 新しいファイルfirst.htmlを作成します
  5. 作成したfirst.htmlを開いてください

HTMLのコードを書く

先ほど作成したfirst.htmlに以下のコードを追加します．

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>はじめてのWebページ</title>
  </head>
  <body>
    <h1>はじめてのWebページ</h1>
    <p>こんにちは，GDSC Kyutechです．</p>
  </body>
</html>

エクスプローラーを開き，作成したfirst.htmlをクリックします．するとブラウザ上で作成したファイルが表示されます．

基本的には<title>~</title>と<body>~</body>の中身を書き換えていきます．

title要素

この要素は，Webページのタイトルを指定することができます．実際に設定すると，ブラウザのタブ部分に指定した内容が反映されます．

body要素

この要素は，Webページとして実際に表示される内容を記述することができます．この<body>要素内に実際のコンテンツ（見出しや段落，箇条書きのリスト，画像，表）について記述していきます．

Note

逆にWebページ上に表示されない内容は<head>要素内に記述します．先述の<title>要素もこの<head>要素内に記述されていることがわかると思います．

body要素内にコンテンツを追加する

<body>~</body>の中に追加できる要素を紹介します．

<h1>要素

この要素は見出しを表します．<h1>が1番大きな見出しで，2番目に大きな見出しは<h2>，のように数字が大きくなり<h6>まで使うことができます．数字が小さいほど見出しとしては大きくなります．

<h1>自己紹介</h1>
<h2>趣味</h2>

<p>要素

この要素は段落を表します．文章を入れたい時に利用します．

<p>HTML（HyperText Markup Language）は，ウェブページを作成するための標準的なマークアップ言語です．<br>
  HTMLはウェブページを構造化し，コンテンツを効果的に表現するための基本的なツールとして広く使用されています．</p>

Note

改行したいときには，<br>を使用します．

<ul>要素

この要素は，箇条書き全体を表します．箇条書きの項目は<li>要素を使用します．

<ul>
  <li>スイカ</li>
  <li>メロン</li>
  <li>パイナップル</li>
</ul>

Note

  • <ul>と</ul>を<ol>と</ol>に置き換えると，順序なしリストから順序付きリストに簡単に変更することができます．
  • <ul>要素の中に<ul>要素を記述することで入れ子にすることができます．
<ul>
  <li>スイカ</li>
  <ul>
    <li>マダーボール</li>
    <li>でんすけすいか</li>
  </ul>
  <li>メロン</li>
  <li>パイナップル</li>
</ul>

コメント

プログラムにコメントを書きたい！という方は，以下のコードでコメントを書くことができます．

<!-- これはコメントです． -->

Work1

ここまでの内容をもとに実際に自分の自己紹介のページを作成します．自己紹介以外でも自分が作りたいページでOKです．先ほど作成したfirst.htmlを編集して色々な要素を追加してみましょう．

次のページ