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