Tugas Pemrograman Web Dasar

Pada pertemuan kali ini membahas tentang tata letak(Layout) web secara umum, seperti dibawah ini:

HEADER

CONTENT

FOOTER

Seperti biasa, langkah awal untuk memulainya adalah:

1. Buka aplikasi Notepad

Start – klik Notepad

2. Buat ketiga struktur HTML

<html>

<head>

</head>

<body>

</body>

</html>

CODE:

<html>

<head>

<title> Layout-1 </title>

<style>

#header {

width : 100%;

background-color:white;

height : 70px;

}

#content {

width : 100%;

background-color: darkorange;

height : 500px;

color : white;

}

#footer {

width : 100%;

background-color: darksalmon;

height : 50px;

color : white;

}

</style>

</head>

<body>

<!-Bagian Header->

</div>

<!-Bagian Content->

<h1> Pendaftaran Anggota</h1>

<p> Unit Kegiatan Mahasiswa (UKM)

"Web Club" menerima anggota baru tahun ajaran 2019/2020

untuk itu dibutuhkan data anggota yang akan digunakan untuk

pengolahan lebih lanjut guna kebutuhan UKM. Silahkan Anda

isikan data dibawah ini:</p>

<form>

<tr>

<td colspan=3> Input Data Anggota </td>

</tr>

<tr>

</tr>

<tr>

<td> Alamat </td>

</tr>

<tr>

<td>Tempat/Tanggal Lahir</td>

</select>

</select>

</select>

</td>

</tr>

<tr>

<td> Jenis Kelamin </td>

<td><input type=radio name=jk>Laki-laki

<input type=radio name=jk>Perempuan</td>

</tr>

<tr>

<td> Catatan </td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</div>

<!-Bagian Footer->

<h2> Hakcipta ©Oleh: Etta 2019 </h2>

</div>

</body>

</html>

*NOTE:

1.Tag <div > </div>

Divisio: Digunakan untuk mengatur tata letak data/informasi di web

2.# : sebagai ID(Pengenal) dan “unik”

Cth: #header{

}

#content{

}

3 3. <!- -> : hanya sebagai komentar, tidak akan ditampilkan saat kode dijalankan

Contoh : <!-Bagian Header->

4 4. <td><input type=text size=25></td> :Text size agar bisa diisi,dengan panjang karakter 25

5 5. Untuk pilihan Tgl Lahir harus digunakan :

</select>

Agar tampil seperti berikut:

6. <td><input type =radio name=jk>Laki-laki

<input type =radio name=jk>Perempuan</td>

Radio: untuk tombol pilihan

Kenapa harus ada “name” dikeduanya? Supaya hanya 1 pilihan yang boleh dipilih

7. <td><textarea cols= 40 rows=7></textarea></td>

Textarea: Agar lebih banyak teks yang dapat diisi, boleh juga ditentukan ukuran dengan menggunakan “cols” dan “rows”.

Maka beginilah hasil akhir dari program yang dibuat:

Terimakasih untuk kunjungan anda

Please like , comment and share

Semoga Bermanfaat dan Selamat Mencoba

Pada pertemuan III mempelajari cara mengimplementasikan html untuk merancang tampilan web.

Seperti yang biasanya dilakukan,langkah awal untuk memulainya adalah:

1. Buka aplikasi Notepad

Start – klik Notepad

2. Buat ketiga struktur HTML

<html>

<head>

</head>

<body>

</body>

</html>

3. Simpan kode dengan nama yang diinginkan, kali ini saya menimpan nya dengan nama P3.1.html ingat untuk membuat “.html”

4. Buka file yang telah disimpan melalui web browser apa saja

Untuk tahap ini akan digunakan CSS. CSS(Cascading Style Sheet) merupakan bahasa yang digunakan untuk memformat tag-tag yang ada. Css dapat digunakan dalam kode HTML dengan 3 cara yaitu:

Inline CSS

Adalah kode CSS yang ditulis langsung pada atribut/elemen HTML.

Contoh: <p style=" font-family :verdana;

line-height :25px;

color :pink;

background-color:black;">

Internal CSS

Digunakan untuk memberi style yang hanya berlaku pada satu laman web style yang

diberikan,diapit oleh tag<style> </style> dan diletakkan pada bagian <head> </head>.

Contoh: <head>

<title> Praktikum 3.1 </title>

<style>

a {

text-decoration: none;

}

a:hover{

color :yellow;

}

</style>

</head>

External CSS

Merupakan file yang berektensi .css yang hanya berisi kode-kode style. Tujuan menggunakan eksternal CSS adalah untuk memisahkan kode style dengan struktur dan tipe onten laman web. Eksternal CSS dapat diaplikasikan pada lebih dari satu laman Web.

Ada 2 hal yang akan kita buat kali ini, jadi langsung saja pada yang pertama:

Ø Rancang halaman utama yang pertama

logo
home	product	data	Login

CODE:

<html>

<head>

<title> Praktikum 3.1 </title>

<style>

a {

text-decoration: none;

}

a:hover{

color :yellow;

background-color:black;

font-size :20px;

}

</style>

</head>

<body>

<tr>

<td colspan=4> <img src=LOGOBP.PNG> </td> *colspan=Menggabungkan kolom

</tr>

<tr>

<td align=center> <a href=> Product </a> </td>

<td align=center> <a href=> Login </a> </td>

</tr>

<tr>

<p style="font-family :verdana;

line-height :25px;

color :pink;

background-color:black;

text-align :justify;

text-indent :30px;

padding-left :10px;

padding-right :10px; ">

<span style ="font-size :20px;

color :black;

background :white;"> Blackpink </span>

adalah salah satu idol kpop terpopuler pada zaman modern ini.

Bahkan orang-orang yang bukan kpopers menikmati lagu yang dinyanyikan

mereka dengan judul "Ddu Ddu Ddu". Blacpink masih sangat muda dibanding idol

lainnya, namun sudah banyak menerima penghargaan karena mampu menarik perhatian

masyarakat korea maupun mancanegara termasuk di Indonesia. Fandom mereka bernama

BLINK, dan sudah banyak sekali BLINK di Indonesia. Memang Idol dengan 4 member ini

yaitu Jisoo,Lisa,Rose dan Jenie sangat berpengaruh di banyak khalangan mastarakat.

</p>

<p style="font-family :verdana;

line-height :25px;

color :black;

background-color :pink;

text-align :center;

text-indent :30px;

padding-left :10px;

padding-right :10px; ">

<span style ="font-size :20px;

color :pink;

background :white;"> Blackpink </span>

adalah salah satu idol kpop terpopuler pada zaman modern ini.

Bahkan orang-orang yang bukan kpopers menikmati lagu yang dinyanyikan

mereka dengan judul "Ddu Ddu Ddu". Blacpink masih sangat muda dibanding idol

lainnya, namun sudah banyak menerima penghargaan karena mampu menarik perhatian

masyarakat korea maupun mancanegara termasuk di Indonesia. Fandom mereka bernama

BLINK, dan sudah banyak sekali BLINK di Indonesia. Memang Idol dengan 4 member ini

yaitu Jisoo,Lisa,Rose dan Jenie sangat berpengaruh di banyak khalangan mastarakat.

</p>

</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Dan beginiah hasil dari rancangan pertama

Ø Rancang halaman produk yang kedua

logo

home

product

data

Picture 1	Picture 2	Picture 5
	Picture 3	Picture 6
	Picture 4	Picture 7

CODE:

<html>

<head>

<title> Praktikum 3.2.1 </title>

<style>

a {

text-decoration: none;

}

a:hover{

color :yellow;

background-color:black;

font-size :30px

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

<td align=center> <a href=> Product </a> </td>

<td align=center> <a href=> Login </a> </td>

</tr>

<tr>

<td colspan=4><h1> Product </h1>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

</body>

</html>

Dan beginiah hasil dari rancangan kedua:

Terimakasih untuk kunjungan anda

Please like 💜, comment and share

Semoga Bermanfaat dan selamat mencoba 😊😊

Tugas Pemrograman Web Dasar

Senin, 14 Oktober 2019

Pertemuan 4

Pertemuan 3

Arsip Blog