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

HTML

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

 

前回は、 HTML の仕組みから始まり開始タグ・終了タグ・見出しを付ける・段落を作成する・見出しと段落について、コメントを表示する・リンクを作成する・属性の書き方というとこまでお話ししました。

 

少し、内容が多かったですね。

 

こちらの記事は、前回の引き続きとなっております。

 

 

ド素人
ド素人

お時間のある方は、こちらの記事もチェックしてみてくださいね。

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

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

 

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

 

出典: フリー百科事典『ウィキペディア(Wikipedia)』

 

Webサイトは、このHTMLとCSSから構成されているということは、前回学びましたね。

画像を表示する

画像の表示には、<img>要素を使います。

 

「IMG」とは「image」の略で、文書内に画像を表示するためのタグです。
表示する画像ファイルはsrc属性で指定し、WEB上ではGIF形式(*.gif)、JPEG形式(.jpg)、PNG形式(*.png)の画像形式を指定することができます。

 

具体的には、<img src=”url”>のように、

src→属性のurlの部分に、画像のURLを指定することで、画像が表示されまうす。

 

<img>要素は、テキストで囲むことがないため、前回学んだ[/]終了タグが不要です。

 

スキマ時間を有効活用できる【オンスク.JP】

例で一つだすと、

<img src=”https://○○○.com”>ということですね!!

 

なるほど、これは理解することができた!終了タグがないということが、ここのポイントですね。

 

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

リストを作成する

はい、次は、リストを作成していきますね。

 

「LI」とは「list item」の略で、リストの項目を表示するために使用するタグです。

 

 

では、実際にリストを作成してみますね。

  • これがリストです。

 

これを、分解していくと、<li>これがリストです。</li>

 

しっかりと開始タグと終了タグで、テキストが囲まれていますね。

 

これはどういった時に使うの??

はい、これは箇条書きしたいテキストに対して行います。

 

最高の6ヶ月!超実践型プログラミングスクール【.pro】

<ul>要素について

<li>要素は、<ul>要素で囲んで使います。

 

あら?!分からなくなってきた。。。(汗)

 

落ち着いてください!一つ一つ分解して細かく見ていきましょう。

具体的に示します。

 

<ul>

<li>これがリストです。</li>

<li>これがリストです。</li>

<li>これがリストです。</li>

</ul>

 

このような構造になっています。

<ul>

</ul>

→リストを作成する際の「親要素」ということになりますね。

 

スマホとパソコンで資格学習

 <li>これがリストです。</li>

<li>これがリストです。</li>

<li>これがリストです。</li>

こちらが、さきほどの親要素の中に含まれる要素と呼ばれます。

 

リストは箇条書きで表記され、項目の間に順番や序列は発生しません。
逆に順番を明らかにしたい場合は<ol>を使用すると項目が順番付きのリストになります。

 

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

 

なんとなく、分かってきたかもしれない!

本記事のまとめ

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

少しずつでありますが HTMLもわかった気がします。この調子で、ちょこちょこ頑張っていきたいと思います。

 

参考に読みたい記事

 

 

こちらの記事も是非、参考に読んでみてくださいね。

 

 

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