ここでは、Webサイト作成において必要なHTMLの知識を習得していきます。超初心者の方でも最後まで見て頂ければ必ず作成できるようになります。
コツコツと一緒に頑張っていきましょう!!
コードを記入するファイルの作成
まずは、コードを入力するためのファイルが必要となります。
以下2つのフォルダとファイルを作成しましょう。
- imageフォルダ
- index.htmlファイル
まずは「imageフォルダ」から作成していきましょう!
エクスプローラより、ベースとしたいフォルダ上で右クリックを押し、
「新規作成」→「フォルダー」でフォルダを作成し、名前を「image」としてください。
このimageフォルダにはHP上で使用していく画像を保存していきます。
次に、「index.htmlファイル」を作成していきます。
基本的にはフォルダ作成と同じとなりますが、
「新規作成」→「テキストドキュメント」でテキストファイルを作成し、名前を「index.html」としてください。※この時に、テキストの拡張子である「.txt」も消してください。
名前を入力すると「拡張子を変更すると、ファイルが使えなくなる可能性があります。」と表示されますが、迷わず「はい」を選んでください。
この「index.html」内にコードを記入していきます。
この2つがまずは基本となりますので、覚えておきましょう。

VSコードでindexファイルの下準備
コードの書く場所は様々ありますが、今回は「VSコード(Visual Studio Code)」を利用していきます。まだ、インストールしていない方は、以下のURLでダウンロードしてください。


まずはVSコードを開きましょう。
様々な設定がありますが、それは追々紹介させて頂きます。

先ほど作成した、ファイルを表示させてみましょう。
「ファイル」→「フォルダーを開く」で先ほどimageフォルダとindex.htmlを作成した、フォルダを開きます。
すると、VSコード上でフォルダが表示されます。(今回はHPフォルダを選択しているので、HPが表示されています)

それでは、「index.html」を開いていきましょう。ファイルをダブルクリックしてください。
以下のようにまっさらなファイルが表示されれば、下準備完了です。
お疲れさまでした、次はコードを書いて、ブラウザ上で確認していきたいと思います。

まとめ
まずはエクスプローラでimageフォルダとindex.htmlファイルを作成しました。
コードを記入はVSコード利用しますので、VSコードを立上げます。
フォルダ選択で作成したindex.htmlをひょうじさせました。
コメント