はなっふぃーアウトプット部屋 SkillHacks受講HTML編その1

はなっふぃー

このブログを開いてくださってありがとうございます!
この記事では、私がSkillHacksで学んだ内容について
私自身の復習も兼ねてアウトプットする場所となっています。
内容で変な部分などありましたら、コメントください!

SkillHacksとは?

迫祐樹さん(Twitterはこちら)が代表を務める株式会社スキルハックスが
運営するオンラインの学習サービス(ホームページはこちら
プログラミング講座だけでなく、ブログ、映像編集、デザイン等の
様々な分野についての教材を販売している。
更に、転職や案件獲得へのサポートも行っているため、業界経験が無い人でも
実際にエンジニアに転職していたりと、多くの実績を残している。

はなっふぃー

今回私はプログラミング学習のSkillHacks、
転職サポート付きコースを申込しました!!
実際に転職活動を行う際はその様子も更新していきます!
よろしくお願いします!

Skill Hacks 講座HTMLはstep1~6まであります。
今回はその中で1~3で学ぶ内容についてまとめています。

目次

HTMLとは?

HTMLとは
H(Hyper)
T(Text)
M(Mark Up)
L(Language)
の略でwebページ作成の際の内容をコンピュータにわかりやすく伝えるための文章です。

HTMLの特徴は

<title> ○○○○○ </title>
開始タグ      終了タグ

といった用に開始タグと終了タグでどのような動作を行うかを決定し、その中身を入力するというものになります。

例えば

文章を入力したい場合は<p>○○○○</p>と入力します
<p>私ははなっふぃーです</p> とコードを書くと
     ↓
私ははなっふぃーです と表示される用になります

このように、
・文章を入力したい
・画像を入れたい
・見出し用に大きな文字で書きたい
といった
ホームページを作る上でのデザインを決める際に用いられる言語がHTMLです

HTMLでwebページを作成する際に必要なもの

HTMLでコードを書き、実際に動かしてみるためには2つ必要なものがあります。

・エディタ(コードを記入するためのもの)
・webブラウザー(実際のHTMLを動かすもの)

今回のSkill Hacksの講習にはamazon web service(通称AWS)のCloud 9を利用しています。

実際にHTMLを動かしてみる

実際にHTMLのコードを書いてみます。
下のコードがHTMLを書く際の基本的なコードです。

1 <!DOCTYPE html>
2 <html lang=”ja”>
3 <head>
4     <meta charset=”UTF-8″>
5     <title>Document</title>
6 </head>
7 <body>
8 </body>
9 </html>

ちなみに、このコードのみで作成されたページはこの用になります。

真っ白ですね。
何も書いてないので当然です。
このページに今から文章や画像を入れて行くのがHTMLです。

HTML全体のイメージ像

<title> ○○○○○ </title>
開始タグ      終了タグ

このように開始タグと終了タグで囲まれたものだと説明しました。

先ほどのコードの各行に解説を入れたのが下の画像になります。

全体の流れをイラストで表すとこのようになります

HTMLの全体イメージ図

HTMLでページの中身を入れていく方法

それでは、先ほどの真っ白だったページに中身を入れていきましょう!!
とは行っても今回は文章と見出しが入っているくらいのものです(笑)

簡単にwebページの中身を入力してみました。

実際に作成したサイト

私が入力したコードの実物がこのようになっています。

<head>に関しては<title>の中身をはなっふぃーの自己紹介に変更
<body>の中にいくつかのタグを使って文章を入力していきました。

今回はこの<body>タグの中身について解説して終わろうと思います。

bodyで利用する主要なタグについて

pタグ <p>○○○</p>
タグの間に入っている中身を段落として出力します。
このタグの中身を1つの段落とするため、1度終了タグを入れた後にもう1度pタグを入れた場合は改行されて出力されます。

h1タグ <h1>○○○</h1>
タグの間に入っている中身を見出しとして出力します。
h1~h6まであり、数字が大きくなるほど、文字のサイズは小さくなっていきます。
基本的にh6まで使うことはほとんどないそうです。

strongタブ<strong>○○○</strong>
文章の中で太文字にしたいなど、強調したい部分に使用
タブの通り力強い見た目になります(笑)

ulタグ、liタグ
箇条書きするためのタグです。
ulタグの場合は



とピリオドでの箇条書きになります。
似たものでulではなくolタグというものもあり、その場合は
1
2
3
と数字での箇条書きに変わります。

以上が主要なタグになります。

4~6ではさらに踏み込んだ内容になりますので、そちらも近日中に内容をまとめて更新します!!

はなっふぃー

最後まで見てくださった方、ありがとうございます!!
Skill Hacksをどうしようか迷っているという方や、
転職を考えているという方の参考になれば幸いです!!
今後も学んだ内容を更新していきますのでよろしくお願いします!!

最後に

このブログを見てSkill Hacks申し込みしてみようかな
と思われた方は↓に申し込みリンクを貼っておきますのでよかったらご利用ください!

Hacks系トップページ

よかったらシェアしてね!

この記事を書いた人

携帯販売の仕事をしている北陸在住20代男性
携帯電話に関することだったり、趣味のこと、投資のことなどいろいろ面白いと思ったことを書いてます。

コメント

コメント一覧 (1件)

コメントする

目次
閉じる