Javaマスターへの道 SpringBoot編 Part7
今日もやります「Javaマスターへの道」略してJavaマス・・・少しダサい(笑)
今日のテーマはHTML！
Webサイトの画面表示を担う専門家で、知っている方も多いのではないでしょうか。
私もHTMLに出会ったのは確か高校生の時、
情報の授業でシンプルな自己紹介の画面を作ったような記憶がかすかにあります。
HTMLはマークアップ言語と呼ばれていて、JavaやPythonなどのプログラミング言語とは結構違うので
最初にプログラミングをしてみたい方にも人気があると聞いたことがあります。
書き方が少し変わっているのですが、上から下へと順々に画面に表示されていくので流れは追いやすいと思います。
今日は簡単なHTMLを使ったプログラム紹介をやっていきます。
さっそくですが、以下HTMLです。
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8“>
<title>hello</title>
</head>
<body>
<form action=“/hello“ method=“post“>
<input type=“text“ name=“name“ placeholder=“お名前を入力してください“>
<input type=“text“ name=“age“ placeholder=“ご年齢を入力してください“>
<input type=“submit“ value=“実行“>
</form>
</body>
</html>
HTMLでは大きく分けて2つの要素に分かれています。
そして見た目も大切で段落を意識してきれいでわかりやすいものを意識しましょう。
では<head>要素についての説明です。
<head>要素はHTMLの情報を持つ部分で、基本的にこの部分は定型文を書くと思っていて大丈夫だと思います。
後々使うことにはなりますが、今はその段階に行っていませんので。
次に<body>要素についてです。
今回重要となるのはこっちの部分で、文章やその構成などを決めることが出来る部分です。
上に書いてある<form>はユーザーさんが入力したデータを一つのまとまったデータとしてController側に送るための部品です。
{action = “/hello” method=”post”}の部分は”/hello”で送信先のURLの指定をして、”post”はポストメソッドで送るよということです。
中身である部分はname, ageを受け取って、<input type=“submit“ value=“実行“>で送信をしています。
どうでしょうか、意外にシンプルだったと思います。
このHTMLで情報を送り表示するページを別で作れば簡単な自己紹介文が表示できます。
次回は受け取った情報を表示するページを作っていこうと思います。