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