プログラマーの卵:五右衛門NEWS

プログラミングスクールの情報&プログラミングの知識を共有させて頂きます

HTMLの基礎 言語集(1)

 

こんばんは

 

五右衛門です。

本日は、HTML言語集についてお話しししますね!!

その前に、最近、自分で作ったフロントがあるんですけど、

そのときに頼りに頼ってた「検証機能」って面白いですよね。

どんな要素で構成されているのか一目瞭然ですからね^^

興味ある人は、ウェブサイトに行って右クリックからの検証を押してみてください。

 

まぁ、前置きはこの辺にして、

じゃあ、早速HTMLについて調べたこと及び今まで学んだことをこのブログに書いていきますね。

 

説明下手でしたら、すんません( ^∀^)

 

HTMLは、まぁウェブサイトを作る上での基本的な物です。

簡単な説明は先週の金曜に投稿した記事を読んでくださいーー

goemon11.hatenablog.com

 

HTMLとは....

 

HTMLは、Hyper Text Markup Languageと正式には呼びます。

Hyper Text のマークアップ言語のことですね。

マークアップ言語とは、文章を構造化するための言語です^^

と言われても、、

具体的には、「ここは見出しです」とか「ここはタイトル」です。

とかを示し、コンピューターに認識させるための言語です。

 

その一つが、めちゃくちゃ有名な言語がHTMLです。

 

ちなみにプログラミング言語とは違いますからね。

気をつけて⚡️

 

ではでは、どうやって、コンピューターにこれは見出しです。

とかここは文章です。

のように示しているのかというと・・・

 

<title>タイトル</title>

上記のような形でこれはタイトルです。

HTMLでは表記します。

 

ちなみに、HTMLを記載するときは、

それに対応するファイルを作らないといけません。

 

それは、〇〇.htmlのような形でファイルを作り

そこに記入していきます。

 

ちなみにHTMLだけだと、前回も行った通り、

ここは、何を表示するかを基本的に表示する及び、

PCに指示する物であるので、

 

めちゃくちゃシンプルな形(表示)になります。

 

今日は、何を表示するのかを決めるために使う。

 

超絶基礎の基礎、私もTECHCAMPで最初に習ったところを皆様に

簡潔に書きたいと思います。

 

それでは、まず

<>____</>この記号をタグと言います。

このタグの間に、文字を記入してその文字が表示されます。

 

例:

<h1>こんにちは</h1>

こんにちは

 

このような形で表示されます 

 

今回は、タグの中に入れるh1のような種類を一部紹介します。

 

長くなったらごめんなさい。

 

簡潔に種類どんどん説明していきますね。

 

<head>___</head>

head要素です。これは、webの情報や、どんなcssを使うなどをこの間に記載します。

ちなみに、これはHTMLにどんな情報をひっつけるかを記載するので、ここに書いた情報は画面には表示されません。

<body></body>

body要素です。ここに書く物が基本的に、web上に表示されます。

つまり、ここに、先ほどの<h1>を書いていくという事になります。

 

じゃあ、bodyの中に記載していく代表の4つを紹介していきます。

 

<h1></h1>

これは見出しですよと表示できるものです。

h1~h6まであります。

h1が一番字が大きく、h6が一番小さいです。

 

<p></p>

この表記は、文章の段落を表します。

見出し以外の文字の表記は基本的にこの表記の間に文字を入れて、

文章を入れます。

 

<b></b>

この表記は、この文字は太文字ですよと表すために使用します。

 

<a></a>

この表記は、ここの文字にはリンクがついていますよと表すために使用します。

 

今回は、この辺りまで紹介させて頂きます😁

 

これらを組み合わせて、HTMLは構成されます。

もちろん、他には、画像を貼り付けるための<img>のようなものもあります。

 

私が、最初に学習したのは、これらの使い方ですので、

まずは、皆さんもぜひ上記の表記は覚えましょう!!

 

では、本日はこの辺りで!!

 

ほいじゃまたこーー