Snippets

sironekotoro HTML入学式

Created by sironekotoro
html_entrance.md
Raw

HTML入学式

  • Perl入学式 第5回に必要なHTMLの知識について

HTMLをのぞいてみよう

  1. Yahoo!Japanを開く
  2. 右クリック
    • Chrome,Firefox ページのソースを表示
    • Safari 描き設定をしてから、ページのソースを表示
      • 環境設定->詳細->メニューバーに"開発"メニューを表示にチェックを入れてから
    • InternetExplorer ソースの表示
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
> <html lang="ja">
> <head> ...

確認が終わったら、ソースが表示されているタブ・ウィンドウを閉じます

HTMLはテキストファイル

引き続き、以下の操作をして

  1. Yahoo!Japanを開く

    • Firefox
      • 右クリック 別名でページを保存
        • ファイル形式はテキストファイルを選択し、保存
    • Chrome
      • 右クリック 別名で保存、形式は「Webページ, HTMLのみ」
    • Safari
      • 右クリック->ページを別名で保存、フォーマットは「ページのソース」
    • IE
      • ファイル -> 名前をつけて保存 -> ファイルの種類は「テキストファイル」を選択し保存

  2. 出来上がったファイルをブラウザにドロップする

  3. 画像や広告が消えたホームページが表示される

ホームページがテキストファイルで作成されていることがわかります

HTMLはテキストファイルなので

このHTMLファイルの中身を書き換えることで、ページの内容を書き換えることが可能です

HTMLファイルを作ってみよう

エディタを利用します

HTMLファイルは、タグで文章をマークアップ（意味付け）していくことで作成します

HTMLタグ

ここではPerl入学式 第5回で利用するタグについて「のみ」説明します

HTMLタグの基本ルール

<タグ>なかみ</タグ>

  • 先頭にある<タグ>を開始タグ
  • 末尾にある</タグ>を終了タグ、閉じタグ
    • 終了タグにはタグ名の前にスラッシュがついています
  • 中身をタグで囲うのが基本
    • 開始タグと終了タグは1対1の関係ですが、例外的に終了タグのないものもあります

これがHTML入学式のHTMLだ！！

<!DOCTYPE html>
<html>
  <head><title>入力フォーム</title></head>
  <body>
    <form action="/post" method="POST">
      <input name="body" type="text">
      <input type="submit" value="投稿する">
    </form>
    <p>ほげ</p>
    <p>ふが<br>ぴよ</p>
  </body>
</html>

1行目 DOCTYPEタグ

<!DOCTYPE html>

終了タグのないタグです

これから書かれるのがHTML5の形式であることをブラウザに伝えるためのタグです

2行目, 12行目 htmlタグ

<html>
...（中略）
</html>

html文書であることを示すタグです

構造化する文書、ブラウザで表示される文書はこのタグの中に書く必要があります

3行目 headタグ, titleタグ

  <head><title>入力フォーム</title></head>

headは文章のヘッダ情報に関すタグです

ヘッダ情報とは、文章についての情報を書く部分です

以下の情報を記載します

  • 文字コード
  • ページの作成者
  • ページのタイトル
  • Googleなどのサーチエンジンが収集するキーワード

ページのタイトルは専用のタグがあり、それが<title>タグです

この<title>タグで囲まれた部分に書いた文字列は、ブラウザのタブに表示されます

4行目,11行目 bodyタグ

  <body>
    ...（中略）
  </body>

bodyはブラウザで表示される部分を記載します

5行目,8行目 formタグ

    <form action="/post" method="POST">
        ...（中略）
    </form>

このformタグで囲まれた部分に文字入力欄やボタンなどのタグを置いていきます

ブラウザからサーバー（の中のプログラム）へ情報を送信するために必須のタグです

5行目,8行目 formタグの属性

    <form action="/post" method="POST">
        ...（中略）
    </form>

formタグの開始タグの中にあるaction="/post" method="POST"は属性と呼ばれるものです

この属性によって、タグの働きを制御することができます 属性は空白で区切られ、また順番があります

タグ内部の属性の解説です

  • action="/post" : formの通信先が/postである
  • method="POST" : 通信方法はPOSTである

form以外のタグでも属性を使って動きや表示を制御することが可能です

6行目,7行目 inputタグ

      <input name="body" type="text">

inputタグは入力欄やボタンをページに表示する際に利用します

inputタグはformタグ内で利用されるタグです

タグ内部の属性の解説です

  • name="body" : サーバー内のプログラムに通信する際, "body"という項目（key）でフォームの入力を送信する
  • type="text" : 1行分のテキスト形式（文字列）入力欄を表示する

5行目,8行目 formタグ

      <input type="submit" value="投稿する">

先ほどと同じinputタグですが、属性が異なります

タグ内部の属性の解説です

  • type="submit" : 「送信」ボタンを表示する
  • value="投稿する": ボタンの上に表示される文字列を「投稿する」に変える

このように、同じタグでも異なる属性を設定することで、動きや表示が異なります

9行目,10行目 pタグ, brタグ

    <p>ほげ</p>
    <p>ふが<br>ぴよ</p>

pタグで囲まれた部分は一つの段落となります

brタグは、そのタグの位置に改行を挿入するものです。改行のみなので、閉じタグはありません。

もう一度全体を確認

<!DOCTYPE html>
<html>
  <head><title>入力フォーム</title></head>
  <body>
    <form action="/post" method="POST">
      <input name="body" type="text">
      <input type="submit" value="投稿する">
    </form>
    <p>ほげ</p>
    <p>ふが<br>ぴよ</p>
  </body>
</html>

それぞれの意味づけが浮かんできたでしょうか？

この他にもたくさんのタグや属性があります

HTMLとプログラミング言語

HTMLは静的、ページ内容が書き変わらないものですが、PerlやJavaScriptの力を借りることで書き換えが可能になります。

内容を書き換えることを「動的」といいます

  • PerlやPHPやRubyやJava
    • 「送信ボタン」を押すなどして、ページの読み込みが発生したタイミングで書き換える
  • JavaScript
    • ページ内のボタンクリックなどの「イベント」で書き換える
    • サーバと通信しているが、ページの読み込みなどが表面上発生していないように見せることもできる（AJAX）

HTMLとデザイン

文字の色や大きさなどのデザインはCSSという仕組みで実現するのが主流です

ホームページを置く場所とサーバー

インターネット上のサーバーにおくことで、世界中に公開することが可能です

HTMLページを配信するために、Webサーバーが必要となります

主なwebサーバはApache, nginxです。

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.