コンピュータプレゼンテーション

コンピュータ
プレゼンテーション
ページを作る前に…
ホームページとは？
ホームページの正体
 Internet Explorerで
ページを開く
http://www.nucba.ac.jp
 [表示]メニューの[ソー
ス]を選択
ホームページの仕組み
 各自のパソコンでソースを作成
 サーバへアップロード
 ページを閲覧可能に
ソース
自分のPC
サーバ
ホームページの作成と公開
 TextEditを使用してソースを作成
– ソースのファイル名を「○×△.html」として保
存
 Fetchを使用してサーバ(名商大のWebサー
バはopinion)へアップロード
ソースの書き方(ルール)を覚えよう！
ソースを書く時のルール
HTML(Hyper Text Markup Language)を
使用
細かな設定を「タグ」で表記(下図の青字
がタグ)
ホームページを作る
HTMLの初級
最も基本的なタグ
目標：このようなページを作る
最も基本的なタグ
<HTML>
 HTMLの基本形は、
<HEAD>
<タグ名>任意の文字列</タグ名>
<TITLE>
My HomePage  タグはすべて半角文字で入力
 大文字と小文字は区別なし（例：
</TITLE>
<html>と<HTML>は同じ意味）
</HEAD>
<BODY>
私のホームページです。 
よろしくお願いします。 
</BODY>
</HTML>
最も基本的なタグ
 HTMLファイルは<HTML>で始まり、</HTML>
で終了する。
 <HEAD>～</HEAD>で囲まれた部分がHTML
ファイルのヘッダである。
ヘッダは本文とは違いページに表示されない。
 <TITLE>～</TITLE>で囲まれた部分がタイトル。
タイトルはページ上には表示されない。ブラウザ
のウインドウタイトルである。
最も基本的なタグ
 <BODY>～</BODY>で囲まれた部分がHTML
ファイルの本文。この間に記述された内容がブラ
ウザのページ上に表示される。
 HTMLでは本文中の改行は無視される。ページ
上で改行させたい時は行末に を記述。
最も基本的なタグ
②
①
④
<HTML>
<HEAD>
<TITLE>
My HomePage
③
</TITLE>
</HEAD>
<BODY>
私のホームページです。 
よろしくお願いします。 
</BODY>
</HTML>
⑤
HTMLを書く
TextEditを起動して下のように書いて見よう。
<HTML>
<HEAD>
<TITLE>
My HomePage
</TITLE>
</HEAD>
<BODY>
私のホームページです。
</BODY>
</HTML>
ファイルの保存
 [フォーマット]メニューから[標準テキストに
する]を選択
 [ファイル]メニューからファイル名を
index.htmlとして保存
 .txtという拡張子は[追加しない]を選択
ブラウザでの表示
 HTMLファイルのアイコンをダブルクリック
するか、Internet Explorerのアイコンにド
ラッグ＆ドロップすることで表示
ファイルの再編集
 作成したファイルを閉じた後に再び編集す
るには
– TextEditの[ファイル]メニューから[開く]を選択
– 開きたいHTMLファイルを一覧からクリック
– [リッチテキストコマンドを無視]にチェックを付
けて[開く]ボタンをクリック
練習1
以下のような表示になるようにHTMLファイルを作成
し、rensyu1.htmlというファイル名で保存しなさい。
また、そのファイルをブラウザで表示してみなさい。
答え
<HTML>
<HEAD>
<TITLE>My HomePage</TITLE>
</HEAD>
<BODY>
私のホームページです。よろしくお願いします。
</BODY>
</HTML>
練習2
以下のような表示になるように練習1で作成したファ
イルを修正し、rensyu2.htmlというファイル名で保存
しなさい。また、そのファイルをブラウザで表示して
みなさい。
答え
<HTML>
<HEAD>
<TITLE>My HomePage</TITLE>
</HEAD>
<BODY>
私のホームページです。 
よろしくお願いします。 
</BODY>
</HTML>
まとめ
 ページを作る前に…
 ホームページを作る
次回もコンピュータを使用します。
重いですが持ってきてください。

Download Report