見出し画像

初心者がゼロから始める【HTML】プログラミング学習

みなさまこんにちは、ryomaです。

先日とある教材のセールが行われていましたので、以前から学習してみたいと考えていたプログラミングの教材を初めて買ってみました。

この記事では、スタートから初めてのHTMLを入力してブラウザ上に表示させるところまでを、まとめていきます。

Visual Studio Codeの導入

まずはプログラミングのコードを書くためのエディタの導入から始めました。
プログラミング未経験なので、当然使っているパソコンにも動画で指定されたエディタは入っていなかったのでインストールするところから始めました。

今回使用したエディタは、Visual Studio CodeというMicrosoftの無料エディタになります。

ぷ1


私はMacを使っていたので、Mac用をダウンロードしてインストールしてさらに『日本語化』を行いました。
インストール後は英語表記なので、さっぱりわからないので少しでもわかりやすくするために日本語化を行います。

スクリーンショット 2020-10-04 7.48.09

Marketplaceで拡張機能を検索の部分に『Japanese Language Pack for Visual Studio Code』と入力して検索すると『Japanese Language Pack』が出てくるのでインストールします。

インストール後はエディタを再起動することで反映されます。

HTMLタグ学習内容

①<>でタグを囲む

タイトルであれば<title>HTMLタグ学習内容</title>
<タグ名>内容</タグ名>
左右のタグ名は同じものが入り、終了させる右側のタグ名の前に『/』が入ることが特徴です。

②HTMLの基本的な構造

DOCTYPE宣言➡️使用するHTMLの種類を宣言する
html要素➡️HTML文書の最上位要素
head要素➡️文章のタイトルや文字コード、説明文など
body要素➡️本文を書く

③実際にコードを書いてみる

スクリーンショット 2020-10-04 21.39.18

書いたコードを実際にGoogle Chromeで表示してみました。

スクリーンショット 2020-10-04 21.50.17

まだまだプログラミングの第一歩です。
しかし、自分が書いたコードが実際に表示されるのをみたらいい気分でした。

これがアプリケーションで実際に使ってくれるユーザーがいたらもっと楽しいんだろうなと想像すると、ワクワクしてしまいますね!

この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?