龍谷大学> 理工学部> 数理情報学科> 樋口三郎> 担当科目> 2021 年> Webプログラミング!> HTMLとCSS
[目次]

HTMLとCSS | Webプログラミング!(2021年度)

Time-stamp: "2013-10-03 Thu 09:42 JST hig"

HTML

  • Hypertext Markup Language
  • 要素, タグ, 属性, 値
  • URI,絶対URL
  • ハイパーリンク
  • html,head,title,body,h1,ul,ol,li,a,img
  • index.html (index.html.txtではない)
  • ブラウザのソースを見るなどで世の中のWebページのソースを観察できる
  • Firebug, Validator Firebug add-on.ツール>Web開発>Firebug
  • W3C Markup Validation Service
  • "HTML Validator"

やってみよう

  • ol, ul, img, a (絶対および相対指定)を含む index.html を TeraPadで作り, ブラウザで開いてみよう
  • 下の例のように, headでUTF-8を指定する場合は, TeraPad でファイル>文字コード改行コードを指定して保存, でUTF-8を選びます.
  • そのhtml文書と画像を WinSCP で swallow:~/public_html/local/に置いてみよう.
    • スタートメニュー>WinSCP > WinSCP
    • セッションで
      • ホスト: swallow.math.ryukoku.ac.jp
      • ポート: 22
      • Protocol: SCP
      • ユーザ名, パスワード:指定のもの
      • 秘密鍵:空欄
    • ログイン
    • 日本語ファイル名は化けてるかも
    • これがふつうのフォルダだと思って, アイコンをドラッグして転送
    • 保存しておくと後で同じ設定を使える.
  • そのhtml文書と画像を Filezilla で swallow:~/public_html/local/に置いてみよう.
    • スタートメニュー>Filezilla
    • 最初だけはサイトを登録: ファイル>サイトマネージャー>新しいサイトで
      • ホスト: swallow.math.ryukoku.ac.jp
      • ポート: 空欄
      • Protocol: SFTP
      • ログオンの種類: 通常 または インタラクティブ
      • ユーザー, アカウント:指定のもの
    • 接続
    • 左右のウィンドウ間でファイルをドラッグして転送
  • 参加者のページからWeb ブラウザで見てみよう. 他の人にブラウザで見てもらおう. スマートフォンや携帯で見てみよう.

サンプル

サンプル

index.html


<html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta http-equiv="content-style-type" content="text/css" />
   <link rel="stylesheet" href="plain.css" type="text/css" />
   <title>かものページ</title>
  </head>
  <body>
    <h1>かも</h1>
    <p>テキストテキストテキスト</p>

    <h2>まがも</h2>

    <h2>かるがも</h2>
    <ul>
      <li id="yodogawa">淀川のかるがも</li>
      <li id="setagawa">瀬田川のかるがも</li>
      <li><span id="biwako">琵琶湖</span>のかるがも
	<div id="chikubujima">竹生島</div>
	<div id="okishima">沖島</div>
      </li>
    </ul>
    <img src="pinga.gif" alt="Pinga"/>

    <a href="second.html">かものページ</a>
    <a href="http://www.a.math.ryukoku.ac.jp/~junta/">松木平先生のページ</a>
  </body>
</html>

plain.css


#yodogawa { 
          display:none;
 }

#setagawa { 
          background-color: red;
 }

#biwako { 
          background-color: red;
 }

#okishima { 
               color: green;
            font-size: x-large;
 }

#chikubujima { 
          background-color: red;
 }

CSS

  • Cascade Style Sheet
  • 属性, 値
  • セレクタ: 要素, クラス, id

やってみよう

  • さっきのHTML文書で, フォントサイズ指定, フォアグラウンド, バックグラウンド色指定してみよう

サンプル

参考

このサイトのコンテンツ

QRcode to hig3.net

https://hig3.net