bb0a6 modul 2 praktikum pemrograman berbasis web

(1)

MODUL 2

HTML

(HyperText Mark-Up Language)

Laboratorium Komputer

(2)

Pertemuan 2

2.1 Tujuan :

1. Mahasiswa dapat memahami dan mengenai

perintah

perintah HTML

2. Mahasiswa dapat membuat beberapa halaman

website sederhana

2.2 Materi :

1. Tabel

2. List

3. Form

4. Semantic HTML

2.3

Teori

2.3.1 Semantic HTML

Semantik adalah studi tentang makna kata-kata dan frase dalam

bahasa. Unsur semantik = elemen dengan makna. Unsur semantik jelas

menggambarkan artinya untuk kedua

belah pihak yaitu

browser dan

pengembang. Contoh elemen non-semantik: <div> dan <span> - tidak

menceritakan apa-apa tentang isinya. Contoh elemen semantik: <form>,

<table>, dan <article> - Jelas mendefinisikan isinya. Banyak situs

web berisi kode HTML seperti: <div id = "nav"> <div class =

"header"> <div id = "footer"> untuk menunjukkan navigasi, header,

dan footer.

HTML5 menawarkan unsur-unsur

semantik baru untuk

menentukan bagian-bagian yang berbeda dari suatu halaman web:

 <article> = mendefinisikan sebuah artikel

 <aside> =Mendefinisikan konten selain dari konten halaman

 <details> = Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau

menyembunyikan

 <figcaption> = Mendefinisikan sebuah caption untuk elemen <figure>

 <figure> = Menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll

 <footer> = Mendefinisikan untuk dokumen atau bagian footer

 <header> = Menentukan untuk dokumen atau bagian header

 <main> = Menentukan isi utama dokumen

 <mark> = Mendefinisikan teks yang ditandai / disorot

 <nav> = Mendefinisikan link navigasi

 <section> = Mendefinisikan sebuah bagian dalam sebuah dokumen

 <summary> = Mendefinisikan sebuah judul terlihat untuk <details> elemen

(3)

Elemen <section>

elemen mendefinisikan bagian dalam sebuah dokumen.

Sebuah halaman rumah bisa normal dibagi menjadi beberapa bagian

untuk pengenalan, konten, dan informasi kontak.

Skrip

Hasil

<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section>

elemen <Article>

menentukan independen, konten mandiri. Contoh di

mana elemen <article> dapat digunakan: posting forum, blog post.

Artikel koran

Skrip

Hasil

<article>

<h1>What Does WWF Do?</h1>

<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>

</article>

elemen <header>

menentukan header untuk dokumen atau bagian. Elemen

<header> harus digunakan sebagai

wadah untuk konten pengantar.

Contoh berikut mendefinisikan header untuk sebuah artikel:

Skrip

Hasil

<h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header>

<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p>

</article>

elemen <footer>

menentukan footer untuk dokumen atau bagian. Sebuah

footer biasanya berisi penulis informasi dokumen, hak cipta, link ke

persyaratan penggunaan, informasi kontak, dll

Skrip

Hasil

<p>Posted by: Hege Refsnes</p>

<p>Contact

information:

<a

href="mailto:someone@example.com">

(4)

elemen <nav>

mendefinisikan satu set link navigasi. Perhatikan bahwa

tidak semua link dari dokumen harus di dalam elemen <nav>. elemen

<nav> dimaksudkan hanya untuk blok utama link navigasi.

Skrip

Hasil

<nav>

<a href="/html/">HTML</a> | <a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>

elemen <aside>

mendefinisikan beberapa konten selain dari konten itu

ditempatkan di (seperti sidebar).Samping konten harus terkait dengan

konten sekitarnya.

Skrip

Hasil

<p>My family and I visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

Tujuan dari sosok caption adalah menambahkan penjelasan visual untuk

gambar.

<Img> elemen mendefinisikan gambar, <figcaption> mendefinisikan judul.

Dalam HTML5, gambar dan keterangan dapat dikelompokkan bersama

dalam sebuah

elemen <figure>:

Skrip

Hasil

<figure>

<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>

</figure>

2.3.2 Tabel

Untuk menambahkan sebuah table yang baris dan kolomnya dapat anda

sesuaikan kebutuhan table yang anda buat. Elemen table terdiri dari

<tr>, <td> dan <th>. Dimana fungsi masing

masing berbeda, <tr>

digunakan untuk membuat baris, <th> untuk membuat header, <td>

digunakan untuk membuat kolom. <Td> elemen adalah wadah data tabel.

Mereka dapat berisi segala macam elemen HTML; teks, gambar, daftar,

tabel lain, dll. Atribut elemen Tabel pada HTML 5 sebagai berikut :

Tag

Definisi

<table>

elemen untuk mendefinisikan tabel <tr> elemen untuk menentukan baris tabel <td> elemen untuk menentukan data tabel <th> elemen untuk menentukan tabel pos

<caption> elemen untuk mendefinisikan judul tabel CSS border property Untuk menentukan jarak garis

CSS border-collapse Untuk menjadikan satu garis CSS padding property Untuk menambah padding untuk sel CSS text-align Untuk menyelaraskan teks sel

(5)

Tag

Definisi

colspan untuk membuat rentang sel banyak kolom

rowspan untuk membuat rentang sel banyak baris

id untuk mendefinisikan identitas satu tabel

Contoh :

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

<td>Doe</td>

</tr>

</table>

Pada elemen

Table

HTML 5, Untuk menambahkan

sebuah

border

menggunakan property CSS :

Skrip

hasil

<style>

table, th, td {

border: 1px solid black; (1) border-collapse: collapse; (2) }

th, td {

padding: 15px; (3) }

th {

text-align: left; (4) }

table {

border-spacing: 15px;(5) }

(6)

Jika Anda ingin

garis batas

jadi

dalam satu

garis, tambahkan

properti CSS border-collapse. Sel Padding menentukan ruang antara

isi sel dan perbatasannya. Jika Anda tidak menentukan bantalan,

sel-sel tabel akan ditampilkan tanpa padding. Untuk mengatur padding,

menggunakan properti CSS padding. HTML Table

align kiri. Secara

default, judul tabel yang ada adalah tebal dan berada di tengah.

Untuk menyelaraskan tajuk tabel

maka align berada di

kiri,

menggunakan properti text-align CSS. jarak Padding Border Spacing

Border menentukan ruang antara sel-sel. Untuk mengatur jarak antar

garis, menggunakan properti CSS border-spacing, jika garisnya Cuma

satu maka jaraknya tidak terlihat.

Untuk membuat merger atau

merekatkan beberapa kolom kita membutuhkan atribut colspan

dan

rowspan untuk merekatkan beberapa baris.

Skrip

Hasil

<th colspan="2">Telephone</th> </tr>

<tr>

<td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr>

</table>

<h2>Cell that spans two rows:</h2> <table style="width:100%">

<tr>

<th>Name:</th> <td>Bill Gates</td> </tr>

<tr>

<th rowspan="2">Telephone:</th> <td>55577854</td>

</tr> <tr>

</table>

Untuk menambahkan keterangan pada

tabel kita menggunakan tag

<caption>, tag <caption> harus ditulis setelah tag <table>

Skrip

Hasil

<caption>Monthly savings</caption> <tr>

<th>Month</th> <th>Savings</th> </tr>

[image:6.595.63.532.294.767.2]

(7)

<td>January</td> <td>$100</td> </tr>

<tr>

<td>February</td> <td>$50</td> </tr>

</table>

Untuk menentukan gaya khusus untuk

tabel

khusus,

maka perlu

menambahkan atribut id ke tabel, contoh:

Skrip

Hasil

<!DOCTYPE html> <html>

<head> <style>

table, th, td {

border: 1px solid black; border-collapse: collapse; }

th, td {

padding: 5px; text-align: left; }

table#t01 { width: 100%;

background-color: #f1f1c1; }

</style> </head> <body>

<table style="width:100%"> <tr>

<th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr>

<tr>

<td>Jill</td> <td>Smith</td> <td>50</td> </tr>

<tr>

<td>Eve</td> <td>Jackson</td> <td>94</td> </tr>

<tr>

<td>John</td> <td>Doe</td> <td>80</td> </tr>

</table> <br>

<table id="t01"> <tr>

<th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr>

<tr>

(8)

<td>Smith</td> <td>50</td> </tr>

<tr>

<td>Eve</td> <td>Jackson</td> <td>94</td> </tr>

<tr>

<td>John</td> <td>Doe</td> <td>80</td> </tr>

</table> </body> </html>

table#t01 tr:nth-child(even) { background-color: #eee; }

table#t01 tr:nth-child(odd) { background-color:#fff; }

table#t01 th {

background-color: black; color: white;

}

2.3 LITS

List Item (LI) : digunakan untuk mengelompokkan data baik berurutan

(ordered list) maupun yang tidak berurutan (unordered list). Daftar

dapat bersarang di dalam daftar. Daftar item dapat berisi elemen

HTML lainnya

Atribut/elemen Definisi

<ul>

untuk mendefinisikan daftar unordered (tidak

berurutan)

CSS

list-style-type

untuk menentukan item daftar penanda

<ol>

untuk mendefinisikan daftar berurutan

type

menentukan jenis penomoran

<li>

untuk menentukan item daftar

<dl>

untuk mendefinisikan daftar deskripsi

<dt>

untuk mendefinisikan istilah deskriptif

<dd>

untuk menggambarkan istilah dalam daftar deskripsi

Skrip

Hasil

<!DOCTYPE html> <html>

<body>

<h2>An Unordered HTML List</h2> <ul>

<li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>

(9)

<li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

</body> </html>

Unordered (Tidak berurutan) List HTML Dan List unordered dimulai

dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>. Daftar

item akan ditandai dengan peluru (lingkaran hitam kecil) secara

default. Unordered List mempunyai Pilihan penanda dengan menggunakan

Properti CSS list-style-type.

Skrip

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc"> <li>Coffee</li>

1. Disc = Menetapkan item daftar penanda dengan peluru (default)

2. Circle = Menetapkan item daftar penanda dengan lingkaran

3. Square = menetapkan item daftar penanda dengan persegi

4. None = tidak menggunakan penanda

Ordered

List

atau

Daftar

HTML

yang

berurutan.Daftar

ini

memerintahkan dengan tag <ol>. Setiap item daftar dimulai dengan tag

<li>. Daftar item akan ditandai dengan angka secara default:

Skrip

<h2>Ordered List with Numbers</h2> <ol type="1">

<li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

1. Type = 1 : Daftar item diberi

nomor dengan angka (default)

2. Type = A : Daftar item diberi

nomor dengan huruf capital

3. Type = a : Daftar item diberi

nomor dengan huruf kecil

4. Type = I : Daftar item diberi

nomor dengan huruf romawi besar

5. Type = i : Daftar item diberi

nomor dengan huruf romawi kecil

HTML juga mendukung daftar deskripsi.Sebuah daftar deskripsi adalah

daftar

istilah,

dengan

deskripsi

setiap

istilah.

Tag

<dl>

mendefinisikan daftar deskripsi,

tag

<dt> mendefinisikan istilah

(nama), dan Tag <dd> menjelaskan setiap istilah:

Skrip

Hasil

<h2>A Description List</h2>

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd> <dt>Milk</dt>

<dd>- white cold drink</dd> </dl>

List atau daftar juga bisa

bersarang,

Daftar item dapat berisi

daftar baru, dan elemen HTML lainnya, seperti gambar dan link, dll

(10)

<h2>A Nested List</h2> <ul>

<li>Coffee</li> <li>Tea

<ul>

<li>Black tea</li> <li>Green tea</li> </ul>

</li>

Daftar HTML bisa ditata dalam berbagai cara dengan CSS.

Salah satu cara

yang populer adalah gaya daftar horizontal, untuk membuat menu:

Skrip

Hasil

<!DOCTYPE html> <html>

<head> <style> ul {

list-style-type: none; margin: 0;

padding: 0;

overflow: hidden;

background-color: #333333; }

li {

float: left; }

li a {

display: block; color: white;

text-align: center; padding: 16px;

text-decoration: none; }

li a:hover {

background-color: #111111; }

</style> </head> <body>

<ul>

<li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a

href="#contact">Contact</a></li> <li><a

href="#about">About</a></li> </ul>

(11)

2.4. HTML Forms

Pada saat membuat form anda bisa meletakkan kontrol - kontrol pada

form untuk memperbolehkan inputan dari user. Semua kontrol biasanya

di letakkan di antara tag <FORM></FORM>

tapi anda juga bisa

meletakkan kontrol diluar tag tersebut. Untuk menambahkan kontrol

gunakan tag <input>.

Kegunaan Form

Berikut ini beberapa contoh kegunaan Form dalam web:

1. memperoleh data-data user baik nama, alamat dan data lainnya

2. memperoleh informasi pembelian secara online

3. memperoleh feedback dari user mengenai website anda

Pada dasarnya tag <Form> dan <Input> digunakan bersama

sama untuk

meminta masukan dari user kemudian dikirimkan ke server. Tag <Form>

menyediakan kerangkanya. Tag <Input> menyediakan elemennya.

Standar penulisan form adalah sebagai berikut:

...

</Form>

Attribute

Method

memiliki dua nilai, yaitu

POST

dan

GET.

Method

GET

berfungsi untuk mengirimkan data pada server dengan cara meletakkan

data pada bagian akhir

URL

(

Uniform Resource Locator

) yang ditunjuk.

Method

POST

berfungsi untuk mengirimkan datanya secara terpisah.

Jika data masukkan terlalu banyak, disarankan menggunakan method

POST

.

Attribut ACTION berisi URL dari program / dokumen yang berisi

scripting yang dipanggil oleh form tersebut.

Atribut

Keterangan

Name

nama untuk form yang berlaku

Method

GET = data yang dikirim melalui URL address

POST = data yang dikirimkan bersama HTTP header

Action

URL / File yang digunaka untuk menangkap dan

mengolah nilai

2.4.1 Elemen Input

Bentuk elemen yang paling penting adalah

elemen

<input>.

elemen

<Input> dapat ditampilkan dalam beberapa cara, tergantung pada jenis

atribut. Macam

macam elemen input:

mendefinisikan satu baris kolom input teks.

<Input type = "password">

mendefinisikan sebuah kolom password

dengan karakter yang ditampilkan lingkaran atau bintang.

mendefinisikan tombol untuk mengirimkan data

formulir ke bentuk-handler. Bentuk-handler biasanya halaman server

dengan script untuk memproses input data.

<Input type = "reset">

mendefinisikan sebuah tombol reset yang akan

(12)

mendefinisikan tombol radio. Tombol radio

hanya bisa di[ilih HANYA SATU dari sejumlah pilihan

mendefinisikan sebuah kotak

yang bisa

dicentang. Pengguna bisa tidak memilih atau memilih lebih dari satu.

Skrip Hasil

<form action="/action_page.php"> First name:<br>

Last name:<br>

User password:<br>

<input type="radio" name="gender" value="female"> Female<br>

<input type="radio" name="gender" value="other"> Other<br><br>

<input type="checkbox" name="vehicle1" value="Bike">I have a bike

<br>

<input type="checkbox" name="vehicle2" value="Car">I have a car

Elemen

mendefinisikan daftar drop-down.

<Option> elemen

mendefinisikan opsi yang bisa dipilih. Secara default, item pertama

dalam daftar drop-down yang dipilih. Untuk menentukan pilihan

pra-dipilih, menambahkan atribut

selected

untuk pilihan:

Skrip

Hasil

<option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

elemen <textarea>

mendefinisikan field input multi-line (text area).

Atribut

rows

menentukan jumlah terlihat baris dalam area teks.

Atribut

cols

menentukan lebar terlihat dari area teks.

(13)

<form >

<textarea name="message" rows="10" cols="30"> The cat was playing in the garden.</textarea> <br>

elemen <button> mendefinisikan sebuah tombol diklik

Skrip

Hasil

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Pada HTML 5 tabel terdapat beberapa element baru yaitu : elemen

<datalist> menentukan daftar pilihan yang telah ditentukan untuk

elemen <input>. Pengguna akan melihat daftar drop-down pilihan

pra-didefinisikan sebagai mereka input data. Daftar atribut dari elemen

<input>, harus mengacu pada atribut id dari elemen <datalist>.

Skrip

Hasil

Tujuan dari elemen <keygen> adalah untuk menyediakan cara yang aman

untuk mengotentikasi pengguna. elemen <keygen> menentukan bidang key

generator-pair dalam formulir.Ketika formulir dikirimkan, dua tombol

dihasilkan, satu pribadi dan satu publik. Kunci pribadi disimpan

secara lokal, dan kunci publik dikirim ke server.Kunci publik dapat

digunakan untuk menghasilkan sertifikat klien untuk mengotentikasi

pengguna di masa depan.

Skrip

Hasil

Username: <input type="text" name="user"> <br><br>

Encryption: <keygen name="security"> <br><br>

elemen <output> merupakan hasil perhitungan (seperti yang dilakukan

oleh

script). melakukan perhitungan dan menampilkan hasil dalam elemen <output>.

<form action="/action_page.php"

oninput="x.value=parseInt(a.value)+parseInt(b.valu e)">

0

(14)

100 +

<input type="number" id="b" name="b" value="50"> =

Elemen Inputan baru di HTML 5,

jenis

inputan

baru yang tidak

didukung oleh browser web yang lebih lama, akan tetapi cara kerjanya

seperti <input type = "text">. Berikut elemen inputan yang baru di

HTML 5 :

digunakan untuk field input yang harus berisi

warna.

tanggal.

Tergantung pada dukungan browser, tanggal pemetik dapat

muncul di bidang masukan

menentukan field input tanggal dan

waktu, dengan tidak ada zona waktu.

<Input type = "email">

alamat email. Tergantung pada dukungan browser, alamat e-mail dapat

secara otomatis divalidasi ketika disampaikan. Beberapa smartphone

mengenali jenis email, dan menambahkan ".com" ke keyboard untuk

mencocokkan masukan email.

<Input type = "month">

memungkinkan pengguna untuk memilih bulan dan

tahun.

mendefinisikan sebuah field input numerik.

Anda juga dapat mengatur pembatasan apa nomor yang diterima. Contoh

berikut menampilkan field input numerik, di mana Anda dapat

memasukkan nilai dari 1 sampai 5:

mendefinisikan kontrol untuk memasukkan nomor

yang nilainya sebenarnya tidak penting (seperti kontrol slider).

Kisaran default adalah 0 sampai 100. Namun, Anda dapat mengatur

pembatasan nomor apa yang diterima dengan min, max, dan value.

<Input type = "search">

digunakan untuk bidang pencarian (kolom

pencarian berperilaku seperti kolom teks biasa).

nomor telepon.

memungkinkan pengguna untuk memilih waktu

(tidak ada zona waktu)

<Input type = "url">

alamat URL.Tergantung pada dukungan browser, bidang url dapat secara

otomatis divalidasi ketika disampaikan.Beberapa smartphone mengenali

jenis url, dan menambahkan ".com" ke keyboard untuk mencocokkan

masukan url.

memungkinkan pengguna untuk memilih satu

minggu dan tahun.

Skrip Hasil

<form action="/action_page.php"> Select your favorite color: <input type="color"

name="favcolor" value="#ff0000"> <input type="submit">

(15)

Skrip Hasil <form action="/action_page.php">

Birthday:

</form>

<form action="/action_page.php"> Enter a date before 1980-01-01:<br> <input type="date" name="bday" max="1979-12-31"><br><br>

Enter a date after 2000-01-01:<br> <input type="date" name="bday" min="2000-01-02"><br><br> <input type="submit"> </form>

<form action="/action_page.php"> Birthday (date and time): <input type="datetime-local" name="bdaytime">

<form action="/action_page.php"> E-mail:

</form>

<form action="/action_page.php"> Birthday (month and year): <input type="month"

name="bdaymonth">

<form action="/action_page.php"> Quantity (between 1 and 5): <input type="number"

name="quantity" min="1" max="5"> <input type="submit">

</form>

Aturan masukan/ Inputan pada HTML5.

Berikut adalah daftar dari beberapa aturan masukan umum:

Atribut

Deskripsi

disabled

Menentukan bahwa sebuah field input harus dinonaktifkan

max

Menentukan nilai maksimum untuk sebuah field input maxlength Menentukan jumlah maksimum karakter untuk sebuah field

input

Min Menentukan nilai minimum untuk sebuah field input pattern untuk Menentukan ekspresi reguler dan memeriksa nilai

terhadap masukan

readonly Menentukan bahwa sebuah field input hanya bisa dibaca saja (tidak dapat diubah)

Required Menentukan bahwa sebuah field input diperlukan (harus diisi)

(16)

3.4 LATIHAN PRAKTIKUM

3.4.1 PENGGUNAAN TABEL

1. Membuat garis tabel menjadi satu garis.

table, th, td {

border: 1px solid black;

border-collapse: collapse; }

th, td {

padding: 5px; text-align: left; }

</style> </head> <body>

<th>First Name</th> <th>Last Name</th> <th>Points</th> </tr>

<tr>

<td>Jill</td> <td>Smith</td> <td>50</td> </tr>

<tr>

<td>Eve</td> <td>Jackson</td> <td>94</td> </tr>

</table> </body> </html>

2.

Membuat meja lebar 300 piksel

table, th, td {

border: 1px solid black; border-collapse: collapse; }

th, td {

<table style="width:300px">

<tr>

(17)

<th>Points</th> </tr>

<tr>

3. Menambahkan keterangan dengan huruf "Nama" ke Tabel

table, th, td {

border: 1px solid black; border-collapse: collapse; }

th, td {

<caption>Names</caption>

<tr>

4. Ubah garis tabel menjadi 5 piksel, dan berwarna merah.

(18)

table, th, td {

border: 5px solid red;

}

th, td {

<tr>

5.

menyelaraskan teks dalam tabel disebelah kiri

table, th, td {

border: 1px solid black; border-collapse: collapse; padding: 5px;

text-align: left;

}

<tr>

(19)

6. Menambahkan warna latar belakang hitam dengan teks putih untuk

semua baris tabel.

table, th, td {

border: 1px solid black; text-align: left;

} tr {

background-color : black; color : white;

}

<tr>

(20)

b. Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH>

3. Pengaturan jarak dalam tabel :

CELLSPACING mengatur jarak bagian sel terhadap tepi dalam bingkai

tabel.

CELLPADDING mengatur jarak teks terhadap tepi kiri.

3.4.2 PENGGUNAAN FORM

1. Input data dengan input

(21)

2. Penggunaan tipe checkbox

3. Penggunaan tombol radio dan komentar

(22)

3.5 TUGAS

1.Buatlah seperti tampilan dibawah ini

Nb : untuk kolom Negara isi dengan 1. USA, 2.Australia, 3. Germany