こばゆた
今回はWebページを作るためのフォルダーとHTMLファイルを作成し、画面に表示するところまでをやっていこうと思います
きなこ
ようやく一歩が踏み出せるって感じだね！
チャッピー
やることが多そうだけど頑張ろう！
1.フォルダを作る
Macの場合
Windowsの場合
フォルダーはお仕事などでも作る事があると思うので問題無いと思います。
2.テキストエディターを起動しフォルダを読み込む
フォルダーの読み込み方
[ptimeline color=”yellow”]
STEP1
VS Codeを起動する
起動するとこのような画面が出てきます。
STEP2
左のサイドバーの一番上のマークをクリック
STEP3
ウインドウが出てきたら「フォルダーを開く」をクリック
STEP4
フォルダーを選択して開く
↑ちなみに左下の「新規フォルダ」からでもフォルダは作成できますWindowsはコチラ
[/ptimeline]
こばゆた
上の画面になれば開くことができています
ちなみにフォルダーをエディターにドラッグしても開く事ができます
またVS Codeが日本語になってない場合は以下の順で日本語化できます。
こばゆた
作業が終了したらリスタートするか聞かれるので「Restart Now」をクリックしてVS Codeを再起動すればおkです
3.HTMLファイルの作成
HTMLファイルの作り方
[ptimeline color=”yellow”]
STEP1
フォルダーが開けたら「新しいファイル」を選択
STEP2
ファイル名を入力する
目次となるページには”index.html”と付けますSTEP3
enterを押せば完成
[/ptimeline]
こばゆた
これでHTMLファイルが完成しました
ちなみに〇〇.htmlの”.html”の部分を拡張子と呼ぶので合わせて覚えておきましょう
4.ブラウザに表示する
せっかくなので文字を入力してみましょう。
“HELLO WORLD”と入力することが多いのでそこは慣例にならって入力…。
こばゆた
“VS Code”には設定でオートセーブの切り替えができますが設定されていない場合は“⌘＋S”で保存をします。
保存をしたらブラウザを開いて作成したHTMLファイルをドラッグします。
こばゆた
今までの手順が間違ってなければ問題なく表示できていると思います
チャッピー
おお！自分で書いた文章がパソコンに表示された！
きなこ
なんかうれしいね！
5.まとめ
フォルダーとHTMLファイルの作成まとめ
1.フォルダーを作成
- デスクトップで右クリック
- 「新規フォルダ」を選択
- 名前をつける
2.エディターを起動してフォルダーを読み込む
- VS Codeを起動
- 左のサイドバーの一番上のマークをクリック
- 「フォルダを開く」を選択
- フォルダのある場所から選択して開く
3.HTMLファイルを作る
- 「新しいファイル」を選択
- ファイル名をつける(最初のページは”index.html”と付ける。また〇〇.htmlの”.html”の部分を拡張子と呼ぶ)＋”enter”
ブラウザに表示するにはブラウザを開いてドラッグする
コメント