読者です 読者をやめる 読者になる 読者になる

Awesome Hacks!

プログラミング初心者なので地道に勉強していきます。分からない人の立場から整理していきます。

HTML_ドットインストール_覚え書き

HTML・CSS ドットインストール
 

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf8">
        <meta name="description" content="初めてのHTML文書です。">
        <title>はじめてのHTML</title>
        <link rel="shortcut icon" href="favicon.ico">
<!--
      <style>
        body { background: skyblue; }
      </style>
-->
<!--        <link rel="stylesheet" href="mystyles.css">
-->
    </head>
<body>
<!--    <p>こんにちは!</p> -->
    <article>
        <h1>文字参照<h1>
            <p>&lt;p&gt;タグを段落です」</p>
            <input type="text" value="区切り文字は&quot;です">
            <p>「この記号の文字参照は&amp;quot;です」</p>
    </article>
    <header>
        <h1>おいしいごはん!</h1>
        <nav>
            - ホーム
            - このサイトについて
            - プロフィール
        </nav>
    </header>

    <section>
        <h1>今月のおいしいごはん</h1>
        <article>
            <h1>おいしいごはん #12</h1>
            <p><img src="IMG_0186 1.JPG" width="100" height="140" alt="カエル"></p>
            <table>
                <thead>
                    <tr>
                        <th>Size</th><th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>S</td><td>150</td>
                    </tr>
                    <tr>
                        <td>M</td><td>180</td>
                    </tr>
                    <tr>
                        <td>L</td><td>210</td>
                    </tr>
                    <tr>
                        <td colspan="2">free for kids!</td>
                    </tr>                </tbody>
            </table>
            <div style="background:skyblue;">
                <p>至高の<br><strong>TKG</strong><a href="more.html">もっと見る</a><a href="#stuff">材料に</a></p>
                <h2 id="stuff">材料</h2>
                <ul>
                    <li><span style="color:gold;"></span></li>
                    <li>醤油</li>
                    <li>ごはん</li>
                    <li><a href="http://dotinstall.com" target="_blank">ドットインストール</a></li>
                </ul>
                <h2>手順</h2>
                <ol>
                    <li>まぜる</li>
                    <li>かける</li>
                </ol>
                <h2>定義</h2>
                <dl>
                    <dt>TKG</dt>
                    <dd>TAMAGO KAKE GOHAN</dd>
                </dl>
                <hr>
                <p>ところであの件は・・・?</p>
            </div>
            <pre>
                poem
                    poem
                        poem
            </pre>
            <blockquote>
                TKG最高! by tamaki
            </blockquote>
        </article>
    </section>

    <section>
        <h1>新着のおいしいごはん</h1>
        <article>
            <h1>おいしいごはん #32</h1>
            はもしゃぶ
        </article>
        <article>
            <h1>おいしいごはん #31</h1>
            スリランカカレー
        </article>
    </section>
    <aside>
        <h1>おすすめレシピ本</h1>
            - BOOK 1
            - BOOK 2
            - BOOK 3
    </aside>
    <article>
        <h1>アンケート</h1>
        <form action="survey.php" method="post" novalidate>
            <p>メールアドレス: <input type="text" name="email" size="50" maxlength="5" value="abc" disabled></p>
            <p>メールアドレス: <input type="email" name="email" size="50" placeholder="please enter email" required></p>
            <p>料金: <input type="number" name="price" size="50" placeholder="please enter email"></p>
            <p>誕生日: <input type="date" name="birthday" size="50" placeholder="please enter email"></p>
            <p>
                コメント:
                <textarea name="comment" cols="40" rows="5" placeholder="コメント"></textarea>
            </p>
            <p>
                Phone:
                <label><input type="checkbox" name="phone" value="android" checked>
                Android</label>
                <input type="checkbox" name="phone" value="iphone" id="iphone"><label for="iphone">iPhone</label>
            </p>
            <p>
                Color:
                <input type="radio" name="color" value="red" checked>
                Red
                <input type="radio" name="color" value="blue">Blue
            </p>
<!--
            <p>City:
                <select name="city">
                    <option value="tokyo">Tokyo</option>
                    <option value="nagoya">Nagoya</option>
                    <option value="osaka" selected>Osaka</option>
                    <option value="kyoto">Kyoto</option>
                    <option value="fukuoka">Fukuoka</option>
                </select>
            </p>
-->
            <p>
                <select name="city" multiple size="5">
                    <option value="tokyo">Tokyo</option>
                    <option value="nagoya">Nagoya</option>
                    <option value="osaka" selected>Osaka</option>
                    <option value="kyoto">Kyoto</option>
                    <option value="fukuoka">Fukuoka</option>
                </select>
            </p>
            <p>
                <button type="submit"><strong>送信!</strong></button>
            </p>
            <p>
                <button type="button">処理をする!</button>
            </p>
            <p>ログイン: <input type="password" name="password"></p>
            <input type="hidden" name="user_id" value="23423">
            <p><input type="submit" value="送信!" disabled></p>
        </form>
    </article>
    <footer>
        このサイトは @tamakiによって運営されています。
    </footer>
</body>
</html>

 
 
 
 
HTML5
w3c html5
caniuse.com

Ricty Diminished
Atomエディタ







はじめてのHTML



こんにちは!




HTML5の決まり
head,body
charset、エンコード
description 文書の説明
ファビコン(タブのアイコン)の設定

styleタグ CSS
styleのファイル化
コメント

id:一つしかない要素
class:複数ある要素
 複数のクラスを同時に持てる
style:直接styleを指定できる

header:
footer:
nav:ナビゲーション
article:独立したコンテンツ
aside:副次的なコンテンツ
section:それ以外の情報のかたまり。見出し
h1 - h6:

p:段落
hr:水平線
pre:改行や字下げを保持
blockquote:引用
div:スタイリング

ol(ordered list) / ul(unordered list) / li(list item)
dl(definition list) / dt(definition term) / dd(definition description)

strong
br
span

img src width height alt

table
thead
tbody
tr:table row
th:table header
td:table data

form
action
method: get/post
input
password
placeholder
hidden

textarea
button
disabled

input
checkbox
radio
label

select
option
複数選択

input
email
number
date
required
novalidate

文字参照
数値文字参照 <
文字実体参照 < >

カテゴリー:どの分類か
コンテンツモデル:そのタグの中にどのカテゴリーのタグを入れられるか
トランスペアレント