2月4日(火)3コマ目

今日、やったこと

  • 箇条書き
  • リンク

今日のホワイトボード

箇条書き

箇条書きは

  • <ul>、</ul>で箇条書きのはじまり、おわり
  • <li>タグで箇条書きの各項目

を作る。

図　<ul>タグ、<li>タグで箇条書きをつくる


箇条書きのマーカーは

  • <ul>タグ　または　<li>タグに
  • プロパティ名list-style-typeで設定

する。


[練習問題]箇条書き

正解例をあげておきます。

練習1.html


練習2.html

箇条書きがネスト構造になっているてんに注意


リンク

リンクとはクリックすると別ページや同じページ内の別の個所が表示される仕組み。

<a>タグでつくる。

リンク先は<a>タグのhref属性で指定する。

図　<a>タグでリンク作成


[練習問題]リンク

トップページと秋田犬のページだけ。

トップページ(indexx.html)


秋田犬(akita.html)


次回は

横にならべる。

 

このブログの人気の投稿

11月29日(金)4コマ目

イメージ
今日、やったこと タグ HTMLファイルの構造 表(テーブル)をつくる 表のセルを結合する 今日のホワイトボード タグ HTMLにはいろいろなタグが定義されている。 タグにはそれぞれ役割が決められており、利用目的に合ったタグを利用する。 データにタグを付加することで、データに意味を持たせることができる。 下図の「きょうの料理」は単なる文字列だが、<h1>タグを付加することで、「きょうの料理」は見出しとして扱われる。 図　タグ 多くのタグは開始タグ、終了タグのペアになっている。 図　開始タグ、終了タグ HTMLファイルの構造 HTMLファイルは以下の構造になっている。 <html>で始まり、</html>でおわる <html></html>内には<head></head>と<body></body>が含まれる <head></head>内はヘッダー部で設定はこちらに <body></body>内はボディー部で表示データはこちらに 図　HTMLファイルの構造 表(テーブル)をつくる 行と列は以下のとおり。結構まちがいやすいので。 図　表の行と列 表は <table>タグ 、 <tr>タグ 、 <td>タグ でつくる。 <tr>タグで列を、<td>タグで列内の各セルをつくる。 ...
続きを読む

12月24日(火)3コマ目

イメージ
今日、やったこと 文字の色、サイズ等を変える 今日のホワイトボード 文字の色、サイズ等を変える タグのstyle属性で見た目の指定ができる。 図　style属性の使い方 変更範囲がタグで挟まれていない場合は、<span></span>を使って範囲を指定する。 <span>タグは範囲を作るためのタグで見た目には影響がない。 練習問題 正解例をあげておきます。 タグのネスト <span></span>のなかにさらに<span></span>とネスト構造にすることも可。 この場合は、一番内側の<span></span>同士がペアになり、その外側がペアになり、・・とペアリングされる。 図　タグのネスト 次回は 見た目のつづき。 
続きを読む

1月7日(火)3コマ目

イメージ
今日、やったこと <style>タグを使う 今日のホワイトボード <style>タグを使う 前回はタグにstyle属性を追加してそのタグのデザイン指定をした。 同じタグに同じデザインを指定したい場合はデザイン指定を重複して設定するため、めんどくさい。<style>タグを使えば同じタグ(IDやクラス)のデザインを一か所にまとめて設定できる。 〇特定の タグ のデザインを指定する場合 セレクタには　タグ名　を指定 すればOK。 図　<style>タグでタグのデザインを指定する 〇同じタグに別々のデザインを指定したい場合( ID を使う) タグにはid属性を使ってIDを指定することができる。 ※IDは同じHTMLファイル内で重複しないようにすること！！ <style>タグにて ID を対象にデザイン指定をする場合、 セレクタは　#ID名 　になる。 図　<style>タグでIDを対象にデザインを指定する 〇同じタグに別々のデザインを指定したい場合( クラス を使う) タグにはclass属性を使ってクラスを指定することができる。 IDは同じHTMLファイル内で重複指定できないが、クラスは重複OK。 <style>タグにて クラス を対象にデザイン指定をする場合、 セレクタは　.クラス名 　になる。 図　<style>タグでクラスを対象にデザインを指定する 練習問題 正解例をあげておきます。 練習１ 練習２ 練習３ 練習４ 次回は 見た目シリーズのつづき。
続きを読む