デザインの学校 ウェブデザイン基礎編 第2回

前回は、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>
セル1 セル2
セル1 セル2

さまざまな表示の違いを確認。
こうやって書くと一瞬ですが、実際にタグを打っていると
なかなか時間がかかりました
<div>と<span>の影響の違いや、ブラウザで見え方が違うのも
確認できたのが意外と楽しかったです

 


WEB(ホームページ)デザイン初級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

PAGE TOP