HTMLの備忘録　-HTMLの基礎- - プログラミングの備忘録

こんにちは。
今回は「HTMLを触ってみる」という題です。

以前にp5.jsをオフラインで実行するための方法を記事にしたことがあります。

taq.hatenadiary.jp

そのときにHTMLが出てきました。

HTML自体は前から興味はあったのですがいまいち始める動機がなかったのでやっていませんでした。
しかし、ブログを始めたことと、p5.jsとHTMLは大きくつながっているということを知ったので触ってみることにしました。

先に挙げた記事で、

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  <script src="../p5.js"></script>
  <!-- <script src="../addons/p5.sound.js"></script> -->
  <script src="sketch.js"></script>
</head>

<body>
  <main>
  </main>
</body>

</html>

というコードが出てきますが、とりあえずはこの中身の理解を目標としてやっていきます。

HTMLとは
中身の理解
- <!DOCTYPE html>
- <html lang="">
  - <head>
    - <meta>
    - <title>
    - <style>
    - <script>
  - <body>
    - <main>
おまけ
- ウェブページをつくってみる
- ウェブページを公開してみる
まとめ
参考

（titleだけ目次をクリックするとこのブログのタイトルに飛んだり、見出しが大きかったりしますが、解決法が分からないので放置しています。）

HTMLとは

HTMLは、「HyperText Markup Language」の略称であり、ウェブページをつくるときにつかわれる言語です。
（そういう意味では、自分のようにp5.jsを使いたいからという理由で始めるのはズレている感じがしますが…）

「hypertext」は「テキスト（文書）を超えた」、「markup」は「識別用の目印をつける」というような意味になります。

中身の理解

`<!DOCTYPE html>`

冒頭で書き、そのコードのHTMLのバージョンを指定します。

<!DOCTYPE html>であればHTML5を指すそうです。
（バージョンの違いは多分そんなに気にしなくても良い。）

`<html lang="">`

<html>と</html>でセットで、この文書がHTMLで書かれていることを指します。

後に続くlang=""では言語の指定ができ、"ja"（日本語）や"en"（英語）などと指定するとでフォントが変わったりするとか。
（lang="ja"が無いと、ブラウザに「日本語に翻訳しますか？」のようなメッセージが表示されることがあるらしい。）

`<head>`

<head>と</head>でセットで、文書のヘッダ部（header）を指定し、文書全体に関する指定などを書くそうです。

`<meta>`

「メタ情報」のことを指し、著者やキーワードなど文書自体の情報を指定します。

charsetでは文字コードを指定し、<meta charset="utf-8">で「UTF-8」という文字コードを使うと指定しています。
（文字コードについては触れませんが、「UTF-8」は最も一般的なものらしいです。）

name="viewport"ではスマホなどでも適切に表示されるように表示領域の設定をするそうです。
contentで中身を指定し、widthで幅、initial-scaleでズーム倍率を指定します。
width=device-widthは表示領域の幅をその機器の幅に合わせるというもので、数値で具体的に指定することもできるようです。

`<title>`

<title>と</title>でセットで、文書のタイトルを指定します。
タイトルは、検索エンジンの検索結果やブラウザのツールバーなどで表示されるものです。

<title>p5.js example</title>であれば、「p5.js example」と表示されることになります。

`<style>`

<style>と</style>でセットで、文字の色や大きさなど文書の見栄えに関係します。

見栄えを設定したい要素を指定してから、文字の色や大きさなどを設定します。
今回は後述するbodyの部分を指定しています。

marginは境界線（border）の外側の余白、paddingは境界線の内側の余白を指定します。
今回はどちらも0なので余白はありませんが、10pxなど単位付きで指定すると余白ができます。

これらは「CSS」（Cascading Style Sheets）と呼ばれ、別のファイルで管理することもできます。

例えば、<style>の部分を<link rel="stylesheet" href="style.css">に変え、別のファイルに「style.css」と名付けて、

body {
  padding: 0;
  margin: 0;
}

と書いて同じフォルダに置けば、最初に挙げたコードと同じstyleが適用されます。

<link>は他の文書を参照するためのもので、rel="stylesheet"で参照する文書がスタイルシートであることを指定、href以下でその文書の場所や名前を指定します。

`<script>`

<script>と</script>でセットで、JavaScriptなどのコードを指定します。

<script src="../p5.js"></script>や<script src="sketch.js"></script>では、src以下で読み込みたいJavaScriptファイルを指定しています。

<script>と</script>の間に直接コードを書いても大丈夫です。

ちなみに、は囲まれた部分をコメントアウトします。
また、p5.jsの話になりますが、「p5.sound.js」は音を扱うときに使うライブラリです。

`<body>`

<body>と</body>でセットで、文書の本文を指定します。

`<main>`

<main>と</main>でセットで、文書のメインコンテンツであることを指します。

おまけ

ウェブページをつくってみる

ここまでで初めに挙げたコードの中身を理解できたので、さらに付け加えて他の機能（？）も使って、p5.jsでつくったコードを載せたウェブページをつくってみます。

<!-- index.html -->

<!DOCTYPE html>

<html>
    <head>
       <title>ウラムの螺旋</title>
       <style>
            body {
                padding: 0;
                margin: 10px;
            }
        </style>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
       <script src="sketch.js"></script>
   </head>

    <body>
        <h1>ウラムの螺旋</h1>
        <p>p5.jsで書いた「ウラムの螺旋」を描画するプログラムです。</p>
        <p>コードの詳細は<a href="https://taq.hatenadiary.jp/entry/2022/03/10/093000" target="_blank">ここ</a>から</p>
    </body>
</html>

// sketch.js

t=d=p=1;c=0;x=y=(w=300)/2;draw=_=>{createCanvas(w,w);background(255);noLoop();for(n=1;n<w*w;n++){p=n==1?0:1;for(i=2;i<=sqrt(n);i++)if(n%i==0)p=0;p&&rect(x,y,1,1);n==t+d&&(t=n,c++,d+=c%2==0?1:0);x+=c%4==0?2:(c%4==2&&-2);y+=c%4==3?2:(c%4==1&&-2);}}