大阪府堺市のSEO・MEO対策ホームページ制作会社
トランジット( 合同会社うえせいや)
営業時間 9:00〜17:00(土日祝休)

コピペで簡単に理解! HTMLファイルを作って表示させてみる【HTML超入門4】

HTMLファイルを作って表示させる
LINE@
「この記事が気に入ったらLINE@で友だち追加をしよう!」

合同会社うえせいやの最新情報をお知らせします。

友だち追加

sponsored link

うえせい写真

この「うえせいやブログ」は、合同会社うえせいやが運営する自社メディアです。
【運営している人】
うえせい
【本名】
上原誠司(合同会社うえせいや代表社員社長)
【お仕事】
◯WordPressを使ったホームページの制作
◯自社オウンドメディア運営
◯中小企業向けITサポート
【好きなこと】
トライアスロンと自転車とアウトドアをこよなく愛しています。
詳しくは、コチラ

取引実績業種

公立高校・各種クリニック・歯科・産婦人科・商店街・鍼灸院・整骨院・整体院・ホテル・ネイルサロン・各種モデル・講師業・生花店・ベビーマッサージ協会・カメラマン・自動車教習所・占い・飲食店・各種クリニック・旅館・ホテル・宿泊施設・など

全国どこでも対応可能です

メールはもちろん、SNSや、LINE、スカイプなどを使ってしっかりとコミニュケーションをとりながら、進めることが可能です。
もちろん、お近くの方や、仕事で行くとこの多い関東圏であれば、実際お会いしてのコンサルティングやレクチャーも対応可能です。

面談可能地域

堺市堺区・堺市中区・堺市東区・堺市西区・堺市南区・堺市北区・堺市美原区・和泉市・大阪狭山市・泉大津市・岸和田市・貝塚市・泉佐野市・泉南市・松原市・富田林市・大阪市此花区. 大阪市福島区 · 大阪市北区 · 大阪市都島区 · 大阪市旭区 · 大阪市港区 · 大阪市西区 · 大阪市中央区 · 大阪市城東区 · 大阪市鶴見区 · 大阪市大正区 · 大阪市浪速区 · 大阪市天王寺区 · 大阪市東成区 · 大阪市西成区 ·大阪市阿倍野区 · 大阪市生野区 · 大阪市住之江区. 大阪市住之江区. 大阪市住吉区 · 大阪市東住吉区 · 大阪市平野区・吹田市
※ここに掲載されている場合でも、一部地域では困難な場合もございます。

HTMLを本やテキストで覚えるのもいいですが、ひとまず書いてみて表示させ、どのように表示されるのかを見てみるのもいい勉強になります。

この記事では、超簡単なHTMLをコピペをして、それをブラウザに表示させてどうになるか?、をやってみてほしいと思っています。

 

sponsored link

表示させるHTMLファイルの元をコピペする

▼これが元のファイルです。

<html>
<head>
<title>たいとるタイトル</title>
</head>
<body>
	<header>
		<h1>ヘッダーへっだーヘッダー</h1>
	</header>
	<main>
		<h2>見出しミダシ見出し</h2>
		<p>メインめいんメイン</p>
	</main>
	<footer>
		<p>フッターふったーフッター</p>
	</footer>
</body>

 

  • <head> ▶ ブラウザ・ウィンドウのタイトル・バーに表示されるタイトルや、その他の情報を記載する場所です。
  • <title> ▶ タイトル・バーに表示されるタイトル
  • <body> ▶ 実際にブラウザに表示される内容
  • <header> ▶ ホームページのヘッダー部分
  • <h1>・<h2> ▶ 見出し部分
  • <main> ▶ ホームページのメインのコンテンツ部分
  • <footer> ▶ ホームページのフッター部分

 

右上の<>をクリック

<>をクリック
右上の<>をクリックすると、表示が変わります。
この状態にしておくとコピペしやすいです。

 

全部選択してから、右クリックでコピします。

全部選択してコピー
全部をコピーしてください。

 

テキストエディターに貼り付ける

テキストエディターに貼り付ける
ウインドウズなら「メモ帳」、Macなら「テキストエディット」でHTMLを書くとこもできますが、HTMLを書くための機能が備わっていないので、当ブログでは「Sublime Text(サブライムテキスト)」をオススメしています。
 
【関連記事】WEBサイトの制作のために必要なテキストエディタをインストールする【HTML超入門2】

 

日本語の部分を、自分が確認しやすいように書き換える

全角の日本語の部分を好きに書き換える
このステップは正直、やってもやらなくてもいい感じなんですが、自分が入力したのものが、いままで見ていただけのブラウザに表示されるとちょっとうれしいものですよね。

uesei.png
うえせい

自分のパソコンだけでしか表示されないものですから、なんでも入力をさせてみてください。

 

「xxxxx.html」(xxxxxは、わかりやすいように書き換えて保存)というファイル名で保存

ブラウザにて表示させる
「xxxxx」の部分はなんでも適当でいいので、保存してください。

 

表示させてみた

表示させるには、ダブルクリックでブラウザが立ち上がります。
ブラウザにより、多少表示が違いますので、念のため2つのブラウザの表示の違いを見てください。

Chromeでの表示結果

Chromeでの表示結果

 

Safariでの表示結果

Safariでの表示結果

 

【まとめ】表示させてみると、なんとなく分かる

うえせいイラスト
自分で書いたものを、表示させることで、なんとなく

boy.png
B さん

ああ〜、こんな感じだなあ

という感覚で理解ができるようになってきます。

一度やってみてくださいね。

では、また。最後まで読んでくれてテリマカシ。

▼HTML・CSS超入門 記事一覧

Transit(トランジット)produced by 合同会...
カテゴリー 「」
https://www.uesei.net/category/web/html-css
(件数:0)