7月25日(金)講義内容- 学科(webプログラミング概論)1-

Pocket

◆本日使用したタグと属性(辞典ページ数)

○<?xml>  xhtmlを使用する際、一番最初に宣言を行うタグ(p.32)
○<!DOCTYPE> 文書型宣言文。どのバージョンでHTMLが作られているのかを宣言する。(p.23 XHTML)
○<html>  html全体を囲うタグ(p.30)
○<head>   文書の情報、サーチエンジン向けのキーワードや説明、タイトル、利用するスタイルシート等 その文書に関する情報を記述(ブラウザには表示されない部分)(p.30)
○<meta>   文書に関する情報(メタ情報)を指定して、ブラウザや検索ロボットに知らせるためのタグ。(ブラウザには表示されない部分)(p.38)
○<title>  ブラウザのタブ(もしくは、ウィンドウの上部)に表示させる(p.34)
○<body>   実際にブラウザで表示する部分(p.30)
○<h1>~<h6>  見出しタグ【ブロック】(p.54)
○<p>      段落、文章タグ【ブロック】(p.56)
○<br />   改行タグ。開始・終了タグのセットではなく、一つだけで完結するタグ(空要素/空タグ)【インライン】(p.58)
○<hr />    水平の罫線を表すタグ【ブロック】(p.77)
○<img>    画像を表示させるタグ(空要素/空タグ)【インラインブロック】(p.78)
 ・src    画像のURLを指定する属性(imgタグ)
 ・alt    代替テキスト属性(imgタグの属性/xhtmlの場合は必須項目)
 ・width  横幅を指定する属性(imgタグの属性/xhtmlの場合は必須項目)
 ・heigt  高さを指定する属性(imgタグの属性/xhtmlの場合は必須項目

◆HTML/CSSとは?

【HTML】ファイルの拡張子は .html

HTMLとは、HyperText Markup Languageの頭文字をとったもの。
この名前を少し丁寧に解釈すると、「ハイパーテキストのための、文書に目印を付ける方法を定めた文法上の約束」
WEBページの骨格の部分を指定する言語。

ハイパーテキストとは?

複数の文書(テキスト)を相互に関連付け、結び付ける仕組みである。「テキストを超える」という意味から”hyper-“(~を超えた) “text”(文書)と名付けられた。テキスト間を結びつける参照のことをハイパーリンクと言う。

【CSS】ファイルの拡張子は .css

CSSとは、ウェブページのスタイル(デザイン)を指定するための言語。
WEBページの肉付けの部分言語。

※訓練で練習用に作成しているファイルに関しては、日本語でも構いませんが、実際の仕事では、ファイル名は、HTML、CSSとも半角英数字のみ使用。全角の日本語名は厳禁!半角スペースもNG!!

 

◆タグについて

HTML内の文章に意味付けをするもの。タグを付ける(ふる)事をマークアップという。

タグには、基本的に「開始タグ」と「終了タグ」がある。

終了タグ」には、スラッシュ)が付きます。

<html>開始タグ
</html>終了タグ

タグは必ず入れ子(ネスト)で記述する。

nest
タグの属性-01

空要素タグ

<img />や<br />や<hr />のように、要素内容を持たないタグを空要素と呼びます。

 ◆HTMLのバージョンについて

HTML4 HTHLの基本となる、10年くらい前に使われていたバージョン
XTHML 現在多く使われているバージョン
HTML5 2014年最終草案〜秋に勧告候補

※バージョンによって文章型宣言(教科書/辞典 P.13)が変わってきます。
文章型宣言とは 文書型宣言は「正しい HTML の規格に則ってこの文書は書かれたものです」と
「宣言」するものです。

訓練では、最初は、XHTMLを勉強します。(後日、HTML5)

◆文章型宣言と表示コードについて

(教科書/辞典 P.23)
XHTML1.0 Strict DTD → HTMLのルールを厳しくする
XHTML1.0 Transitional DTD → これを一番使います。HTMLのルールはStrictより緩い
XHTML1.0 Frameset DTD →  ほぼ使わない

◆文字化けを起こさせないためには?

1. 書類自体の文字コードをutf-8に設定。
2. HTMLファイル内にも
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
</head>
を記述。

※charset(キャラセット)=文字コードのこと。

タグの読み方(発音)

width(幅)

正しい発音ウィドゥス、ウィトゥス
(よくある間違った発音 ワイズ、ウィズ、ウィツ)

height(高さ)

正しい発音ハイト
(よくある間違った発音 ヘイト)

alt(代替テキスト)

正しい発音オルト
(よくある間違った発音 アルト)


◆便利なブラウザの使い方

閉じてしまったタブを復活させる方法

Ctrl+Shift+T (IE/Firefox/Crome)
Ctrl+Z (safari)

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください