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

Emacs

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

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

Emacs の基本操作

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

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

授業でよく使うコマンド

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

EmacsでWebページ作成開始

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

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

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

各自Webページのアドレスは
http://roy/~c12Xxxx/
もしくは
http://roy.e.koeki-u.ac.jp/~c12Xxxx/
となる。(学籍番号最後の一文字は省略)

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

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

<!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作成についての注意

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

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

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

Webアクセシビリティ

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

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

本日の課題

Back