Web・デザインスクールホームページ作成講座レッスンノート ホームページ作成の課題について

ホームページ作成の課題について

ホームページ作成講座のレッスンノート

レッスンノートって?レッスンノートって?

体験レッスンお疲れさまでした!

本日はご自身が受講されておられる
ホームページのレッスンで、
課題になっている部分をメインに
1つずつお教えいたしました。

まずは HTML の全般をしっかりと知っていただいて、
次に CSS を知っていただき、
ホームページのデザインを
学んでいく形になると思います。

1つずつ繰り返しながら、
実践して楽しみながら
学んでいってくださいね。



【ブログの作成について】

課題の中でブログを作られたいとのことでしたが、
どうしてもブログを入れるとなると
サーバに上げておく必要があります。

また、ブログのサービスも
インターネット上のものを
何かしら利用する必要があります。


ですので今回は、
個人のパソコン上のみで
簡易的にブログのページを作りました。

ただブログのサービスを使用しておりませんので、
新たな記事の更新をする際に
手動で最新記事一覧や記事一覧を作る必要があります。

index.html にある最新記事一覧は
3つ記事「日付とタイトル」を想定し、
そのしたに記事一覧ページを行くリンクをつけました。



【新規ページ作成について】

エディタ上で「複製」されてもよいですし、
作業フォルダ上でコピー&ペーストをされて
名前変更でも新規ページの作成ができます。

ファイル名をつける際には、
トップページは index.html index.php など、
index をつけるようになっています。

第二階層・中ページのファイル名は、
英語表記で出来るだけ汎用的なものを使用し、
単語をつなげる際には _ か - を使用します。

新規ページを作成しましたのなら、
該当の変更箇所を更新して、
ページを量産していきます。



【リンクの作成について】

リンクは a (アンカー)要素を使用します。
a (アンカー)要素の属性(中に入るもの)として、
href (ページの飛び先)・ target (新規ウィンドウ・タブの場合)があります。

作成しているフォルダ構成によって、
ページの飛び先を入力してください。
(例えば、今回のブログ記事が数十個になると、
段々管理が大変になります。
ですので1つ blog フォルダを作って
その中に記事入れるとすると…
blog/blog_0825.html みたいになります。)




【リストについて】

箇条書き・メモみたいな
リスト形式を ul li で
作ることができます。

ul の中には、
かならず li のみしか入りません。

li の中には、
結構自由に色々な要素(タグ)を
入れることができます。


今回の場合は、
ブログの記事一覧として
リストを使用しました。

このように、
メニュー一覧表記であったり
記事一覧などにリストは使われます。

結構よくつかわれますので、
しっかりマスターしておいてくださいね。



【テーブルの作成について】

オフィスのエクセルみたいに
table tr th td の要素(タグ)を使って
表組を作ることができます。

table の中には、
基本的に tr th td のみしか入りません。

また、 tr の中には、
th td のみしか入りません。

th td の違いは
th の方を見出しとして使い、
それに対応するデータを td として使うのが
一般的になっています。

th td の中には、
結構自由に色々な要素(タグ)を
入れることができます。


以前に比べると、
table を使う機会が減ってきてはいますが
まだまだ使えるところがあります。

ですので、
この table もしっかりと
マスターしておいてくださいね。



【画像を入れる方法】

今回はブログの記事の中に入れるという前提で
お話しさせていただきました。

幅と高さを揃えるだけで
統一感が生まれますので、
ぜひグラフィックソフトで
加工してください。

また画像を入れる際には、
img 要素(タグ)を使います。

img の属性として、
基本的に src width height alt が
そろってある感じになります。



【デザインの加工について】

もともとは、
HTML は文章の定義のみで、
外観のデザイン部分は CSS で
調整するのが強く推奨されています。

まだCSSを学ばれておられないとのことで、
今回は font 要素で文字の大きさと色を
変える方法をお伝えしました。

CSSを学ばれたのなら、
font 要素を使わずにできますので
ぜひ今後はCSSも学んでくださいね。
このレッスンノートを書いたコーチ

現場で培ったノウハウでHPクリエイターを育成!初心者や社会人の方も歓迎

ホームページクリエイター育成講座
藤田佳 (ホームページ作成)

梅田/大阪・甲子園口・西宮(JR)・摂津本山・三ノ宮・元町・神戸・垂水・西宮北口・甲...

レッスンノート ページ先頭へ

ホームページ作成情報

サイタのホームページ作成講師がブログを通して、ホームページ作成情報を発信。更新情報のチェックはこちらから!

twitter

ホームページ作成の先生

@HomepageCyta