HTMLでのWebページの簡単な作り方

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

私たちがブラウザで観ているWebページのほとんどはHTMLによって作られています。
今回は、そのHTMLでWebページを作成する方法をご紹介します。

HTMLとは

HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的な言語の一つです。 普段、私たちがブラウザで観ているWebページのほとんどがHTMLで作られています。

まず、ブラウザでHTMLがどんなものなのか見てみましょう。
YAHOO! JAPAN!を開き > 右クリック > ページのソースを表示をクリック => 表示されたものがhtmlファイルです 以下gif画像で実際の方法がわかります。

この文字がたくさん表示されている画面が開けましたか? ここに書かれているものがHTMLです。


実際にHTMLに触れてみましょう。

①以下のURLからファイルをダウンロードしてください。(zipファイル形式に圧縮されています)

index.zip

②ダウンロードしたhtmlファイルをブラウザへ「ドラッグ&ドロップ」してください。(以下、参考)

上記と同じ画面が表示されたら成功です。

③ダウンロードしたファイルを「メモ帳」などのアプリケーションで開いてください。
ファイルの上で右クリックして、「このアプリケーションを開く」や「プログラムから開く」などの選択肢から、メモアプリケーションを選択して開いてください。下記、オススメのメモ帳のアプリケーションです。

*HTMLを作成~編集する際にはHTML作成に対応したメモ帳を使用します。
以下サービスなど参考いただき、ご自身のPC環境へインストールしてください。
*社内でツールダウンロード利用が禁止されている場合は情報システム部等へお問い合わせください。

#推奨ツール1. Visual Studio Code
https://tera-net.com/library/tpad.html

#推奨ツール2. brackets
https://brackets.io/

④HTMLを編集してみましょう。
ここに記載されている内容を書き換えることで、先ほどブラウザで表示した内容を変更することができます。下記の手順に沿って、修正してみましょう。
1.「えお」の下に「かきくけこ」と入力してみましょう
2.上書き保存してください。Windowsの場合は「Ctrl + S」、Macの場合は「command + S」を押すことで、上書き保存ができます

⑤再度ブラウザにファイルをドラッグ&ドロップしてみましょう。
*②で開いたページを閉じていない場合は、リロード(Windowsの場合は「Ctrl + R」、Macの場合は「command + R」を押すとリロードされます)

表示が変わりました!


このように、HTMLで書かれたファイルを、修正したり、新しく記述することで、ページに表示する内容を変更していくことが可能です。 様々な技術や表現方法がありますが、基本的にはこのようにファイルを編集してページを作成していくということに変わりはありません。

POINT

Webページを作るための最も基本的なマークアップ言語のひとつで、WebページのほとんどはHTMLで作られています。
ほかにもCSSやJavaScriptなどの言語もあり、自分に合った作成方法を選んでいきましょう。

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をコピーしました