More Related Content
More from TENTO_slide (13)
Html03
- 2. 3-0.html 前回の復習
ブラウザでの表示 エディタでの表示
<span style="font-size:200%;">こんにちは
<span style="color:blue">みなさん</span>
</span>
・<span>の中に<span>が入っていま
す。
☆「こんにちは」の部分だけ赤くして
みよう
2
- 3. 3-1.html
ブラウザでの表示 エディタでの表示
<html>
<head>
<title>タイトルです</title>
</head>
<body>
ここに中身を書きます。
</body>
</html>
・headタグにタイトルを書きます。
・bodyタグに本文を書きます。
・全体をhtmlタグで囲みます。
☆タイトルをいろいろ書き換えてみよ
う！
3
- 4. 3-1.htmlの中身
html
<html>
<head> head
<title>タイトルです</title>
</head>
<body> body
ここに中身を書きます。
</body>
</html>
4
- 6. 3-2.html
<html>
<head>
<title>テントくんの日記</title>
</head>
<body>
<h1>テントくんの日記</h1>
<h2>4/9</h2>
<p>今日からTENTOが始まった！ワクワク
してきたよう</p>
<h2>4/16</h2>
<p>TENTOも二回目でむずかしくなってき
ました。<br/>でも頑張ります！</p>
</body>
</html>
・h1タグに大見出しを書きます。
・h2タグに中見出しを書きます。
・本文はpタグに書きます。
☆4/23の日記を増やしてみよう！
6
- 7. 3-3.html
<html>
<head>
<title>テントくんの特徴</title>
</head>
<body>
<h1>テントくんの特徴</h1>
<ul>
<li>犬である</li>
<li>いつも笑っている</li>
<li>お母さんは涙もろい</li>
</ul>
</body>
</html>
・リスト表示にはulタグを使います。
・リスト一つ一つはliタグに書きま
☆テントの特徴を増やしてみよ す。
う！
7
- 8. 3-4.html
<html>
<head>
<title>テントくんの好きなもの</title>
</head>
<body>
<h1>テントくんの好きなもの</h1>
<ol>
<li>お昼寝</li>
<li>お散歩</li>
<li>プログラミング</li>
</ol>
</body>
</html>
・番号表示にはolタグを使います。
・リスト一つ一つはliタグに書きま
☆テントの好きなもの4番目を追 す。
加しよう
8
