freestyle-selection

漫画アニメ情報色々。考察を気軽に更新

初心者向けHTMLの基礎知識7選!!webサイト、ブログをする上で知っておいてほしいこと。

HTMLの基礎知識

 

ãHTML ã¤ã¡ã¼ã¸ãã®ç»åæ¤ç´¢çµæ

 

1.HTMLとは

HyperText Markup Languageの略でwebページを作成するのに必要な言語の一つです。

 

下線のついた文字などをクリックすると関連した別のページに飛ぶように作られているのが

 

ハイパーリンク(Hyperlink)といいます。

 

ハイパーリンク

【HTML】Webサイト制作方法!ホームページを作ろう。手順をわかりやすく。 - freestyle-selection

 

ハイパーテキスト(HyperText)とはハイパーリンクが設定された文書のことです。

 

簡単に言うとハイパーリンクが載っているサイトです。

 

é¢é£ç»å

 

MEMO

ハイパーリンクは単にリンクと呼ばれることもあります。

 

2.HTMLソースを身近に見る

 

私のサイトで

F12キーを押してみましょう。

するとHTMLソースが表示されるはずです。

 

そこには<>で囲まれた文字列が沢山あるはずです。

f:id:umituki_pc:20190114235124p:plain

これらは要素と言われるものです

 

この要素が沢山あつまってHTMLを作っています。

 

HTMLでは文字をこの要素を使って見出しを作ったり太文字にしたりとすることが出来ます。

 

このように要素を使って文字列に意味を与えることをマークアップといいます

 

HTMLソースは沢山の要素で構成されているのです。

 

3.要素(elements)とタグ(tags)

ãtagãã®ç»åæ¤ç´¢çµæ

 

ある文字列に要素をつけるためタグを使って囲みます

 

タグは<>の2つです。

 

開始タグと終了タグという2種類があります。

 

それぞれ<>です。

 

 

4.要素記述時の注意

全角は使うことが出来ません。

 

全角は全般的に使うことが出来ませんので覚えておきましょう。

 

当然全角の<>や/も使うことが出来ないので覚えておきましょう。

 

全角が使えるのは文字入力のときです。

 

 

5.属性の追加方法

 

要素には追加できる機能がたくさんあります。

 

それを追加できる機能のことを属性といいます。

 

table要素を使って属性を作ってみます。

 

table要素にはborder属性やwidth属性を使えます。

 

<table border="1"> 内容</table>

 

この時に注意するべき点は半角でスペースを開けることです。

 

width属性も混ぜてやってみましょう

 

 

<table border="1" width="300">

 

 内容

 

</table>

 

となります。

 

 属性と属性値は半角の=でつなぎます。

 

 複数の属性値で作る場合は属性と属性値のセットの間に半角の=を入れます。

 

指定する属性の数には制限はありません。

 

指定する属性の記述順序も問われません。

 

6.要素の親子

要素の一部にリンク要素などを入れることを入れ子構造(ネスト構造)といいます。

 

<p>これらは<a>じゃがいも</a>です</p>

 

と記します。

 

先頭にあるp要素を親要素

 

親要素に含まれるa要素を子要素といいます。

 

7.ブロックレベル要素とインライン要素

ブロックレベル要素とは

 

文書のメインとなるものです。

 

基本的な骨組みを作成します。

 

主に h1,p,ul,address

 

インライン要素は

 

ブロックレベル要素の中身となります。

 

主に strong,a,img,br

 

 

詳しく説明されているwebページ

HTMLのブロックレベル要素とインライン要素の違いを徹底解説 - freestyle-selection

 

summary

ãsummary imageãã®ç»åæ¤ç´¢çµæ

HTMLには要素で構成されており。

 

ブロックレベル要素とインライン要素がある。

 

これら基礎さえ抑えておけばつまづきは半減します