HTML・CSS 2017.09.07

Hello! Rodyです!
こないだ、はじめてバロットを食べたら普通にチキンとゆで卵の味でした。
そんなにまずくはない。味音痴でよかった(笑)
機械音痴でもあるの私が最近、「HTML」というものを、学び始めました。
「HTML」って何ぞや??
そこからわかってない…超初心者の私が学んだことを共有したいと思います。

HTMLとは

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、訳すと「超テキストに印をつけた言語」で、Webページを作るために開発された言語です。

私たちが普段観ているWebページのほとんどは、HTMLで作られています。
これは「見出し」 「段落」 「リスト」などの共通のルールで印をつけ、コンピューターがそれを分析して、反映させてます。

とは言っても、ピンとこないですよね~?
では、実際にみてみましょう!

 

Webページの裏側をみてみよう

ブラウザを開き、何でもよいので開いた画面上で右クリックをして、
「ページのソースを表示」を選択します。

すると、下のように英語や記号がずらっとでてきます。

このように、Webページの裏側は、HTMLで構成されてるのです。

みてもらうとわかるようにたくさんの英字が< >でかこまれてます。これが 「タグ」 です。
はじめ< >が開始タグ、終わり</ >が終了タグ
これらのタグによって、Webができてます。

こんなふうに使います。

タグの使い方

<h1></h1> 見出しタグ

見出しを書く時に使います。<h1>~<h6>があり、<h1>が一番大きな見出し、<h6>が一番小さな見出しとなります。

<ul></ul> リストタグ

箇条書きをする時に使います。(箇条書きタグ)

 

<li></li>タグ

箇条書きの項目に使います。

 

と、なります。
いろいろ説明するより、どのようなものか実際にやってみましょう!!

 

HTMLを実際にかいてみよう!

 

 

1.Windowsのメモ帳を開きます。

※macの場合はテキストエディットを開きます。
※デスクトップにない時は、左下のメニューから開いてください。

 

 

2.メモ帳にかいてみましょう。

下の左側の部分のように入力してみてください。
<   > 内は半角で入力しましょう。

 

<h1>本日のタスク</h1>
<ul>
<li>資料作成</li>
<li>A社訪問</li>
<li>B社訪問</li>
</ul>
見出し
箇条書きの宣言
項目
項目
項目
箇条書きの終わり

 

3.保存する。

  1.  左上にある「ファイル」をクリック
  2. 「名前を付けて保存」をクリック
  3. ③ 左側の「デスクトップ」をダブルクリック
  4. ファイル名を 「task.html」 にする。(拡張子「.html」の前は何でもよいです。)
  5. ファイルの種類を「すべてのファイル」を選択
  6. 保存をクリック


デスクトップに保存完了!

「task.html」という名でデスクトップに表示されます。
(表示されているアイコンのマークは、上と違うかもしれません。)
もしくはブラウザ(Google Chrome や Internet Exploreなど)のアイコンが表示されます。

 

4.ブラウザで表示させてみましょう!

  1. これをブラウザの画面に、ドラッグ&ドロップ します。
  2. 先ほど書いた HTMLソースが……


    このように表示されます!!

 

 

上のやり方でできなかった場合…

  1. ブラウザ表示の時はダブルクリックする → これでOKです!
    もしくは
  2. HTMLファイルを右クリック


プログラムから開く

ブラウザを選択する(Internet ExploreやGoogl Chrome)

 

それでもできなかった場合…

保存する時ファイル名が「.」の後ろが「html」になっているか確認してみてください。
「html」になっていないと HTMLと認識されません。

いかがでしたか?
このように「HTML」で書いたものが、ブラウザを通すと、
普段見ている画面のようになります。

なんで、こんな面倒くさい暗号みたいな文字を入力しなきゃいけないの?
と思いますが、ホームページなどを作成する時は、
他のサイトにリンクさせたり、もっと複雑になってきます。
だからこんな複雑な暗号のような文字を入力して、作っているのです。

今回は、こんな感じでできているんだなぁってことが、
少しでもおわかりいただけたでしょうか??
なんとなくでも、わかってもらえたら嬉しいです。

はじめから、いっきに覚えるのは難しいと思います。
私も理解するのに時間がかかってしまって大変です…
基本的なことから少しづつ覚えるようにしてるので、一緒に頑張りましょう!!

IT留学に関するお問い合わせ
HTMLって何?

この記事が気に入ったら
いいね!をお願いします(^^)