2017年5月17日水曜日

基本中の基本

HTML記載のもっとも基礎を解説します。

そもそもHTMLとは

Webページを記述するためのマークアップ言語。
文書の論理構造や表示の仕方などを記述することができる。
W3Cによって標準化が行われており、大半のWebブラウザは標準でHTML文書の解釈・表示が行える。
汎用的なマークアップ言語であるXMLに準拠するよう一部の使用を改めたXHTML規格も定められている。


HTMLでは、文書の一部を“<”と“>”で挟まれた「タグ」と呼ばれる特別な文字列で囲うことにより、文章の構造や修飾についての情報を文書に埋め込んで記述することができる。文章の中で表題や段落の区切りを指定したり、箇条書きの項目を列挙したり、文書の一部として画像や音声、動画を埋め込んだり、他の文書へのハイパーリンクを設定したりすることができる。


すごくざっくり言ってしまえば、

Webページを作れて、
ブラウザを通して見た際に、文字や、サイトを形作るために記載する言語

です。
逆に言うと
このHTMLが理解できていれば
ファイルにHTMLを記載、サーバー上にアップ、することで、
世界中誰からでも見ることのできるWEBサイトを公開することができます。



文字表示

タグリファレンスなのに第一回はタグを使っていなくて申し訳ないですが、

まずは画面に文字を表示するロジックをひとつ


まず、メモ帳を開き
本文にただ

test

この1単語を書いて
名前をつけて保存しましょう
ここでは、
index.html
と名づけましょう

これで保存し、保存したファイルをダブルクリックするだけで

インターネットエクスプローラが起動し
画面に、

test

と表示されたはずです

これだけでホームページになるのです

基本はこんな単純な仕組みです。
これをいかに作り進めるかてサイト作りは進展します。

んでは、第1回はこんな感じで

XHTMLで解説します

こんばんは、
燃えPaPaです。

当ブログでは、さまざまなHTMLタグや、
HTMLの書き方を解説していきますが、

現在のWEB業界でのHTML表記の主流で、
ウェブサイトはXHTMLでコーディングする、というものがありますので、
当ブログでも、タグを紹介する時はXHTML準拠の書き方で紹介することとします。

HTMLタグの書き方として、
XHTML準拠で書いておけば、
そのソースを
ドキュメントタイプが、HTMLのサイトに使っても、XHTMLのサイトに使っても問題ありませんが、
もしHTMLの記法のみで書くと(XHTML準拠にしていないと)

ドキュメントタイプが、HTMLのサイトに使った場合はよいのですが、
XHTMLのサイトに使ってしまった場合、
ソースを確認した場合にエラー扱いされてしまったり、
エディタで編集しようとするとエラー検知してしまったりします。

ですので、
もし当ブログを参考にサイトを作ってくださる方がいらっしゃった時用に、
こちらでは、XHTML準拠の書き方でご紹介していこうと思います。

※単体のタグでは<hr><br>などの単体タグに閉じタグをつけて<ht /><br />にする程度の気遣いですが


燃えPaPa


<i>斜体文字

<i>斜体文字


<i>タグで囲まれたテキスト(<i>~</i>の間の文字)は斜体文字(italic)になります。

<i>は非推奨ではありませんが、
現在のデザイン、構造分離のWEB業界の方針からは、
このような文字修飾は、できるだけスタイルシートを利用することが推奨されています。

スタイルシートでは、1例として、
<span style="font-style: italic">~</span> などと記述し、斜体文字にすることができます。

例示
この記事で、ここは斜体文字になります。


<b>太文字

<b>タグで囲まれたテキスト(<b>~</b>の間の文字)は太字(Bold)になります。


<b>は非推奨要素ではありませんが、フォントの見栄えに関する指定には、
できるだけスタイルシートを利用した方がよいです。

※近年のhtml形式の変化で、サイトの構造と見栄えは分離することが推奨されているため

スタイルシートでは、<span style="font-weight: bold">~</span> などと記述します。


また、強調することが目的の場合は<strong>タグの使用が推奨されています。


例示
この記事で、ここは太字になります。


<u>下線つき文字

<u>タグで囲まれたテキスト(<u>~</u>の間の文字)は下線付き文字(underline)になります。

<u>は非推奨要素です。
テキストに下線(アンダーライン)を引く際には、できるだけスタイルシートを利用してください。

スタイルシートでは、1例として、 <span style="text-decoration: underline">~</span> などと記述し、下線付き文字にすることができます。

例示
この記事で、ここは下線付き文字になります。

※HTML5の導入で、このアンダーライン要素は廃止との話もありますので、徐々に使用をなくしていった方がよいようです。

HTMLタグ参考リンコレ

こんばんは、
燃えPaPaです。

ちょっと先日見つけた便利なWEBサービスのご紹介です。

無料のWEBサービス提供の定番の、ninjaのサービスで、
手軽にリンク集を生成できるサービス

リンコレ
http://lcll.jp/

というものがリリースされました。

こちら、URLと短評をつけるだけで、
手軽にソーシャルブックマークのようにリンク集を生成できます。

このブログでも、多くのHTMLタグ情報を紹介しておりますが、
他の方の簡単手引きのように作っているサイト等でも、
よいものが多数ありますので、少し参考になるといいな、と思いまして、

ちょっと実験も兼ねて


HTMLタグ参考サイト


って、作ってみましたー。
よろしければ、これからサイト作りを志す方に役立てていただきたいな、と。


燃えPaPa