HTML・CSS 2017.12.12

こんにちは HIDEです(*^^*)

ITインターン留学でセブ島へ来て1ヶ月とちょっとが経過したのですがここへ来るまでパソコンを使った経験はというと、、、
ネットサーフィンしたり、YouTubeで動画見たり、、、ほとんどそれくらいしか…というよりむしろその程度ならスマホでもできるし…ということは、ほとんど使ってもいないような状況でした。

でも、仕事でパソコン使う人とか、プログラミングできる人とか
とにかくパソコンに精通している人ってかっこいい(*´ω`)
だから俺もプログラミングできるようになってパソコン片手にカフェとか行って仕事してみたい!!

なんて浅はかな理由でこのインターンに参加してしまったことを最初のうちは少し後悔していました(笑)
だって本当に新しいパソコン買って、「電源ってどうやって消すの(・_・;)??」っていうレベルだったわけですからww

 

だから最初に『HTML・CSS』って言う言葉を聞いたとき頭の中は…

って感じでしたwww

「あ~HTMLね~ はいはい。」みたいな顔して平然とした態度をとっていましたが、完全に来る場所を間違えたって思いましたね(笑)

ただ、こんな人よりはるかにポテンシャルの低かった自分がたった1ヶ月で多少は、本当に多少ですが「HTMLってのはね~」って話せて一人で簡単なものなら作れるようになったわけです。
まだまだ自分ができることは基本中の基本ですが今授業で習っていることを踏まえてHTMLとは何ぞや?というのを見ていこうと思います。

 

そもそもプログラミングとは?
コンピュータに行ってほしい処理を指示して書き出したもの。要はwebページを作って、「ここをクリックしたらこっちのページに飛んで」みたいなことを自分で記述してその通りのウェブを作成する といった感じです。
ただパソコンは人間じゃないので、人の言葉までは理解できません。
パソコンに「自分の行きつけのバーのブログ書きたいからさー作ってくれない? 背景は青色っぽくして ここにこんな画像貼ってー」
ってそのまま日本語を書いて、本当にその通りのサイトができたら何も苦労しないのですが、どうやらどんなに賢いパソコンでもパソコンはパソコン語しか理解してくれないようです。
そこで使うのがプログラミング言語です。プログラミング言語にはかなりの種類があるようですがその中でよく使われる主流な言語があるみたいですね。

 

 

数あるプログラミング言語の中で今自分たちが授業で習ってるのが “HTML”と呼ばれる言語です。
Hyper Text Markup Language(ハイパーテキスト マークアップ ランゲージ)の略でwebサイトの見出しを作ったり、文章の段落を作ったり、イメージ画像を張り付けたりといった何かのサイトを作る際の最も基本となる言語で、プログラミングを始める人はこのHTMLから勉強し始める方も多いみたいです。
というわけでHTMLの基本の書き方をいくつか紹介します。

 

HTMLにはタグというものが数多く存在します。それぞれのタグが役割を持っていてそれを理解し覚える必要があります。
<h1></h1>   ←これをタグと言い、<h1>を開始タグ、</h1>を終了タグと言います。
ちなみにこの<h1></h1>は見出しタグという種類のタグで、この開始タグと終了タグの間に書かれた文字が見出しとして表示されるようになります。
実際に書いてみましょう。

 

 

このようにHTML上で書いたものを保存して実際にブラウザで見てみると

 

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

あっこれなら俺にもできるぞ!!ってこの時はまだ余裕でした。
この時までは、、、(笑)

ちなみにこの<h1>の前にある<head>タグ内に書いたものは実際のサイトページ上には記載されないものとなります。例えば検索サイトで検索を行った際にサイトがたくさん表記されると思います。その時に出てくるタイトルなんかがそれにあたります。例えばこんな感じです。

 

次に<P>タグです。これは文章の段落を作るタグです。見出しに対してその内容となる文章を作りたいときにはこのタグを使って記述します。

そうするとこんな感じになります。

 

 

 

最後に<ul><li>タグの紹介です。

こちらはリストを箇条書きで記述したいときに使うタグです。

例えば、

 

 

このように記述すると、

 

 

<ul>はこれからリスト作りますよ~という宣言を表したようなタグで
<li>は箇条書きリストを作ってくれるタグになります。

このように様々なタグをうまく使いこなせばサイトの構築ができるというわけですね。

 

なんとなーくプログラミングってこんな感じなんだーとかサイトってこんな感じで作るんだっていうのが少しでもわかっていただけたら嬉しいです。
自分がもっと勉強してちゃんと記事を書けるレベルになったら第二弾も書いていきたいと思っているので乞うご期待!!

IT留学に関するお問い合わせ
PC触ったことない男がプログラミング?HTML?そんなことできるのか?!

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