誰でもわかる、WEBプログラミング
前書き
情報の授業で、HTMLとか言うものをやっているので、なんとなく知ってることをまとめとくとかいう軽いノリでまとめたので、興味あったら読んでください。
初心者でもわかるようにスクショ付きでわかりやすく説明するつもりです。
間違ってるところあったら、コメント、DMください。（学校で言ってることと少し違うかも）
WEBプログラミングって何やるの？
WEBサイトは、
- HTML（サイトに載せる情報を書く。サイト内の文字など。）
- CSS（デザインを決める。背景色や、余白の大きさなど。）
- JavaScript（動作をつける。ボタンを押すと、文字が変わるなど。）
という3つの言語から作られてることが多い。
覚える必要はないので『へー』と流しつつ、今回はHTMLをやっていきます。
HTML（Hyper Text Markup Language）って何？
Chrome や Safari などのブラウザが理解できる形で、webサイトの内容を書いたプログラミング言語
正確にいうと、HTMLはプログラミング言語ではなく、マークアップ言語なのですが、そんなこと覚えなくていいよね。
html作ってみよう
手順
①ファイルの作成
②フォルダーに入れる
③HTMLの初期コードを書く
④注意点（気をつけて！！）
1. ファイルの作成
授業でもやったのでわかんなかったら、DM or 自力でググって。
2. フォルダーに入れる
画像等をのちのちサイトに入れていくので、フォルダーに入れて管理しておく必要がある。
構造はこんな感じ。
images の中には画像を入れていくので、最初は空でおっけ。『とりあえず作るサイト』のフォルダー名や[ここの部分].htmlも好きに変えちゃおう。（こだわりがなければ、index.html が基本）
※「フォルダーってどうやって作るの？」って人はこちら
3. HTMLの初期コードを書く
※コピペしたいなら、こちら
（個人的にここの部分は僕も覚えてないので、コピペで良きですね。コードの意味だけは理解しておくと良き）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
</head>
<body>
<h1>Hallo World!</h1>
<p>ようこそプログラミングの世界へ</p>
</body>
</html><!DOCTYPE html> ←HTMLファイルだよっていう印
<html> ←サイト全体はhtmlタグで囲う（理由は知らん）
<head> ←見えない部分(head タグ)
<meta charset="utf-8"> ←知らん
<title>ページタイトル</title> ←サイトのタイトル
</head> ←見えない部分 終了
<body> ←見える部分(基本的にはこの中に追加していく)
↓後々説明していく
<h1>Hallo World!</h1>
<p>ようこそプログラミングの世界へ</p>
</body> ←見える部分 終了
</html> ←htmlタグ 終了
サイトに入れたい内容は<body>と</body>の間に入れていこう
4. 注意点
タグの中 < と > の中は日本語を打つ場合を除いて、半角英数字と半角スペースのみ！
全角が入ってくるとエラーが起こるので、気をつけましょう。
記号の打ち方
" ： shift + 2
< : shift + ね（右下らへん）
> : shift + る （右下らへん）
/ : shift + め （<のさらに右）
タグ(Tag)って何？
『タグはここから、ここまでが、サイトに表示する内容だよ！』ってコンピューターに理解してもらうための目印。
コンピューターはどこからどこまでがサイトに表示する内容で、どこが文字の大きさなどを表すコードなのか区別することができないので、<〇〇>ここはサイトの内容 </〇〇>とを使うことで区別できるようにする
使うであろう、タグの種類
<h1>h1タグ！</h1>
・テキストを表示するタグ
・タグの中には基本的に<br>以外のタグを置かない
サイズ感はこれくらい。h3以降はまじで使わんw
-----------------------------------
<p>テキストを表示するタグ。本文は基本これ。</p>
・テキストを表示するタグ
・基本的にタイトル以外の文字は全部これ
-----------------------------------
<br> (改行タグ)
・改行をするタグ
・これがないと改行はされない
・<br></br>でもおけ(あんまり見ないけど)
・h1やpなどのテキストタグの中でも使用可能
・画像とテキストを横並びにしたくないときも間に<br>を挟むと縦並びになる
例：
-----------------------------------
<img src="ファイルの場所 or URL"></img> (画像タグ)
・画像タグ
・サイトから画像を拾う場合
①サイトの写真で右クリック⇨ Copy Image Adress
②src="https://〇〇....."というようにコピーしたURLを貼る
・保存してある画像を使う場合
①上で作成したimagesのフォルダーに画像を入れる
②src="images/ファイル名"というようにURLを貼る
（.pngや.jpgなど間違えないように入力する）
・サイズ指定
<!— ↓横幅指定— >
<img src=“……” width=“200” >
のようにすると横幅200pxの大きさにすることができる。
<!— ↓縦幅指定— >
<img src=“……” height=“200” >こちらの場合は縦幅での指定になる。
【注意】縦幅と横幅を両方指定してしまうと、写真が歪むことがあるので、どちらかのみで指定するのがよい。
例：
こんな感じ。
pngかjpgかなんてわかるわけないっていう人はこちら
-----------------------------------
<div></div> (箱)
・他のタグを囲う箱とかグループ化のイメージ
・全体を枠線や背景色をつけたい人
style=""の意味はレイアウトについて書くよっていう宣言
boder: solid [太さ]px [色]; ←枠線(solidは実線で他にも色々あります)
background: [色]; ←背景色
って感じです。
枠線の種類はこちら
http://www.htmq.com/style/border.shtml
例：
コピペはこちら
<body>
<div style="border: solid 2px blue; background: lightblue;width: 400px;">
<img src="https://hirogaru-nihongo.jp/wp/wp-content/uploads/2016/07/st05_2.jpg" width="300">
<p>テキストだよ〜</p>
</div>
</body> tableタグ（表作成）
・表を作成する
詳しくは、次の授業で書きまーす。
デザインを調整していこう
文字の大きさや、色などを変えるときにはCSSという言語を使うのですが、どうやらHTMLだけで書けというふうに言われているらしいので、タグの中に直接書き込んでく方法を書きます。
文字の大きさと色
文字系は無限に書き方がある気がするので、今回はサンプルのコードを使って、その中で出てきたコードを解説していく
コピペしたいならこれ
<p>
つまり、ここは
<font size="+5">重要</font>
なので
<font size="30" color="red">赤文字</font>
で書こう。
<br>
ちなみに
<b>太文字</b>
とか
<u>下線</u>
は、このように書くよ。
<hr>
↑水平線はこんな感じ
</p>【注意】
タグの中では半角スペース一個まで！
半角スペースを連続で入れてしまうのエラーが出るので気をつけよう。
(“ は、’ でも動きます)
・size:
文字の大きさ
+2で、デフォルトよりも2px大きい
30などの直接値を入れると、30pxになります
・color: 文字の色
・<b></b>は太文字
・<u></u>は下線
・<hr>は水平線
(<hr></hr>と書いてもいい)
*pタグの中にfontタグを挟まなくても動くようですが、入れた方がいい気はします。
もっと書くことはあるんですけど、だんだん疲れてきたので暇なときに続きを書きます。