SlideShare uma empresa Scribd logo
1 de 20
Baixar para ler offline
.インストールをやっていこう
              ohotech #13




12年4月12日木曜日                 1
用意するもの

              • パソコン

              • ブラウザ

              • テキストエディタ




12年4月12日木曜日                2
パソコン

              • OS・スペック問わず

              • キーボードがキチンと押せるPC

              • インターネットの見れる環境




12年4月12日木曜日                       3
ブラウザ


              • 推奨はChrome

              • 別のブラウザを使う場合、デザインの
               差異が出ても泣かない




12年4月12日木曜日                         4
エディタ

              • 最低限文字コードが編集出来るもの

              • Linux(Ubuntu): gedit 等

              • Windows: TeraPad Notepad++ 秀丸 等

              • Mac: mi CotEditor Radcar



12年4月12日木曜日                                       5
エディタ
                           ! !
                        る よ
                    も あ      emacs?
                 ス ン               小指が死
                                             にますよ
              レ ッ                                        ?
        im の
    V

  Ubun
              •困ったら         Vim で!
       tu/W
               indow                                      です
                    s/Ma                           ステ
                                                        マ
                        c   にて対                 す、
                               応!!          言い
                                              ま
                                          り
                                      は っき

12年4月12日木曜日                                                6
レッスンを見ましょう!



12年4月12日木曜日          7
HTMLとは



              • Hyper Text Markup Language




12年4月12日木曜日                                  8
とにかく、書こう
          <!DOCTYPE html>
          <html lang=”ja”>
          <head>
            <meta charset=”UTF-8”>
            <title>はじめてのHTML</title>
          </head>
          <body>
            <p>こんにちは!</p>
          </body>
          </html>

12年4月12日木曜日                            9
とにかく、書こう
          <!DOCTYPE html>
          <html lang=”ja” >
          <head>
            <meta charset=”UTF-8”>
            <title>はじめてのHTML</title>
          </head>
          <body>
            <p>こんにちは!</p>
          </body>
          </html>

12年4月12日木曜日                            10
<!DOCTYPE html>


              • HTML5のお約束

              • HTML4.x、XHTML1.xで書きたい場
               合、適宜調べて書きましょう




12年4月12日木曜日                              11
とにかく、書こう
          <!DOCTYPE html>
          <html lang=”ja”>
          <head>
            <meta charset=”UTF-8”>
            <title>はじめてのHTML</title>
          </head>
          <body>
            <p>こんにちは!</p>
          </body>
          </html>

12年4月12日木曜日                            12
<html>∼</html>


              • HTML文書の定義

              • <html>タグの中に<head>タグと
               <body>タグがある




12年4月12日木曜日                            13
とにかく、書こう
          <!DOCTYPE html>
          <html lang=”ja”>
          <head>
            <meta charset=”UTF-8”>
            <title>はじめてのHTML</title>
          </head>
          <body>
            <p>こんにちは!</p>
          </body>
          </html>

12年4月12日木曜日                            14
<head>∼</head>
              • HTML文書の付加情報

              • 主に

               • 文字コード

               • 外部データの使用

               • 検索エンジンのための用語

12年4月12日木曜日                     15
とにかく、書こう
          <!DOCTYPE html>
          <html lang=”ja” >
          <head>
            <meta charset=”UTF-8”>
            <title>はじめてのHTML</title>
          </head>
          <body>
            <p>こんにちは!</p>
          </body>
          </html>

12年4月12日木曜日                            16
<body>∼</body>


              • HTML文書の本文

              • 文書の構造を書く部分




12年4月12日木曜日                     17
<head>∼</head>
 <head>
   <meta charset=”UTF-8”>
   <meta name=”description” content=””>
   <meta name=”keywords” content=””>
   <title>はじめてのHTML</title>
   <link rel=”stylesheet” href=””>
   <link rel=”shortcut icon” href=””>
   <script src=””></script>
 </head>


12年4月12日木曜日                               18
<head>∼</head>
 <head>
   <meta charset=”UTF-8”>
   <meta name=”description” content=””>
   <meta name=”keywords” content=””>
   <title>はじめてのHTML</title>
   <link rel=”stylesheet” href=””>
   <link rel=”shortcut icon” href=””>
   <script src=””></script>
 </head>


12年4月12日木曜日                               19
質問タイム
              • こちら側から聞きたいこと

              • この形式でよい?

               • 動画流さず内容だけ?

               • 説明いる?

              • 次回もHTML講座?別の?

              • そもそも無くても良い?

12年4月12日木曜日                     20

Mais conteúdo relacionado

Semelhante a .インストールをやってみよう

信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!Takayuki Miyauchi
 
Html&cssの書き方入門編
Html&cssの書き方入門編Html&cssの書き方入門編
Html&cssの書き方入門編touhou
 
JavaEE6 First Application #glassfishjp
JavaEE6 First Application #glassfishjpJavaEE6 First Application #glassfishjp
JavaEE6 First Application #glassfishjpSatoshi Kubo
 
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜圭輔 大曽根
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础jay li
 
ぺちぱな。 はじまり
ぺちぱな。 はじまりぺちぱな。 はじまり
ぺちぱな。 はじまりRyo Tajima
 
WordBench Osaka 春の大翻訳祭り
WordBench Osaka 春の大翻訳祭りWordBench Osaka 春の大翻訳祭り
WordBench Osaka 春の大翻訳祭りTakayuki Miyauchi
 
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩Atsushi Tadokoro
 

Semelhante a .インストールをやってみよう (12)

HTML/CSS
HTML/CSSHTML/CSS
HTML/CSS
 
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
 
W ctokyo2012 timing
W ctokyo2012 timingW ctokyo2012 timing
W ctokyo2012 timing
 
Html&cssの書き方入門編
Html&cssの書き方入門編Html&cssの書き方入門編
Html&cssの書き方入門編
 
JavaEE6 First Application #glassfishjp
JavaEE6 First Application #glassfishjpJavaEE6 First Application #glassfishjp
JavaEE6 First Application #glassfishjp
 
Html03
Html03Html03
Html03
 
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础
 
ぺちぱな。 はじまり
ぺちぱな。 はじまりぺちぱな。 はじまり
ぺちぱな。 はじまり
 
WordBench Osaka 春の大翻訳祭り
WordBench Osaka 春の大翻訳祭りWordBench Osaka 春の大翻訳祭り
WordBench Osaka 春の大翻訳祭り
 
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩情報編集(Web)  HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
 
Code Anything
Code AnythingCode Anything
Code Anything
 

.インストールをやってみよう

  • 1. .インストールをやっていこう ohotech #13 12年4月12日木曜日 1
  • 2. 用意するもの • パソコン • ブラウザ • テキストエディタ 12年4月12日木曜日 2
  • 3. パソコン • OS・スペック問わず • キーボードがキチンと押せるPC • インターネットの見れる環境 12年4月12日木曜日 3
  • 4. ブラウザ • 推奨はChrome • 別のブラウザを使う場合、デザインの 差異が出ても泣かない 12年4月12日木曜日 4
  • 5. エディタ • 最低限文字コードが編集出来るもの • Linux(Ubuntu): gedit 等 • Windows: TeraPad Notepad++ 秀丸 等 • Mac: mi CotEditor Radcar 12年4月12日木曜日 5
  • 6. エディタ ! ! る よ も あ emacs? ス ン 小指が死 にますよ レ ッ ? im の V Ubun •困ったら Vim で! tu/W indow です s/Ma ステ マ c にて対 す、 応!! 言い ま り は っき 12年4月12日木曜日 6
  • 8. HTMLとは • Hyper Text Markup Language 12年4月12日木曜日 8
  • 9. とにかく、書こう <!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”UTF-8”> <title>はじめてのHTML</title> </head> <body> <p>こんにちは!</p> </body> </html> 12年4月12日木曜日 9
  • 10. とにかく、書こう <!DOCTYPE html> <html lang=”ja” > <head> <meta charset=”UTF-8”> <title>はじめてのHTML</title> </head> <body> <p>こんにちは!</p> </body> </html> 12年4月12日木曜日 10
  • 11. <!DOCTYPE html> • HTML5のお約束 • HTML4.x、XHTML1.xで書きたい場 合、適宜調べて書きましょう 12年4月12日木曜日 11
  • 12. とにかく、書こう <!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”UTF-8”> <title>はじめてのHTML</title> </head> <body> <p>こんにちは!</p> </body> </html> 12年4月12日木曜日 12
  • 13. <html>∼</html> • HTML文書の定義 • <html>タグの中に<head>タグと <body>タグがある 12年4月12日木曜日 13
  • 14. とにかく、書こう <!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”UTF-8”> <title>はじめてのHTML</title> </head> <body> <p>こんにちは!</p> </body> </html> 12年4月12日木曜日 14
  • 15. <head>∼</head> • HTML文書の付加情報 • 主に • 文字コード • 外部データの使用 • 検索エンジンのための用語 12年4月12日木曜日 15
  • 16. とにかく、書こう <!DOCTYPE html> <html lang=”ja” > <head> <meta charset=”UTF-8”> <title>はじめてのHTML</title> </head> <body> <p>こんにちは!</p> </body> </html> 12年4月12日木曜日 16
  • 17. <body>∼</body> • HTML文書の本文 • 文書の構造を書く部分 12年4月12日木曜日 17
  • 18. <head>∼</head> <head> <meta charset=”UTF-8”> <meta name=”description” content=””> <meta name=”keywords” content=””> <title>はじめてのHTML</title> <link rel=”stylesheet” href=””> <link rel=”shortcut icon” href=””> <script src=””></script> </head> 12年4月12日木曜日 18
  • 19. <head>∼</head> <head> <meta charset=”UTF-8”> <meta name=”description” content=””> <meta name=”keywords” content=””> <title>はじめてのHTML</title> <link rel=”stylesheet” href=””> <link rel=”shortcut icon” href=””> <script src=””></script> </head> 12年4月12日木曜日 19
  • 20. 質問タイム • こちら側から聞きたいこと • この形式でよい? • 動画流さず内容だけ? • 説明いる? • 次回もHTML講座?別の? • そもそも無くても良い? 12年4月12日木曜日 20