パスとは、リンクするHTMLや画像などの位置を表すもの。
●絶対パス
ドメインを含めたファイルやフォルダまでのパスを指定する方式で「フルパス」ともいう。
●ルートパス
ドメインを含まないルート(最上位階層)からファイルやフォルダまでパスを指定する方式。
記述の際は/スラッシュから始める。
●相対パス
起点となる位置から、リンクするファイルやフォルダまでのパスを指定する方式。
2010年8月15日日曜日
構造と体裁の分離
情報そのものや文章構造(段落、見出し、本文に該当する個所をタグで囲む)はHTML文書に格納し
レイアウト、色見た目のデザイン的要素についてはCSSにまとめて記述する。
☆HTMLの構造
大きく分けて<head>と<body>の二つの要素で構成されている。
<body>の中身がブラウザで表示される領域。
☆CSSの構造
外部ファイル化したCSSファイルは、HTMLファイルからリンクして、タグにID属性、またはCLASS属性を指定してスタイルと関連付ける。
CSSのスタイルを適用する対象をセレクタといい、セレクタにはプロパティと値をセットで指定する。
セレクタを指定するときは,(カンマ)で区切り
プロパティを複数指定するときは;(セミコロン)で区切る。
ID属性は、タグ一つに対して一つしかして出来ない。
CLASS属性は、タグ一つに対して複数指定できるため、属性値もHTML内に複数指定できる。
header,contents,footerなどの固有のグループはID属性。その中で分類されたスタイルはCLASS属性。
記述の際は、属性値の先頭に#を付ける。CLASSは先頭に.を付ける。
☆ブロックレベル要素とインライン要素
ブロックレベル要素はグループや段落など前後に改行が入る要素。
インライン要素は文中の一部分に対して、意味づけや書式設定を行う要素。
レイアウト、色見た目のデザイン的要素についてはCSSにまとめて記述する。
☆HTMLの構造
大きく分けて<head>と<body>の二つの要素で構成されている。
<body>の中身がブラウザで表示される領域。
☆CSSの構造
外部ファイル化したCSSファイルは、HTMLファイルからリンクして、タグにID属性、またはCLASS属性を指定してスタイルと関連付ける。
CSSのスタイルを適用する対象をセレクタといい、セレクタにはプロパティと値をセットで指定する。
セレクタを指定するときは,(カンマ)で区切り
プロパティを複数指定するときは;(セミコロン)で区切る。
ID属性は、タグ一つに対して一つしかして出来ない。
CLASS属性は、タグ一つに対して複数指定できるため、属性値もHTML内に複数指定できる。
header,contents,footerなどの固有のグループはID属性。その中で分類されたスタイルはCLASS属性。
記述の際は、属性値の先頭に#を付ける。CLASSは先頭に.を付ける。
☆ブロックレベル要素とインライン要素
ブロックレベル要素はグループや段落など前後に改行が入る要素。
インライン要素は文中の一部分に対して、意味づけや書式設定を行う要素。
2010年8月10日火曜日
WEBサイト制作の流れ
代表的なフロー
・制作依頼
・オリエンテーション
・提案書類作成
・プレゼンテーション
・正式発注
・仕様フィックス
・スタッフミーティング
・HTMLワイヤーフレーム
・全ページデザイン
・マークアップ・スクリプティング
・サイトプレビュー
・校了
WEBサイト公開
運営フェーズ
●制作依頼
要望をきちんと理解することが大切。
ヒヤリングシートの作成
・制作依頼
・オリエンテーション
・提案書類作成
・プレゼンテーション
・正式発注
・仕様フィックス
・スタッフミーティング
・HTMLワイヤーフレーム
・全ページデザイン
・マークアップ・スクリプティング
・サイトプレビュー
・校了
WEBサイト公開
運営フェーズ
●制作依頼
要望をきちんと理解することが大切。
ヒヤリングシートの作成
WEB製作の現場
●アカウント・企画営業
アカウントとは口座という意味ももつ。
クライアントとのコミュニケーションを担当する部署。
お客様担当窓口
●プロジェクトマネージャー
プロジェクトマネージャー・・・プロジェクトをマネジメントする人
プロデューサー・・・仕事自体を作り出す人
クライアントとの予算交渉、工数管理、スケジュール管理、クオリティ管理
●ディレクター
映画でいうと監督
・クリエイティブディレクター・・・・表現を含めたクリエイティブ全体
・アートディレクター・・・・表現
・テクニカルデイレクター・・・・主にテクニカルフェーズ
・アカウントディレクター・・・・クライアントコミニケーション
●WEBデザイナー
●マークアップエンジニア
仕様が固まったデザインをhtmlやCSSといった言語でマークアップする。
●FLASHエンジニア
FLASHでのオーサリング(文書、画像、音楽、動画などのデータを編集し加工する作業)を行う。
●プログラマー
PHP,JAVAなどのサーバサイドのプログラミングを行う仕事。
●アシスタント
アカウントとは口座という意味ももつ。
クライアントとのコミュニケーションを担当する部署。
お客様担当窓口
●プロジェクトマネージャー
プロジェクトマネージャー・・・プロジェクトをマネジメントする人
プロデューサー・・・仕事自体を作り出す人
クライアントとの予算交渉、工数管理、スケジュール管理、クオリティ管理
●ディレクター
映画でいうと監督
・クリエイティブディレクター・・・・表現を含めたクリエイティブ全体
・アートディレクター・・・・表現
・テクニカルデイレクター・・・・主にテクニカルフェーズ
・アカウントディレクター・・・・クライアントコミニケーション
●WEBデザイナー
●マークアップエンジニア
仕様が固まったデザインをhtmlやCSSといった言語でマークアップする。
●FLASHエンジニア
FLASHでのオーサリング(文書、画像、音楽、動画などのデータを編集し加工する作業)を行う。
●プログラマー
PHP,JAVAなどのサーバサイドのプログラミングを行う仕事。
●アシスタント
クライアントサイドスクリプト
動的なページを作るには「java script」や「action script」などのスクリプト言語
そして「php」「java」などのプログラミング言語がある。
javascriptはクライアントであるブラウザ側
phpはwebサーバ側サーバサイドで動作する言語
そして「php」「java」などのプログラミング言語がある。
javascriptはクライアントであるブラウザ側
phpはwebサーバ側サーバサイドで動作する言語
クライアント・サーバー
サービスを提供する役目を果たすコンピューターのことをサーバ
サービスを受ける側をクライアントという。
●ISP(internet services provider)
インターネット接続業者
●IPアドレス
サーバーの住所のこと
●ドメイン名
IPアドレスにニックネームをつけたようなもの わかりやすい
●DNSサーバー(domain name system)
ドメイン名をIPアドレスに読み替える
●WEBサーバー
メールサーバやWEBサーバー、DNSサーバはソフトウエア
世界でもっとも多く使われているWEBサーバは「apache HTTp server」通称アパッチ
●HTTP
httpとは、ブラウザとWEBサーバーで「これからWEBコンテンツのデータのやり取りをしますよ」
と宣言すること
「ブラウザでWEBページを閲覧する」というアクションは、「クライアントであるパソコンのブラウザからWEBサーバに対して特定のファイルを要求し、受け取って表示する」ということ
サービスを受ける側をクライアントという。
●ISP(internet services provider)
インターネット接続業者
●IPアドレス
サーバーの住所のこと
●ドメイン名
IPアドレスにニックネームをつけたようなもの わかりやすい
●DNSサーバー(domain name system)
ドメイン名をIPアドレスに読み替える
●WEBサーバー
メールサーバやWEBサーバー、DNSサーバはソフトウエア
世界でもっとも多く使われているWEBサーバは「apache HTTp server」通称アパッチ
●HTTP
httpとは、ブラウザとWEBサーバーで「これからWEBコンテンツのデータのやり取りをしますよ」
と宣言すること
「ブラウザでWEBページを閲覧する」というアクションは、「クライアントであるパソコンのブラウザからWEBサーバに対して特定のファイルを要求し、受け取って表示する」ということ
2010年8月4日水曜日
body要素に含める内容
body要素に含める内容
大きく二つ
・ブロックレベル要素・・・一つの独立したまとまりのこと、見出し(h1-h6)、パラグラフ(p)
リスト(ul,ol,dl),表(table)など。
・インライン要素・・・・・行内の一部という意味、アンカー(a)画像(img)強調(em,strong)など
代表的なブロックレベル要素について
・h1-h6要素(見出しレベル1-6)
h1要素は大見出し
h2要素は中見出し
h3要素は小見出し
・P要素(パラグラフ)
文章のひとかたまりのこと。
・blockqoute(引用文)
テキストをまとまった引用文として定義するために利用する
・address要素
WEBページのフッター部分で作成者の連絡先、著作権情報を指定する。
.ul要素(順不同リスト)
項目を順不同で並列的に列挙するタイプのリスト
・ol要素(順序リスト)
順序や順番として定義
.dl要素(定義リスト)
用語と内容で構成するタイプのリスト
・table要素(表)
表のなかのひとつひとつをセル
横方向のセルの並びをrow
縦方向のセルの並びをcolumnと表現する。
table要素で全体を囲み
tr要素で行を定義し
内容としてヘッダセルであるth要素か、データセル(通常のセル)であるtd要素を含める。
今日はここまで
大きく二つ
・ブロックレベル要素・・・一つの独立したまとまりのこと、見出し(h1-h6)、パラグラフ(p)
リスト(ul,ol,dl),表(table)など。
・インライン要素・・・・・行内の一部という意味、アンカー(a)画像(img)強調(em,strong)など
代表的なブロックレベル要素について
・h1-h6要素(見出しレベル1-6)
h1要素は大見出し
h2要素は中見出し
h3要素は小見出し
・P要素(パラグラフ)
文章のひとかたまりのこと。
・blockqoute(引用文)
テキストをまとまった引用文として定義するために利用する
・address要素
WEBページのフッター部分で作成者の連絡先、著作権情報を指定する。
.ul要素(順不同リスト)
項目を順不同で並列的に列挙するタイプのリスト
・ol要素(順序リスト)
順序や順番として定義
.dl要素(定義リスト)
用語と内容で構成するタイプのリスト
・table要素(表)
表のなかのひとつひとつをセル
横方向のセルの並びをrow
縦方向のセルの並びをcolumnと表現する。
table要素で全体を囲み
tr要素で行を定義し
内容としてヘッダセルであるth要素か、データセル(通常のセル)であるtd要素を含める。
今日はここまで
2010年8月3日火曜日
マークアップの種類
どのコンテンツをどの要素でマークアップするか・・・
head要素に含まれる内容
・title要素(ページタイトル)
head要素の中でただ一度だけ指定する。必ず。
ビジュアルブラウザの「タイトルバー」に表示される。
・meta要素(メタ情報)
そのWEBページ自体の情報を定義する。
http-equiv属性をした場合、サーバーに対してHTTPレスポンスヘッダと等しい情報を追加または、優先 的に指示を出すことになる。
name属性を指定した場合、WEBページの「概要文」や「キーワード」など、製作者側が指定したいデータ をメタ情報として定義することになる。
どちらの属性でもcontent属性を併用して具体的な内容を値として含める。
・link要素
そのWEBページから見て他のページがどのような役割かを定義する。例えば目次やヘルプにあたるWEBペ ージ、スタイルシートファイルやRSSファイルのプログラミング言語によるページなどを指定する。
rel属性で関係
href属性でURL
type属性でMIMEタイプ
media属性でメディアタイプなどを指定する
・style要素(スタイルシート)
CSSのソースコードや外部ファイルを指定する。
link要素で指定するのが一般的。外部ファイルを参照するのが望ましい
・script要素(スクリプト)
JAVAscriptなどのソースコートや外部ファイルを指定する。
meta要素のname属性での指定内容
descripution概要文
keywordsキーワード
copyright著作権情報
author 作成者
reply-to連絡先メール
date日付 日付(更新日)
robots検索クローラーの指示
link要素のrel属性での指定内容
alternate代替ページ
stylesheet外部スタイルシート
start開始ページ
next 次のページ
prev 前のページ
contents 目次
index 索引
glossary 用語集
copyright 著作権情報
chapter 章
section 節
appendix 付録
help ヘルプ
bookmark ブックマーク
今日はここまで
head要素に含まれる内容
・title要素(ページタイトル)
head要素の中でただ一度だけ指定する。必ず。
ビジュアルブラウザの「タイトルバー」に表示される。
・meta要素(メタ情報)
そのWEBページ自体の情報を定義する。
http-equiv属性をした場合、サーバーに対してHTTPレスポンスヘッダと等しい情報を追加または、優先 的に指示を出すことになる。
name属性を指定した場合、WEBページの「概要文」や「キーワード」など、製作者側が指定したいデータ をメタ情報として定義することになる。
どちらの属性でもcontent属性を併用して具体的な内容を値として含める。
・link要素
そのWEBページから見て他のページがどのような役割かを定義する。例えば目次やヘルプにあたるWEBペ ージ、スタイルシートファイルやRSSファイルのプログラミング言語によるページなどを指定する。
rel属性で関係
href属性でURL
type属性でMIMEタイプ
media属性でメディアタイプなどを指定する
・style要素(スタイルシート)
CSSのソースコードや外部ファイルを指定する。
link要素で指定するのが一般的。外部ファイルを参照するのが望ましい
・script要素(スクリプト)
JAVAscriptなどのソースコートや外部ファイルを指定する。
meta要素のname属性での指定内容
descripution概要文
keywordsキーワード
copyright著作権情報
author 作成者
reply-to連絡先メール
date日付 日付(更新日)
robots検索クローラーの指示
link要素のrel属性での指定内容
alternate代替ページ
stylesheet外部スタイルシート
start開始ページ
next 次のページ
prev 前のページ
contents 目次
index 索引
glossary 用語集
copyright 著作権情報
chapter 章
section 節
appendix 付録
help ヘルプ
bookmark ブックマーク
今日はここまで
2010年7月28日水曜日
2010年7月12日月曜日
背景の色を決めるタグ
タグ・・
タグ・・
奥深いぜタグ
今日は背景の色を決めるタグを学んだ。
HTML
<background:#ff0000 url(ほにゃらら)>
#の部分が色を指定するらしい
ほにゃららは画像を指定するらしいがなんの画像だろう?
まあいいか
タグ・・
奥深いぜタグ
今日は背景の色を決めるタグを学んだ。
HTML
<background:#ff0000 url(ほにゃらら)>
#の部分が色を指定するらしい
ほにゃららは画像を指定するらしいがなんの画像だろう?
まあいいか
2010年7月7日水曜日
いったん基礎に戻ろう
HTMLとスタイルシートがもうごっちゃになって
ようわからんくなってきたので
いったん基礎に戻ろうと思う。
基本的なスタイルの指定
●カラーコードの指定
h1 { color: #ff0000; }
→色をつけるときは、HTMLでプロパティを指定して
CSSで決定する感じかな
●ページの背景色を設定する
body{ background-color: 色; }
→部分的な要素にも指定できるらしい
段落に背景の要素を設定したい場合はP要素をセレクタに
指定する
今日はここまででせいっぱいでした。
なむ
ようわからんくなってきたので
いったん基礎に戻ろうと思う。
基本的なスタイルの指定
●カラーコードの指定
h1 { color: #ff0000; }
→色をつけるときは、HTMLでプロパティを指定して
CSSで決定する感じかな
●ページの背景色を設定する
body{ background-color: 色; }
→部分的な要素にも指定できるらしい
段落に背景の要素を設定したい場合はP要素をセレクタに
指定する
今日はここまででせいっぱいでした。
なむ
2010年7月6日火曜日
HTMLとCSSの関係性
HTMLとCSSの関係性
昨日は頭が破裂しそうなくらい
少ない脳みそがフル稼働だった。
HTMLで”この場所だよ”といういわゆる
”しるし”みたいなものをする
これはid=”ほにゃらら”
みたいにして置く
そのほにゃららを
色づけしたり
位置を指定してみたり
するのがCSSという言語だ
HTMLでidとしたものは
CSSで#とする。
なぜ#にするかはCSSの作成者にでも聞いてくれ
昨日覚えたのは
float:left
図で書かないとわかりにくいが
Aの隣に回りますよ(Aからみて左だからレフトだと思う)
という意味らしく
レイアウトの重要な部分だ
さあ今日からレイアウトの最終調整と
細かい部品つくりだ!!
昨日は頭が破裂しそうなくらい
少ない脳みそがフル稼働だった。
HTMLで”この場所だよ”といういわゆる
”しるし”みたいなものをする
これはid=”ほにゃらら”
みたいにして置く
そのほにゃららを
色づけしたり
位置を指定してみたり
するのがCSSという言語だ
HTMLでidとしたものは
CSSで#とする。
なぜ#にするかはCSSの作成者にでも聞いてくれ
昨日覚えたのは
float:left
図で書かないとわかりにくいが
Aの隣に回りますよ(Aからみて左だからレフトだと思う)
という意味らしく
レイアウトの重要な部分だ
さあ今日からレイアウトの最終調整と
細かい部品つくりだ!!
2010年7月5日月曜日
いよいよホームページを作る
いよいよホームページを作ろうと思う
というかご依頼をいただいたのでそちらを優先しつつ
勉強したものをアップしていきたい。
ホームページは
HTMLで内容を固め
CSSでレイアウトなどを調整したりする
のようだ。
画像を壁紙に設定する方法を学びました。
CSS
body { background-image: url(ファイル); }
このかっこの中にファイル名を入れて
CSSと同じファイルに画像を入れておくと
背景を画像に設定できる。
というかご依頼をいただいたのでそちらを優先しつつ
勉強したものをアップしていきたい。
ホームページは
HTMLで内容を固め
CSSでレイアウトなどを調整したりする
のようだ。
画像を壁紙に設定する方法を学びました。
CSS
body { background-image: url(ファイル); }
このかっこの中にファイル名を入れて
CSSと同じファイルに画像を入れておくと
背景を画像に設定できる。
2010年6月30日水曜日
ジャバスクリプト
次に
javascript
隠れキャラみたいに
なんとなくいろんな場所に出てきたので
文字だけは知っていたが
意味がわからなかった
javascript
WEB上でインタラクティブな表現をする為に開発されたオブジェクト指向のスクリプト言語(簡易プログラミング
言語)
HTML内にプログラムを埋め込むことで、Webページに様々な機能を付加できる(Webブラウザの動作を
定義できる)為、HTMLやCSSでは表現できないユーザーの動きに応じたものを作ることができる。
(マウスの動きにあわせてデザインが変化する複雑なWEBページを作り出すことができる。)
従来Webページは、印刷物(紙に印刷された本)のような静的な表現しか作れなかったが、
JavaScriptの登場により幅広い表現(動的表現)が可能
※ スクリプト言語
コンピュータを制御する為のルールをまとめたもので、このルールに従って記述された命令の集まりのこと
スクリプトはプログラムと同じような働きをするが、プログラムよりも仕組みが単純。
ようは
「動き」
のことかな?
javascript
隠れキャラみたいに
なんとなくいろんな場所に出てきたので
文字だけは知っていたが
意味がわからなかった
javascript
WEB上でインタラクティブな表現をする為に開発されたオブジェクト指向のスクリプト言語(簡易プログラミング
言語)
HTML内にプログラムを埋め込むことで、Webページに様々な機能を付加できる(Webブラウザの動作を
定義できる)為、HTMLやCSSでは表現できないユーザーの動きに応じたものを作ることができる。
(マウスの動きにあわせてデザインが変化する複雑なWEBページを作り出すことができる。)
従来Webページは、印刷物(紙に印刷された本)のような静的な表現しか作れなかったが、
JavaScriptの登場により幅広い表現(動的表現)が可能
※ スクリプト言語
コンピュータを制御する為のルールをまとめたもので、このルールに従って記述された命令の集まりのこと
スクリプトはプログラムと同じような働きをするが、プログラムよりも仕組みが単純。
ようは
「動き」
のことかな?
2010年6月29日火曜日
HTMLとCSS
HTMLでWEBページを構造化し
CSSで見栄えを指定する。
XHTMLとはXMLの論理的厳密性を備えつつ
HTMLの簡便性を活かしたもの
XHTMLはWEBページの構造
さっきいったか
見出し
パラグラフ
リスト
表(テーブル)
フォーム
に分けられるらしい。なにやらよくわからん
WEBページ内のコンテンツにそれぞれ役割を果たすことを
マークアップというらしい
XHTMLによるマークアップでは
要素
属性
属性値
で構成される。
要素の範囲を開始タグ
<要素名>と
終了タグ</要素名>
属性が以前勉強したhref
だとすると<a href>
要素と属性は半角あける事
属性と属性値はイコールで結び
属性値は引用符で囲むこと
<a href="http:">テキスト</a>
これでようやく完成でしょうか?
今までやってきたのって
XHTMLだったのね
今日は難しすぎた
CSSで見栄えを指定する。
XHTMLとはXMLの論理的厳密性を備えつつ
HTMLの簡便性を活かしたもの
XHTMLはWEBページの構造
さっきいったか
見出し
パラグラフ
リスト
表(テーブル)
フォーム
に分けられるらしい。なにやらよくわからん
WEBページ内のコンテンツにそれぞれ役割を果たすことを
マークアップというらしい
XHTMLによるマークアップでは
要素
属性
属性値
で構成される。
要素の範囲を開始タグ
<要素名>と
終了タグ</要素名>
属性が以前勉強したhref
だとすると<a href>
要素と属性は半角あける事
属性と属性値はイコールで結び
属性値は引用符で囲むこと
<a href="http:">テキスト</a>
これでようやく完成でしょうか?
今までやってきたのって
XHTMLだったのね
今日は難しすぎた
2010年6月28日月曜日
WEBコンテンツで使用する画像データ
前からようわからんと思っていたが
JPEGやらGIFやら
これ
いったいなんだ
って思ってたら
どうやら
ビットマップデータ形式の標準的なものらしい。
ふむ
なるほど
って
ビットマップデータ形式ってなんじゃい!!
ビットマップデータ形式とは
PCが描写可能な最小の色の点(ピクセル)が集まって出来たイメージのこと。
点の細密さは解像度という概念で表される。
うむ。
ようするに点ってことね。
それではJPEGの特徴を調べてみた。
代表的なものだが、
デメリットとして非可逆圧縮データであることと、
上書き保存するたびに圧縮が繰り返されるため
質が下がっていくこと。
オーマイがー!!
非可逆圧縮データってなんじゃい。
→なにかを犠牲につまりはデータの欠落と引き換えに
圧縮効率を高めた圧縮方式のこと
疲れた
JPEGやらGIFやら
これ
いったいなんだ
って思ってたら
どうやら
ビットマップデータ形式の標準的なものらしい。
ふむ
なるほど
って
ビットマップデータ形式ってなんじゃい!!
ビットマップデータ形式とは
PCが描写可能な最小の色の点(ピクセル)が集まって出来たイメージのこと。
点の細密さは解像度という概念で表される。
うむ。
ようするに点ってことね。
それではJPEGの特徴を調べてみた。
代表的なものだが、
デメリットとして非可逆圧縮データであることと、
上書き保存するたびに圧縮が繰り返されるため
質が下がっていくこと。
オーマイがー!!
非可逆圧縮データってなんじゃい。
→なにかを犠牲につまりはデータの欠落と引き換えに
圧縮効率を高めた圧縮方式のこと
疲れた
2010年6月23日水曜日
内容のグループ化2
というわけで前回は
レイアウトの基礎みたいなものを
学んだわけだが
次に
どのように配置するかを
リアルタイムで小川君に聞いてみようと思ったが
なにやら真剣にPCに向かっているが
関係なしにやはり聞いてみることにする。
まずスタイルシートの理解が必要
スタイルシートというのは
HTMLでつくった文章や型を
どのうように配置するかの言語でどうやらCSSというらしい。
もう2ヶ国語も発生しているので
石川の頭がとろけてきた。
そのCSSでは
HTMLでつくったものは常に縦にずら~と
連なってしまう。
それを解消するためにfloat機能をつかうらしい。
これを使うとAという集団とBという集団を
ABという風に並べたいとすると
フローと機能を使うと並んでくれるらしい・・・
なんだかよくわからなくなってきたな
もういいや寝る。
レイアウトの基礎みたいなものを
学んだわけだが
次に
どのように配置するかを
リアルタイムで小川君に聞いてみようと思ったが
なにやら真剣にPCに向かっているが
関係なしにやはり聞いてみることにする。
まずスタイルシートの理解が必要
スタイルシートというのは
HTMLでつくった文章や型を
どのうように配置するかの言語でどうやらCSSというらしい。
もう2ヶ国語も発生しているので
石川の頭がとろけてきた。
そのCSSでは
HTMLでつくったものは常に縦にずら~と
連なってしまう。
それを解消するためにfloat機能をつかうらしい。
これを使うとAという集団とBという集団を
ABという風に並べたいとすると
フローと機能を使うと並んでくれるらしい・・・
なんだかよくわからなくなってきたな
もういいや寝る。
内容のグループ化
HPにおいて内容のグループ化は大事らしい。
内容のグループ化?
果たしてどんなときにグループ化するのだろう
となりの小川師匠に聞いてみよう(生放送)
グループかっつうのは
ようは
レイアウト要素に使われる。
ヘッダーフッダー左メニュー右メニューなど
つまりはレイアウトの位置などをはっきりさせるものであると
小川師匠からお話いただきました。
それを表す言語がこちら
<div>ほにゃらら</div>
これが何個か並んでいて
<div>ほにゃらら1</div>
<div>ほにゃらら2</div>
<div>ほにゃらら3</div>
ほにゃらら1を左に
ほにゃらら2を真ん中に
ほにゃらら3をその下に
という指示を<div>の間に言語を入れて
レイアウトを完成させるらしい。
ひとまずはこのへんで
内容のグループ化?
果たしてどんなときにグループ化するのだろう
となりの小川師匠に聞いてみよう(生放送)
グループかっつうのは
ようは
レイアウト要素に使われる。
ヘッダーフッダー左メニュー右メニューなど
つまりはレイアウトの位置などをはっきりさせるものであると
小川師匠からお話いただきました。
それを表す言語がこちら
<div>ほにゃらら</div>
これが何個か並んでいて
<div>ほにゃらら1</div>
<div>ほにゃらら2</div>
<div>ほにゃらら3</div>
ほにゃらら1を左に
ほにゃらら2を真ん中に
ほにゃらら3をその下に
という指示を<div>の間に言語を入れて
レイアウトを完成させるらしい。
ひとまずはこのへんで
2010年6月22日火曜日
プロトコル
さっきでてきたプロトコル
ってなに?
IT用語辞典(http://e-words.jp/w/E38397E383ADE38388E382B3E383AB.html)
プロトコル 【protocol】 (ネットワークプロトコル)
ネットワークを介してコンピュータ同士が通信を行なう上で、相互に決められた約束事の集合。通信手順、通信規約などと呼ばれることもある。
英語しか使えない人と日本語しか使えない人では会話ができないように、対応しているプロトコルが異なると通信することができない。
人間同士が意思疎通を行なう場合に、どの言語を使うか(日本語か英語か)、どんな媒体を使って伝達するか(電話か手紙か)、というように2つの階層に分けて考えることができるが、コンピュータ通信においても、プロトコルの役割を複数の階層に分けて考える。
階層化することによって、上位のプロトコル(を実装したソフトウェア)は自分のすぐ下のプロトコルの使い方(インターフェース)さえ知っていれば、それより下で何が起きているかをまったく気にすることなく通信を行なうことができる。電話機の操作法さえ知っていれば、電話会社の交換局で何が起きているか知らなくても電話が使えるのと同じである。
プロトコルの階層化のモデルは国際標準化機構(ISO)や国際電気通信連合(ITU)などによって7階層のOSI参照モデルとして標準化されており、これに従ってプロトコルを分類することができる。
現在インターネットで標準となっているIPは第3層(ネットワーク層)の、TCPやUDPは第4層(トランスポート層)のプロトコルであり、HTTPやFTP、SMTP、POPなどは第5層(セッション層)以上のプロトコルである。
ああ階層とか上位とかもう意味わからん。
ルールみたいなもので
下にいくほど複雑なルールになってる。
ってかんじか?
もういいや
ってなに?
IT用語辞典(http://e-words.jp/w/E38397E383ADE38388E382B3E383AB.html)
プロトコル 【protocol】 (ネットワークプロトコル)
ネットワークを介してコンピュータ同士が通信を行なう上で、相互に決められた約束事の集合。通信手順、通信規約などと呼ばれることもある。
英語しか使えない人と日本語しか使えない人では会話ができないように、対応しているプロトコルが異なると通信することができない。
人間同士が意思疎通を行なう場合に、どの言語を使うか(日本語か英語か)、どんな媒体を使って伝達するか(電話か手紙か)、というように2つの階層に分けて考えることができるが、コンピュータ通信においても、プロトコルの役割を複数の階層に分けて考える。
階層化することによって、上位のプロトコル(を実装したソフトウェア)は自分のすぐ下のプロトコルの使い方(インターフェース)さえ知っていれば、それより下で何が起きているかをまったく気にすることなく通信を行なうことができる。電話機の操作法さえ知っていれば、電話会社の交換局で何が起きているか知らなくても電話が使えるのと同じである。
プロトコルの階層化のモデルは国際標準化機構(ISO)や国際電気通信連合(ITU)などによって7階層のOSI参照モデルとして標準化されており、これに従ってプロトコルを分類することができる。
現在インターネットで標準となっているIPは第3層(ネットワーク層)の、TCPやUDPは第4層(トランスポート層)のプロトコルであり、HTTPやFTP、SMTP、POPなどは第5層(セッション層)以上のプロトコルである。
ああ階層とか上位とかもう意味わからん。
ルールみたいなもので
下にいくほど複雑なルールになってる。
ってかんじか?
もういいや
それではネットとは
それではネットとはなんだろうか?
インターネットのことをネットと読んでいるらしいが
詳しくはなんだろう?
IT用語辞典(http://e-words.jp/w/E382A4E383B3E382BFE383BCE3838DE38383E38388.html)
インターネット 【Internet】
通信プロトコルTCP/IPを用いて全世界のネットワークを相互に接続した巨大なコンピュータネットワーク。
その起源は米国防総省の高等研究計画局(ARPA)が始めた分散型コンピュータネットワークの研究プロジェクトであるARPAnetであるといわれている。1986年に、ARPAnetで培った技術を元に学術機関を結ぶネットワークNSFnetが構築された。これが1990年代中頃から次第に商用利用されるようになり、現在のインターネットになった。
学術ネットワークの頃は主に電子メールやNetNewsが利用されていたが、ハイパーリンク機能を備えたマルチメディアドキュメントシステムWWWが登場すると、ビジネスでの利用や家庭からの利用が爆発的に増大し、世界規模の情報通信インフラとしての地位を得るに至った。
インターネットは全体を統括するコンピュータの存在しない分散型のネットワークであり、全世界に無数に散らばったサーバコンピュータが相互に接続され、少しずつサービスを提供することで成り立っている。
インターネット上で提供されるサービスやアプリケーション(WWWやFTP、電子メールなどの基本的なものからクレジット決済などの高度なものまで)は、そのほとんどがTCP/IPという機種に依存しない標準化されたプロトコルを利用しており、インターネット上では機種の違いを超えて様々なコンピュータが通信を行なうことができる。
ぐむむ
ネットを調べよと思ったら
よりたくさんのわからん単語が出てきた!!!!!!
ひとまず簡単に言うと
機種が違う
例えばファミコンとセガとを
結ぶ見えないもの
みたいなもんかな?
ネットを使い様々な言語を用いて整理したのが
WEBってところか?
違うか?
まあ
どっちでもいいか
インターネットのことをネットと読んでいるらしいが
詳しくはなんだろう?
IT用語辞典(http://e-words.jp/w/E382A4E383B3E382BFE383BCE3838DE38383E38388.html)
インターネット 【Internet】
通信プロトコルTCP/IPを用いて全世界のネットワークを相互に接続した巨大なコンピュータネットワーク。
その起源は米国防総省の高等研究計画局(ARPA)が始めた分散型コンピュータネットワークの研究プロジェクトであるARPAnetであるといわれている。1986年に、ARPAnetで培った技術を元に学術機関を結ぶネットワークNSFnetが構築された。これが1990年代中頃から次第に商用利用されるようになり、現在のインターネットになった。
学術ネットワークの頃は主に電子メールやNetNewsが利用されていたが、ハイパーリンク機能を備えたマルチメディアドキュメントシステムWWWが登場すると、ビジネスでの利用や家庭からの利用が爆発的に増大し、世界規模の情報通信インフラとしての地位を得るに至った。
インターネットは全体を統括するコンピュータの存在しない分散型のネットワークであり、全世界に無数に散らばったサーバコンピュータが相互に接続され、少しずつサービスを提供することで成り立っている。
インターネット上で提供されるサービスやアプリケーション(WWWやFTP、電子メールなどの基本的なものからクレジット決済などの高度なものまで)は、そのほとんどがTCP/IPという機種に依存しない標準化されたプロトコルを利用しており、インターネット上では機種の違いを超えて様々なコンピュータが通信を行なうことができる。
ぐむむ
ネットを調べよと思ったら
よりたくさんのわからん単語が出てきた!!!!!!
ひとまず簡単に言うと
機種が違う
例えばファミコンとセガとを
結ぶ見えないもの
みたいなもんかな?
ネットを使い様々な言語を用いて整理したのが
WEBってところか?
違うか?
まあ
どっちでもいいか
そもそもWEBってなんだ
インターネットで検索しかできない
31歳石川です。
さて
そもそも
WEBってなんだろう。
ネットってなんだろう。
あんまり使い分けてないけれど
グーグルで調べてみます。
PCオンラインより(http://pc.nikkeibp.co.jp/word/page/10019338/)
インターネットで情報を共有するためのシステムの一つ。インターネットの情報サービスといえば、Webを指すほど一般的な存在になっている。world wide webを省略した言い方であり、WWWともいう。
データ転送プロトコルのHTTP、文書の所在場所を指定するURL、文書記述言語のHTML、データの形式を指定するMIMEという4つの基本技術で成り立っている。文書の検索や閲覧にはInternet ExplorerやFirefoxといったWebブラウザーを使う。
Webで公開されている文書は、文書内にほかの文書を呼び出せるリンクが設定されている点が特徴。これにより管理者が異なるコンピューターの中にある情報同士を結び付けて扱うことが可能になっている。
1990年に欧州合同素粒子原子核研究機構(CERN)の研究員ティム・バーナース・リー(Tim Berners-Lee)氏らによって開発された。
ぐむむむむ・・・
むずかちい
要は情報サービスですよってことでいいのかな?
MIMEってやつが”もの”を包む包装紙みたいなもので
”もの”を書くためのえんぴつがHTML
住所がURL
運んでくれるのがHTTP
という感じか?
ますます
わからなくなったから
もういいや
31歳石川です。
さて
そもそも
WEBってなんだろう。
ネットってなんだろう。
あんまり使い分けてないけれど
グーグルで調べてみます。
PCオンラインより(http://pc.nikkeibp.co.jp/word/page/10019338/)
インターネットで情報を共有するためのシステムの一つ。インターネットの情報サービスといえば、Webを指すほど一般的な存在になっている。world wide webを省略した言い方であり、WWWともいう。
データ転送プロトコルのHTTP、文書の所在場所を指定するURL、文書記述言語のHTML、データの形式を指定するMIMEという4つの基本技術で成り立っている。文書の検索や閲覧にはInternet ExplorerやFirefoxといったWebブラウザーを使う。
Webで公開されている文書は、文書内にほかの文書を呼び出せるリンクが設定されている点が特徴。これにより管理者が異なるコンピューターの中にある情報同士を結び付けて扱うことが可能になっている。
1990年に欧州合同素粒子原子核研究機構(CERN)の研究員ティム・バーナース・リー(Tim Berners-Lee)氏らによって開発された。
ぐむむむむ・・・
むずかちい
要は情報サービスですよってことでいいのかな?
MIMEってやつが”もの”を包む包装紙みたいなもので
”もの”を書くためのえんぴつがHTML
住所がURL
運んでくれるのがHTTP
という感じか?
ますます
わからなくなったから
もういいや
2010年6月21日月曜日
箇条書きを作成しよう!
今日も小川師匠から学びましたことを
ご紹介させていただきます。
HTMLで
箇条書きをする方法です。
ホームページなどで
たくさん箇条書きをみかけるので
このタグは結構使えますな。
<ul>
<li>ああああああ</li>
<li>いいいいいい</li>
<li>うううううう</li>
</ul>
こんなん書くとよいみたいです。
ああ
今日も勉強なったな~
※表示上<>は全角にしてますが半角が正解です。
ご紹介させていただきます。
HTMLで
箇条書きをする方法です。
ホームページなどで
たくさん箇条書きをみかけるので
このタグは結構使えますな。
<ul>
<li>ああああああ</li>
<li>いいいいいい</li>
<li>うううううう</li>
</ul>
こんなん書くとよいみたいです。
- ああああああ
- いいいいいい
- うううううう
ああ
今日も勉強なったな~
※表示上<>は全角にしてますが半角が正解です。
ルーター
つい先日だが
いつもの通り出社してきて
いつもの通りPCの電源を入れたのだが
なぜかネットにつながらない
もちろんネットがつながらないのでメールも出来ない
師匠の小川君が来るまで何も出来ない状態が続いた。
石川は朝早く出社し
メールなり最新のニュース(最新だからニュースというのだが)
をチェックしたり勉強の時間にあてたりしているのだが
ネットがつながらないと
何も出来ない自分に気がついた(ドラマじたて)
結果小川君が出社し
ルーターというものが赤い警告を発しており
電源を入れなおしたところネットがつながった。
意外と簡単なことでネットがつながらなかったりするから
たちが悪い。
ここでルーターを詳しく勉強してみた。
ルーターとは
ネットワーク上のデータをほかのネットワークに流す機器のこと
つまりは、電車の自動改札機みたいなものかいな?
たとえがおかしいか?
今回は電車賃が足りないか、前の人が通貨していないのに
無理くり通貨しようとしたために
レッドカードくらった
と
理解しておく。
いつもの通り出社してきて
いつもの通りPCの電源を入れたのだが
なぜかネットにつながらない
もちろんネットがつながらないのでメールも出来ない
師匠の小川君が来るまで何も出来ない状態が続いた。
石川は朝早く出社し
メールなり最新のニュース(最新だからニュースというのだが)
をチェックしたり勉強の時間にあてたりしているのだが
ネットがつながらないと
何も出来ない自分に気がついた(ドラマじたて)
結果小川君が出社し
ルーターというものが赤い警告を発しており
電源を入れなおしたところネットがつながった。
意外と簡単なことでネットがつながらなかったりするから
たちが悪い。
ここでルーターを詳しく勉強してみた。
ルーターとは
ネットワーク上のデータをほかのネットワークに流す機器のこと
つまりは、電車の自動改札機みたいなものかいな?
たとえがおかしいか?
今回は電車賃が足りないか、前の人が通貨していないのに
無理くり通貨しようとしたために
レッドカードくらった
と
理解しておく。
2010年6月15日火曜日
SEO対策とはなんぞや
当社の小川君はかしこい
石川の10歩も20歩も先を行っている
もはやパイナツプルでも追いつけない。
昨日はSEO対策の件でいろいろ教わった。
なんの略かはわからないが
りんごがとびでたりはしない(SEROマジシャン)
SEOの目的は、検索システムで上位表示を行い売り上げを上げること
検索で上位になったからあがるわけではなく
ほかにも重要な要素がある。
クリック後直後に表示されるページをランディングページというらしい(これあってる?)決して阪神のバースではない(ランディバース)
そこに
1情報を多く載せること
2受け手に有益な情報を載せること
3接触頻度を上げること 要はまたクリックしてもらえるようなサイトということ
ほかにも講義をいただいたが
目がちかちかしてきたので
また別の機会にする
なむ
石川の10歩も20歩も先を行っている
もはやパイナツプルでも追いつけない。
昨日はSEO対策の件でいろいろ教わった。
なんの略かはわからないが
りんごがとびでたりはしない(SEROマジシャン)
SEOの目的は、検索システムで上位表示を行い売り上げを上げること
検索で上位になったからあがるわけではなく
ほかにも重要な要素がある。
クリック後直後に表示されるページをランディングページというらしい(これあってる?)決して阪神のバースではない(ランディバース)
そこに
1情報を多く載せること
2受け手に有益な情報を載せること
3接触頻度を上げること 要はまたクリックしてもらえるようなサイトということ
ほかにも講義をいただいたが
目がちかちかしてきたので
また別の機会にする
なむ
またしても便利な機能
またしても小川君から
便利な機能を習得。
その前にHTMLの入力にはメモ帳などを使い、それをサーバーなどにアップして
初めておおやけに出せるものらしい。
ブログのサービス会社などは、もちろん自身でサーバーをもっているので
そこの言語をちょいちょいいじってカスタマイズすることが可能だ。
スタイルシートとはデザインの要素。文字の大きさやこの位置はここみたいな。
トップページはまさにそのページに飛んだときの最初のページ。
今はアドセンスの貼り付けや、トップページの画像を変更するなどの作業をしている。
その際にとっても便利な機能があり
コントロールキーとFキーを押すと
文字の検索が可能らしい。
石川未だに何が書いてあるかわからないが
例えば columという文字を検索し、その直後にアドセンスを貼り付けたいときなどに
使用する。
ああ
素敵
なんて便利。
その前に早く
言語を読めるようにならなくては!
便利な機能を習得。
その前にHTMLの入力にはメモ帳などを使い、それをサーバーなどにアップして
初めておおやけに出せるものらしい。
ブログのサービス会社などは、もちろん自身でサーバーをもっているので
そこの言語をちょいちょいいじってカスタマイズすることが可能だ。
スタイルシートとはデザインの要素。文字の大きさやこの位置はここみたいな。
トップページはまさにそのページに飛んだときの最初のページ。
今はアドセンスの貼り付けや、トップページの画像を変更するなどの作業をしている。
その際にとっても便利な機能があり
コントロールキーとFキーを押すと
文字の検索が可能らしい。
石川未だに何が書いてあるかわからないが
例えば columという文字を検索し、その直後にアドセンスを貼り付けたいときなどに
使用する。
ああ
素敵
なんて便利。
その前に早く
言語を読めるようにならなくては!
HTMLについて
修行修行
毎日が修行。
脳科学の権威、茂木さんがいうには
30代でも40代でもそれ以上でも脳が発達することは可能なのだとのこと。
自分の可能性を信じて頑張ってみようと思う。
頑張れ俺!
ファイト♪
さて
少しずつではあるがHTMLの言語を
WEBマスター小川君から学びつつある。
昨日も「改行」を覚えた。
ほかにHTMLの「タグ」と呼ばれるものでは
<p>ここに一塊の文章を入力</p>
これは中に書いてある通り
一塊の文章を入力つまり段落わけのときに使うらしい。
いまいちピンとこないが
そうらしい。
すごく便利だなと思ったのが
<a herf="サイトのURL>サイトの名前など</a>
これは「サイトの名前など」というところをクリックすると
そのサイトページにとぶよくある「あれ」である。
なるほど
そういう仕組みになっていたのね。
今日もとっても勉強になりました。
奥深いな~
毎日が修行。
脳科学の権威、茂木さんがいうには
30代でも40代でもそれ以上でも脳が発達することは可能なのだとのこと。
自分の可能性を信じて頑張ってみようと思う。
頑張れ俺!
ファイト♪
さて
少しずつではあるがHTMLの言語を
WEBマスター小川君から学びつつある。
昨日も「改行」を覚えた。
ほかにHTMLの「タグ」と呼ばれるものでは
<p>ここに一塊の文章を入力</p>
これは中に書いてある通り
一塊の文章を入力つまり段落わけのときに使うらしい。
いまいちピンとこないが
そうらしい。
すごく便利だなと思ったのが
<a herf="サイトのURL>サイトの名前など</a>
これは「サイトの名前など」というところをクリックすると
そのサイトページにとぶよくある「あれ」である。
なるほど
そういう仕組みになっていたのね。
今日もとっても勉強になりました。
奥深いな~
2010年6月14日月曜日
キーボード
今日も小川君に教わった。
このブログBLOGGERという未だ得たいの知れない会社のサービスを利用している。
小川君いわく
グーグルの関連会社なので安心できるとのこと。
確かに
メールは作りやすい気がする。
ところが
最近勉強している
HTMLという言語
これを使用していないらしい。
どうなることやら。
HTMLというのは要は
英語や中国語みたいなもの
ネット上で様々な国の人が会話するのに
使用するひとつの言葉なようです。
これがワードやエクセルみたいにいけばいいのだが
ひとつ改行するのにも「ルール」
があり
これも教わったのだが
<br />
というものを入力すれば
改行されるらしい。
しかもrと/の間も空間を空けなければならないというきめの細かさ・・
31歳の腐りかけた脳みそでついていけるでしょうか?
このブログBLOGGERという未だ得たいの知れない会社のサービスを利用している。
小川君いわく
グーグルの関連会社なので安心できるとのこと。
確かに
メールは作りやすい気がする。
ところが
最近勉強している
HTMLという言語
これを使用していないらしい。
どうなることやら。
HTMLというのは要は
英語や中国語みたいなもの
ネット上で様々な国の人が会話するのに
使用するひとつの言葉なようです。
これがワードやエクセルみたいにいけばいいのだが
ひとつ改行するのにも「ルール」
があり
これも教わったのだが
<br />
というものを入力すれば
改行されるらしい。
しかもrと/の間も空間を空けなければならないというきめの細かさ・・
31歳の腐りかけた脳みそでついていけるでしょうか?
HTML
そもそもHPがいろいろな言語で出来ていること自体最近知りました。
大学の頃、情報処理の授業はソリティアばかりやってたからな~
今になって反省してます。
さて
もう会社が設立してしまっているので
早く収益を上げなくてはならない。
勉強してから様々なことをやるのでは遅い!
勉強しながら
収益のでる仕組みを作っていくしかない!
古くからの友人である小川君とともに
まず、ブログを更新しながら
そのカスタマイズをして(カスタマイズ=改良みたいなもの)
言語の勉強を図ることに決めました。
例えば今書いているこのブログ。
BLOGGERというサービスを利用しています。
理由は簡単で
グーグルのアドセンスというサービスがあるのですが(有名か)
アドセンスというサービスでいくばくかの収益が見込めるのです。(お小遣い程度だけど)
ブログを勉強しながらお小遣いも入るかもしれない!
これは初心者の石川にとって大きいことです。
不慣れですがこれからも勉強した内容をアップしていきます。
大学の頃、情報処理の授業はソリティアばかりやってたからな~
今になって反省してます。
さて
もう会社が設立してしまっているので
早く収益を上げなくてはならない。
勉強してから様々なことをやるのでは遅い!
勉強しながら
収益のでる仕組みを作っていくしかない!
古くからの友人である小川君とともに
まず、ブログを更新しながら
そのカスタマイズをして(カスタマイズ=改良みたいなもの)
言語の勉強を図ることに決めました。
例えば今書いているこのブログ。
BLOGGERというサービスを利用しています。
理由は簡単で
グーグルのアドセンスというサービスがあるのですが(有名か)
アドセンスというサービスでいくばくかの収益が見込めるのです。(お小遣い程度だけど)
ブログを勉強しながらお小遣いも入るかもしれない!
これは初心者の石川にとって大きいことです。
不慣れですがこれからも勉強した内容をアップしていきます。
登録:
投稿 (Atom)