【初心者】HTMLでWebページを作ってみたら”なるほど”が増えた話

Learn HTML by yourself

【初心者】HTMLでWebページを作ってみたら”なるほど”が増えた話

ブログ記事を書くときは、テーマに沿って機能がついていて、文字を入力すると記事構成は出来上がるのが、初心者でも始めることが出来る理由。そして、そのブログにASP広告を貼付ける時に”タグ”というものをコピーして、自分のブログへ貼付けることで報酬につながるという仕組みです。

このタグのソースデータを見てみると、英文字で書かれた文字が<>という記号でくくられている形がよく使われているのがわかるでしょうか。これが、HTMLプログラム言語というものです。

HTMLを理解する

最初でお伝えしましたが、ブログ記事を書くときは、テーマに沿って機能がついていて、文字を入力すると記事構成は出来上がるのが、初心者でも始めることが出来る理由です。そもそもWebサイトはテキストファイルで作られていて、この時に使われるのがHTML言語です。

このHTML言語を書いていくと、ハイパーリンクで繋がることができるので、他のページへ移動ができるということになります。

dog
dog

じゃあ、この言語を覚えたらWebサイトをつくることができるんだね?

HTMLには記述する方程式があった

HTMLは必要な言語だけど、残念ながらこの言語だけではWebサイトを表示することができません。

ブログを作るソフトでは、おそらく文字をそのまま入力していくことで、ブログ記事をWebサイトへ簡単に反映することが出来ます。このブログもWordPressソフトを使用しているので、文字を入力するだけで(はないですが)Webサイトへ反映することができます。

neko
neko

どういうことかわからないよー

方程式①

1.「!DOCTYPE html」⇒ 文書の定義はこれですよという宣言する記述。

 

「!DOCTYPE」とは

文書の解釈に使うDTDを宣言するもので、正確に言えばHTMLのタグではありません。HTML文書を作成するとき、HTMLタグよりも先頭にまず書くべきなのが DOCTYPE 宣言です。「DTD」とは「Document Type Definition」のことで、「文書型の定義」を意味します。HTMLのバージョンごとに、そのバージョンで使用できる要素(タグ)や属性の名前などの情報が定義されています。たとえば、「<!DOCTYPE HTML」と記されている場合は、これからDTDを宣言することを示し、その文書タイプが「HTML」であるという意味です。

方程式②

2.<html lang=”ja”>は、日本語のWebページだということを伝える記述 「<」と「>」で囲み、<html言語を使って記述しています。⇒ 言語は日本です。>という意味合いです。これをWeb側へ伝えるそうです。

方程式③

3.<p>半角文字</p>は、段落の記述です。

 

方程式④

4.<a> href=http:url詳細はこちら</a>は、「詳細はこちら」に貼られたリンク先へ移動できる記述。

 

「A」とは、「Anchor(アンカー)」の略で、リンクの出発点や到達点を指定するタグです。
リンクの出発点を示す場合は、href属性でリンク先を指定し、到達点を示す場合はname属性やid属性を使用し、その場所の名前(識別子)を指定します。

HTML4では<a>タグはインライン要素であるため、ブロックレベル要素を含めることができず、ブロック全体をリンクとして振る舞わせるには工夫が必要でした。
HTML5ではインライン要素/ブロックレベル要素といったタグの分類に変更があり、<a>タグの中に<div>タグなどの元ブロックレベル要素を含めてもよいことになりました。

例えば、同じ文章をビジュアル画面で作成するか、テキストで作成するかで、このような違いになります。

テキスト画面

 

 

 

 

ビジュアル画面

 

 

 

 

ビジュアル画面で作成する時には、┃HTMLにはルールがあった という文章は、見出し3で構成されています。

これをテキスト画面でみると、<h3>HTMLにはルールがあった</h3>という形になります。

このように、どういう風に表示させたいのかによって、HTML言語を付け足してあげるのです。

そもそもどうしてフォントではなくて構造なのか。

どうしてはじめからWordなどの文書を使わずに複雑な仕組みで文書を公開するのでしょうか。

それは、人によって環境が違うからです。例えば、Macには「MSゴシック」フォントはありません。また、誰もがWordを使っているわけでもありません。そこで、誰もが情報を共有できるようにソフトウェアが読者の環境に合わせた表示方法を考えたのです。

標準文書の構造を記述したHTMLは、ブラウザの種類やバージョンに関係なく正しい情報を伝えることができますし、見た目だけの表示方法が変わったとしても「見出し<h2>」や「段落<p>」という構造は変わることがありません。

ちょいちょいでてくるタグとは何か

タグは、山括弧<>で囲んだ記述です。段落を表すタグは<head>です。

タグは、始まりと終わりで一つの記述方法として使います。

例えば、↑の段落文書をhtmlで記述すると次のようになります。

<head>タグは、始まりと終わりで一つの記述方法として使います。</head>

書き方としては、始まりタグは、<head>と記述したら、終わりタグは。</head>のようにスラッシュ/を入れます。

文字コードとマーク付け

HTMLではいろいろな文字コードが使われています。ソースデータをみてみるとわかりますが、自分の文書で使っている文字を利用している人に教えてあげる必要があるのです。

サーバーで設定するのですが、サーバーにその機能がない場合は、次のように記述します。

<head>

 <meta charset=”UTF-8”/>

 <title>

また、幅広く利用者が活用できる文書とするためには、名前空間を使います。

はじめの方で記載してありましたが、例えば、日本語で作成しましたと記述するなら、文末へ”lang=”jaを記述します。

<html○○”lang=”ja>

まとめ

初心者が一からHTMLで記述するって…想像もしていませんでした。それでも、少しの編集や追加をしたいなぁという欲がでてきて、独学ながら学習しようと思い始めました。

使っているテキストエディタは、Bracletsです。

Adobe社が中心となって開発している、初心者向けでもあり、完全無料で利用できるコードエディターなのでぜひ利用してみてくださいね。

無料ダウンロードはコチラ

まだまだHTMLでWebサイトを作る過程は続きます。

コメント