ささみちゃんのポンコツ日記

日常生活で起こるポンコツエピソードを書いてます

HTML学習1日目②(全くの初心者がHTMLを始めてみた)

HTMLの学習初日ということもりやる気に満ち溢れているので

本日2回目の投稿。

 

HTMLを勉強するためにまず何をしたのか忘れないうちにここに書いておく。

誰かのためになればいいとは思うけど、自分用の備忘録だからまともな人は

ちゃんとしたサイトを確認したほうがいい。

 

 

①論破王ひろゆきの言葉を思い出す

HTMLという単語をインターネットで調べただけでは前に進まない。

そういえば、ひろゆきがプログラミングを覚えたのは「とほほのWWW入門」

だと言っていたことを思い出す。

検索。↓こちら。

https://www.tohoho-web.com/image/tohoho.gif

 

〈HTML〉という項目があったからクリックしたけど求めている情報はなかった。

 

 

②エディターとブラウザの用意が必要

残念ながらWWW入門は今のところ私には必要なさそうなので別なサイトを探す。

「HTML 初心者」検索。

あるサイトを覗くと、エディターとブラウザが必要と書いてあった。

ブラウザはわかる。Googleとかサファリのこと。

エディターはコードを書く場所っていうイメージ。

メモ帳で書く方法があるのは知っていたけど、エディターというものが存在するなら

メモ帳より多機能で親切であろうと思った。

 

 

③エディター探し

「htmlエディター 」まで入力したらサジェストに出てきた

「htmlエディター フリーソフト win10対応」を検索。

すると2021年版の記事があったからクリック。

【2021年版】初心者におすすめ!基本無料のHTMLエディタ10選 | QEEE

検討するにも知識がないから、一番上のATOMという

スタイリッシュで可愛らしいサイトを使うことにした。

無料って書いててひとまず安心。安全性は分からない。

 

 

ATOMインストール

早速ATOMをインストール。

ATOM (atom.io)

インストールの文字がめちゃめちゃ分かりやすいからすぐにポチる。

しばらく待つとダウンロードが完了。

PCのダウンロードフォルダに緑色のアプリアイコンが追加されてた。

これをクリック。

すべて英語表記。

ここから先は変にいじるとよくないと思ったから

ATOM 最初にすること」検索。

 

 

⑤日本語環境を設定

やっぱり英語表記そのままだと使いづらいから日本語環境をお勧めしていた。

日本語表記に変更するには以下の手順で操作が必要。

file→setting→install→検索ボックスに「japanese-menu」を入力

すると検索ボックスの下にinstallという文字付の、それっぽい表示が出てくる。

これをインストールする。

f:id:konnyaku_tarou:20210912191201p:plain

これだけのダウンロード数があれば安心。syonさんありがとう

 

インストールが終わるとATOMのメニューバーが日本語になってる!

 

 

ここからは検索内容は省略します。

 

⑥コードを書く場所

ようやくコードを書く段階にたどりついた。

まずはコードを書く場所を作る必要がある。

ファイル→新規ファイル

そしたら画面上にuntitledっていう名前のタブができる。

1って書いてるだけ。

 

 

⑦何の言語で書くのか指定

ATOM画面の右下に小さくPlain Textって書いてある。

ここをクリックして出てきた検索ボックスに「HTML」と入力。

一番上にAuto Detect(自動判別)って書いてあるから⑦の作業は割愛してもいいかもしれないけど今回は明確にHTMLを書きたいから変更。

 

 

⑧HTMLフォーマット呼び出し

私の1番の驚きがこれ。

untitledっていう名前のタブに書いてある1という数字の横に「html」と打ち込む。

そしたらなんとHTML基本フォーマットを打ち出してくれる!

めちゃ便利。

f:id:konnyaku_tarou:20210912200501p:plain

フォーマット一発入力

 

⑨<>がいっぱい

ちょっと話がそれるけど、HTML関連の記事を見てると

コードが書かれた画像がいっぱい出てくる。

どれも内容は分からないので画像だけ見てて思ったのが

<>の記号がいっぱいでてきてるじゃん。

いちいちshift押しながら打つのめんど!だる!

コードを書く前からしんどくなった。

 

けど大丈夫。

ATOMは<>を自動入力してくれる上に、入力した文字の候補を表示してくれる。

エディターだからそんな機能当たり前と思う人がいるかもしれないけど、

初心者の私にとっては懇切丁寧で素晴らしい機能だと思った。

f:id:konnyaku_tarou:20210912200749p:plain

1文字入力すると候補を表示してくれる

 

今日の成果はここまで。

気が向いたらまた更新する。