Perl Web開発者のHTML・CSS入門

【HTML5】headタグ - HTMLヘッダ

HTMLヘッダは、headタグの中に書きます。HTMLヘッダには、画面には表示されない補助的な情報を記述します。 

<head>
  HTMLヘッダ
</head>

HTMLヘッダは、HTMLタグの中に書く

HTMLヘッダは、htmlタグの中に書きます。 

<html>
  <head>
    HTMLヘッダ
  </head>
  <body>
    コンテンツ
  </body>
</html>

HTMLヘッダに指定するもの

HTMLヘッダでは、以下を指定できます。

  • CSSの読み込み
  • JavaScript
  • タイトル
  • 文字コード
  • サイトの説明
  • キーワード
  • ファビコン
  • ビューポート
<html>
  <head>
    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" type="image/x-icon" href="/images/kimoto-system-favicon.png">
    <link rel="stylesheet" type="text/css" href="/css/common.css">

    <script type="text/javascript" src="/js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="/js/google-code-prettify/prettify.js"></script>
    <link  type="text/css" rel="stylesheet" href="/js/google-code-prettify/prettify.css"/>
    <script>
      $(function(){
        // google code prettifyの有効化
        $("pre").addClass("prettyprint");
        function init(event){
          prettyPrint();
        }
        if(window.addEventListener)window.addEventListener("load",init,false);
        else if(window.attachEvent)window.attachEvent("onload",init);
        
        $(".to-top").click(function() {
          // ページの一番上までスクロールさせます。
          $('body, html').animate({scrollTop: 0}, 300, 'linear');;
        });
      });
    </script>
  </head>
  <body>
    コンテント
  </body>
</html>

metaタグ

文字コードやビューポートを指定するmetaタグは、HTMLヘッダの中に書きます。 

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
  </head>
</html>

HTMLのひな型

DOCTYPE宣言とhtmlタグ、headタグ、bodyタグがHTMLのひな型になります。 

<!DOCTYPE html>
<html>
  <head>
    HTMLヘッダ
  </head>
  <body>
    HTMLコンテンツ
  </body>
</html>

業務に役立つPerl

Perlテキスト処理のエッセンス

PerlでポータブルなLinuxファイル管理入門

ITエンジニアの求人情報など

　ITエンジニアの求人情報・Webサービス・ソフトウェア・スクールなどの情報。
Perlクラブ