初心者の方にも分かりやすくHTMLを解説!これだけ覚えれば大丈夫

目安時間 8分

HTML』という単語を聞いた事はあるけど

よく分からないという方は多いのではないでしょうか?

 

今回はそんなHTML初心者の方でもHTMLの事が

少し理解出来るようまとめてみました。

 

基本的な事ばかりになりますが何を覚えるのもまずは

基本からという事でHTMLの事が少しでも

知りたいという方は必ず最後までお読みください。

 

そしてこの記事を読んだ後は『インプット』するだけではなく必ず

アウトプット』してください。

 

なぜならHTMLに関しては自分で実際に作業してみる事が

自分自身が理解するための1番の近道だからです。

HTMLとは

 

『HTML』とはウェブページの土台を作る為の言語になります。

 

世の中のウェブサイトは『HTML』から成りっ立っているといっていいでしょう。

 

初心者の方は

「意味がよく分かりません」

「どういう事ですか?」

「もっと分かりやすい言葉で説明してください」

そう思いますよね。

 

 

HTMLはウェブページの土台

 

インターネット上に公開されているウェブサイトは

ほぼ「HTML」を使用しています。

 

その為、「HTML」はウェブページにとって必要不可欠なものなのです。

 

HTMLってそもそも何?

HTMLとは

『Myper Text markup Language』(ハイパー・テキスト・マークアップ・ランゲージ)

の略で簡単に訳してみると『ハイパーテキストに目印をつける』という意味です。

 

もっと分かりやすく言うと『文章中の要素を明確に示す』ということです。

 

ハイパー・テキスト

ハイパーテキストとはその名の通り

『ハイパー』な『テキスト』、テキストは文字という意味なので

文字を超えた文字』ということです。

 

「言ってる意味が分からない事もないですが具体的にはどういう事ですか?」

そう思った人もいるかもしれませんね。

 

答えはハイパーリンクが挿入出来るテキストということです。

 

ハイパーリンクとはクリックすると別のページに飛んでいける便利な機能です。

 

ハイパーリンクはその他にも色んなデータを埋め込む事が出来たり、

画像や動画や音声などのデータファイルをテキスト内に組み込む事が出来るのです。

 

マークアップ

 

人は文章を見ると『タイトル』『見出し』『段落』などを

感覚で把握していきますが、コンピューターに

その感覚はありません。

 

そこで『ここがタイトル』『ここは段落』などの

目印をつけてあげる事によってコンピューターも

文章構造を理解してくれるのです。

 

つまりマークアップとは

文章構造を定義づけるもの』という事です。

 

つまりハイパーテキストをマークアップする事により、彩り豊かなになった情報を表示出来るという事です。

 

身近なHTML

身近に使われているHTMLを紹介します。

  • ウェブサイト
  • 電子メール
  • スマホアプリ

ウェブサイトはもちろんですが

メールにもHTMLは多くし使用されています。

 

あなたも文字だけでなく画像やリンク先が

貼られているメールを受け取った経験ありませんか?

一般的なメールより目立つように作る事が可能なの

で宣伝や商品用メールとして多く使われています。

 

また意外と思うかもしれませんがスマホアプリなども

HTMLが使用されています。

 

HTMLのタグとは

HTMLで使用するタグは<title><head>のように

<>で囲む事により他の文字列とは別と認識されます。

 

タグにはそれぞれ意味があり文章の構造を明確にしてくれます。

 

HTMLの種類

 

HTMLのファイルを<html>と<html>のタグで挟む形になります。

 

この挟むところには「見出し」や「文章」、「画像」を入れていきます。

 

文章だけでは分かりにくいかもしれないので画像でも説明していきますね。

 

HTMLのタグの具体例

具体的に説明しますと<>で囲んだ『タグ』といわれるものを使い、

これは見出し』『これは文章』『これは画像

という風に分けていきます。

 

単純なHTMLのソースコード

引用:ホームページの作り方・ブログの始め方

 

複雑なので少しややこしいとは思いますが

ここが基本なので頑張って少しずつ理解していきましょう。

 

上の画像ではそのどのように表示されるか分からないと思いますが

このようにタグを使う事によってウェブ上では下記の様になります。

 

HTML入門 基本構造 ブラウザ表示時

引用:ホームページの作り方・ブログの始め方

 

こう見るとなんとなく理解できませんか?

まずは難しく考えず『見出し』『文章』『画像』『リンク先』

など普段から見慣れているもので試すと分かりやすいと思います。

 

そして先程も説明しましが<html>と<html>の間に文章や

画像、リンク先と入力されているのが確認できますよね。

 

まとめ

いかがでしたでしょうか。

 

HTMLというものはウェブページになくてはならないものです。

 

しかしその必要性はあまり認識されていません。

 

なぜならほとんどの人が自分で使う事がないからです。

 

いつも当たり前のように見ている

ホームページやメールにスマホのアプリなど基本的に

『見るだけ』の為、その存在、必要性を理解していません。

 

しかしHTMLをしっかりと自分のもの(スキル)にする事が出来れば必ず役にたちますよ。

 

簡単ではないですが、あなたもHTMLの

知識を少しずつでも付けていきましょう。

 

超ブラック勤めリーマンの副業収入を見てみる

会社員で、時間が全然取れなくて
いつも精神が削られてる日々を過ごしていた
ゆうたくと申します。

 

で、あんた誰ですか?ってなると思いますので
簡単に自己紹介をさせて頂きます。

 

愛知県名古屋市生まれ・育ちの
ブラック企業勤めの会社員です。
時間がなくて、超ハードです。

 

たいした才能も特技もない
面倒臭がりのダメダメ人間で、いつも忙しいとか
時間がないが口癖のわたしが副収入を
手に入れることができました。

 

正直、だれでもやりゃできちゃうと思います。

 

面倒くさがりの、時間拘束の多い会社員しながらでも稼ぐことに繋がったかを以下の記事で公開しています。

ゆうたくの面倒くさがりっぷりを詳しくみてみる

 

 

激務でも関係なくなるスマホ戦略はこちらから

時間のとれないサラリーマンのわたしでも

たったの3か月で実践できた

副業収入の作り方はこちら

↓↓↓↓↓↓

コメントフォーム

名前 

 

メールアドレス 

 

URL (空白でもOKです)

 

コメント

トラックバックURL: 
プロフィール

失敗ばかりの人生だったけど

その失敗談を惜しみなく発信します

ブ○ック企業の営業職。

国内海外各地へ出張多数

スマホ1つで副業開始!

パソコン苦手でも成果が出るまでの道筋を発信!

外注さん100人以上雇ってます。

kindle出しました。

詳しいプロフィール


<人気ブログランキング>
応援よろしくお願いします

最近の投稿
カテゴリー
ツイッターはこちら
スマホぴっくはこちら