はなっふぃーこのブログを開いてくださってありがとうございます！
この記事では、私が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つ必要なものがあります。
今回の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でページの中身を入れていく方法
それでは、先ほどの真っ白だったページに中身を入れていきましょう！！
とは行っても今回は文章と見出しが入っているくらいのものです（笑）
簡単にwebページの中身を入力してみました。
私が入力したコードの実物がこのようになっています。
<head>に関しては<title>の中身をはなっふぃーの自己紹介に変更
<body>の中にいくつかのタグを使って文章を入力していきました。
今回はこの<body>タグの中身について解説して終わろうと思います。
bodyで利用する主要なタグについて
pタグ <p>○○○</p>
タグの間に入っている中身を段落として出力します。
このタグの中身を１つの段落とするため、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系トップページ
コメント
コメント一覧 （1件）
[…] あわせて読みたいはなっふぃーアウトプット部屋 SkillHacks受講HTML編その1Ski… […]