~はじめてのHTML~ ブラウザに表示させてみよう!

HTML/CSS

HTML (えいちてぃーえむえる) とは

”HTML”というのは、ウェブページの土台を作るためのマークアップ言語です。
ウェブページに表示したい文章やウェブページの情報を独自の”タグ“というもので挟むことでHTMLを書いていきます。

と言っても何が何のことかわからないと思うので、ひとつずつ見ていきましょう。

HTMLはウェブページに無くてはならない土台です。
ウェブページに表示する文字は、HTMLのファイル上に書きます。
HTMLだけではウェブページは完成しない

とはいえ、あくまでも”HTML”で書くのはウェブページの土台のみです。
HTMLだけで作られたウェブページは
文字と画像だけが並んだ白黒の単調なものになってしまいます。

”HTML”で作った土台。
そこにデザインやレイアウトを決めるのが”CSS”と呼ばれるコンピュータ言語です。

HTMLってそもそもどうやって書いていけばいいの?

HTMLは文字とアルファベットや記号を組み合わせて書いていきます。

まずは基本の構成から一緒に見ていきましょう。

 

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Sample</title>
    </head>
  <body>
    <p>HTMLの基本を勉強しよう。</p>
  </body>
</html>

これがHTMLを書く時の基本の形となるので、覚えておきましょう。

なんかちょっと複雑で難しそう…

複雑に見えるけど、1つ1つおさえていくと難しい話はほとんどないですよ。

”CSS”を使うことでウェブページの文字や背景の色を変えたり、カラフルな線を引いたりすることができます。
この”CSS“については別の記事で1から紹介しますね。

~はじめてのCSS~ HTMLに紐づけてみよう!
HTML/CSSの基本となる事を押さえ、CSSで指定したデザインをどのようにHTMLに反映させるかや、CSSの基本的な書き方など、初心者の方でもわかりやすく解説しています。

さっそくHTMLをブラウザで表示してみよう!

「HTMLがどのようなものなのか」実際に触ってみると分かってくると思います。HTMLのいろいろな書き方を学ぶ前にまずは全体の流れを実際に動かして練習してみましょう。

「HTMLがどのようなものなのか」実際に触ってみると分かってくると思います。HTMLのいろいろな書き方を学ぶ前にまずは全体の流れを実際に動かして練習してみましょう。

自分で記述したHTMLをブラウザで表示する方法ですが、
ブラウザで表示するのに必要なのはたった2つです!

  1. コードを書くためのテキストエディタ
    例えばWindowsで初期搭載している”メモ”などでもいいんですが、
    プログラミング用のテキストエディタを使うことで便利な機能が多く効率的に開発作業を行うことができます。(ここではSublimeTextを使っていきます)
  2. 書いたコードを実際に表示させるためのWebブラウザ
    こちらも何でもいいのですがシンプルで動作も早くて使いやすい
    ”GoogleChrome”がおすすめです。
まずはテキストエディタを開いてみよう

この画面がテキストエディタ(SubLimeText)を開いた画面です。

シンプルで見やすくてかっこいい雰囲気ですね!

このテキストエディタも見た目をカスタマイズできるので自分好みにアレンジしてみてください。モチベーションもあがりますよ♪

 

サンプルコードをコピー
<!DOCTYPE html><html>
  <head>
    <title>thefirsttime</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>ゼロからウェブデザインを勉強しよう!</h1>
    <p>まずはHTMLについて学びましょう</p>
  </body>
</html>

この左のコードを先ほど開いたテキストエディタにすべてコピーしてみてください。
<!DOCTYPE html>から
</html>まで漏れなくコピーしてください。

ファイル名の末尾を「.html」にしてファイルを保存
  • Windows:ctrl+S
  • Mac:+S
    をキーボードで押します。
    すると、保存ウィンドウが開きますので好きな名前で保存しましょう。
    ここが重要です!!
    ファイル名は「test.html」というように末尾に.htmlをつけましょう。
    これにより書いたコードがHTMLファイルとして保存されます

いよいよ!ブラウザにHTMLファイルをドラッグして表示します

このように先ほど保存したHTMLファイルをブラウザにドラッグアンドドロップします。

 

こんな感じで表示されれば成功!

たったこれだけなんです。
簡単ですよね!!

 

そういえば、

Webに表示するのはサーバーが必要って聞いたことがあるような…

実際にみんなに見てもらうためにはサーバーを借りる必要があるけど、

自分のパソコンで練習したり、
テスト用のウェブサイトを作るのにサーバーは必要ないですよ♪

なので、ガンガン練習しましょう!

 

まとめ

今回は”HTML”の基本の部分をまとめました。
HTMLファイルを作り、
Webブラウザに表示するまでの全体の流れは理解できましたでしょうか。

次の記事からは”HTML”のもっと詳しい部分や、文字に色を付けたりデザインを変えられる”CSS”も紹介していきます!

~はじめてのCSS~ HTMLに紐づけてみよう!
HTML/CSSの基本となる事を押さえ、CSSで指定したデザインをどのようにHTMLに反映させるかや、CSSの基本的な書き方など、初心者の方でもわかりやすく解説しています。

なにか質問があればお問い合わせフォームでお気軽にお問合せください。
可能な限りすぐにお返事します。
一流プログラマを目指して頑張りましょう!

コメント