IsとWasの違い

IsWasの違いとは、現在形過去形と習ったと思います。
でも、どんな時に使うのでしょうか?

車を運転していると、突然目の前を、猫や犬が横切る時があります。
その場合、Is that a cat?今のは猫だった?

それとは別に、ゆっくり道路を横切っている猫や犬を見る場合もあります。
その場合は、Was that a cat? ⇒ あれは、猫なの?

突然の場合と普通の場合では、現在形 Is過去形 Wasを、
使い分けていることが理解できると思います。

I still haven’t ~

I still haven’t ~ ⇒ まだしていない

I still haven’t read  textbook. ⇒
まだ教科書を、読んでない!

I still haven’t written. ⇒
まだ書いていない!
I still haven’t written Blog. ⇒
言い換えるまだブログを書いていない!
言い換えると
I haven’t written a blog yet.
still = yet(まだ) ? = still yet(まだです)
I haven’t written a blog still yet.
まだブログを書いていないです!
ともいえる。

body タグ

<body></body>の間に書くのが本文です。
HTMLは、マークアップ言語なのですべて入れ子になっています。

また、文章構造を、記述するものなので、文字の色・背景色などのタグを、
書くことはありません!
装飾的なものはすべて、CSSに記述します。
また、HTML5.1からは、h1を、section内では何度でも使えるようになりました
セマンティックな観点からいえば、h1(最重要見出し)は、1度しか出てこないという、考え方の方が正しいような気もします。
しかし、仕様書では、認められています。

<body>
<head>
 <h1>頁の名前</h1>
    <p>
      頁の概要
    </p>
</head>
<nav>
  <ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  </ul>
</nav>
 <section>
  <h2>大見出し</h2>
    <article>
        <h3>見出し</h3>
      <p>
           段落
        </p>
      </article>
 </section>
 <section>
  <h2>大見出し</h2>
   <article>
       <h3>見出し</h3>
      <p>
           段落
        </p>
     </article>
 </section>
 <futtor>
    <h2>大見出し
      <p> 段落 </p> 
  </futtor> 
</body>

titleとhead

<title> ページのタイトル</title>
<head>
1. メタファイルの記述
2. Faviconの記述
3. 外部CSSの読み込み
4. WEBFontの読み込み
5. 外部JavaScriptの読み込み
6. Sitemapの読み込み
7. その他(製作者情報など)
</head>

など、データを効率的に管理したり検索したりするための情報(metaファイル)
を、読み込ませるために、記述します。(データーの目次のようなもの)
文字コードの表示:
<meta charset=”utf-8″>
<meta http-equiv=”Content-Type” content=”text/html;
charset=euc-jp” >

上記のいずれか、一つを記述

モバイル機器に対する表示スケール
<meta name=”viewport” content=”width=device-width,
initial-scale=1.0″>

検索に関する情報
<meta name=”description” content=”サイトの紹介”>
<meta name=”keywords” content=”キーワード”>

サイトのアドレス
<meta property=”url” content=”URL”>

画像ホルダーの場所
<meta property=”image” content=”URL/images/”&gt/

Sitemapの読み込み
<link rel=”alternate” type=”application/rss+xml” title=”Atom” href=”sitemap/atom.xml” >
<link rel=”alternate” type=”application/rss+xml” title=”ROR” href=”sitemap/sitemap.xml”>

Favicon
<meta name=”apple-mobile-web-app-title” content=”URL/favicons/favicon.ico”>
<meta name=”application-name” content=”http://URL/favicons/favicon.ico”>

Faviconの色
<meta name=”msapplication-TileColor” content=”#da532c”>
<meta name=”theme-color” content=”#ffffff”>

Favicon
<link href=”URL” rel=”stylesheet” type=”text/css” media=”all”>
<link rel=”apple-touch-icon” sizes=”57×57″ href=”favicons/apple-touch-icon-57×57.png”>
<link rel=”apple-touch-icon” sizes=”60×60″ href=”favicons/apple-touch-icon-60×60.png”>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”favicons/apple-touch-icon-72×72.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”favicons/apple-touch-icon-76×76.png”>
<link rel=”icon” type=”image/png” href=”favicons/favicon-32×32.png” sizes=”32×32″>
<link rel=”icon” type=”image/png” href=”favicons/favicon-16×16.png” sizes=”16×16″>

Faviconのjsonファイルの読み込み
<link rel=”manifest” href=”favicons/manifest.json”>

<meta>情報の一部

HTML5.1

HTMLの初期バージョンでは、
HTMLは、<HTML>で、始まり</HTML>で、終わるといわれていました
しかし、バージョン2からは、HTMLで始まる前に、
<!DOCUTYPE HTML>があります。

その後このhtmlが、どのような言語で書かれているか?を表す
<html lang=”ja”>(日本語の場合:ja/英語の場合:en/言語により異なる
を、書きます。

HTMLの正しい構文

HTMLの正しい構文=Vallidなページということです。
現在WEB上で、見られるページの90%以上が、
un Vallidであるといっても過言ではないでしょう。

なぜ?このようなページが多く存在するのでしょうか?
これは、日本の英語教育と一致するところが、多くあります。

ただ見えれば、問題ない!という意見があまりにも多いことです。
これには、私は常に閉口しています。

本来WEBは、デバイス・OSを選ばないという、基本が大切です!
それ以外であれば、ただの、programmingで十分です。
閲覧者の環境に対応し、いかなる場合でもっ情報を正しく伝えることができる。
これが基本です。
Win7までしか対応していないなどと、平気で言う役所の人間など、糞くらえです。
まともなソフトに、税金を使うのが、職員の仕事!
遊んでばかりいないで仕事しろ!これが、私の本心です。

それはともかく、明日からはHTMLの正しい構文について記述していきます。

画像の表示方法

画像のオプティマイズについては、先に述べ、
ツールの紹介もしましたが、表示させるためには、
<img src=”画像のホルダー/画像名” alt=”代替え” >と、記述します。
この場合、Alt=”代替え”代替えとは、画像名ではありません!
画像が表示されない場合の、画像の説明です。
このことを理解していないと、とんでもない誤解を生じます

HTML4.01の時代には、
<img src=”” width=”” height=”” alt=””> と記述していましたが、
HTML5では、サイズ調整された画像を表示する場合は、Widthとheightを、
省くことが可能になりました。

背景色と文字の色

文字の色を、多く使用しているサイトを見かけるが、
文字の色にも、意味を待たせる必要がある
注意を喚起する場合は、レッド系
安全であることを意味する場合は、グリーン系
その他、追記、注釈、など自分のサイトで使う色の意味あいを、
決めておく必要がある。
引用(blockquote)、簡単な引用(quote)、補足(aside)など・・・

CSSをインラインにする

<style type=”text/css”>
html{overflow-y:scroll;}
body{margin:0;padding:0;font-size:14px;color:#919191;background-color:#232323;}
body.boxed{color:#919191;background-color:#000000;}
.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.uppercase{text-transform:uppercase;}
.hidden{display:none;}
.clear{display:block;clear:both;}
.clear:after{display:block;visibility:hidden;height:0;clear:both;font-size:0;content:””;}
a{color:#FF9900;outline:none;text-decoration:none;}
.fl_left{float:left;}
.fl_right{float:right;}
img{width:auto;max-width:100%;height:auto;margin:0;padding:0;border:none;line-height:normal;vertical-align:middle;}
.boxholder{padding:9px;border:1px solid #D6D6D6;}
.imgl{float:left;margin:0 15px 10px 0;clear:left;}
.imgr{float:right;margin:0 0 10px 15px;clear:right;}
address, article, aside, figcaption, figure, footer, header, nav, section{display:block;margin:0;padding:0;}
.video{display:block;position:relative;width:100%;height:0;margin:0;padding:0 0 56.25% 0;}
.video iframe{display:block;position:absolute;width:100%;height:100%;margin:0;padding:0;}
div.wrapper, .wrapper100{display:block;width:100%;margin:0;padding:0;text-align:left;word-wrap:break-word;}
.row1, .row1 a{color:#ffffff;background:url(“title.png”);}
.row2{color:#919191;background-color:#232323;border-bottom:1px solid #333333;}
.row3{color:#666666;background-color:#FFFFFF;}
.row4, .row4 a{color:#919191;background-color:#232323;}
.row5{color:#666666;background-color:#FFFFFF;border-bottom:1px solid #E5E4E3;}
body{font-family:Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6{margin:0 0 30px 0;font-size:1.8em;font-family:”CaviarDreamsBold”, Arial, Helvetica, sans-serif;font-weight:normal;line-height:normal;text-transform:capitalize;}
address{margin:10px 0;font-style:normal;}
nav ul{margin:0;padding:0;list-style:none;}
#header, #topnav, #intro, #container, #footer, #copyright{margin:0 auto;}
#header{padding:40px 0;}
#header #hgroup{display:block;float:left;width:auto;clear:right;}
#header #hgroup h1, #header #hgroup h2{margin:0;font-weight:normal;text-transform:none;}
#header #hgroup h1{color:#ffffff;font-size:2em;}
#header #hgroup h2{font-size:1em;}
#header #hgroup p{color:#ffffff;font-weight:bold;}
#header #header-contact{display:block;float:right;width:auto;clear:right;}
#header #header-contact ul{margin-top:15px;}
#header #header-contact li{display:inline;margin:0 0 0 15px;padding:0 0 0 15px;border:none;color:#336699;}
#header #header-contact li:first-child{margin:0;padding:0;border:none;}
#container{padding:50px 0;clear:both;font-size:1em;line-height:1.4em;}
#container section{margin-bottom:50px;}
#container section.last{margin-bottom:0;}
.emphasise, #container .emphasise{font-size:2.8em;line-height:1.4em;}
.font-small, #container .font-small{font-size:1em;}
.font-medium, #container .font-medium{font-size:1.2em;}
.font-large, #container .font-large{font-size:1.4em;}
.font-xl, #container .xl-large{font-size:4em;line-height:1.2em;}
.font-xxl, #container .xxl-large{font-size:6em;font-weight:normal;line-height:1.2em;}
.sidebar aside{line-height:1.2em;}
.sidebar aside h2{margin-bottom:10px;padding-bottom:8px;border-bottom:5px solid #E8E8E8;font-size:1.4em;}
.sidebar aside ul.nospace li{margin-top:20px;}
.time{color:#ff0000;font-size:10px;}
#footer{padding:30px 0;}
#footer .footer_title{font-size:1.2em;margin-bottom:40px;padding-bottom:10px;border-bottom:1px solid #919191;}
#footer div{margin-bottom:0;}
#footer .tweet-container li{margin-top:18px;padding-top:18px;border-top:1px solid #333333;}
#footer .tweet-container li:first-child{margin-top:0;padding-top:0;border-top:none;}
#footer .tweet-container li .tweet_time{font-size:.8em;}
#footer #ft_gallery.spacing li{margin-bottom:15px;}
#footer form label{display:block;width:100%;margin:0 0 18px 0;}
#footer form label input{margin-top:5px;}
#footer form label input, #footer form textarea{color:#FFFFFF;background-color:#333333;border-color:#666666;}
#footer form textarea{height:120px;}
#copyright{padding:20px 0;font-size:.85em;}
#copyright p{margin:0;padding:0;}
#topnav{padding:0;color:#C0BAB6;background-color:#232323;clear:both;word-wrap:normal;white-space:nowrap;}
#topnav ul{margin:0;padding:0;list-style:none;text-transform:uppercase;font-size:12px;}
#topnav ul ul{z-index:9999;position:absolute;width:190px;text-transform:none;}
#topnav ul ul ul, #topnav ul ul ul ul{left:190px;top:0;}
#topnav ul:first-child li:last-child > ul{right:0;}
#topnav ul:first-child > li:last-child li > ul{left:-190px;}
#topnav li{position:relative;display:block;float:left;margin:0 30px 0 0;padding:0;}
#topnav li:first-child{}
#topnav ul:first-child li:last-child{margin-right:0;}
#topnav li li{width:100%;margin:0;}
#topnav li a{display:block;padding:20px 0;}
#topnav li li a{display:block;margin:0;padding:10px 15px;}
#topnav ul ul{display:none;}
#topnav ul li:hover > ul{display:block;}
#topnav a{color:#C0BAB6;background-color:#232323;font-weight:bold;}
#topnav li li a, #topnav li.active li a{color:#FFFFFF;background:#000000;font-weight:normal;}
#topnav li.active a, #topnav a:hover{color:#FF9900;background-color:#232323;}
#topnav ul li li:hover > a{color:#FFFFFF;background-color:#FF9900;}
#topnav li a.drop, #topnav li.active a.drop{padding-left:15px;background-image:url(“images/dropdown_side.gif”);background-position:5px center;background-repeat:no-repeat;}
#topnav form{display:block;height:30px;margin:0 auto;padding:20px 0;}
#topnav form select{display:block;width:100%;padding:8px;color:#FFFFFF;background-color:#232323;border:1px solid #494949;cursor:pointer;outline:none;}
#topnav form select option{display:block;margin:10px;padding:0;cursor:pointer;outline:none;border:none;}
.sidebar aside nav{display:block;width:100%;margin-bottom:30px;}
.sidebar aside nav ul{margin:0;padding:0;list-style:none;}
.sidebar aside nav li{margin:0 0 3px 0;padding:0;}
.sidebar aside nav a{display:block;margin:0;padding:5px 10px 5px 20px;color:#666666;background-color:inherit;background:url(“images/orange_file.gif”) no-repeat 10px center;text-decoration:none;border-bottom:1px dotted #666666;}
.sidebar aside nav a:hover{color:#FF9900;background-color:inherit;}
.sidebar aside nav ul ul a{background:url(“images/black_file.gif”) no-repeat;}
.sidebar aside nav ul ul a{padding-left:40px;background-position:30px center;}
.sidebar aside nav ul ul ul a{padding-left:50px;background-position:40px center;}
.sidebar aside nav ul ul ul ul a{padding-left:60px;background-position:50px center;}
.sidebar aside nav ul ul ul ul ul a{padding-left:70px;background-position:60px center;}
.pagination{display:block;width:100%;text-align:center;clear:both;line-height:normal;}
.pagination ul{margin:0;padding:0;list-style:none;}
.pagination li{display:inline;}
.pagination strong{font-weight:normal;}
.pagination .next{margin:0;}
.pagination a, .pagination .current strong, .pagination .splitter strong{display:inline-block;padding:5px 10px;margin:1px 2px;}
.pagination a:first-child{margin-left:0;}
.pagination a{border:1px solid #DFDFDF;}
.footer_nav{margin:0;padding:0;}
.footer_nav ul li{margin-top:12px;padding-top:12px;border-top:1px solid #333333;}
.footer_nav ul li:first-child{margin-top:0;padding-top:0;border-top:none;}
dt{font-weight:bold;}
table, td, th{border:1px solid gray}
.red-text{color:#ff0000;}
.black-text{color:#000000;}
.blue-text{color:#336699;}
</style>
</head>

<head>内に、CSSを書く inline CSS

また、使用しないCSSの記述は、省いておく方が、いいとおもわれる。