FC2ブログ

スポンサーサイト

  1. トップ
  2. スポンサー広告
  3. スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 | コメントを書いてくれる人はこちら(-) | トラックバック(-) | [編集]
このページのトップへ移動する。

職業訓練WEBクリエーター科10日目

  1. トップ
  2. HTMLの直接入力について
  3. 職業訓練WEBクリエーター科10日目

職業訓練WEBクリエーター科10日目

感想

今日からは自分でHTMLタグの記述とCSSの設定をする学習に移った。

いかにDreamweaveとゆうソフトがありがたいのかを今日は身をもって体験した。

1コマ目

簡単な先生の自己紹介・・・先生の担当はWEBのネットワーク関連とHTML・CSSが担当分野だそうだ。

この3日間で使用する教科書  HTMLとスタイルシートによるWEBサイト作成術

HTMLとは?

WEBページの記述言語・・・これは英語や日本ごのように、コンピューターがわかるようにしたいわばコンピューター語です。

おもに、ページの構文(内容)などを記述する言語です。

CSSとは?

書式の指定する言語

これは、HTMLで記述した文章の書式(文字の大きさや字体など)を指定するために使います。

最近では、見栄えのデザインに使用している。

HTMLでは、構文CSSでデザインを決める感じかな。

サイト作りのコツ WEBサイト作成術 P24~30

サイトを作るために、自分の気になっている内容などを見つける。

存在するサイトを調べて「まだないサイト」をみつける

2コマ目

サイトの構成を考える WEBサイト作成術 P31~36

ブレインストーミング・・・とりあえず思い当たる内容を挙げていく。

フォルダ分け・・・思いついた内容をフォルダごとに整理する。

見やすいサイト名(英語などわかりにくいタイトルをつけない)・・・タイトルを見てなにについて書かれているサイトなのかわかりやすくする。

WEBサイトを作るのに必要なソフト WEBサイト作成術 P42~45

WEBブラウザ・・・インターネットを見るためのソフト。 例、インターネットエクスプローラ・ファイアーフォックス等。

テキストエディタ・・・HTMLを記述できるソフトで、windowsではメモ帳で、WEBデザインソフトでは、Dreamweave等がある。

グラフィックソフト・・・画像を加工するソフトで、windowsではペイントWEBデザインソフトでは、Fireworks等がある。

FTPソフト・・・WEBページをネットワーク上のサーバーにアップロードするためのソフトで、代表的なのが、フリーソフトのFFFTPがある。

ページの作成 WEBサイト作成術 P46~49

今回作成に使用したソフトは、フリーソフトのTeraPadとゆうテキストエディタを使用しました。

windowsメモ帳でも作成できるのですが、フリーソフトのTeraPadのほうが使いがってがよいので、作成しました。

ページの雛形の作成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">・・・現在のHTMLのバージョンの記述
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">・・・メタタグでこの部分は文字コードの記述
     <title>タイトル</title>・・・タイトルの記述
   </head>
   <body>
    <p>ここに段落を挿入</p>・・・ここから本文
   </body>
</html>

HTMLの構文を作成する際に、決まった文章を記述する必要があるので、これの作成を行いました。

以降HTMLのデータを作成する場合はこの雛形を利用して作成します。

3コマ目

メタダグ WEBサイト作成術 P58~60

メタタグとは実際にはWEBページ上では表示されませんが、HTMLのより詳細の情報をより的確に指示するために使用します。

どんなコンピューターの環境でも文字が表示されるように、どの文字コードで書いてるか記述する。

文字コードにはいくつかの規格があり現在3種類の文字コードが広く使われている。

Shift-JIS・・・ウィンドウズ系のパソコンで広く使われている文字コード

EUC・・・UNIXやMACなどのOSで広く使われている文字コード

Unicode(UTF-8)・・・世界共通の文字コードにしようと最近広まってきた文字コード

文字コードとは、コンピュータで認識文字を認識するためにあらかじめ決められた数字のコード

Aは65番等決められている。

これが、規格によって異なる。

なので、インターネットのソースを表示すると、時々文字化けするソースがでてくるのもこのためである。

HTMLのルール WEBサイト作成術 P63~67

<!--コメント-->で囲むと、コメントになり、ブラウザ上では表示されないので、メモ(ここに何を表示しているか等)を入れるとソースがわかりやすくなる。

タグの中にはブラウザによっては対応していないタグがあり、対応していないタグは無視して表示される。

4コマ目

トップページの作成 WEBサイト作成術 P70~76

トップページは必ずindex.htmlにする。

半角スペースの入力はほとんどブラウザで表示されない。

使用タグ一覧

・・・段落

br・・・改行

hr・・・水平線

見出しを作るには WEBサイト作成術 P77~80

見出しにはh1~h6までレベルがある。

1が大見出しで6にいくにつれて小見出しになっていく。

文字の表示の大きさは各ブラウザによって異なる。

スタイルシートを作成・保存 WEBサイト作成術 P82~P86

スタイルシートの記述はこんな感じ

/*bodyの要素*/・・・/*~*/で囲った部分はコメントなので、表記されない
body{
background-color : #bf8;・・・設定の終わりには必ずセミコロンを入れる
}
/*h1の要素*/
h1 {
background-color : #350;
color : #fff
}

background-colorは背景色の設定

colorは文字色設定

#bf8は色を16進数で表示されている。

1~9までは、1~9

10~16までは、a~fで表記されている。

色の指定順番は、左から赤・緑・青の順番である。

なので、#bf8は赤が11・緑が15・青が8なので、白色に近い黄緑色の設定となる。

5コマ目

CSSをindex.htmlにリンクさせる。 WEBサイト作成術 P85~86

index.htmlのヘッダタグの中に

<meta http-equiv="Content-Style-Type" content="text/css">・・・メタタグで、CSSの種類を設定する記述
<link rel="stylesheet" href="nogizaka.css" type="text/css">・・・CSSのリンクを張る記述

を入れる。

HTMLに直接CSSを埋め込む WEBサイト作成術 P94

ヘッダに直接

<style type="text/css">
h1 {
background-color : #000;
color : #fff
}
</style>

のように<style type="text/css"></style>の間にCSSを記述する方法

タグの中で直接指定する方法 WEBサイト作成術 P94

<h1 style="background-color : #00f">
乃木坂周辺案内へようこそ
</h1>

のように記述する。

CSSの使い勝手 WEBサイト作成術 P95

CSSファイルを作成して使用すると、1つのファイルで共有してページを作ることができるので、統一感ができてくる。

その中でも、個別に設定したい時などは、直接タグを記述すると便利

なので、全体のページレイアウトはCSSファイル・ある一部分の装飾は直接CSSを記述する方法が便利。

CSSファイルの2つ以上のリンクについて WEBサイト作成術 P88~89

同じ部分での書式設定があった場合、優先順位は、後にリンクされたCSSの方が優先される。

CSSファイルのコメントの入れ方 WEBサイト作成術 P93

/*と*/で囲まれた部分はCSSでコメント表示になるので、反映されない。

6コマ目

CSSファイルのクラス設定 WEBサイト作成術 P96~97

/*クラスの要素*/
.head{・・・クラスの名前は任意。
background-color : #fff;
}
/*クラスの要素*/
.contents{・・・クラスの名前の前にピリオドをつける。
background-color : #fb5;
}
をCSSファイルを記述

index.htmlの記述は、

<p class="head">・・・クラスの名前
「乃木坂周辺案内」は、乃木坂の周りを紹介するサイトです。
</p>
<p class="contents">・・・ピリオドは外す
乃木坂の周辺・・・乃木坂駅と乃木公園<br>
乃木坂の歴史<br>
このサイトと作者について
</p>

と変更するとクラスを設定すると反映される。

クラス指定の仕方 WEBサイト作成術 P97~99

タグの指定方法が様々あるので、教科書にわかり易く記述してあるので参照する。

クラスの名前は、内容の意味から作るとわかりやすくなる。

文字の大きさを指定する。 WEBサイト作成術 P100~103

h1{
background-color : #350;
color : #fff;
font-size : 3em;・・・ここがフォントサイズの設定の記述
}

文字の大きさ記述の設定は教科書 WEBサイト作成術 P101を参考にしてください。

種類はem・%・px・pt等がある。

px・ptはサイズがフォントサイズの大きさが変わらなくなるので、注意

 

スポンサーサイト
このページのトップへ移動する。

評価・感想を書いてくれた人の内容

この記事に対する評価・感想を投稿

管理者にだけメッセージを送る

トラックバック トラックバックURL:
http://hamacom.blog4.fc2.com/tb.php/32-65f4c973
サイズ変更ボタン サイズ縮小ボタン サイズ拡大ボタン サイズリセットボタン
RSSフィード

ブロとも申請フォーム
ブログ内検索

最近のエントリ
ユーザータグ
カレンダー

08 | 2018/09 | 10
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 - - - - - -

ハマーにメールを送る

私ハマーにご意見・ご感想・調べてほしい事・オススメサイト等ありましたら気軽にメールしてください。

最近のコメント
全ての記事を表示する
カテゴリー
QRコード

QRコード

覗いてくれた人

月別アーカイブ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。