1月5日（木）1コマ目
今日、やったこと
HTML
今日のホワイトボード
HTML
HTMLには役割別にいろいろなタグが用意されています。
このタグをデータに応じて指定することになります
|
| 図 HTMLタグの役割 |
HTMLファイルとWebブラウザ
HTMLファイル
各データにHTMLタグをしていしたファイルがHTMLファイル。拡張子は.html。
Webブラウザ
Microsoft EdgeやGoogle Chrome、Firefoxなど。
HTMLファイルを読み込み、タグに従ってデータを表示する。
たとえば、<h1>タグが付いたデータは見出し => 大きめに表示する。
|
| 図 HTMLファイルとWebブラウザ |
HTMLファイルの構造
HTMLファイルは<html>タグで始まり、</html>タグで終わる。
<html>タグの中にはヘッダー部の<head></head>、ボディ部の<body></body>がある。
|
| 図 HTMLファイルの構造 |
練習1
画像を表示する
style属性で見た目を設定
各タグはstyle属性で見た目の設定(フォントの色、大きめなど)ができる。
|
| 図 style属性 |
<span>タグ
<span>タグはいままでのタグと異なり、見た目には影響はありません。
範囲を指定するだけです。
<span>タグにstyle属性でデザイン指定をすると、<span></span>の間に指定されたデザインが適用されます。
|
| 図 <span>タグ |
タグのネスト
タグはネストできます。
最も内側のタグ同士がペアになり、次はその外側のタグ同士はペアになり、と内側から順にペアになります。
|
| 図 タグのネスト |
練習2
文字色や大きさ、装飾を指定してください。
<style>タグ
<style>属性は各タグで指定するため、同じデザインを複数のタグに適用する場合、重複して指定する必要があります。
<style>タグを使えば、まとめてデザイン指定ができます。
|
| 図 <style>タグ |
箇条書き
箇条書きは<ul>タグ、<li>タグです。
|
| 図 箇条書き(<ul>タグ、<li>タグ) |
<style>タグのセレクタ
セレクタにはタグ、クラス、IDを指定することができます。
|
| 図 <style>タグのセレクタ |
クラス、IDはともにタグに指定できます。
クラスはHTMLファイル内で重複指定可能。
IDはHTMLファイル内で重複指定不可。
じかいは
C#、ネットワークシステムともに、しばらくHTMLです。
