前回は、WEB用語について学びましたが、今回は早速タグを打ちます！！
と言っても、前回にやったのはタグには開始タグと終了タグがあって、原則2つセットで使わなければならないということだけ。
今日は、実戦でそこのところを掘り下げていきます
まずは、HTMLの基本構造をつくります。
| <html> <head> <title>ブラウザのタイトルバーに表示される文字t</title> </head> <body> </body> </html> |
の部分がブラウザで表示される部分です。
ここに、文字やタグを打ち込んでいきます
| <font size="1">サイズ1</font><br> <font size="2">サイズ2</font><br> <font size="3">サイズ3</font><br> <font size="4">サイズ4</font><br> <font size="5">サイズ5</font><br> <font size="6">サイズ6</font><br> <font size="7">サイズ7</font><br> <HR> <B>太字</B><br> <STRONG>太字</STRONG><br> <I>イタリック</I><br> <EM>イタリック</EM><br> <U>下線</U><br> <STRIKE>取消し線</STRIKE><br> <TT>等幅文字</TT><br> <SUP>上付き文字</SUP><br> <SUB>下付き文字</SUB><br> <SMALL>スモール</SMALL> <HR> <font color="#808080">グレー</font><br> <font color="RED">赤</font><br> <font color="#008000">緑</font><br> <font color="#ffff00">黄色</font><br> <font color="#0000ff">青</font><br> |
サイズ1 サイズ2 サイズ3 サイズ4 サイズ5 サイズ6 サイズ7 太字 太字 イタリック イタリック 下線 等幅文字 上付き文字 下付き文字 スモール グレー 赤 緑 黄色 青 |
導入は、カンタンなフォントタグから
次は、
| <span style="background:red; color:white">赤帯に白い文字 span</span> <br> <div style="background:red; color:white">赤帯に白い文字 div</div> <br> <table border="0" cellpadding="10" cellspacing="0"> <tr> <td bgcolor="#ff0000"><font color="#ffffff">赤帯に白い文字&l;/font>&l;/td> </tr> </table> |
||||
| 赤帯に白い文字 span
赤帯に白い文字 div
|
||||
| <div align="left"> 左寄せ </div> <div align="center"> 中央揃え </div> <div align="right"> 右寄せ </div> |
||||
|
左寄せ
中央揃え
右寄せ
|
||||
| <ruby> <rt>ろうにゃくなんにょ <rb>老若男女 </ruby> |
||||
| <table border="1" width="300" cellpadding="5"> <tr> <td>セル1</td> <td>セル2</td> </tr> </table> <br> <table border="1" width="100%" cellpadding="0" cellspacing="20" bgcolor="red"> <tr bgcolor="white"> <td>セル1</td> <td>セル2</td> </tr> </table> |
||||
|
さまざまな表示の違いを確認。
こうやって書くと一瞬ですが、実際にタグを打っていると
なかなか時間がかかりました
<div>と<span>の影響の違いや、ブラウザで見え方が違うのも
確認できたのが意外と楽しかったです
この記事へのコメントはありません。