インターネットのホームページ(ウェブページともいう)を自分で作りたいとは思っても最初の取っ掛かりが解りにくい。
よく解らなくても、コピペして、まずはやってみよう。
プログラミングはとても楽しく、忠実な愛犬に指示を与えるようなものです。 思い通りにならない時は明確な指示がなされていないのです。
ここではメモ帳で作る方法を紹介しますが、ホームページを作るアプリを使う場合でも、htmlとcssの知識は必ず役に立ちます。
WIndows10の環境で説明します。
ここで必要となる用語を簡単に説明します。ざっと読んで下さい。
photo.jpg
フォルダーphoto、photo.html、photo.cssの3ファイルを作る。
あらかじめデジカメ写真を用意しておく。
ここではphoto.jpgを使用する。
メモ帳で開いてphoto.htmlの記述を追加する。ここでは基本の例を表示。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_JIS" />
<title>写真</title>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<img src="photo.jpg"></img>
</body>
</html>
/* photo css */
body {
background-color:slategray;
}
h1 {
width:80%;
color:gold;
font-size:150%;
text-align:center;
text-shadow:1px 1px 8px black;
margin:10px auto 10px auto;
}
#frame {
width:50%;
margin:10px auto 10px auto;
}
#frame img {
width:100%;
box-shadow:2px 2px 12px black;
}
#text {
width:50%;
margin:10px auto 10px auto;
}
#text p {
color:snow;
font-size:100%;
text-align:left;
}
/* css end */
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_JIS" />
<link rel="stylesheet" type="text/css" href="photo.css" />
<title>写真</title>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<h1>薬師池公園のカワセミ</h1>
<div id="frame"><img src="photo.jpg"></img></div>
<div id="text"><p>町田市薬師池公園の薬師池にせり出しているモミジにカワセミが来ます。この鳥は縄張りをもっており数時間毎にパトロールします。</p></div>
</body>
</html>
ブラウザで閲覧している画面上で、右クリックしてhtmlのページのソースコードが表示できるので、やってみてください。参考になります。
Total | Today | Yesterday |