ファイル名 anonon.png (酒田の公認ゆるキャラ 「あののん」)
酒田市公認マスコットキャラクター もしぇのん と あののん
自分のWebのトップページは
http://roy/~自分のID/
(自分のIDの部分は学籍番号を使ったログインアカウント)
なので覚えておく。
Webページ作成時は 必ず public_html フォルダを指定すること。
前回は主にマウスでの操作方法を紹介したが、今回はキーボードでの操作を紹介する。
2年生での授業でもよく使用するので、この操作は覚えておいた方がスムーズ
特に
半角/全角の切替になる Ctrl+o
は慣れておいた方が良い。(文字入力のトラブルが格段に減るため)
index.html ファイルに画像の貼り付けを行ってみる。
Web作成で画像を使用する場合は、
自分で撮影した(書いた)画像
著作権が発生していない画像(パブリックドメイン)
Web上で使用してもOKが取れているフリー素材
を使用すること。
以下の画像を自分のwebページ(トップページ)に貼り付けてみる↓
ファイル名 anonon.png (酒田の公認ゆるキャラ 「あののん」)
酒田市公認マスコットキャラクター もしぇのん と あののん
Web作成で使用するファイルはすべて public_htmlフォルダに保存をしないといけない。
まず画像を保存する。
保存したいと思う画像の上で「右クリック」→ 「名前を付けて画像を保存」を選ぶ
ファイルの保存先はpublic_htmlである。
public_html をダブルクリックして指定し、
Enterもしくは保存ボタンをクリックして保存をする。
Emacsを使い前回の授業で作成した自分のwebページトップ index.htmlを編集する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
KOEKI Taro's Home Page!!
</title>
</head>
<body>
<h1>
公益太郎の部屋へようこそ
</h1>
<p>
<img src="anonon.png" alt="あののんイラスト" width="300" height="283">
</p>
以下省略
保存をしたら firefoxを更新して自分のWebページを確認してみる。.
属性の説明は以下。
src= 画像のファイル名を指定
alt= 画像説明(テキストブラウザや読み上げブラウザ用)
width= , height= 表示させる画像の幅と高さのピクセル数。実際の画像より大きくも小さく も表示可能(大きく表示させる場合画質は悪くなる)
ホームディレクトリ(thunar)を使うのが一番楽。
該当の画像ファイルをダブルクリックすると表示されるのでその数を使用する。
