もし、わからないことがあったら、すぐに手を上げてください。私、小宮山かTA(ティーチングアシスタント)の先輩が教えてくれます。大学のコンピュータの演習では、基本的にTAが2名、ついてくれます。また、コンピュータに詳しい学生さん、あまり経験のない学生さんと、さまざまな学生さんが入学してきますが、興味や経験に応じてクラスを選択することができます。ですからはじめての方も、演習について行けないのでは、という心配はいりません! もちろん、すでにバリバリ、プログラミングを行ったり、ホームページを作成している方は、一年生から進んだクラスの授業を受けることができます。
では、実際に始めてみましょう! ホームページの作成には専用のソフトウェアがあるのですが、 ホームページが表示されるしくみを理解してもらうために、あえて今日は専用のソフトウェアでは なく、メモ帳[テキストエディタ]を使って作成します。
メモ帳とブラウザは同じファイルを開いています。メモ帳で作ったファイルテキストファイルと呼ばれ、どのパソコンでも見る事ができます。そのファイルに< > < />に囲まれた記号(この記号のこと、タグ:荷札といいます)を書き加えると、あら不思議、ブラウザで見ると、文字を飾ったり、画像を張ったりできます。これで世界中の人が(インターネット使える環境にある人だけだけど)キレイなファイルを見る事ができます! これがホームページのファイルのしくみです!
ホームページを作るとき、多くの人はカンタンに作成できるソフトウェアを使用して作成します。しかし新潟国際情報大学では、皆さんにしくみを理解してもらうために、タグを入力してホームページを作成することを学びます。
見だし・改行・背景や文字色の変更
・
画像の貼り付け・画像の編集
この演習のトップページを作ろう。ファイル名は 自分の学籍番号.html 例 1100600X.html
HTML編・EXCEL編・Word編・PowerPoint編へリンクを張ろう。
とりあえず、今日は、トップページにこの演習の目的、それぞれの編のページにそれぞれの編の内容・目的だけ記しておこう。
スタイルシートって、ご存知ですか? スタイルシートはHTMLで指定したところの どのように表示させるかを、指定できるしくみです。スタイルシートを使うと 次のような利点があります。
HTMLファイルとは別にCSSファイル(スタイルだけを記述したファイル)を作っておいて、
ブラウザ側でリンクして表示するという方法です。この方法を使うとCSSファイルを書き換えるだけで
複数のページの表示を変更できます。
ヘッダーにこれを埋め込んでおくと、CSSファイル(この場合komikomi.css)のスタイル設定を変更するだけで、
埋め込んでおいたページのレイアウトを一気に更新できます!
<link rel=stylesheet type=text/css href=komikomi.css>
</head>
HTML
<h2>文章</h2>
<h3>文章</h3>
<strong> 文章 </strong>
等々、フツーに作っておきます。
CSS
komikomi.cssをご参照ください。
こうすると、このページのように表示されます。ソースを見てください。
h2、h3、strong、色も大きさもHTMLでは指定ないのに、あら不思議、
いろいろ出来ます。背景や、画像等、スタイルシートで指定できます。