html で自己紹介ページをつくる
DESCRIPTION
東京大学工学系研究科技術経営戦略学専攻 ウェブ工学とビジネスモデル第 2 回講義資料TRANSCRIPT
HTML で自己紹介をつくる
04/10/2023 UT Startup Gym1
04/10/2023 UT Startup Gym2
飯塚修平東京大学工学系研究科技術経営戦略学専攻 （ＴＭＩ）修士２年オーマ株式会社 あのひと検索スパイシー PM2012 年 Google ウェブマスターインターン
UT Startup Gym
ウェブアプリの仕組み
04/10/2023 3
URI ( リクエスト )
HTML ( レスポンス )
HTTP
ブラウザ ウェブサーバ
データベース
PHP などで記述
外部サービスAPI
UT Startup Gym
今日学ぶこと
• HTML• CSS• javascript
04/10/2023 4
UT Startup Gym
HTML とは
04/10/2023 5
UT Startup Gym
HTML とは
04/10/2023 6
ブラウザ
HTMLみてるもの
UT Startup Gym
CSS とは• ウェブサイトの見た目を記述する
– 色を変えたい– 囲み線を加えたい– 配置を変えたい
– 角を丸くしたい– 影を加えたい– グラデーションをかけたい
04/10/2023 7
UT Startup Gym
javascript とは
• HTML に動的な要素を加える。– クリックしたら〇〇– 一定時間経過したら〇〇
• アニメーション
04/10/2023 8
UT Startup Gym
javascript とは
04/10/2023 9
onclick=“hoge()”
UT Startup Gym
API とは• 外部サービスのデータや機能を使うことができ
る。
• ex. http://graph.facebook.com/ あなたのID/picture?type=large
• ex. https://api.twitter.com/1/statuses/user_timeline.json?screen_name= あなたの Twitter ID
04/10/2023 10
UT Startup Gym
HTML の文法<!DOCTYPE html><html>
<head><meta
charset=“utf=8”><title> My Web App
</title></head><body>
This is content.</body>
</html>04/10/2023 11
head:タイトルやエンコードなどメタな情報を記述する
body:ブラウザに描写される内容を記述する
UT Startup Gym
HTML の文法• タグ– <p> や </p> のように < と > で囲まれた部分
のこと– <p> のように / がつかないタグは「開きタグ」– </p> のように / がつくタグは「閉じタグ」
• 要素– 開きタグ〜閉じタグまで含んで要素という
• 内容– タグの間に挟まれた部分を内容という
04/10/2023 12
UT Startup Gym
さまざまなタグ• h1, h2 ... (heading) タイトル、見出し• img src (image source is...) 画像• a href (anchor, hypertext reference) リン
ク• ul (unordered list) 箇条書き• li (list item) 箇条書きの項目
04/10/2023 13
UT Startup Gym
ワーク１• 以上のすべてのタグを使って自己紹介のページ
を作ってください。
04/10/2023 14
UT Startup Gym
書いてみよう！• テキストエディタを使って書きます。
– Word は、文章作成ソフトです。• Windows
– （メモ帳）– サクラエディタ– TeraPad
• Mac– （テキストエディタ）– mi
• CUI（ターミナル） : これは慣れが必要– emacs– vim
• エディタ力が上がると、一打鍵の攻撃力が上がります
04/10/2023 15
UT Startup Gym
CSS の文法• style 要素の内容に書く
<style>selecter {
property: value;property: value;
}</style>
• HTML 開きタグの中に書く<div style=“property:value”></div>
04/10/2023 16
UT Startup Gym
ワーク２• 自己紹介ページをデザインしてください。– 「これできないかな？」と思ったらググる– だいたいできるはず
04/10/2023 17
UT Startup Gym
javascript の文法• script 要素の内容に書く
<script>var hoge = “piyo”;alert (hoge);
</script>
• HTML 開きタグの中に書く<div onclick=“alert(‘hoge’);”></div>
04/10/2023 18
UT Startup Gym
ワーク３• 自己紹介ページのどこかをクリックしたらポッ
プアップが出るようにしてください。– onclick
04/10/2023 19
• なんか文字化けする– 作成した HTML ファイルを保存する時の文字コード
を UTF-8 に指定しましょう• ブラウザで開いても HTML タグが表示される– エディタを確かめてください– Word やワードパッド、 Mac のテキストエディット
は書式情報を保存してくれちゃう、プレーンテキスト用エディタじゃないです• Windows ならとりあえずメモ帳• Mac なら mi とか DL してみましょう