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