Download presentation
Presentation is loading. Please wait.
1
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
情報基礎 WEBページの作成 HTML言語 徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
2
今週から HTML言語 ホームページ（WEB page)を記述する言語 自分のHPを作る 他人のHPの構成を「読める」ように
前に作った履歴書を参考に 他人のHPの構成を「読める」ように 情報倫理を考慮して作ろう
3
HTML言語 WEBページを作成するときの規格化された文書作成言語 ハイパーテキストのアイデアが基本 プログラム言語としてはいたって容易
最近ではXML言語に発展している ハイパーテキストのアイデアが基本 プログラム言語としてはいたって容易 WORDでも作れるし、ページ作成ツールもいろいろあるが、この講義での利用は禁止 JAVAやJavascript言語による操作
4
まずやること ブラウザを開く（開いたままにする） 情報基礎AホームページのHTMLサンプル
ソースを見る ツールバーの＜表示＞ → ＜ソース＞ 困ったときは、とほほのWWW入門の ホームページ入門を見よう エディタ(メモ帳またはWORDPAD)で index.html というファイルを作る。MSワードは使用不可
5
HTMLの基本 <html> <head> <title> </title>
<body> </body> </html>
6
HTMLの基本 <html> <head>
<title> My first homepage </title> </head> <body> 私は東北大学の一年生です <p> よろしくお願いします。 </body> </html>
7
作ったHPを見る ファイルをクリックするー＞ブラウザで見れる ファイルをプログラムから開く、WORDPADを選択、にすると、編集できる
注意： インターネットへの公開は 後でします。
8
箇条書き <ol> <li> 山形の蕎麦 <li> 一の蔵のお酒 </ol>
<ul> <li> 生まれは京都 <li> 育ちは東京 </ul>
9
色の設定とフォントの設定 <body bgcolor=“pink” text=“blue”>
<font size= 6 color=“green”> 緑で大きめに書いてみましょう </font> <center> 真ん中に寄せてみます </center> <font color =“#ff0000”> どんな色？
10
ハイパーリンクの張り方 自分のファイルにリンクを張る <a href=“rireki.doc”>私の履歴書 </a>
自分のファイルにリンクを張る <a href=“rireki.doc”>私の履歴書 </a> <a href=“lunch.html”>食生活</a> rireki.doc やlunch.htmlは自分で作成する インターネット上のページにリンクを張る <a href=“ 徳山研究室</a>
11
図や写真の表示 図を表示する <img src=“panda.gif”> 図をクリックすると別画面に表示する
図を表示する <img src=“panda.gif”> 図をクリックすると別画面に表示する <a href=“panda.gif”> <img src=“panda.gif”> </a>
12
画像や絵を取得する 他のページからとる（著作権に注意） デジタルカメラの写真： .jpg ファイル 自分で作る
右クリックで「画像に名前をつけて保存」 デジタルカメラの写真： .jpg ファイル 自分で作る tgif などのソフトを用いる とほほさんのページ参照
Similar presentations
