HTMLの構造

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

WEBサイトを作成するのに必要なHTMLの構造について説明します。

HTMLの構造

HTMLは上記のような構成で組み立てられています。
1. <!DOCTYPE html> このファイルがHTMLファイルであることを宣言
2. <html> htmlソースコードの始まりと終わりを宣言。使用言語を指定できる
3. <head> ページに対して行う設定情報を指定
4. <body> ブラウザに表示するための情報

htmlサンプル

こちらのタグそれぞれが意味するものが何であるか、わからないものがあればGoogle検索して調べてみよう!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPEhtml>
<htmllang="ja">
 <head>
  <metacharset="UTF-8">
  <metaname="description"content="サイトの概要">
  <metaname="author"content="作成者">
  <metaname="viewport"content="width=device-width, initial-scale=1">
  <title>タイトルはこちら</title>
 </head>
 <body>
  あいう
  <br>えお
  <br><ahref="mailto:xxx@example.com?subject=feedback">email me</a>
  <br><imgsrc="https://menter.jp/c/images/animal_chara_computer.png">
 </body>
</html>

以下のようなHTMLシミュレーター(エミュレーター)を活用することで、リアルタイムに現在どのような状態になっているかを確認しながらHTML作成することができます。試しに何か書いてみましょう。

#1 trancedive

html emulator

#2 codingtab

漏勺什么梗-爱游戏体育app官网
龚俊漏勺什么梗?龚俊漏勺的梗是因为他在很多采访中都耿直的离谱,什么都往外说而且毫不在意,每次都在讲大实话。漏勺指的是经常把话说漏嘴的人,藏不住消息。龚俊经常被他和张...漏勺是什么梗?就是撑饭的漏勺梗

シミュレーターとエミュレーターの違い

シミュレーターは外から見た振る舞いを再現するだけなのに対して、エミュレーターは中身の動作まで再現します。
エミュレーターの方が再現性が高いとおぼえておきましょう。
なお、結果として描画されたものをWebブラウザで見た際には、見た目には両者の違いを感じることができないケースがほとんどです。

POINT

HTMLシミュレーター(エミュレーター)を活用することで、リアルタイムに現在どのような状態になっているかを確認しながら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をコピーしました