インターネットの日常化に伴い、アプリケーションの形態も変わってきました。
以前は、利用者のコンピューターにインストールして利用するデスクトップアプリケーションが当たり前だったのですが、今では、ブラウザで使うことが出来るwebアプリケーションが広く普及しています。
プログラミング言語Javaでwebアプリケーションを開発するための技術を一緒に学びましょう。
サーブレットJSPを学ぼう！！＃１
1. インターネットとwebアプリケーション
webアプリケーションとはwebの仕組みを利用して動作するアプリケーションになります。
インターネット上には様々なサービスがwebアプリケーションで提供されており、SNS、ショッピングサイト、インターネットバイキングなど、日常生活に欠かせない物ばかりになります。
2. webページとHTML
これから学習するWebアプリケーションは、プログラミング言語の知識だけでは作成することは困難です。
特にwebページページに関する知識は必須になります。
まずは、webページを作成するために必要な知識を学習していきましょう。
3. HTMLとブラウザ
Webページを作成するにあたって、必要なものが２つあります。
１つ目はHTMLになります。２つ目がブラウザです。HTMLで記述されたWebページを表示します。
MicorosoftEdge GoogleCrome Firefox Safari などがあります。
ブラウザにはwebページがどのように記述されているかを表示する機能があります。
GoogleChromeでは画面上で右クリックし、ポップアップメニューから「ページのソース」の表示を選択すると、開いているページのHTMLを見ることが出来ます。
上記のテキストがHTMLになります。
ブラウザはHTMLのテキストを読み込み、Webページとして表示する機能を持っています。
4. HTMLの基本文法
.jpg)
HTMLは言語といえど、文法はいたってシンプルになります。
タグと属性という二つの文法を覚えるだけで大丈夫です。
それを身に着ければ、すぐにWebページを作成することが出来ます。
・タグの書式
タグ名>内容</タグ名>開始タグと終了タグをペアで囲みます。
これがタグの文法になります。
開始タグと終了タグで囲まれた部分を内容といい、タグの内容と合わせて要素と呼びます。
HTMLには多種多様なタグが用意されており、それらを使用すればタイトル段落、画像、リンクといったWebページを構成する要素の作成や設定が可能になります。
・title タグの使用例
<title>HTMLでWebページを作ろう</title>・pタグの使用例
<p>今日はHTMLの勉強をおこないました。</p>改行を表すbrタグは次のいずれかの方法で書くことが出来ます。
<br></br>・属性
「属性」とはタグに加える補足的な情報です。<タグ名 属性名＝”値”>・・・</タグ名>5. HTMLの基本構造
HTMLの基本構造では、DOCTYPE宣言とhtml,head,bodyの３つの特別な
タグで成り立っています。
・DOCTYPE宣言
HTMLファイルである事を宣言しています。
・htmlタグ
HTML全体をこのタグで囲む必要があります。
タグの内容にheadタグとbodyタグを記述します。
・headタグ
タグの内容にタイトル文字コード、作者などのWebページに関する情報を記述します。
ただし、タイトル以外の情報はブラウザに表示されません。
・bodyタグ
タグの内容にブラウザにひょうじされるWebページの全体を記述します。
6. Webページを作ってみよう
・ファイルにHTMLを入力
「メモ帳」などのテキストを入力できるエディタでHTMLを入力します。
タグ名や属性は大文字、小文字でもかまいませんが、必ず半角で書きます。
・ファイルを保存
HTMLの入力が出来たらファイルを保存します。内容がHTMLで書かれたファイルをHTMLファイルといい、次のルールに従う必要があります。
・ファイル名には半角英数や、_(アンダーバー)-（ハイフンを使用する）
・拡張は「.html」または「.htm」にする。
7. ＨＴＭＬファイルの作成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初めてのWEBページ作成</title>
</head>
<body>
<h1>A君のプロフィール<h1>
<p>
入社二年目の２３歳。<br>入社まではプログラミングの経験はなく、入社１年目にJavaのプログラミングを勉強する。<br>難しいことはちょっと苦手。それでも頑張ります。
</p>
<a href=”hyou.html”>一覧へ戻る</a>
</body>
<html>
上記のコードをメモ帳などに記載して、ブラウザで開いてみましょう。
上記のようなページが表示されたはずです。
名前はhello.htmlで保存しましょう。
つづいて、下記の
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メンバーの紹介</title>
</head>
<body>
<h1>メンバーの一覧<h1>
<table border="1">
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td><a href="hello.html">Aくん</a></td>
<td>23</td>
</tr>
<tr>
<td>Bくん</td>
<td>22</td>
</tr>
<tr>
<td>Cくん</td>
<td>24</td>
</tr>
</table>
</body>
<html>
上記のコードをテキストファイルに記載し、「hyou.html」保存しましょう。
すると、下記の画像のようなページが開くはずです。
Aくんのボタンを押下すると、先ほど作成したページに飛ぶはずです。
HTMLには多くのタグが用意されていますが、このページで扱うタグは基本的な物ばかりになります。
ほかにどのようなタグがあるのか、タグを使ってどんなことができるかなどをしらべるにはHTMLリファレンスを利用しましょう。
8. この章のまとめ
Webページの作成にはHTMLという言語を使用する。
HTMLはタグをつかって、タイトルやだんらく、画像、リンクといった、ページの構成用をを作成出来る。
例えば、段落を作成する場合は、ｐタグ、画像を作成する場合はimg タグを使用する。
また、タグには属性で補足的な要素を加えることができ、たとえばリンクの場合、リンクを表すaタグにhrefという属性を加える必要がある。
ＨＴＭＬの基本構造は、ＤＯＣＴＹＰＥ宣言、ｈｔｍｌタグ、headタグ、bodyタグで成り立っている。
このうち、ページに関する情報を書くのはheadタグ、ページの本体を書くのはbodyタグである。
ＨＴＭＬをＷｅｂページとして表示するにはブラウザというソフトウェアを使用する。
もし、時間に余裕のある方は、ＡくんだけでなくＢくんＣくんの自己紹介ページも作成し、メンバー一覧から自己紹介ページに行けるように、htmlを作成してみましょう。