Embed Size (px)
Citation preview
HTMLエディタを使ってみよう
情報リテラシー
20131114
使用するエディタ
SeaMonkey
ブラウザメーラHTMLエディタをひとつにしたツール
入手方法
ウェブからの無料ダウンロード
SeaMonkeyのＵＲＬを入力する
httpwwwseamonkey-projectorgreleases
ダウンロード方法(13)
Windows版をダウンロード
これをクリックする
ダウンロード方法(23)
ダウンロード方法(33)
ダウンロードの確認
「ファイルを保存」を選択する
デフォルトでは「ダウンロード」フォルダに保存される
インストール方法(16)
保存されたファイルを実行
ダウンロードフォルダ内の 「SeaMonkey Setup 222exe」をクリック
ダイアログが現れるので「実行」をクリック
インストール方法(26)
セットアップのダイアログが現れる
「次へ」をクリック
インストール方法(36)
セットアップのダイアログが現れる
「使用許諾所に同意する」にチェックを入れ「次へ」をクリック
インストール方法(46)
セットアップのダイアログが現れる
「標準インストール」のまま「次へ」をクリック
インストール方法(56)
セットアップのダイアログが現れる
インストールするフォルダはそのまま 「インストール」をクリック
ID
インストール方法(66)
セットアップのダイアログが現れる
「完了」をクリックするとインストールが完了
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
使用するエディタ
SeaMonkey
ブラウザメーラHTMLエディタをひとつにしたツール
入手方法
ウェブからの無料ダウンロード
SeaMonkeyのＵＲＬを入力する
httpwwwseamonkey-projectorgreleases
ダウンロード方法(13)
Windows版をダウンロード
これをクリックする
ダウンロード方法(23)
ダウンロード方法(33)
ダウンロードの確認
「ファイルを保存」を選択する
デフォルトでは「ダウンロード」フォルダに保存される
インストール方法(16)
保存されたファイルを実行
ダウンロードフォルダ内の 「SeaMonkey Setup 222exe」をクリック
ダイアログが現れるので「実行」をクリック
インストール方法(26)
セットアップのダイアログが現れる
「次へ」をクリック
インストール方法(36)
セットアップのダイアログが現れる
「使用許諾所に同意する」にチェックを入れ「次へ」をクリック
インストール方法(46)
セットアップのダイアログが現れる
「標準インストール」のまま「次へ」をクリック
インストール方法(56)
セットアップのダイアログが現れる
インストールするフォルダはそのまま 「インストール」をクリック
ID
インストール方法(66)
セットアップのダイアログが現れる
「完了」をクリックするとインストールが完了
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
SeaMonkeyのＵＲＬを入力する
httpwwwseamonkey-projectorgreleases
ダウンロード方法(13)
Windows版をダウンロード
これをクリックする
ダウンロード方法(23)
ダウンロード方法(33)
ダウンロードの確認
「ファイルを保存」を選択する
デフォルトでは「ダウンロード」フォルダに保存される
インストール方法(16)
保存されたファイルを実行
ダウンロードフォルダ内の 「SeaMonkey Setup 222exe」をクリック
ダイアログが現れるので「実行」をクリック
インストール方法(26)
セットアップのダイアログが現れる
「次へ」をクリック
インストール方法(36)
セットアップのダイアログが現れる
「使用許諾所に同意する」にチェックを入れ「次へ」をクリック
インストール方法(46)
セットアップのダイアログが現れる
「標準インストール」のまま「次へ」をクリック
インストール方法(56)
セットアップのダイアログが現れる
インストールするフォルダはそのまま 「インストール」をクリック
ID
インストール方法(66)
セットアップのダイアログが現れる
「完了」をクリックするとインストールが完了
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
Windows版をダウンロード
これをクリックする
ダウンロード方法(23)
ダウンロード方法(33)
ダウンロードの確認
「ファイルを保存」を選択する
デフォルトでは「ダウンロード」フォルダに保存される
インストール方法(16)
保存されたファイルを実行
ダウンロードフォルダ内の 「SeaMonkey Setup 222exe」をクリック
ダイアログが現れるので「実行」をクリック
インストール方法(26)
セットアップのダイアログが現れる
「次へ」をクリック
インストール方法(36)
セットアップのダイアログが現れる
「使用許諾所に同意する」にチェックを入れ「次へ」をクリック
インストール方法(46)
セットアップのダイアログが現れる
「標準インストール」のまま「次へ」をクリック
インストール方法(56)
セットアップのダイアログが現れる
インストールするフォルダはそのまま 「インストール」をクリック
ID
インストール方法(66)
セットアップのダイアログが現れる
「完了」をクリックするとインストールが完了
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ダウンロード方法(33)
ダウンロードの確認
「ファイルを保存」を選択する
デフォルトでは「ダウンロード」フォルダに保存される
インストール方法(16)
保存されたファイルを実行
ダウンロードフォルダ内の 「SeaMonkey Setup 222exe」をクリック
ダイアログが現れるので「実行」をクリック
インストール方法(26)
セットアップのダイアログが現れる
「次へ」をクリック
インストール方法(36)
セットアップのダイアログが現れる
「使用許諾所に同意する」にチェックを入れ「次へ」をクリック
インストール方法(46)
セットアップのダイアログが現れる
「標準インストール」のまま「次へ」をクリック
インストール方法(56)
セットアップのダイアログが現れる
インストールするフォルダはそのまま 「インストール」をクリック
ID
インストール方法(66)
セットアップのダイアログが現れる
「完了」をクリックするとインストールが完了
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
インストール方法(16)
保存されたファイルを実行
ダウンロードフォルダ内の 「SeaMonkey Setup 222exe」をクリック
ダイアログが現れるので「実行」をクリック
インストール方法(26)
セットアップのダイアログが現れる
「次へ」をクリック
インストール方法(36)
セットアップのダイアログが現れる
「使用許諾所に同意する」にチェックを入れ「次へ」をクリック
インストール方法(46)
セットアップのダイアログが現れる
「標準インストール」のまま「次へ」をクリック
インストール方法(56)
セットアップのダイアログが現れる
インストールするフォルダはそのまま 「インストール」をクリック
ID
インストール方法(66)
セットアップのダイアログが現れる
「完了」をクリックするとインストールが完了
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
インストール方法(26)
セットアップのダイアログが現れる
「次へ」をクリック
インストール方法(36)
セットアップのダイアログが現れる
「使用許諾所に同意する」にチェックを入れ「次へ」をクリック
インストール方法(46)
セットアップのダイアログが現れる
「標準インストール」のまま「次へ」をクリック
インストール方法(56)
セットアップのダイアログが現れる
インストールするフォルダはそのまま 「インストール」をクリック
ID
インストール方法(66)
セットアップのダイアログが現れる
「完了」をクリックするとインストールが完了
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
インストール方法(36)
セットアップのダイアログが現れる
「使用許諾所に同意する」にチェックを入れ「次へ」をクリック
インストール方法(46)
セットアップのダイアログが現れる
「標準インストール」のまま「次へ」をクリック
インストール方法(56)
セットアップのダイアログが現れる
インストールするフォルダはそのまま 「インストール」をクリック
ID
インストール方法(66)
セットアップのダイアログが現れる
「完了」をクリックするとインストールが完了
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
インストール方法(46)
セットアップのダイアログが現れる
「標準インストール」のまま「次へ」をクリック
インストール方法(56)
セットアップのダイアログが現れる
インストールするフォルダはそのまま 「インストール」をクリック
ID
インストール方法(66)
セットアップのダイアログが現れる
「完了」をクリックするとインストールが完了
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
インストール方法(56)
セットアップのダイアログが現れる
インストールするフォルダはそのまま 「インストール」をクリック
ID
インストール方法(66)
セットアップのダイアログが現れる
「完了」をクリックするとインストールが完了
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
インストール方法(66)
セットアップのダイアログが現れる
「完了」をクリックするとインストールが完了
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
エディタを立ち上げる(15)
デスクトップにSeaMonkeyのアイコンが追加されているのでダブルクリック
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
エディタを立ち上げる(25)
最初の立ち上げ時のみのダイアログ
今回は「設定をインポートしない」をチェックし「次へ」をクリック
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
エディタを立ち上げる(35)
以下のウィンドウが立ち上がる
起動時に現れるダイアログはとりあえず「キャンセル」をクリック
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
HTMLエディタを起動させる
HTMLエディタのアイコン(composer)をクリック
エディタを立ち上げる(45)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
エディタを立ち上げる(55)
HTMLエディタを起動させる
下のようなウィンドウが表示されます
これがSeaMonkeyのHTMLエディタです
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
保存(13)
HTMLを保存する
図の「保存」アイコンをクリックする
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
保存(23)
新規で保存する場合は図のようにタイトルの入力を求められるので入力して「OK」をクリック
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
保存(33)
「名前を付けてページを保存」のダイアログが表示される
rArr保存したいフォルダをダブルクリックで選択して開き「保存」をクリック
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
エディタの機能を使ってみよう
ハイパーリンク
別のページを呼び出す単にリンクとも呼ばれる
ハイパーリンクによってたくさんのウェブページがネットワーク状に繋がっている
画像
文字だけでは味気ないので画像を用いるといい
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
新しいファイルを開き「test1html」として保存する
新しいファイルは「新規作成」をクリックすると開く
保存フォルダついては「マイ ドキュメント」で右クリックからフォルダを新規作成し名前を「情報リテラシー」としてそこにファイルを保存するようにする (自分がわかりやすければ無視してどこに保存してもよい)
ハイパーリンクを張ろう(010)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ファイル名を「test1html」として保存する
プレビュー画面にする
ウィンドウ下のプレビュータブをクリック
リンクのアイコンをクリックする
ハイパーリンクを張ろう(110)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
リンク先の記入
リンク先のＵＲＬを記入してＯＫをクリック
ハイパーリンクを張ろう(210)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ハイパーリンクを張ろう(310)
プレビュー表示
リンクが表示されるがプレビュー画面ではリンク先に飛ぶ機能は確認できない
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ハイパーリンクを張ろう(410)
ウェブブラウザでのリンクの確認
「参照」のアイコンをクリック
ブラウザでの確認ができます
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ハイパーリンクを張ろう(510)
ウェブブラウザでのリンクの確認
リンクをクリックするとブラウザにリンク先のページが表示される
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
実際のデータを見てみよう
ソースタブで画面を切り替えてくださいこの部分がリンクに相当する部分です
ハイパーリンクを張ろう(610)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ハイパーリンクを張ろう(710)
ハイパーリンクのデータの構造
黒字部分実際に表示される文字
赤字部分表示される文字に
リンクの機能をつける働き
（rdquordquoに囲まれたＵＲＬにリンクする）
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ハイパーリンクを張ろう(810)
書き換えてみよう
lta href=ldquohttpyahoocojprdquogthttpyahoocojpltagt
lta href=ldquohttpyahoocojprdquogtヤフージャパンltagt
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ハイパーリンクを張ろう(910)
プレビュー画面での確認（下のプレビュータブ）
表示されている文字が変わっています
ブラウザでの確認（上のブラウズアイコン）
保存の確認をされますが必ず保存をしてくださいそうしなければ変更が反映されません
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
表示とリンク先が異なることを確認
リンクの文字に矢印を置いて確認してください
ハイパーリンクを張ろう(1010)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
画像を取得 図の講義ページにある画像を右クリックrarr[名前を付けて画像を保存]を選択し名前をimagepngとしてとりあえず作成しているhtmlファイルと同じフォルダに保存
画像を張ろう(15)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ファイル名を「test2html」として保存する
画像アイコンをクリック
するとこんなウィンドウが出ます
画像を張ろう(25)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
画像を張ろう(35)
画像ファイルを選択
「ファイルを選択」をクリックし先ほど保存した画像imagepngを選択
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
画像を張ろう(45)
代替テキストの記入
画像が何らかの理由によって表示されないときに代わりに表示される言葉親切のために入れておきましょうこれでＯＫを押してください
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
画像を張ろう(55)
画像が張られる
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
印刷方法
「印刷」アイコンをクリックする
「印刷」のダイアログが表示され印刷するプリンタや印刷枚数を設定できる rArr「OK」をクリックで印刷
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ちょっと実際に作ってみました
やった人ＴＡの佐藤さん(2011年度)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
とりあえずタイトル
微妙なタイトルだけど入力してみる地味
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
とりあえずタイトル
タイトルをどうにかするべくまずは選択
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
とりあえずタイトル
「見出し文字」にして大きく目立たせてみる
見出し文字はH1が一番大きくてH2H3と順に小さい見出しになっていく今回はもちろんH1
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
さらに位置を中央ぞろえにしていかにもタイトルっぽくしてみる
とりあえずタイトル
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ちょっと導入文でもhellip
よしよし多少タイトルっぽい
下にちょっとした導入文でもつけますか
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ちょっと導入文でもhellip
この導入文もタイトルに合わせて中央ぞろえにしてみました
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
項目を作ってみる
項目は左ぞろえにしたい気分なので左ぞろえに戻しました
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
項目を作ってみる
自己紹介と打ってみるもやっぱり地味選択して何か編集をしましょう
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
項目を作ってみる
やっぱり見出しだし見出し文字かなhellip
タイトルとの差を出したいのであえてH3
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
項目を作ってみる
よいよい自己紹介文も打ってみましたがちょっと字を下げたほうがいいかな
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
項目を作ってみる
選択してここのボタンを押すこれが字下げのボタンらしい
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
項目を作ってみる
それっぽいついでに次の項目名を書いてみましたが普通に続きに書かれてしまいました駄目っぽい
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
項目を作ってみる
選択してとりあえず字下げを戻しましょう
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
項目を作ってみる
さらに上の項目と同じようにH3の見出しにしてみる趣味の内容の入力以下は恥ずかしいので今回は省略します
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
せっかくのHTMLなのでハイパーリンクをつけてみようと思い立ってみる
無難に名古屋大学あたりを選択してリンクのアイコンをクリック
ハイパーリンクをつけてみる
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ハイパーリンクをつけてみる
出てきたウィンドウにリンク先のＵＲＬを入力してＯＫをクリック
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
ハイパーリンクをつけてみる
リンクとかついてちょっとHTMLで書いたっぽくなった気分
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
それにしても白地に黒い文字とか味気ないタイトルを選択したあとその背景色をいじくってみる
デザインを考える
分かりづらいけど ここが文字色と背景色を 変更するところ
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
いいかわいい自画自賛
せっかくかわいい方向なので項目のほうも前に丸ボッチとかつけてみようかな
デザインを考える
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
デザインを考える
こんなんなりましたシンプルデザイン
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
補足
ここまでボタンが用意されている機能ばかり使ってきましたが上のメニューにはもっと多くの機能が用意されています
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
補足
参考にするといいかもしれないサイト
HTMLについて解説しているサイト
httpsaru-htmlpupujp
httppark16wakwakcom~html-csshp_kozakoza_tophtml
コピペして使うと面白そうなサイト
httphp-sozainet
httpcopicopicom
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
課題
課題1
名前学籍番号適当なリンク適当な画像を入れたHTMLを作りプレビューを印刷して講義時間内に提出
課題2
佐藤さんのHPを参考に自分がおすすめする場所(街景勝地など)を宣伝するページを作る
画像ファイルは入れずHTMLのみ添付して提出
宛先 literacy-report2013ertljp 件名情報リテラシー 締切2013年11月20日 235959+0900(JST)
第二回講義の資料を参考に正しいメールの書き方で(まだ本文に自分の名前と所属しか書かない者がいる)
