第0回 ガイダンス

はじめてのサイト

  • bracketsを開く

  • 上部バーの'ファイル''フォルダーを開く'→先程の'0905'を選択→開く
    f:id:hat1708:20170829094955p:plain
    f:id:hat1708:20180904235513p:plain
    f:id:hat1708:20180904235516p:plain


  • 空の画面が表示されます f:id:hat1708:20180904235548p:plain


これで、プロジェクトの編集準備ができました。


htmlファイルを作って文字を表示しよう

  • 上部バーから'ファイル''新規作成' f:id:hat1708:20180904235602p:plain


  • 左側に'名称未設定-1'がでてくるので、右クリック(macは二本指タップ)で'名前をつけて保存' f:id:hat1708:20180904235611p:plain


  • index.htmlと名前を付けて保存 f:id:hat1708:20180904235641p:plain


  • 左側でindex.htmlが選択されているのを確認したら、
    右の白い画面に
    <!DOCTYPE html>と書いて下さい(※すべて半角)
    f:id:hat1708:20180904235652p:plain これでhtml言語で書くよ!とブラウザに教えてあげます。

    その下になんでもよいので文章を書いてみましょう。
    f:id:hat1708:20180904235745p:plain

  • もう一度、保存します。
    左側'index.html'右クリック(macは二本指タップ)で'保存'でもいいし、
    ショートカットでmacならcommand + S、winならctrl + Sでも保存できます。


  • デスクトップの2018webフォルダを開いて、
    0905フォルダを開いて、
    index.htmlをダブルクリックしてみよう。


  • ブラウザに「はじめてのhtmlだよ!」が表示されましたか?(・∀・)


遊んでみよう

  • さっき書いた、文章を特殊なタグで囲んでみる
    文章の前に<marquee>を追加
    文章の後ろで、</ と書くと自動で</marquee> となる(ならなかったら手動で書いてね)

    f:id:hat1708:20180905000120p:plain


    ブラウザを更新してみよう!

実際にサイトで<marquee>は使うことはほぼ無いですが、
タグというのは文章を囲う特殊な文字で、
他にも

リンクをつけたり、
文字を大きくしたり
太字にしたり
色をつけたり
動かしたり(できるけど、おすすめしません)



どうやって装飾するの?

基本的には、タグと呼ばれるカッコで囲まれたやつ<>文章<>で文字を囲っていきます。
このカッコで囲まれたやつ、タグでコンピューターに指示をしていきます。
タグの役割は主に、文章に意味を持たせることにあります。

ブログなんかを書いたことがある人は知っているかもしれませんが、
タグには色んな種類があって、(英語は公式じゃないです。)
<h1></h1>タイトルに関するタグ。heading、h1,h2,h3...と重要な順に番号が付きます。
<p></p>普通の文章を囲うタグ。paragraph、節や段落を意味します。
<br>改行をするタグ。line break、行をブレークするので次の行へ。
<div></div>文章の集まりを一括りにするタグ。division、仕切り的な役割があります。
などなど…

すべて覚えるのは大変ですが、よく使う上記のタグは使いながらでよいので覚えておきましょう。

そして、タグには開始タグと終了タグがあって、あけたらちゃんと閉じないと、
突然わけの分からないデザインの崩れ方をしたりします。
なので、、、
<p>あけたら→閉じる</p>
<p>あけたら→閉じる</p>
<p>あけたら→閉じる</p>

あけたら、とじる!!! (改行をさせる、<br>タグは閉じなくていいよ!)


ここまでがhtmlの超基本知識です。