HTML・CSSプログラミング基礎・言語の書き方入門

プログラミング

プログラミング

HTMLはハイパーテキストマークアップランゲージと呼ばれ、ブラウザにサイトを表示するために必要な言語です。一番基礎的な言語となっており、見出しや、段落、テキスト、フォントの大きさ、見た目などを設定する機能があります。HTMLは非常に簡単なので30分くらいで学べるものです。HTMLの入門をご紹介します。

HTML プログラミング言語・入門

HTMLはプログラミング言語の入門としてもっとも基礎的な言語です。
しかし、ウェブサイトをいきなり作ると言っても、htmlの役割がわかりませんよね。
htmlの役割については下記のようになっています。

HTML　・・・ウェブサイトの文書構造を書いたもの
CSS　　・・・HTMLで書いた文書構造の見た目を制御する言語
JavaScript / PHP 　・・・　動きやデータを制御するプログラム

文書構造がなければ、ブラウザ・サイトには表示されるものの、検索エンジンにうまく引っかからず、
検索しても自分のサイトが出てこないと言った問題がおきます。

それを正しくロボットに伝えるために必要なのがHTMLです。
一番基礎的な言語といえます。

ツイッターやフェイスブックのようなSNSを開発したいという人は、PHPやRubyといったサーバーサイド言語が必要です。HTMLを覚えたけど次に何をしたら良いのかわからないという方にはこちらを。

PHPはプログラミング初心者の入門練習言語としておすすめ

PHPはプログラミング初心者の入門練習言語としておすすめ

HTML プログラミング基礎とは

2inone0I9A7532_TP_V

HTMLは本当に簡単です。30分もあればある程度覚えることができます。
下記がhtmlの一例になっています。

body, html, head, h1, p

タグは基本的なタグとして覚えておく必要があります。英語で言う英単語のようなものです。

CSS HTMLの基本のbodyタグ

HTMLはそれぞれ入れ子構造になっているため、ページの中身になるものは、bodyタグの中に入れることになります。bodyタグの中にテキストなど構造を書かなければ、Webページには何も表示されません。

ちゃんと表示されない時にはbodyタグの中に書いてあるのかしっかり確認しましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>トップページのタイトル</h1>
    <p>リプレイはプログラミング教育を応援しています。エンジニアが増えて、便利な社会の実現に貢献していきます。</p>    
  </body>
</html>

CSSのHTMLのリンクの外部ファイルの読み込み

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/css/master.css">
  </head>
  <body>
    
  </body>
</html>

CSSをHTMLに直書きすること

基本的に、CSSは外部ファイル化します。外部ファイルというのは下記の通りに外部にファイルを置いて読み込むということです。

外部化すると読み込むファイル数が増えるので、若干サイトを読み込む速度が遅くなります。ただ、ファイル数がそこまで多くなければ、問題はありません。

こちらが直書きしたパターンです。CSSは基本的に何千行など増えていきますので、
その何千行とあるコードを直書きしてしまうと管理が大変です。

サイトを作るということは長期的に保守していくことになりますので、
わかりやすくするというためにも外部ファイル化することが推奨されています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      body {
        background: #f3f3f3;
      }
    </style>
  </head>
  <body>
    
  </body>
</html>

HTML プログラミング言語のこれまでとの違い

GORIPAKU2069_TP_V

HTMLにはXHTML4.01, HTML5という違いがあります。これは以前までは違う文書構造で作っていたものが、HTML５となって文書構造の書き方が変わったということです。

上記している書き方はHTML5の書き方になっています。XHTML4.01で書かれたウェブサイトが見られなくなったということではありませんが、できるだけ最新のHTML５の書き方で作っておくことが推奨されています。

ロボットの読み込み方が変わっているので最新にしなければ、古いものと見なされてしまうからです。

XHTML4 の書き方とは

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="キーワードを入力,キーワード１" />
<meta name="description" content="ここにはキーワードの説明文をいれます。" />
<title>タイトル</title>
<link href="css/base.css" rel="stylesheet" type="text/css" />
</head>