Web(2)画像の貼りつけ、スタイルの設定、リンクの張り方

自分のWebのトップページは
http://roy/~c12Xxxx/
(c12Xxxxの部分は学籍番号を使ったログインアカウント) なので覚えておく。

Emacsの使い方(2)

前回は主にマウスでの操作方法を紹介したが、今回はキーボードでの操作を紹介する。

2年生での授業でもよく使用するので、この操作は覚えておいた方がスムーズ
特に 半角/全角の切替になる Ctrl+o
は慣れておいた方が良い。(文字入力のトラブルが格段に減るため)

画像貼り付け

index.html ファイルに画像の貼り付けを行ってみる。 Web作成で画像を使用する場合は、
自分で撮影した(書いた)画像
著作権が発生していない画像(パブリックドメイン)
Web上で使用してもOKが取れているフリー素材
 を使用すること。

以下の画像を自分のwebページ(トップページ)に貼り付けてみる↓
anonon
ファイル名 anonon.png (酒田の公認ゆるキャラ 「あののん」)
酒田市公認マスコットキャラクター もしぇのん と あののん

Web作成で使用するファイルはすべて public_htmlフォルダに保存をしないといけない。
教室の環境では2通りの方法がある。

firefoxのメニューから保存をする方法

まず画像を保存する。
保存したいと思う画像の上で「右クリック」→ 「名前を付けて画像を保存」を選ぶ
gazo01

ファイルの保存先はpublic_htmlである。
public_html をダブルクリックして指定し、 Enterもしくは保存ボタンをクリックして保存をする。
gazo02

ホームディレクトリ(Thunar)にドラッグする方法

ホームディレクトリ(Thunar)を起動し、 public_htmlをダブルクリックしてから該当の画像をドラッグすれば保存ができる。

どのみち画像の幅と高さの大きさを確認する必要があり Thunar を上げる必要があるためこちらのが楽

index.html を編集する

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ページを確認してみる。.

属性の説明は以下。

画像の幅と高さのピクセル数の確認のやりかた

ホームディレクトリ(thunar)を使うのが一番楽。 該当の画像ファイルをダブルクリックすると表示されるのでその数を使用する。
width

テキスト、背景色の変更

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>

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

スタイルシートについて

色の変更などの表示上のみための設定は スタイルシート(CSS)と呼ばれる仕組みを利用する。

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

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

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

(HTML5が2021年1月に廃止されたため、現在の標準である HTML Living Standard での記述方式になる)

参考:学内マニュアル 見栄えに変化を持たせよう

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

リンクを張る

マニュアル ハイパーリンクを張りめぐらそう

他のWebページのアドレスをテキストに入力し、 クリックで移動できるようにすることを「リンクを張る」という。 (「貼る」ではない)

試しに東北公益文科大学とgoogleのWebページリンクを張ってみる。 index.htmlに赤文字部分を追加する。

<!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>
<h2>リンク</h2>
<p>
<a href="https://www.koeki-u.ac.jp/">東北公益文科大学</a><br>
<a href="https://www.google.co.jp/">Google</a><br>
</p>
 </body>
</html>

例では改行タグ<br>をつけているが、つけないと横に並ぶ。どちらでも良い。 .

本日の課題

Back