HTMLを記述してみよう

基本的なHTMLの記述を行い、Web制作の作業の流れを把握します。

HTMLとは

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、
Webページを作るための最も基本的な マークアップ言語 のひとつです。
普段、私たちがスマホやタブレットで観ているWebページのほとんどが、HTMLで作られています。

どんなものか見てみる

試しに、好きなサイトをGoogle Chromeなどのブラウザで開いて、
HTMLがどんなものなのか見てみましょう。
例えば、
www.electro-cute.com/
のHTMLを見てみましょう。
ページ上の何もないところで右クリックし、 ページのソースを表示 をクリックしてみてください。

html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>electro・cute </title>
<meta name="description" content="大阪市西区新町のホームページ制作とネットショップ運営管理(楽天,Yahoo!,Amazon)および商品撮影サービス等を行なっております|エレクトロキュート" />
...

何か小難しいアルファベットや記号の羅列が並んでいるのが見れると思います。
これが HTML です。
Webページを制作するには、この HTMLを記述して行います。
難しそうに見えますが、やってみたら意外とそうでもないですよ。

基本的な記述

HTMLを記述するには、 テキストエディタ を使います。
メモ帳、TeraPadなど、まずはなんでもいいので好きなテキストエディタを起動してください。
起動したら、以下のコードを貼り付けてください。

<!DOCTYPE html>
<html>
    <head>
        <title>ページタイトル</title>
    </head>
    <body>
        てすてす
    </body>
</html>

何かよくわからないかもしれませんが、ファイル名を
index.html
にして保存してください。
そして、保存したファイルをGoogle Chromeなどのブラウザで開いてみてください。
「ページタイトル」 という名前で、 「てすてす」 と書かれたページが表示されるはずです。
ちなみに、右クリックしてソースを表示を選ぶと、先程記述したコードが表示されます。

好きに作り変えてみる

無事htmlを作成したところで、次はあなたの好きに作り変えてみましょう。
例えば、

<!DOCTYPE html>
<html>
    <head>
        <title>情報学科とは</title>
    </head>
    <body>
        情報学の基礎知識を身につける
        「基礎専門科目」では数学・理科・情報の各分野における情報学の基礎を学び、その後の「専門科目」への準備をします。また、「総合科目」を通して、豊かな人格形成の基盤となる知識と教養を養い、社会人としての素養を身につけます。
        専門科目を通して必須知識を修得
        情報社会・ソフトウエア科学・コンピュータ工学・情報システム・情報メディアの各分野について、さまざまな情報技術を身につけます。また、プレゼミとして全員が研究室に配属、卒業研究に必要な基礎を修得。ここで身につける情報技術は、ソフトウエア開発等において実践力の土台となる、必須のスキルです。
        興味に基づいて卒業研究を実施
        全員が研究室に配属され、興味のある分野の具体的な課題を主体的に解決します。論文作成や研究発表を通し、文書作成やプレゼンテーション等ITキャリアに必要なスキルも培います。卒業研究をやり遂げることで、実践力や社会性をしっかりと身につけた上で、就職活動に臨めます。
        将来を見据えて学びを深める
        卒業研究での経験を活かし、就職活動に臨みます。卒業研究で身につけた専門知識や自主性、成果を人に伝える力は、大きな強みとなるはずです。また、将来を見据えてさらに学びを深めるために講義を受講したり、大学院への進学をめざして研究を続けることも可能です。
    </body>
</html>

これを保存して、ブラウザで開いてみます。
きちんと書き換えた文章が表示されると思います。
でも、改行も何もないのでこのままでは公開しても誰も読んでくれません。
文字を装飾して、もっと読みやすくしてみましょう。

改行、太字、見出しなどの装飾をつける

さて、ここからHTMLらしいことをやっていきます。
読みやすくするために、改行、太字や見出しをつけてみましょう。
ここでは、基本的なHTMLタグの紹介をしていきます。

改行タグ

さっきの文章が読みにくかった一番の原因は、 改行がなかったから でしょう。
HTMLでは、ソースコード上で改行を行っても半角スペースとして扱われてしまいます。
改行をするには、改行したい位置に 改行タグ <br> を追加します。

この世の中を、変えたい。<br>
その一心で、<br>
やっと議員になったんです。

すると、つけた箇所は改行されるようになります。
試しにやってみましょう。

<!DOCTYPE html>
<html>
    <head>
        <title>情報学科とは</title>
    </head>
    <body>
        情報学の基礎知識を身につける<br>
        「基礎専門科目」では数学・理科・情報の各分野における情報学の基礎を学び、その後の「専門科目」への準備をします。また、「総合科目」を通して、豊かな人格形成の基盤となる知識と教養を養い、社会人としての素養を身につけます。<br>
        <br>
        専門科目を通して必須知識を修得<br>
        情報社会・ソフトウエア科学・コンピュータ工学・情報システム・情報メディアの各分野について、さまざまな情報技術を身につけます。また、プレゼミとして全員が研究室に配属、卒業研究に必要な基礎を修得。ここで身につける情報技術は、ソフトウエア開発等において実践力の土台となる、必須のスキルです。
        <br>
        興味に基づいて卒業研究を実施<br>
        全員が研究室に配属され、興味のある分野の具体的な課題を主体的に解決します。論文作成や研究発表を通し、文書作成やプレゼンテーション等ITキャリアに必要なスキルも培います。卒業研究をやり遂げることで、実践力や社会性をしっかりと身につけた上で、就職活動に臨めます。
        <br>
        将来を見据えて学びを深める<br>
        卒業研究での経験を活かし、就職活動に臨みます。卒業研究で身につけた専門知識や自主性、成果を人に伝える力は、大きな強みとなるはずです。また、将来を見据えてさらに学びを深めるために講義を受講したり、大学院への進学をめざして研究を続けることも可能です。
    </body>
</html>

少しは読みやすくなったのではないでしょうか。

見出しタグ

次に、文章のタイトルっぽい部分を見出しタグというタグを利用してみたいと思います。
見出しにすると、その部分の文字が大きくなるので、文章の見出しとして利用することができます。
見出しタグは、

<h1>見出しにしたい文章</h1>

という風に記述します。
先程のHTMLを、見出しタグを利用して修正してみます。

<!DOCTYPE html>
<html>
    <head>
        <title>情報学科とは</title>
    </head>
    <body>
        <h1>情報学の基礎知識を身につける</h1>
        「基礎専門科目」では数学・理科・情報の各分野における情報学の基礎を学び、その後の「専門科目」への準備をします。また、「総合科目」を通して、豊かな人格形成の基盤となる知識と教養を養い、社会人としての素養を身につけます。
        <h1>専門科目を通して必須知識を修得</h1>
        情報社会・ソフトウエア科学・コンピュータ工学・情報システム・情報メディアの各分野について、さまざまな情報技術を身につけます。また、プレゼミとして全員が研究室に配属、卒業研究に必要な基礎を修得。ここで身につける情報技術は、ソフトウエア開発等において実践力の土台となる、必須のスキルです。
        <h1>興味に基づいて卒業研究を実施</h1>
        全員が研究室に配属され、興味のある分野の具体的な課題を主体的に解決します。論文作成や研究発表を通し、文書作成やプレゼンテーション等ITキャリアに必要なスキルも培います。卒業研究をやり遂げることで、実践力や社会性をしっかりと身につけた上で、就職活動に臨めます。
        <h1>将来を見据えて学びを深める</h1>
        卒業研究での経験を活かし、就職活動に臨みます。卒業研究で身につけた専門知識や自主性、成果を人に伝える力は、大きな強みとなるはずです。また、将来を見据えてさらに学びを深めるために講義を受講したり、大学院への進学をめざして研究を続けることも可能です。
    </body>
</html>

このように、タイトルっぽい部分を <h1></h1> で括ると、タグとタグの間にある文章が見出しになります。
また、 </h1> で閉じると次の文章は新しい段落として扱われるので、改行を入れる必要はありません。

HTMLタグは種類がたくさんある

HTMLタグは、上で紹介したもの以外に文字に色を付けたり、文字を太くしたりなどたくさんあるので、
調べてみてください。
以下のサイトで、代表的なものが紹介されています。
tech-camp.in/note/5131/
これらのタグを使いこなすことで、基本的なWebページの制作ができるようになるはずです。