テックアカデミー学習（事前学習Act.２）
Webアプリケーションコース-Lesson1
Web開発のために学ぶこと
・Webアプリケーションとは何か
Webとは「インターネット上にあるモノ」
インターネットとはコンピュータとコンピュータが繋がってネットワーク（組織）になる。
・Webアプリケーションと利用者間の通信のしくみ
リクエストとレスポンス
要求側クライエントがリクエストを送り・対応側サーバが返答しレスポンス。
この通信方式を クライアント／サーバ モデル
HTTP(通信)プロトコル
プロトコル‐取り決め(文字化け等に関わる)
よく見る「https」Secure(セキュア)Web上で個人情報やパスワードを通信する際に、第三者が読み取れないようにしている。暗号化。
・Webアプリケーション開発に必要な知識
HTML＆CSS…Webページ
Bootstrap…HTML＆CSSを補完。現代的なデザインの画面を用意できるツール
Ruby…アプリケーションサーバソフトウェア（動的に表示内容を用意）
Rails…Rubyで使えるフレームワーク
MySQL…SQLのソフトウェアは無料で使える。データベース保管。
Heroku…サーバレンタル無料で使える。Webアプリケーションを公開する。
Git…Herokuのサーバへデプロイする。ゲームのセーブみたいな機能。
GitHub…Gitを利用したWebサービス。別のコンピュータにWebアプリケーションの状態を保存出来る。
ターミナル…キーボードでコマンドを入力するコマンドラインインターフェイス
これらを学び、
・メッセージボード
・Twitterクローン
・オリジナルWebサービスの構築
アプリケーションを作成を目指して行く！
Webアプリケーションコース-Lesson2
HTML/CSS
HTMLとCSSの概要
マークアップ言語で基本である。Webページ。
HTML...ブラウザのために記述→解析した結果いつも目にしているWebページへ表示。
CSS...Webページのデザイン。
HTMLの基本
テキストファイルの編集には「テキストエディタ」を使用
ファイル名の末の拡張子は「～.html」
<!DOCTYPE html>からはじまる DOCTYPE宣言(おまじない的な？)
HTML文書全体は<html>と</html>で囲う
<!-- -->表示されない。メモに使える。
HTMLタグの概念<>…ブラウザが認識出来るように
head と body
head...メタ情報
body...コンテンツ(本文)
属性... <meta charset="UTF-8">headへ決まり文句
インデント…タグ別に見やすくするための頭に空白を作る。Tabキー
head要素
コンテンツのメタ情報を記述
<meta>...文字化け,サイトの概要を説明･SEO対策など
<title>…Webページのタイトル･SEO対策（Web検索で上位にしたい対策がSEO）
<link>…rel属性で外部ファイルのタイプを指定,href属性で外部ファイルの場所を指定
body要素
Webページとして表示させたいものは全てbody要素内に記述
↓主なパーツ↓
<p>...パラグラフ･段落
<br>…文章中の改行（br要素は終了タグのない要素）
img要素...imageの略,src属性に画像のURLを指定→画像を表示
alt...音声補助ソフトなどに用いられる
a要素…アンカー,ページリンク,href 属性にURLを記載することでリンク先を指定
<ul><li>...順序無しリスト ・
<ol><li>...順序有りリスト 1.2.3.
table要素...表の作成を使う
table...表を始める要素、最初に書き必須。
thead...表の見出し、なくてもよい。
tbody...表の内容、なくてもよい。
tr…row,横一列に書く、必須
th...head,見出し、太字、必須
td…data,内容を書く、必須
最初のtable要素の中、border="1"を付加する。この属性がないと表を囲む境界線が表示されない。
フォーム…（入力フォーム,お問い合わせなど書き込みの欄）
form要素…label要素とinput要素がある
label要素...input要素のためのラベル、for="" の属性
input要素...入力エリアを指す、type="" によって形式指定できる
他にも、
select…選択肢から選ぶ
type="radio"...ラジオボタン形式の選択
textarea...複数行テキスト入力形式 などがある。
Webページのアウトラインを整えるための要素
見出し...h1,h2,h3･･･
セクション...section要素,セクションを分けたい
まとまりを分ける...div要素,セクションよりも分割用
id属性とclass属性の設定…HTMLとCSSデザインを繋げる架け橋になる役割
HTMLの中で同じ属性値のid属性を2つ以上書くことはできない。
対してclass属性は同じ属性値のものをいくつ書いても構い。
CSSではid属性に # 、class属性に . を最初の頭に使ってデザインを適用
明日から、
HTMLチュートリアル
Cloud9を使ってコードを実際に書いていく！と思ったが、
ざっくり内容に目を通し、注．カリキュラムの課題提出はサポート開始後に行うことが出来ます。と書いてあった。
２日ぶりにProgateの方でRubyを触れていこう！
余裕があったらカリキュラムの全体に目を通して予習としましょうか！
この記事が気に入ったらサポートをしてみませんか？