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