HTML
では、Hello World
これさえあれば怒られない！
基本形、味もにおいもしない
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
It Works!
</body>
</html>
お約束としてはこんな感じ
これからいろいろとデザインだったり内容を書いていきます。WebのよいところはHackしやすいということ
※ Hackとは攻撃・改ざんではなく、開発などを行うこと．
<head>〜</head> 部
ページの表示されない情報を記載する部分
- <title>Hello World</title>
- 画面上部のタイトルに表示される部分．検索エンジンの結果などに表示される
- <meta>
- 文書のメタ情報を登録
- <meta charset="UTF-8">
- 文書の文字コードの指定(例では UTF-8)
- <meta name="viewport" content="width=device-width, initial-scale=1">
- スマートフォン向けの設定．表示させる画面幅や拡大率の設定，ユーザーが拡大できるかの可否などを設定できる．
- <meta name="Keywords" content="あああ">
- 検索エンジン向けのページのキーワード設定．Googleではもうランキングに影響しないとか何とか…
- <meta name="description" content="私たちの研究室では…">
- ページの説明．書いておくと良い．
- <meta property="og:*">
- OpenGraph のプロパティ．Facebookの投稿時に主に使用されるページの説明．
<meta property="og:type" content="website"> <meta property="og:site_name" content="サイトの名前"> <meta property="og:locale" content="ja_JP"> <meta property="og:url" content="サイトのアドレス"> <meta property="og:image" content="サイトのアイコン"> <meta property="og:title" content="ページのタイトル"> <meta property="og:description" content="ページの説明">
- <link rel="stylesheet" type="text/css" media="all" href="style.css" />
- CSSファイルの指定．mediaにはtv,screen, printというように適用するマシンを指定できる
- <script type="text/javascript" src="script.js"></script>
- JavaScriptファイルの指定
- <link rel="shortcut icon" href="favicon.png">
- いわゆるfavicon.ico．お気に入りに入れた時などサイトのアイコンとなる画像．32x32が良さそう．
- <link rel="apple-touch-icon" href="apple.png">
- iPhoneなどのiOSデバイスでホーム画面に追加した場合に表示されるアイコン画像．
<body>〜</body> 部
ここが表示される部分
こまかいタグの説明はこちらをご参照ください．[とほほのWWW入門]よくあるデザイン． [ここに画像を載せる]
