教本通りに表示されません。『１冊ですべて身につくHTML＆CSSとWebデザイン入門講座』

問題点

htmlを記入し、Google chromeで立ち上げて表示させたいのですが、真っ白な画面のまま変化しません。

教本通りに、フォルダーを新規作成し、その中に「index.html」という名前のファイルを新規作成し、作成したものにAtomでコードを書いているのですが、そちらをファイルよりダブルクリックしてGoogle Chromeで開くと、タイトル横のロゴが、教本のお手本であれば文書？のようなロゴになっていますが、私の場合だと地球？のようなロゴになっており、もう見本と違っています。
それを無視してコードを少し書き進め、画像を表示させるコードまで書いて保存し、更新しましたが、何も表示されません。

また、自分のファイルの作成の仕方が違うのかと思い、教本では途中経過ごとにコードが見れるようになっているサンプルデータが付いているので、そちらをダブルクリックしてChromeで表示させようとしましたが、こちらも同様にタイトルの横が地球のロゴで、画面が真っ白のまま何も表示されません。

初心者でwebに関して詳しくないので、どこが何から間違っているのかわからず作業が止まってしまいました。

・使っているMacのバージョンが古いのか
・ファイルの作り方が間違っているのか
・コードが間違っているのか
・ブラウザの表示の設定が間違っているのか

その２つのロゴの違いはなにか

とてもわかりにくい文章で大変恐縮ですが、わかる方に教えて頂きたいです！

途中まで入力したHTML

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4      <meta charset="utf-8">
5      <title>WCB Cafe</title>
6      <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
7
8      <!-- CSS -->
9       <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" >
10       <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
11       <link href="css/style.css" rel="stylesheet">
12    </head>
13
14    <body>
15      <header class="page-header">
16        <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
17        <nav>
18            <ul>
19               <li><a href="news.html">News</a></li>
20               <li><a href="menu.html">Menu</a></li>
21               <li><a href="contact.html">Contact</a></li>
22            </ul>
23
24        </nav>
25      </header>
26
27
28
29    </body>
30</html>

補足情報（FW/ツールのバージョンなど）

使用している教本　：『１冊で全て身につくHTML&CSSとWebデザイン入門講座』
使用しているアプリ：　「Atom」　「Google chrome」

＜使用しているMac＞
MacOs Big sur
ver. 11.4
MacBook (Retina, 12-inch, Early 2015)

m.ts10806

2021/06/19 05:37

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

meg_

2021/06/19 06:25

「教本通りに表示されません」とのことですが書籍が間違っているという意味でしょうか？何ページのことでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

「教本通りに書くこと」が目的になってるからでは。
本当に教本通りなら間違ったコードなので出版社に修正を依頼する必要があります。

<!<!DOCTYPE html>

冒頭からおかしいです。
HTMLガイドラインを読んで基本構造をおさえてください。

利用されているAtomにもHTMLのコードチェックをしてくれるプラグインはあるようなので、必ず入れてください。
AtomでHTMLコードチェックできるパッケージ２つ紹介するよ

投稿2021/06/19 05:40

m.ts10806

総合スコア80850

ats9168

2021/06/19 06:08

ご回答していただきありがとうございます。 codeの間違っている箇所を修正し、コードチェックできるパックを入れ、ノーエラーと表示されましたが、まだブラウザでは表示できないです。もう少し自分なりに探ってみます。

m.ts10806

2021/06/19 06:10

編集されたコードコピペで表示される画面（ブラウザ）は下記です。 https://teratail-v2.storage.googleapis.com/uploads/contributed_images/50fdd25495b03043d8e1bb4fc0f56e02.png どのようなファイルを作成し、どこにどのような操作で表示させようとしているのでしょうか。

m.ts10806

2021/06/19 06:13

「表示されない」がどういう状態なのか、そしてどういう想定をしているのかも含めて提示されたほうが良いと思います。

ats9168

2021/06/19 06:13

先程解決いたしました。丁寧にご回答いただきありがとうございました！

m.ts10806

2021/06/19 06:14

解決されたようで何よりです。念のため、あれからどうなって解決したのかフィードバックもらえますか？その内容が後から見る人の参考になるかもしれないので。

m.ts10806

2021/06/19 06:18

また、解決できたのでしたら↓ https://teratail.com/help/question-tips#questionTips4

ats9168

2021/06/19 06:19

承知しました。すみません、teratailを利用するのが初めてなので教えていただきたいのですが、解決した際はどちらに記入したらよろしいでしょうか。解決方法のところでよろしいでしょうか。

ats9168

2021/06/19 06:26

＜フィードバック＞お恥ずかしながら、ただのコードの打ち間違えで解決しました。なぜか一行目の「　<!　」が一つ多いという初歩的なミスでした。無事、画像も表示されて先に進めそうです。質問する前にもう少しねばってもよかったかと思いました。精進します！回答者様、丁寧にご回答していただきありがとうございました！

m.ts10806

2021/06/19 06:42 編集

既に対応されましたが、念のため。＞解決した際はどちらに記入したらよろしいでしょうか。解決方法のところでよろしいでしょうか。ついた回答で解決したのでしたらその回答を「ベストアンサー」に選び「どう解決したのか、理解したのか」をコメントとして投稿する。自身で解決できたなら自身で回答を投稿し自身の回答を「ベストアンサー」に選ぶ。です。＞なぜか一行目の「　<!　」が一つ多いという初歩的なミスでした。使うツールによっては予測変換や便利機能でタグが自動的に入るものもあります。ファイル作成でメニューに「HTMLファイル」などがある場合は最低限の構成が入ったうえで作成されるものもあります。私はAtom利用者ではないのでわかりませんが、おそらく補完機能はあると思うので、そちらが働いたのかもしれません。気づかず打ってしまうことはそれなりの熟練者でもたまにあります。 >質問する前にもう少しねばってもよかったかと思いましたそこが難しいところだと思います。「自分で解決出来たらそれが一番早い」というのは誰もが認識しているところとは思いますが、それで何時間も何日も経ってしまうと抜け出せなくなることだってあります。そうなる前に現状を整理し、そのまま答えではなく調べる方向性とか考え方を聞くというのはありだと思います。

行動規範の内容に同意します