web作成(3) CSS(スタイルシート)、List(自己紹介作成)

CSS(スタイルシート)

色の変更、フォントサイズなど、見栄え設定は スタイルシート(CSS)と呼ばれる仕組み を利用する。

参考 大学公式マニュアル「見栄えに変化を持たせよう」

index.html を開き、 </head>の上に赤文字の3行を追加して保存する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title> WELCOME! </title>
<style>
body{background-color:pink; color:navy;}
</style>
 </head>
<body>
<h1>公益太郎のページ</h1>
<p>
<img src="anonon.png" alt="あののんイラスト" width="300" height="283">
</p>
<p>
公益太郎の部屋へようこそ
</p>
<p>
今日の一言<br>
ラーメン食べそびれた
</p>
</body>
</html>

自分のページをブラウザで確認してみる。.

スタイルシートは必ず <head></head>の間に記述をすること。

html内に記述する場合の形式は以下の通り↓

<style>
ここに色々なスタイル設定(複数可)を追加していく
</style>

スタイルシートはいくつかの設定方法があるため、 情報リテラシーではほんの一部分ではあるが学習していく。

スマホで撮影した画像をWebに使いたい場合

ブログ作成で自分で撮影した画像が使われていると評価が高くなる。 その場合

  1. 撮影した画像の解像度を最大限下げる
  2. 画像を自分の大学のメールアドレス(例 c156039@l.koeki-u.ac.jp)に添付して送信
  3. Koeki-Mail でメールを開き、画像を public_html に保存する
  4. Emacs で画像を使いたいファイル(例 public_html/hoge.html)を開き編集する

練習用に全員に画像を添付したメールを送っているので、各自 index.html に画像を貼ってみよう(説明する)

コピー用
<p>
<img src="icon.png" alt="アイコン" width="450" height="150">
</p>

.

自己紹介作成

自己紹介ページを新規作成する。 ファイル名は profile.html 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>profile</title>

</head>
<body>
 <h1>自己紹介</h1>
  <ul>
   <li>名前 公益太郎</li>
   <li>出身 酒田市</li>	  
   <li>生年月日 2500年 5月1日</li>
   <li>趣味 読書</li>
   </ul>
  <p>
  <a href="index.html">もどる</a>
 </p>
</body>
</html>

各自ブラウザで確認する場合のアドレスは
http://roy/~自分のID/profile.html

.

本日の課題

トップ