ウェブのお勉強はじめました（３）タグについていろいろと - Webとライティングの学習帳|2月のグリズリー

学んだことを書くのは難しい。

ひょいひょういと飛び越えた知識もやっているうちに何となくわかってしまうけれど、文章は論述でいくわけだからその間をしっかり埋めなきゃ不誠実。ウェブの本の難しさはこの辺に起因し、会社に入ればいやでもわかるというのはなんだか「料理の世界」みたい。

前回はタグ打ちについて書きました。terapadに以下のコードを張り付けて「index01.html」なんて名前で保存して、ダブルクリックするとブラウザで良い感じに表示できる実感から「なんとなく理解」が始まりました。

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <title>タグをつけて書いてみる</title>

</head>

<body>

    <h1>「ウコンの力」</h1>

    <p>「飲み会前に」・・・（具体的内容）</p>

    <p>「ばっちり効果」・・・（具体的内容）</p>

    <p>「ロングセラー」・・・（具体的内容）</p>

</body>

</html>

（文字化けする場合はterapadのほうの設定を直せば大丈夫。前回のリンク参照）
あ、ブラウザなんですがinternetExplorerはやめた方がええです。GoogleChromeかFireFoxにしましょう。パソコン買ったらだいたい当たり前のように内蔵されてるから使い続けている人もいると思いますがこれを機会に切り替えましょう。余分な機能付いてないので表示も早いです。

それで、テキストエディタは他にも色々あります。

Adobe Brackets・・・ブラケッツ、なんと無料。練習に良い。ざっくり
adobe dremever・・・ドリミーバー。お金がかかる。高機能。ざっくり

両方ともタグを打った段階で次はこれですか？って感じで予測変換をしてくれてタグを打つのが早くなる。でもあんまり練習にならないのでとにかく最初は手で打ちましょうとは先生の言葉。

ひたすらタグを打ち、一息つくたびにCtrl＋Sで文章の保存を徹底せよ！とのこと。

ちなみに授業で使っているテキストは翔栄社『HTML5＆CSS3標準デザイン講座』（草野あけみ)です。

ここに書かれている文章を参考によく使うタグ

<h1>~</h1>・・・見出し：h1~h6までの6段階。
<p>~</p>・・・段落：意味のまとまりごとに区切る。
<ul>〜</ul>・・・箇条書きリスト（順不同）:１２３４と番号がつかないリスト。<li></li>と一緒に使う。
<ol>〜</ol>・・・箇条書きリスト:1234と番号が付く。<li></li>と一緒に使う。
<dl>~</dl>・・・記述リスト：dt要素やdd要素と一緒に使う。
<table>~</table>・・・表組み：tr要素やtd要素と一緒に使う。
<address>~</address>・・・連絡先
<div>~</div>・・・任意の範囲を選択：囲むイメージ、めちゃ使う。
<a>~</a>・・・ハイパーリンク：リンクを作るときに使う。
<em>~</em>・・・強調
<strong>~</strong>・・・重要な語句：ブログでよく使う人も多いかも。
<img>・・・画像
<span>~</span>・・・任意の範囲

＊厄介なのがHTML5というものになって新要素が多く入ってきたことらしい。らしいというのはまだ教えてもらってないから。耐えず勉強をしていかないといけないのですな。

tr要素？td要素？とタグだけ見てもわからないと思うのですが、

ウェブの文章にはタグが必要でそれを装飾するのがCSSというのだけ理解できれば本屋に置いてある入門書の内容をどんどん模写していくのが一番の勉強になりそう。上記のタグが意味するところは今後ひとつずつ書きたいと思ってます。

しかしこのペースで続く感じがしない（笑）

code-drill（コードドリル - プログラミング言語のタイピング練習）で練習してタイピングの速度を速めるべし（自戒）