ホームページ作りに役立つｈｔｍｌとjavascriptの入門　2021/4スタート

第1回

下記のプログラムを見てください。ｈｔｍｌやjavascriptや画像の呼び出し文で構成されていてこれだけで、画面上に動く画像を表示できます。初めての方はちんぷんかんぷんで何のことかわからないとなりますが、中身は難しくなく徐々に慣れてきますので安心して練習してください。尚、高度なプログラムはできないのであくまで入門ということで了解ください。

<html>
<head>
<title>画像を動かす</title>

<img src="haikei.png" name="haikeiImage" style="position:absolute;left:0px;top:16px;">

<script language="JavaScript"><!--
//<img src="haikei.png" name="haikeiImage" style="position:absolute;left:0px;top:0px;">
var x=0;
var y=16;
var konakoroy1=180;
var konakoroy2=300;
var v=2;
var r=100;
var rd;
var rdd;
function moveBall()
{
if((x>1000)||(x<0))
if(x>1000)x=0;
   x=x+v;
 if ((x>200 && x<800)||(x>900 && x<1300)){
   //y=konakoroy1;
   rd=200+r-x;
//alert("rd="+rd+"");
  rdd=r*r-rd*rd;
//alert("rdd="+rdd+"");
   y=konakoroy2+Math.sqrt(rdd);
//alert("y="+rdd+"");
  }

  else{
   y=konakoroy2;
  }


  // if((x>448)||(x<0))v=-v;
document.ballImage4.style.left=-x+1000;

document.ballImage6.style.left=-x+1200;
document.ballImage6.style.top=y;
 document.ballImage.style.left=x;
 document.ballImage1.style.left=x+150;
 document.ballImage2.style.left=x+300;
 document.ballImage3.style.left=x-150;
document.ballImage3.style.top=y;
 document.ballImage5.style.left=x-200;
document.ballImage5.style.top=y;
document.ballImage7.style.left=x-400;
}
// --></script>



</head>

<body onLoad="setInterval('moveBall()',10)">
<img src="note.png" name="ballImage4" style="position:absolute;left:1000px;top:280px;">
<img src="konakoro.png" name="ballImage6" style="position:absolute;left:1000px;top:300px;">
<img src="jitensha.png" name="ballImage" style="position:absolute;left:0px;top:312px;">
<img src="jitensha.png" name="ballImage1" style="position:absolute;left:150px;top:312px;">
<img src="jitensha.png" name="ballImage2" style="position:absolute;left:300px;top:312px;">
<img src="tori.png" name="ballImage3" style="position:absolute;left:-150px;top:100px;">

<img src="tori.png" name="ballImage5" style="position:absolute;left:-200px;top:100px;">
<img src="image12.png" name="ballImage7" style="position:absolute;left:-500px;top:400px;">
</body>

</html>

解説はじめ

html文を使ったプログラムを作ると日ごろ使っているインターネットのWEBブラウザ上に文章や絵、写真、動画などを表現できます。

ｈｔｍｌプログラム作成の準備

①windowsの標準メモ帳を使って文章を作る。
②文章の書き方は「　＜　」と[　＞　」で囲んだ命令とそれ以外の文章で作っていきます。

画面に「こんにちわ」と表現してみましょう

<html>
<h1>こんにちわ</h1>
</html>

上の文章をコピーペーストでメモ帳に貼り付け .htmlの拡張子を付けて保存します。
このとき、テキスト文で保存するのではなく何でもファイルを意味する「＊」を拡張子にえらんでおいてファイル名と拡張子例えば　test01.htmlとして保存します。

保存したらtest01.htmlをクリックして開いてみましょう。できましたか。今回はここまでです。では次回お楽しみに。

第２回

html要素
<html> 文書のルート要素（基礎になる）
<head>　文書のヘッダー
<body>　文書の本体
<title>　文書のタイトル
<meta>　文書に関するmeta情報　使用する言語などを指定する
<div>　範囲の指定（ブロックレベル）
<span>　範囲の指定（ブロック内のインライン）
<h1>から<h6>まで　見出し文字の大きさを指定
<address>　連絡先

書き方
<html>….</html>のように終わりには[/]を入れます。

テキスト

<p>　段落
<br>　改行　改行の場合は終わりの[/]は不要です。
以下　たくさんありますので、調べてみてください。

レイアウト
<center>　センターに文章配置

リンク
<a>　リンクのアンカー

リスト

<li>　リストの項目

画像

<img>　画像の埋め込み　呼び出し

テーブル
<table>　表

フォーム
<form>　入力フォーム
<input>　フォームの部品で入力ボックスや結果表示に使える。

色々試してください。いろいろ欲張らずに単純なものを繰り返しましょう。

文書を選択しctrl+pでコピーしctrl+vで貼り付けるとプログラムが簡単にかけますよ。

———
<head>

<body>

————
</body>
</html>

第3回

cssについて
cssはhtml文の装飾に使う。見やすく、かっこよくなど。
css機能を組み込むのには２通りある。①html文章内に<style>——-</style>宣言して書くか
②拡張子.cssを持つ別ファイルを作って、html文章から参照させる方法である。
②に慣れていた方が文章がすっきりするし、応用拡大しやすくなりますのでこちらをお奨め。
　　　　xxxx.cssファイルを作る
　参照方法は
　<link　rel=”stylesheet”　href=”〇〇〇.css”　type=”text/css”>のように書きます。
　<>link以下のタグ中の各機能記述の順番はどこに配置してもよいようです。
記述例
　　　body{background.color:#8fbc8b;}
h1{font-size:28pt;color:#ffffff;}
いきなり難しくなったと思われた方、現時点ではcssとは文章を装飾しカッコよくするものと理解しておいてください。

次回はjavascriptについて書いてみます。

第4回
javascriptの実装
先ず以下のhtmlプログラムを参照ください。
<html>
<head>
<meta charset=”utf-8″>
<title>こんにちわ</title>
</head>
<body>
<script>
window.document.write(“初めてのJAVASCRIPTです。”);

</script>
</body>
</html>
以上プログラムを作って実行してみてください。
<script>———</script>の間がjavascriptです。
この部分はcssと同様javascriptファイルである拡張子.jaファイルとして
別に用意することができます。
htmlからの呼び出し方は　<script>と</script>の間に呼び出したいファイル名をsrc=”〇〇〇.js”のように記述しておきます。
第5回
これまでの説明で、第１回で紹介したプログラムを解説していきます。sample1

<html>　html文の始まり
<head>　head文の始まり
<title>画像を動かす</title>　タイトル表示

<img src=”haikei.png” name=”haikeiImage” style=”position:absolute;left:0px;top:16px;”>　背景図の別途に用意したhaikei.pngを配置します。

else{
y=konakoroy2;
}

// if((x>448)||(x<0))v=-v;
document.ballImage4.style.left=-x+1000;　別途用意されたイメージを識別する名前を使ってイメージの動きを決めています・以下です。

document.ballImage6.style.left=-x+1200;
document.ballImage6.style.top=y;
document.ballImage.style.left=x;
document.ballImage1.style.left=x+150;
document.ballImage2.style.left=x+300;
document.ballImage3.style.left=x-150;
document.ballImage3.style.top=y;
document.ballImage5.style.left=x-200;
document.ballImage5.style.top=y;
document.ballImage7.style.left=x-400;
}
// –></script>

</head>

<body onLoad=”setInterval(‘moveBall()’,10)”> プログラムがスタートすると最初に呼び込まれ、ある一定時間隔ここでは10でmoveball()関数を繰り返し実行させます。
<img src=”note.png” name=”ballImage4″ style=”position:absolute;left:1000px;top:280px;”>スタート時に別途用意するイメージファイルを使って初期位置を設定しています。このときnameを設定しておき関数moveball()中で使うイメージの動きの式中で使います。以下同様です。
<img src=”konakoro.png” name=”ballImage6″ style=”position:absolute;left:1000px;top:300px;”>
<img src=”jitensha.png” name=”ballImage” style=”position:absolute;left:0px;top:312px;”>
<img src=”jitensha.png” name=”ballImage1″ style=”position:absolute;left:150px;top:312px;”>
<img src=”jitensha.png” name=”ballImage2″ style=”position:absolute;left:300px;top:312px;”>
<img src=”tori.png” name=”ballImage3″ style=”position:absolute;left:-150px;top:100px;”>

</html>

以上ですが本文をコピーペーストで利用する場合はイメージを準備することを忘れずに。イメージは任意に決めてください。このプログラムではcssは使っていません。

sample2
tulip.pngとranankyurasu.png画像を任意に準備して同じホルダーに保存しておいてください。

<html>
<img src="tulip.png">
<h1>チューリップ球根の保存方法</h1>
<ul>
	<li>花が咲き終わったら茎の根元を切る。</li>
	<li>球根に栄養を蓄えるため葉は枯れるまで残しておく。</li>
	<li>葉が枯れたら球根を掘り起こす。</li>
	<li>掘り起こした球根は網袋などに入れ風通しの良い軒下などに吊るしておく。</li>
	<li>秋も終わり寒くなったころに植え付ける。
</ul>
<h1>ラナンキュラスもチューリップと同じ手順</h1>
<img src="ranankyurasu.png">
</html>

以上　初級htmlとjavascriptの第１回〜第５回までの説明は終わります。

今回はの入門編ではサーバーとのやり取りサーバーサイドプログラムについては含んでいません。

MIひろば

いろいろなコメント気軽にお寄せください

ホームページ作りに役立つｈｔｍｌとjavascriptの入門　2021/4スタート

コメントを残すコメントをキャンセル

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル