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

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

Time-stamp: "2017-09-28 Thu 07:01 JST hig"

HTML

  • Hypertext Markup Language
  • 要素, タグ, 属性, 値
  • URI,絶対URL,相対URLによるリンク
  • ハイパーリンク
  • html,head,title,body,h1,ul,ol,li,a,img
  • table, tr, th, td
  • index.html (index.html.txtではない) と Directory Index
  • ブラウザのソースを見るなどで世の中のWebページのソースを観察できる. また, HTMLの誤りを発見するのにも使える.
    • Google Chrome のときその他のツール>デベロッパーツール
    • Firefoxのとき Firebug, Validator Firebug add-on.ツール>Web開発>Firebug
    • W3C Markup Validation Service
    • "HTML Validator"

やってみよう

  • ol, ul, img, a (絶対および相対指定)を含む index.html を TeraPadで作り, ブラウザで開いてみよう
  • tableで表を着くってみよう.
  • 下の例のように, headでUTF-8を指定する場合は, TeraPad でファイル>文字コード改行コードを指定して保存, でUTF-8を選びます.
  • そのhtml文書と画像を WinSCP で swallow:~/public_html/local/に置いてみよう. 方法
  • 参加者のページからWeb ブラウザで見てみよう. 他の人にブラウザで見てもらおう. スマートフォンや携帯で見てみよう.
  • swallow上の絶対path /home/t012345/public_html/local/A.html
  • URL http://swallow.math.ryukoku.ac.jp/~t012345/local/A.html

サンプル

サンプル

index.html


<!doctype html>
<html lang="ja">
  <head>
   <meta charset="UTF-8">
<!-- この中はコメント. Windows などで文字コードを指定して保存できないときは UTF-8 でなく Shift_JIS で -->
   <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