• 無料でHTMLが学習できる

ウェブサイト制作

HTMLの基礎

目次

HTMLとは

HTMLとはHyper Text Markup Language の略である。

超テキストをマークアップした言語なんだぁ~くらいに覚えておくと良いでしょう。
ウェブサイト制作はHTMLと呼ばれる言語で作られています。
作成したものサーバーにアップロードして完成なのです。

アップロードするにはレンタルサーバードメインが必要です。
始めは、レンタルサーバー年間10,000円程度がお手頃でしょう。
ドメインは年間1300~12,000円。
これは『~.net』『~.com』『~.art』などがあります。

私は、さくらインターネットでレンタルサーバーを契約しています。
ドメインはバリュードメインで取得しました。

そんなお金を持っていない!
『HTMLの勉強がしたいだけ』『全国の人に見られるはチョットいや』って方でも大丈夫です。
サーバーなしでも、ドメインなしでも作ることができるです。
HTMLファイルは公開されません。
ですから、自由に遊ぶ感覚でHTMLを学べます。

HTMLを記述するテキストエディタ

HTMLを記述するテキストエディタは、パソコンを購入時に付属している『メモ帳』でも良いのですがフリーソフトで気に入ったテキストエディタを使うことをお勧めします。

私は『窓の杜』でフリーソフト『TeraPad』を使っています。
検索すると、4つくらい『広告』がありますが、無視してください。
「TeraPad」無料のテキストエディター – 窓の杜
注意!『広告』のTerapadは怪しいですよ!!
今はよっぽど慎重にサイト見てても、詐欺サイトや、ウイルスに掛かってしまいます。

公式サイト:
https://tera-net.com/
でダウンロードしたら安心です。
作者:寺尾進さんだから『Tera』なのでしょう。

メモ帳を使ってHTMLを記述する場合の注意点。
パソコンがWindowsならば、メモ帳はWindowsのアクセサリーの中にあります。
次の文を打ってください。

<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>タイトル</title>
</head>
<body>
本文

</body>
</html>

で、保存します。
ファイル名を書いて『識別子』を『.html』とします。
ファイルの種類を『テキスト文書』から
『すべてのファイル』とします。
保存したファイルがブラウザマーク付きでしたら成功です。

失敗例

『識別子』が『.txt』になる。
1度試す事をお勧めします。
1度失敗することで、これは見た事あるぞ。
見た事がない失敗で焦らないようにする為です。

HTMLファイルとテキストファイル

失敗は成功の基と言うように、今のうちにいっぱい失敗しましょう。
で、経験を積み重ねましょう。

xxx.txt(テキストファイル)| xxx.jpg(画像ファイル)| xxx.html(htmlファイル) |xxx.css(cssファイル)

ファイルの拡張子を表示する方法

ファイルの拡張子を表示する方法を説明します。
デスクトップ画面のタスクバーにある、エクスプローラーのアイコンをクリックします。
拡張子を表示したいフォルダを開き、メニューの「表示」タブをクリックします。
[ファイル名拡張子]のチェックボックスをクリックします。
拡張子付きのファイル名に、表示が変わります。

Windows10の場合

フォルダを開きます。
メニューの「表示」タブをクリックします。
[ファイル名拡張子]のチェックボックスをクリックします。
拡張子付きのファイル名に、表示が変わります。
このページのトップへ

HTMLの基本書式

開始タグ・終了タグHTMLの基本構造

要素
HTMLの要素とは大きく分けて「見出し」「本文」、さらに「段落」「リスト」「リンク」「テーブル」などです。
要素はブロック要素とインライン要素に分けられます

例 要素
<title>webサイト制作</title>の『title』が要素です。
<a href=”images/dog.png”>愛犬</a>の『a(アンカーリンク)』が要素です。
<p style=”color: red;”>~『p』は段落を表していますが、これもまた要素です。

などなど。
要素の中には属性と値が含まれるものがあります。

タグ

タグは要素を『<』と『>』挟んで表します。

HTMLは開始タグ『<要素>』と終了タグ『</要素>』で構成されています。
終了タグで終わらせないと、うまく反映出来ない場合がありますのできちんと
終了タグで終わらせるように心がけましょう。
なかには、「空要素」と言って終了タグを持たない要素があります。

空要素と呼ばれるものは、10個に満たないので使う時に覚えた方が良いでしょう。
私はよく『終了タグ』で記述漏れ失敗しました。

「開始タグ」と「終了タグ」は1か所『/』スラッシュが着くかつかないだけなので、コピペして終了タグに『/』スラッシュを付け忘れて最後まで分からなかったっていうことがありました。
結局のところ、友達の指摘で分かったということが何度もありました。

HTMLの基礎のイメージ図

HTMLの基礎の画面

HTMLの構造

HTMLの構造は<html>~~~</html>の中に<head>と<body>を入れます。

<head>~~~</head>の中に、メタ情報やタイトルなどを入れます。
<body>~~~</body>の中にはサイト内容が入ります。

<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title>タイトル</title>
</head>
<body>
本文
</body>
</html>

このページのトップへ

 

HTMLのバージョン

現在、HTMLのバージョン5です。
4.01は<!doctype html public”-//w3c//…”>
と、長いdoctype宣言でした。

Windows10では、Windowsアクセサリーの中にメモ帳があります。
では、
<!doctype html>と書きます。
document(文書) + type(タイプ)
これは文書型宣言と言います。

HTML5の宣言

HTML5というからにはHTML4、HTML3というのがあると想像できるでしょう。
そうです、HTML5の前にHTML4.01があったのです。
今もあるのですが…(笑)
下に記述したのが、HTML4.01の文書型宣言なのですがブラウザの進化につれて
HTMLの文書型宣言も簡素化されてすっきりしたのです。
今では、<!doctype html>だけ記述すればHTML5の宣言となるのです。

HTML4.01の文書型宣言

HTML4.01では、構造と見栄えの分離を目指しつつも、当面は旧バージョンとの互換性も考慮しようという姿勢から、3種類の文書型定義が用意されました。この3種類の文書型宣言の書式はそれぞれ次のようになります。

HTML4.01 Stict DTD

もっとも厳密で正確な仕様です。非推奨の要素や要素は除かれており、フレームも使用することはできません。HTML文書を作成するにあたってはこのDTDにしたがうのがもっとも望ましいのですが、厳しい制約があるため、文書の作成も難しくなります。

HTML4.01 Transitionnal DTD

上記のStrict DTDに、非推奨の要素・属性が加えられています。しかし、インラインフレーム以外のフレームを使うことはできません。Strict DTDに比べて扱いやすいDTDですが、従来のバージョンとの互換性を考えた移行用の仕様であり、廃止される予定の要素や属性が含まれていることに注意する必要があります。

HTML4.01 Frameset DTD

上記のTransitional DTDにフレームが加わったものです。

ブラウザとは、インターネットを開く時に反映された画面のことです。
Windowsですとインターネットエクスプローラーが標準装備されています。
他には、クローム(Google)やサファリ(safari)などがあります。
HTML5で書くことを宣言したら、
次いで

<!doctype html>
< html >
< head>
< /head>
< body>
< /body>
< /html>
と、記述し、メモ帳を保存してください。
「上書き保存」と「名前を付けて保存」とで二種類の保存があります。
「名前を付けて保存」でファイル名とファイルの種類を選んで保存してください。
ファイル名は「index.html」と記述し、ファイルの種類は「すべてのファイル(*.*)」で保存します。

HTML5は<doctype>だけでよくなりました。

HTMLの基礎のイメージ図

HTMLの基礎の画面

このページのトップへ

文書情報を記述

<meta>タグを使います。
<head>の中へ記述します。

文字コードは<meta charset=”~”>で指定します。
ここでは『utf-8』を指定しています。

さらに「著者」「キーワード」「文書の概要」を記述することができます。

<meta name=”~” content=”~”> の形で記述します。

<meta>で括り付けられているものを、メタ情報とよびます。
<head>の中の、ほとんどの部分は表面には出ないですけど、サイトの重要な情報の記載があります。

HTMLの基礎のイメージ図

HTMLの基礎の画面

このページのトップへ

文書にタイトル

<head>中の<title>がタイトルになります。

すでに気づいた方もいるかと思いますが、『ウェブサイト制作の練習』と記述されているのがタイトルです。

<title>~~</title>タグ内に指定されたものが、ブラウザのタイトルバーで表記されます。
開始タグと終了タグで閉じることを忘れてはいけません。
もう一つ大事なのは、文字コードです。
漢字が表示できる文字コードは数種類あります。
「shift-jis」、「unicode」、「utf-8」等があります。
文字コードの種類を決めてから、タイトルを書かないと文字化けを起こす可能性があります。

<meta>で括り付けられているものを、メタ情報とよびます。
メタ情報は表面にはでないけど、サイトの重要な部分でもあります。

HTMLの基礎のイメージ図

HTMLの基礎の画面

このページのトップへ

範囲の指定

範囲の指定は<div>と<span>を使います。
これだけでは意味を持たないのですが、id属性やclass属性などを付けることで、名前やスタイルを指定することができます。

このページのトップへ

スタイルを整えたい(1)

HTMLのスタイルとは、文章や文学作品の表現形式です。
スタイルを指定する方法が3つあります。
ここでは<head>内、
<style>属性で指定する方法を2つ紹介します。
1)<head>
2)<style>

このページのトップへ

スタイルを整えたい(2)

外部CSSファイル

3つ目のスタイルを指定する方法を紹介します。
それは、CSSファイルを使う方法です。
CSSとはCascading Style Sheetの略です。
外部ファイルとは、HTMLファイルとは別のところということです。

外部CSSファイルを作るには

新しいフォルダにCSSと記入して保存してください。
その中に『style.css』を作ります。
最後にlinkを張ります。

相対パスと絶対パス

相対パスとは自分のいる階層から、行きたい目的地までのパス(道順)となります。

[上位フォルダ]、[同位フォルダ]、[下位フォルダ]
上位を表すには『../』
同位フォルダにはなにもつけず
下位フォルダ『/』をつけます。

下の図を見てください。
今、Aにいて、
画像ファイル2の所行きたい。
となると、以下なパス(道順)になります。

HTMLファイルA~画像フォルダ~画像ファイル2は
『画像フォルダ / 画像ファイル2』となります。
絶対パスは自分がどこにいようとも、変わらないパス(道順)のことで、
例えば
https://www.yahoo.co.jp
と打てばいつでも、ヤフーのHPにいけます。
この様に、URLを打ち込めば、目的のサイトへいけます。

 

このページのトップへ



コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA