HTML③【初心者向け30代40代からOK】
プログラミングの全体の構成
このページでは実際にホームページ制作の基盤になる一番簡単なHTMLを使ったプログラムを書いていこうと思います。
前回のHTML②では文字のみの画像だったので今回のHTML③ではしっかりとしたホームページらしい構成で作ります。
次の画像のような構成です。
body以降の中身が充実してきました。
ファイルはおのおの作ってプログラムを書いてもらえばよいですが、わからない人は基本的には前回のHTML②と比べると結構複雑になりましたが、これも慣れていきましょう。
こうしてみると随分ホームページらしくなってきていると思います。変更点はheaderを上に置き、下のbodyの構成を2分割してsideとcontentに分けます。
こういったホームページ構成を2カラムと言います。
コードはこのWebページの一番下に書いてあります。
そのままテキストエディタにコピペして表示することができます。
背景色などbackground-colorと書いてある部分を変更すれば色が変更できるので
2カラムのホームページの一つの例として参考にしていただければ幸いです。
フォルダとファイルを作る
次の写真を参考にフォルダとファイルを作っていってください。
まずweb-contentsフォルダを作ります。(フォルダの名前は何でもよいです)
その中にindex.htmlファイルを作り次のプログラムを書いていきます。
そのファイルを開いてもらえば上の図のようなホームページが出来ます。
単純なプログラムなのであくまでも参考程度です。
右クリック → 新規作成 → フォルダー → web-contentsのフォルダを作成
web-contentsフォルダをダブルクリックで開く → 右クリック → 新規作成 → index.htmlテキストファイルを作成
コピペ用HTMLとCSSプログラム
以下は参考用コードです。テキストエデタにコピペで完成品が見れます^^
HTML②【初心者向け30代40代からOK】
HTMLを入力
今度は実際にTeraPadというテキストエディタでプログラムを書いてみましょう。
最初は何のことやらサッパリわからん状態かもしれませんがそのうち慣れてきます。
普通に中2レベルの英語が分かれは大丈夫です^^
1. TeraPadを開く
2. TeraPadをダブルクリックして起動します。
そして次の画像のように書いてみましょう。
このプログラムを図にすると次のようになります。
頭の中でこのような図を浮かべることはHTMLを組む上では基本になっていきます。
ホームページをいくつか作っていけば意識しなくても自然と出来ていきますので心配いりません、がんがん作っていこう。
この図をほんの少し複雑にしていけばそれなりのホームページが出来てしまいますので覚えて損はないのでどんどん覚えていってからあとはブログに進むかHTMLで一から作るかを選択していくと思います。
3. 確認
テキストエディタから直接ブラウザを開いてプログラミングにミスが無いか確認してみよう。
尚、この確認でインターネットにアップロードされて他人に見られることはないので安心してください。
あくまでもあなたのパソコン内でのブラウザ表示です。
赤枠で囲ってあるInternet ExplorerかFirefox、どちらかのブラウザのアイコンをクリックしたらブラウザが開き、次のような画面が出たら成功です。
表示されるのはブラウザに表示されるのは「プログラミングを覚えよう」だけですね。
別の文字が出てたらどこかが間違っていますのでまた直しましょうね。
いかがでしょうか?
ブラウザに表示されているのは「プログラミングを覚えよう」だけでも前述したプログラミングの図をのままに構成になっています。
要するに<html></html>や、<body></body>などタグの部分は基本ブラウザに表示されません。
ただし</body>など書くのを忘れたりタグの閉じ忘れなどミスなどよくあったりするので気を付けよう。
ホームページ制作の話でしたらこの知識を基盤にHTMLのタグを必要なものを覚えるだけで十分に作れるようになります。
あとは良い画像素材を付けることができればそれなりのものが出来ますよ。
初心者のためのホームページ制作
初心者向けホームページ制作
このサイトは初歩のプログラミングであるHTML、CSS、PHPを解説します。
それ以外にもWebに関する事、例えばFTPソフトの設定、テキストエディタの設定などWebに関する基本を書いて行こうと思います。
プログラミングの基本が理解できればアフィリエイトをやるにしても集客アップの為のSEOの知識が得られるし、デザインの幅も広がり、より一層Webやってる感が得られて面白いです。
WordPressという便利なCMSやアメブロやこのはてなブログなどさまざまなブログサービスもありますが、WordPressやブログを書くにしてもHTMLやCSS、PHPなど知識があると細かい変更も自分で出来るようになります。
初歩からやっていきたいのですが徐々にバージョンアップして私自身の勉強の為や、もちろんこのサイトに来ていただいた方の為になればと思ってますのでよろしくお願いします。