Emacsの使い方、Webページ作成開始

Emacs

Emacs とテキストエディタである。
情報リテラシーでWebページ作成や、 2年生で必修科目である基礎プログラミングI、IIでのコーディングで使用する。
ショートカットは Ctrl+1

ログイン後自動的に起動するが、 Emacsを間違えて消してしまった場合や、複数使用したい場合は Root Menu から上げることができる。
emacs
Emacs と Emacs24 の違いはフォントサイズの違い。(Emacs24のがフォントサイズが大きい)

Emacs の基本操作

詳しいマニュアルは公式があるので気になる場合確認しておくと良い。
(ただし2年生で使うかもしれないコマンドなども含まれるので必要なところだけ飛ばし飛ばし見ると良いかも)

Emacsの使い方(概略), Emacsの基本操作(動画)

授業でよく使うコマンド

ファイルを開く(新規/既存) Ctrl+x Ctrl+f
半角全角の切替え Ctrl+o
ファイルの保存 Ctrl+x Ctrl+s

とりあえずこの3つを抑えておけばOK。トラブルシューティングについては後日。

EmacsでWebページ作成開始

まずは自分のWebページがブラウザで問題なく読める環境であるか確認してみる。

Web作成は特殊なフォルダを指定する必要がある。 (public_html) ファイル名は index.html

html
保存ができたらブラウザで確認してみる。

各自Webページのアドレスは
http://roy/~自分のID/
例
学籍番号 C156890A の場合
http://roy/~c156890/

もしくは、

http://roy.e.koeki-u.ac.jp/~自分のID/
例
学籍番号 W159112A の場合
http://roy.e.koeki-u.ac.jp/~w159112/

こんな見た目になる(はず)

さらにテキストを追加(赤文字)、保存をしてブラウザで確認してみる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>KOEKI Taro's Home Page!!</title>
</head>
<body>
<h1>公益太郎のWebページ</h1>
<p>
寄ってらっしゃい見てらっしゃい。<br>
これからどんどん増えますよ。
</p>
</body>
</html>

HTMLとは

HyperText Markup Languageの略。 Webページを記述するためのマークアップ言語。
(マークアップ言語: 文書の一部を「タグ」と呼ばれる特別な文字列で囲うことにより、文章の構造や修飾情報(文字の大きさや色など)を、文章中に記述していく記述言語。)

タグ構造

<html lang="ja">
このタグを例に説明する。

<	html	lang="ja"	>
	要素名	属性

タグによって要素名のみ、属性が必要なもの様々である。

HTML 基本構造

基本的にHTMLは開始タグと終了タグをペアで使用する。
html
終了タグがない例外的なタグも存在するが、それはそのつど説明する。

各タグの説明は以下の通り。
html

画像貼り付け

まずは手始めに、画像の貼り付けを行ってみる。 web上にある「著作権が切れている画像」や「(web上で使って良いと書かれている)フリー素材」などを自分のwebページの貼り付ける場合。

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

まず画像を保存する。
保存したいと思う画像の上で「右クリック」→ Save Image As… を選ぶ
gazo01

ファイルの保存先はpublic_htmlである。
public_html をダブルクリックして Enter もしくは「保存」
gazo02

これでファイルに保存ができる。

一度保存したファイルを「ホームディレクトリ(thunar)」で確認してみる。
画像の画素数が左下に表示されているのでその数字をメモしておく。
gazo04
この画像の解像度は300x283ピクセル

先程作成した自分の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= 表示させる画像の幅と高さのピクセル数。実際の画像より大きくも小さくも表示可能(大きく表示させる場合画質は悪くなる)

Web作成についての注意

法律は守る!
20歳未満なのに喫煙、飲酒の話題は絶対に話題に出してはいけない。 (パチンコは18歳以上なのでOK。)

著作権にも気をつける。アニメキャラなどの著作物は載せないほうが良い。
他人のプライバシーは本人の許可なく晒すのもやってはならない。友人の顏写真も、本人の許可なく載せるのはやめたほうが良い。
人の悪口、根拠のない誹謗中傷はトラブルの元

法律では問題なくても、宗教、政治、人権問題などに関する話題には慎重に。

Webアクセシビリティ

特定の環境でしか読めないWebではなく、どんな環境であっても読めるWebページ作成を目指す。

内閣府ウェブアクセシビリティ

本日の課題

Back