1日目 Webサイトをつくれるようになる HTML入門編 (1~7)

プログラミング未経験２０代後半の文系女子が、
PCスキルほぼゼロからプログラマーを目指し勉強したことを書いていく

※初心者で分からないことだらけです。お気づきの点がございましたら、ご指導のほどよろしくお願いします。

# 勉強するにあったって
- PC　MacBook Airを使用  
- 目標　Webサイトを作るプログラマーになりたい
- 勉強方法　動画学習サイト　ドットインストールを使ってHTMLから勉強していく
- 学ぶ言語とフレームワーク　Ruby、Ruby on Rails　　

　・主にWebアプリケーション開発に使われている　　
　・日本人が開発した言語
　・初心者でも習得しやすい　

などから、Rubyにしました


# Webサイトをつくれるようになる

勉強した事
ドットインストールHTML入門編　全２４回 ＃1 ~ ＃7まで

## HTMLとは？＃1
- Hハイパー　Tテキスト　Mマークアップ　Lランゲージ
- 構造的な文書の事　
- HPとか作るのに使う

## 必要なもの＃2
- ブラウザ  
chrome  
internet explorer
- エディタ  
atom
- フォント  
なくてもいい　けど　（同じようにRicty diminished　使用）

## タグと属性を理解する＃3

- **タグ**

文書に意味づけしたい時に　<タグ>　を使う
```
<タグ>開始タグ　文書　</タグ>終了タグ
```

- **属性**  

タグに付帯情報をつけたい時に使う　（いくつもつけられる）
```
<タグ **属性名=値**>文書</タグ>
```
##はじめてのHTML＃4

イレココード（ネスト）＝入れ子
インデント＝字下げ

###＃4＃5を見ながらHTML作った###
```html
<!DOCTYPE html>
<html lang="ja">
　　<head>
　　　　<meta charset="utf8">
　　　　<title>はじめてのHTML</title>
　　</head>
　　<body>
　　　　<P>こんにちわ！</p>
　　</body>
</html>
```
##meta,linkタグを使う＃5#

`<!DOCTYPE html>`
HTMLで文章を書くという文章宣言で決まり文句　　　

`<html lang="ja">`
言語設定を日本語にする

`<head>`や`<body>`タグを
`</body>`
`</html>`
で囲う

`<head>`文章自体の情報
`<title>`ブラウザでタブ等に表示されるもの
`<body>`本文

**metaタグ**　　

charset キャラセット
`<meta charset="utf8">`

HTMLの文字コードをutf8に指定する

スペル等間違え
ファイルがutf8でない
ブラウザのエンコードがutf8になってないと文字化けするので注意　　

##styleタグを使ってみよう＃6##

**styleタグ**

`<head>`タグ内で使える

文書の見た目を規定するためのCSSを書くことができるタグ

例  背景色をスカイブルーにする

```html
<style>
  body { background: skyblue; }
</style>
```

※`<style>`タグを書いていくとどんどん長くなっていくので`<style>`を別ファィルにしてHTMLファィルから呼び出す作業をする

**別ファイルから呼び出す方法とそのためのタグ**

・新しいファイルを作る
 
`body { background: skyblue; }`

`<style>`の指定を書いて同じファイルに保存
[（○○.css）等cssとわかるように名前を付けるとわかりやすい]

・**linkタグ**を使って呼び出す

`<link rel="stylesheet" href="○○.css(ファイル名)">`

**コメントの書き方と文章の無効化**

 - コメント（動作に関係ないメモ書を書く事ができる）
 - 無効化   `<!-- コメントまたは無効化 --`>

※ソースを見るとコメントが表示されるので注意

##id,class,style属性を使ってみよう＃7
**グローバル属性**

全てのHTML要素で使用できる属性のこと

例　背景色をスカイブルーにする

`<p グローバル属性="message">こんにちわ</p>`


|属性|説明|
|---|---|
|id|要素に固有の名前を指定する属性|
|class|分類名を指定する属性|
|style|cssを指定する属性|
|title|要素に補足情報を指定する属性
|hidden|要素が無関係であることを示す属性
|spellcheck|要素内をスペルチェックするかを指定する属性
|accesskey|ショートカットキーを割り当てる属性|
|contenteditable|　要素の内容を編集可能かを指定する属性|
|contextmen|要素を右クリックした時のメニューを指定する属性| 
|dir|要素内テキストの表記方向をしていする属性
|draggable|要素をドラッグ可能かを指定する属性
|dropzone|要素をドロップ時の挙動を指定する属性
|lang|要素内の言語を指定する属性
|tabindex|要素にTABキーで移動する順序を指定する属性
|translate|ローカライズ時に要素に翻訳するかを指定する属性|
|data-*|要素にカスタムデータを指定する属性|

**複数のclassを持ちたい時**

"message active”(スペースで区切る)

　例　style　スタイルを直接指定したい時

`<p class="message" style=background:skyblue>こんにちわ!</p>`

```html
<html lang="ja">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  　　<title>はじめてのHTML</title>
  　　　　<style>
    　　body { background: skyblue; }
  　　　　</style>
  </head>

  <body>
    <p>こんにちわ!</p>
  </body>
</html>
```

```html
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>はじめてのHTML</title>
  </head>
  <body>
<!--
グローバル属性
id: ひとつしかない要素
class:複数ある要素
style:スタイルを直接指定
-->
    <p id="message">こんにちわ!</p>
    <p class="message active">こんにちわ!</p>
    <p class="message" style=background:skyblue>こんにちわ!</p>
  </body>
 </html>
```

![スクリーンショット 2017-09-08 16.14.34.png](https://qiita-image-store.s3.amazonaws.com/0/164640/66487388-c9f5-4be8-52fa-46579cb2a1b2.png)


![スクリーンショット 2017-09-08 16.14.55.png](https://qiita-image-store.s3.amazonaws.com/0/164640/656124b2-caae-7326-b8bc-9414911cd4dc.png)