【Web制作の基礎?!】まずは、HTMLに触れて体感してみよう!①

HTML

【Web制作の基礎?!】まずは、HTMLに触れて体感してみよう!①

 

HTMLってなに?なんの英単語の略なの?全く、右も左も分からないなぁ。

 

って方が、大勢と思います。自分も、その中のうちの一人です。しかし、最近はソースコードを読めるようには、徐々に成長してきました。嬉しいです。

 

今回は、そんな方に向けて分かりやすく説明していきますね。

ざっくりとしたと説明から

Webページは、HTMLとCSSという言語から構成されています。

 

HyperText Markup Languageは、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web において、ウェブページを表現するために用いられる。

 

つまり、これらの頭文字をとってHTMLということですね。だいたい、WEBプログラミングを学習する方はは、僕も含まてそうですが、このHTMLからの勉強を始めると言うわけですね。

 

これらを組み合わせることにより、私達が普段、目にするサイトは作られています。

 

未経験でもWEB業界に挑戦したい!【.pro】

HTMLの仕組みについて

HTMLは、テキストの中に「タグ」と呼ばれる印をつけています。

 

例えば、

<h1>HTMLの仕組みにいて</h1>

と「タグ」で囲むことにより、h1という大きな見出しが付け加えられます。

 

このように、テキストを今回は、「HTMLの仕組みにいて」についての部分を囲むことにより、このテキスト自体が、「見出し」や「リンク」といった意味をもつことになります。

 

見出しの要素には、<h1>以外にも<h6>まで、存在します。

 

見出し要素は文書中の見出しを示す為の要素です。

<h1> を最上位とし <h​6> を最も低いレベルとする 6 段階 のレベルで実装されています。見出し要素にはセクションで紹介されるトピックを簡潔に記述します。ユーザーエージェントの中には、文書中の見出し要素の記述を解析し、自動的に文書の目次を生成するものもあります。

 

開始タグと終了タグについて

テキストをタグで囲む際には、開始タグと終了タグではさむことにより、一つのテキストとしての意味を持つことになります。

さきほどのを例に、見ていきますね。

<h1>HTMLの仕組みにいて</h1>

 

<h1>→これが、開始タグです。

</h1>→これが、終了タグです。

 

あ、終了タグには、「/」が追加されている!

 

そうです、初心者は、これを見落としがちですねでしっかりと注意を払いましょう。

 

フロントエンドコース【.pro】

段落タグについて

 

段落を表すのは、<p>という、要素です。

 

pタグって何??

 

「P」とは、段落を指定するためのタグで、「P」と「Paragraph」の略です。<p>~</p>で囲まれたテキストは1つの段落であることを示します。

 

例えば、さきほどの

<h1>HTMLの仕組みにいて</h1>

<p>中身が分かれば、誰でも理解して書くことができる</p> という、ことですね。

 

ここで、囲んだタグのテキストは、改行して表示されるということです。

 

通常、HTMLではテキストである部分をこの<p>タグで囲います。使用頻度は高く、最も使われるHTMLタグの一つと言えるでしょう。また、テキスト以外にも、画像で表されたテキストも一つの段落といえるため、これらも<p>タグで囲むのが一般的です。

 

なるほど、こらはしっかりと覚えてた方が良いですね。

 

コメントのタグ

<!– –>これで、囲むとコメントを意味します。

 

待って、何これ、わからないよ。

 

「!– –」とは、HTMLソースの中にコメント(注釈)を記述するためのものです。
!– –は<>と組み合わせて使用し「<!」でコメントの宣言開始、「–」でコメントの開始、同じく「–」でコメントの終了、「>」でコメントの宣言が終了します。

 

気づいた方は、おられると思いますが、このタグには、「/」がないですね。

 

具体的には、

<!–ここは、コメント欄の一覧です。–>

→これで、囲むことによりブラウザには表示されません。

 

リンクを作成する(1)

リンクを作成する際には、<a>の要素を使う必要があります。

 

「A」とは、「Anchor(アンカー)」の略で、リンクの出発点や到達点を指定するタグです。

 

なるほど、一つ一つに意味があるんですね。

 

リンクの出発点を示す場合は、href属性でリンク先を指定し、到達点を示す場合はname属性やid属性を使用し、その場所の名前(識別子)を指定します。

 

具体的には、以下に示します。

<a>これがリンクです。</a>

 

これで、ブラウザ上には、「これがリンクです。」と表示されるということですね。

 

リンクを作成する(2)

先ほどの要素にはリンク先を指定するために新しく追加するタグがあります。

<a href=”url”>というように、書くことにより、このurlの部分に貼ったリンク先に飛ぶということですね。

 

<a href="http://sample.htm">サンプルサイトへ飛びます。</a>

 

 

href→

領域をクリックした際のリンク先を指定します。

name→

リンクの到達点にするための名前を指定します。

 

割と英語の単語の意味と、同じことが多いので英語が得意な方は、覚えが早いかもしれませんね。

 

HTMLの属性とは?

 

さっきの、属性ってなに?

 

 

 

href→

領域をクリックした際のリンク先を指定します。

name→

リンクの到達点にするための名前を指定します。

 

これら、この属性とういのは、その要素の何かしらの設定をつけるようなものと思っておいてください。

 

<要素名 属性="属性値">

ここで使用する時の、場合は「”」ダブルクォーテーション忘れないようにしてくださいね。

 

未経験でもWEB業界に挑戦したい!【.pro】

【Web制作の基礎!】今日の復習・本記事のまとめ

最後までご覧頂きありがとうございました。

 

僕も、全くこの Web プログラミングである HTML に関しては、そこまで理解がないので正直難しかったです。しかし、今年2020年から小学校でもプログラミング教育というのが必須になるということで自分たちを大人も少し焦りを感じています。

 

 

なので、今後ブログの更新頻度は少し低いかもしれませんが少しずつでもいいから、独学プログラマーへとなれるように頑張っていきたいと思います。

 

併せて参考に読みたい記事

 

 

こちらの記事で、プログラミングの概要についてから理解することをお勧めします。

 

 

タイトルとURLをコピーしました