HTMLタグとブラウザ確認方法

ITリテラシー学習
ITリテラシー学習

HTMLタグの入力/確認の方法をご説明します。

HTMLタグ

HTMLファイルをメモ帳で開いて編集し、ブラウザで確認していきます。

*HTMLを作成~編集する際にはHTML作成に対応したメモ帳をダウンロードする必要があります。
以下サービスなど参考いただき、ご自身のPC環境へインストールしてください。

#推奨ツール1. Sublime Text
https://www.sublimetext.com/3
#推奨ツール2. Tera Pad
https://tera-net.com/library/tpad.html

  • step1. HTMLソースをコピー
  • step2. メモ帳を開く
  • step3. HTMLソースを貼り付け、改行してみます。
  • step4. HTMLファイルとして保存(拡張子は .html)
  • step5. 該当ファイルをブラウザにドラッグ&ドロップすることで、その内容を閲覧することができる(おや、改行されていませんね)
  • step6. 指定条件の改行位置に、改行を意味するタグ<br>を入力する
  • step7. ファイルを保存する
  • step8. ブラウザで再度確認

メモ帳内で行った改行はHTML上に反映されませんので注意してください。
HTMLを書く時は、HTMLのルールに則り記述していく必要があります。
改行を行いたい場合は

 <br>

を使用してください。

画像URLを確認する方法

なお、画像の置き場所は、以下の通り他者のサイトでも確認することができます。(確認したい画像ファイルにマウスカーソルを合わせる+右クリック => 画像アドレスをコピー )

[重要] HTMLタグは1文字間違えると壊れる

HTMLタグは、スペースの数や大文字・小文字、1文字間違えるだけで表示が崩れたり、エラーになってしまう可能があるため注意が必要です。
また、これはHTMLに限らずexcel等関数や様々なシステムに言えることです。
ITを上手に使いこなすうえでは大変重要な基本知識です。
うまくいかないな、と思ったら1つ1つの記述を丁寧に見直してみましょう。

POINT

メモ帳内で行った改行はHTML上に反映されないので注意してください。

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

タイトルとURLをコピーしました