1. HOME
  2. ブログ
  3. HTMLを使いこなせ!!タグを使ってホームページを作ってみよう!

HTMLを使いこなせ!!タグを使ってホームページを作ってみよう!

どうもみなさんご存知の方はおはこんばんにちは、
初めての方ははじめまして!

ネットショップの活性化を目指し、
ECサイト経営での黒字化を支援する

ことです。

平成もそろそろ終わりますね。
前回紹介した某有名人の方のホームページは
残るのでしょうか……

私はぜひ残してほしいと思ってます。


 

さてさて、前回はホームページの作成には
「HTML」と「CSS」が使われてますよ~
って話をしてました。

そして実際にホームページでHTMLを
確認しましたね!

今回はそんなHTMLを実際に使うとどうなるのか。
そこをお話していきたいと思います!

CSSはすこし難しくなってくるのでまたの機会に…

-目次-
1. HTMLはどうやってつかうのか
2. よく使うタグ一覧

前回の記事を読んでこんな疑問が
出た方もいるんじゃないですか?

「HTMLなんて使わずに
ホームページを作れないの?」

そう思うのも無理はありません。

たしかに、昨今の技術では
HTMLやCSSなんて使わなくても
ホームページが作れるコンテンツがいっぱいあります。

しかし、ネットショップの運営などで
使う機会があるでしょう。

つまり、
HTMLを覚えておいて損はありません!

1. HTMLはどうやってつかうのか

では、実際にHTMLはどのように書くと
どうように表示されるんでしょうか?

まず、Webページを作るとき、
テキストエディタをダウンロードし
HTMLで記事を書いたものを
保存することで見ることができます。

実際に作ってみましょう!

今回、「Visual Studio Code」という
アプリを使って以下のように書いてみました。
「Visual Studio Code」は無料なので簡単にダウンロードできます。

このデータを「.html」ファイルで
保存して開いてみます。

ブラウザでどうように
表示されるのでしょうか?

どどん!
このように表示が出来ました!

このように、文字だけで
画像なども表示できています。

タグがどういうことを指示しているのか
それさえわかったら簡単に
作れますのでご安心ください!

では実際にWebページを作成するのに
「使用するタグ」「よく使われるタグ」を紹介していきます。

2. よく使うタグ一覧

見出し:< h1 > … < h6 > ~ < /h1 > … < /h6 >
見出しを表示させます。
h1が一番大きく、数字が大きくなるつれて
文字の大きさが小さくなっていきます。

段落:< p > ~ < /p >
このタグで挟むことで段落を区切ります。

改行:< br >
区切りたい場所にこのタグを置くことで、改行を行います。

表組み:< table > ~ < /table >
 ・横一列:< tr > ~ < /tr >
 ・見出し:< th > ~ < /th >
 ・データ:< td > ~ < /td >

・リンク:< a href=”(URL)”> ~ < /a >
~のテキスト部分にリンクを貼れます。

強調:< strong > ~ < /strong >
このタグで囲んだ文字を太文字に出来ます。

イタリック:< i > ~ < /i >
このタグで囲んだ文字を斜体にします。

カラー:< span style=”color: #(カラーコード)”> ~ < /span >
このタグで囲んだ文字の色を
カラーコードで指定したものに変えます。
よく使うカラーコード:黒(#000000),赤(#ff0000),青(#0000ff),白(#ffffff),…

画像:< img src=”(画像ファイル名)” >
画像を表示させます。
このとき、HTMLファイルと画像ファイルもしくはフォルダが
同じ場所に保存されていないと
画像が表示されませんので注意してください。

ここらへんを押さえておけば、
先ほどお見せしたホームページは作ることが
できちゃいます!

よければここで紹介したタグを
使って書いてみてください!

もちろん、当ブログもHTMLタグを
使って書いてますのでソースとか
確認して勉強するのも1つの手ですよ~

それではまた!(*^▽^*)ノシ

関連記事

おすすめの虎の巻

最近の虎の巻

カレンダー

2019年4月
« 1月   5月 »
1234567
891011121314
15161718192021
22232425262728
2930  

アーカイブ一覧