1. Web講座 第1回

2. 概要
目的
HTML・CSS・JavaScriptとは
準備
HTMLの基本
次回の講座

3. この講座では、基本的なWebの技術を学ぶことができる
具体的にはHTML５・CSS３・JavaScriptを学んでいく

4. ネットワークチームの大学祭への出し物
Webアプリケーション開発ができるようになる

5. HTMLは、文書の構造や表示の仕方をタグを用いて記述する
もの
<p>文章の内容</p><h1>タイトル</h1>

6. HTML文書の見た目を記述、指定する言語
<h2>
題名：○○○○○
</h2>
<p>
作者名：○○ ○○
</p>
h2{
color : red;
}
p{
color : green;
}

7. JavaScriptはオブジェクト指向のスクリプト言語であり、
ウェブサイトにおいて動的な表現をすることができる
Hello World!
ボタンボタン
クリック！

8. ここで質問！
自分の好きなエディタはありますか？

9. もし、好きなエディタがない場合は
次のスライドで紹介する
Bracketsをインストールする

10. ～エディタ編～
エディタはBracketsを使用します
http://brackets.io/

11. ～エディタ編～

12. ～エディタ編～
ダウンロードしたファイル「Brackets.Sprint.38.msi」を実行すると
インストーラーが立ち上がり、以下のように進めます

13. ～ブラウザ編～
ブラウザはGoogle Chromeを使用します
http://www.google.co.jp/intl/ja/chrome/browser/

14. ～ブラウザ編～

15. ～ブラウザ編～

16. ～ブラウザ編～
ダウンロードしたファイル「ChromeSetup.exe」を実行すると
Google Chromeが自動的にインストールされます

17. まずは、下の文をエディタに打ち込もう

18. すべて打ち終わったら
ファイル名.html という形で
テキストを保存して
ブラウザで確認してみよう

19. このように表示されたでしょうか？

20. HTML5の文書である事を示している
HTML文書の始まり
文書情報の始まり
本体部分の始まり
メタ要素

21. titleタグで囲まれた文はブラウザの上部もしくはタブに表示される

22. “<!--”と”-->”で
囲まれた部分は
コメントとして
扱われる

23. ５月２０日
HTMLについて