プログラミングの世界

初心者向けHTML入門【基本的なタグ編】

プロミラミングを勉強したいならまずはHTMLから始めるのが一般的です

HTML? 

HTMLといきなり聞いてもそれだけで難しそうと思うかも知れませんが 
HTMLは本当にすごく簡単なので安心してくださいね

HTMLとは?

私達がいつも目にしている Webサイトやアプリはほとんどまずは
HTMLで出来ていますHTMLの言語『タグ』を使い文字の大きさや
色レイアウトや画像を張りページを作っています 
今では簡単にアップ出来るブログの管理画面の見た目もHTMLで出来ています 
言わばHTMLは見た目の土台部分になります 
タグを使う事でいろんな見た目のページを作る事が出来るんですが 
HTMLを習得してる方がその全てのタグを記憶して使いこなしているのでは無く 
タグの使い方をマスターすれば後は誰でも タグ辞典等からコピペーストして
張っていく作業になります まずは基本的なタグの使い方を覚えていきましょう

初心者向けHTML入門【基本的なタグ編】

あんず
あんず
それでは早速HTMLに触れてみましょう

HTMLでは、テキストに「タグ」と呼ばれる言語を使ってテキストを囲むことにより 
テキストが「見出し」や「リンク」といった意味をも持つことになります 
テキストをタグで囲む時は開始タグと終了タグではさみます 
終了タグには「/」が必要な点に注意してください

初心者向けHTMLタグ

それでは基本的なタグを紹介していきます

ページタグ

まずはじめにページを作る為に必ず入れなければいけない基本のタグがあります

<!DOCTYPE html> DOCTYPE宣言と呼ばれるもので、HTMLのバージョンを宣言するためのものです
<html> HTMLを使って作られている事を表す
<head> Webページの設定に関する情報を書いていきます
<meta charset>

ページの文字コードをUTF-8に指定することができますUTF-8は、HTML5で推奨されている文字コード

<title> ページのタイトルを指定します
<body> 実際に表示したい内容を書きます

基本的にこのように記載します

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>初心者からのブログ収入手引書</title>
</head>
<body>


</body>
</html>

フアイル名を○○.htmlと設定して
<body>~</body>の間にページの内容を記載していきます
終了タグには「/」が必要なので、注意してください

見出しタグ

見出しは検索エンジンのSEO対策でも重要視されるので
正しく使い分けましょう

h1,h2,h3,h4,h5とありますが数字が小さいほど重要視されます

h1 記事タイトル(本文中では使わない)
h2 本文中の「大きな見出し」
h3 本文中の「h2の中の見出し」
h4 本文中の「h3の中の見出し」
h5 本文中の「h4の中の見出し」

あんず
あんず
このように分類されますがこれでは解かりずらいので日本に置き換えてみました

h1 国名    日本
h2 地方    関西
h3 都道府県  大阪府
h4 市区    東大阪市
h5 町     小坂町

こんな感じでタイトルの大きな日本の中に順番に入っていくようなイメージです

文章中にタイトルがあると変なので文章中ではh1は使わない

h2について細かく書く時にh3更にでh4と使い分けて下さい



開始タグと終了タグで囲み、意味付けをしていきましょう

<h1>テキスト</h1>

<h2>テキスト<h/2>

<h3>テキスト</h3>

<h4>テキスト</h4>

<h5>テキスト</h5>

 

テキスト

テキスト

テキスト

テキスト

テキスト

段差を表すタグ

段落を表すのは<p>タグです pはparagraph(段落)の略です。 <h2>要素や<p>タグで囲んだテキストは改行されます
<h1>, <h2>, …タグは、見出しの大きさや重要性に応じて使い分けていきます
見出し以外の文に関しては<p>タグを用いましょう

<h1>HTMLの世界へようこそ</h1>

<h2>HTMLとは</h2>

<p>タグを使ってページを作って行きます</p>

このように表示されます
HTMLの世界へようこそ
HTMLとは

タグを使ってページを作って行きます

リンクタグ

リンクを作成するためには<a>タグを用います。 テキストを<a>タグで囲むことで、簡単にリンクを作ることができます
実際に表示されるテキストは、<a>タグに囲まれた部分です

<a>タグにリンクの飛び先を指定するには、href属性を追加する必要があります
<a href=”url”>というように書き、url部分にリンク先のURLを指定することで
そのページへのリンクを作ることができます

リンクタグ
<a href=”url”>
別窓でリンクを飛ばしたい時のタグ
<a href=”url” target=”_blank”></a>

HTMLでは、hrefのような属性が数多くあります
これらは 開始タグの中に記述します

値を指定する際はダブルクォーテーション(”)を忘れないように注意してください

<a href=”https://anzunetx.com/”>初心者からのブログ収入手引書へ</a>

<a href=”https://anzunetx.com/” target=”_blank”>初心者からのブログ収入手引書へ</a>

このように表示されます

画像タグ

画像の表示には<img>タグを用います
<img src=”url”>のように、src属性のurlの部分に画像のurlを指定することで、画像が表示されます
<img>タグはテキストを囲むことがないため、終了タグが要りません

<img src=”画像url”>

リストタグ

リストを作るには、<li>タグを用います
箇条書きにしたいテキストをそれぞれ<li>タグで囲むことで
リストを作ることができます

<li>タグは、囲むタグによって種類が変わるという特徴を持っています
<ul>タグで囲むと、黒点が先頭につきます
<ol>タグで囲むと、数字が連番でつきます
このようにタグをタグで囲むことを入れ子と言います
囲む方のタグを親要素、囲まれるタグを子要素と呼びます

<ul>

<li>見出しタグ</li>
<li>リンクタグ</li>
<li>画像タグ</li>

</ul>

<ol>

<li>見出しタグ</li>
<li>リンクタグ</li>
<li>画像タグ</li>

</ol>

このように表示されます
・見出しタグ
・リンクタグ
・画像タグ

1見出しタグ
2リンクタグ
3画像タグ

HTMLはプログラミングを学習するなら必ず必要なスキルですが 
それほど難しいスキルではありません まずは簡単なHTMLを記述から
入っていきましょう

あんず
あんず
お疲れ様でした まずは基本的なタグを理解しましょう

自宅で出来るお仕事

案件受注には、クラウドソーシングをどうぞ
信頼できるクラウドソーシングサイト【Bizseek】
TECH::EXPERT

インターン探しなら、Wantedlyをどうぞ
若手優秀層へとリーチできる採用マーケティングツール【Wantedly Admin】

やっぱり独学では不安な方は無料体験のあるスクール
Webスキルのパーソナルジム【WebCamp】
オンラインブートキャンプ 無料体験

相談したい時に個人が教えたり 教えてもらったりできる
MENTAでプログラミングを学ぼう

ABOUT ME
あんず
大阪在住のあんずです 二十代で全身性エリテマトーデス(SLE)と診断され紫外線を避け夜行性に その頃自宅で出来るアフェリエイトを独学し生活費を賄っていましたが 人との繋がりが恋しくなり 夜外勤するようになりました 最近になりまたこの世界に戻って来ましたが SEO等全てが新しくなっていて浦島太郎状態でしたが 1から勉強し直しまた収益化できるように そのノウハウを無料公開していきます 【スキル】 アフェリエイト/ブログ運営/プロミラミング