SSブログ

プログラミングの基礎編 HTML メモ02 [HTML]

ここではタグについて掘り下げていこうかと思います。ここからは、オリジナルで書かせて頂きます。


今回は見出しの前に、特殊文字 について少し説明していこうかなと思います。



今回のHTML



スポンサードリンク




◆特殊文字って何?



特殊文字というのは、HTMLのタグを構成してしまう文字のことを指します。例えば、"<" であったり、">" といったものを指します。


pro04.PNG

これらの類の文字はほかにもたくさんありますが、最低限でも "<" ">" "&" とスペースくらいは打てるようにしておくといいかもしれません。


詳しく知りたい方は、特殊文字 HTML と調べればいくらでも出ると思うので、調べてみてください。



◆改行のやり方


  本文を書くうえで一番大事な要素。それが段落をしっかり作ってあげること。それに適しているのが、<p>~</p> タグになります。このタグ内を1段落とみなしてくれるのでうまく使うことで、文章にまとまり感が生まれ読みやすくなります。
  また、<br /> を使うことでも改行することが可能です。こちらはいつでも改行することが出来るので、任意的にバランスを整えることが出来ます。上のスペースとあわせれば、こんな風に書くことも可能です。


■番外編


線はどうやって入れるの? <hr /> と打ち込めば反映されます!


◆見出しの話


見出しというのは、文章にメリハリを持たせるための副題のようなものです。


<h1>が一番でかいタイトル、簡単に言えばメインタイトルになります。それに続いて "h2" "h3" "h4" ... とそのタイトルの副題をつけていくと、樹形図のように細かくなっていきます。Word Prss でブログをやるような人であれば、意識していかないといけない要素のため、しっかり覚えていきましょう。



◆コメントアウトって何?


コメントアウトというのは、HTMLには表記しているけど、実際のページには反映させないよ!という時に使う式?になります。使い方は簡単。<!--> ~ <--> でくくればいいだけ!例えば後で見返したときに、ここはこういうことを書いてあるなどの、コメントを残したり、一時的に隠すなどといった時に使ったりします。



今回のメモはここまで。



最後に今回の成果を見てみましょう!


pro05.PNG
スポンサードリンク





プログラミングの基礎編 HTML メモ01 [HTML]

参考にさせてもらうのは、 0 から始めるHTMLとCSSの基本・基礎-webデザイン入門- 様


こちらを参考に進めていきます。


スポンサードリンク






◆早速作ってみた



まずは僕の環境とプログラミングレベルから。一応僕は Word Press でブログを書いているので、多少のHTML知識と断片的なCSS知識はあるつもり。ただ、本格的に学んではいないので、これを機に備忘録としてこのブログを初めてみたという流れ。最終目標が基本的なPHPの理解ということになるので、頑張って続けていこうと思います。


このブログでは、毎回一つのテーマをこなし、それについて考えてみるというスタイルを大事にしていくつもり。そこから何を理解すれば、その知識の広げ方こそが、早期修得のカギだと思っています。



◆メモ帳よりも・・・


このブログと一緒に学びたいということであれば、自分は Tera Pad のインストールをすることをお勧めします。文字化けをしてしまうこともあるので、自分はこちらで学習を進めています。


◆この基本式から学んでいこう!


■まず今なにをやっているのかを理解


この式はサイトそのものの土台を作っています。つまり文字を書くときの を作成しているのです。


■タグの使い方


かっこのようなものは基本的に要素や属性を表しています。簡単に言えば一時的なルール、学校のようなものだと思ってください。これを タグ と呼んでいます。


■文字化けについて


自分はこれは詳しくないのですが、CPUには私たちの、母国語のようにそれぞれ違う文字の種類というのがあるみたいです。まあともかく UTF-8 を指定しているのですから、Tera Pad の設定も当然 UTF-8 にしないとうまく認識してくれず文字化けをする可能性があります。なぜ UTF-8 なのかは各自調べてください。まあ、知らなくてもHTMLで困ることはありません。


■タグの種類は英単語のようなもの


タグにはいろんな属性があります。HTMLというのは単純に文字を表示する用途ではあるものの、様々な効果を作り出すことが可能です。ただし CSS の知識があれば、デザイン系もいじることが出来るので、HTMLに関しては最低限の知識があればいいかなと思います。詳しいタグなどは次のメモで見ていきましょう!


最後に成果を見てみましょう!


あ、一応専用のフォルダを用意しておきましょう。あとで復習に使えると思います。


文字化けしないように UTF-8 で書いて、 をクリックします。


pro03.PNG

タイトルバーにこのように


pro01.PNG

本文にこのように表示されれば成功です!


pro02.PNG

次回→近日


スポンサードリンク






このブログのサイトマップ [総合]

このブログのサイトマップです。

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。