Tugas Project 1 Membuat Landing Page dengan halaman HTML dan CSS

 HTML & CSS

HTML di buat untuk struktur halaman website atau dasar suatu halaman web untuk menampilkan informasi. 

CSS digunakan untuk menghiasi struktur yang sudah kita buat atau mengubah tampilan halaman web menjadi lebih bagus dan menarik.

Kita akan membuat html nya dulu seperti ini:

Setelah selesai membuat html, kita baru bisa mengerjakan css nya seperti ini:

Dan hasilnya jadi seperti ini:

TUGAS 1 HTML LANJUTAN - XII RPL TH 2020

Contoh Pembuatan HTML & CSS

Contoh penulisan yang saya buat:

Hasil penulisan di atas:

TUGAS 1 HTML LANJUTAN - XII RPL TH 2020

Quiz Topik Materi : HTML Lanjutan

Carilah kesalahan-kesalahan yang terdapat pada sintak html dibawah ini dan tulis kembali dengan lengkap! 

<html>

<head>

<title>

Quiz 1

<title>

<body>

<h3>Menentukan Sintak yang salah dan kurang </h2>

<p> belajar menjadi ahli butuh latihan yang terus menerus</p>

<p>Latihan skill dengan terus mengulang-ngulang materi agar otak dan tangan men jadi terlatih<p>

</>

<html>

Mencari kesalahan sintak html
1.kurang tag penutup </head>
2.kesalahan tag penutup </h2>
Seharusnya </h3>
3.Kurang tanda (/) pada tag penutup <p>,pada paragraf ke 2 seharusnya </p>
5.kurang tanda (/) juga pada tag <html> yang terakhir seharusnya </html>
6.penulisan </> di hapus saja

Penulisan coding yang saya kejakan:

<html>
<head>
<title>Quiz 1</title>
<body>
<h3>menentukan sintak yang salah dan kurang</h3>
<p>belajar menjadi ahli butuh latihan yang terus menerus</p>
<p>latihan skill dengan dengan terus mengulang-ngulang agar otak dan tangan menjadi terlatih</p>
</body>
</head>
</htm>

TUGAS DARING MATERI 4 BELAJAR HTML - Tag Table

Tag Table

Tabel HTML memungkinkan penulis web untuk mengatur data menjadi baris dan kolom.

Kali ini saya akan mengerjakan tugas akhir kejar siswa yaitu menyelesaikan 3 project...

1.Membuat lambang bendera merah putih dengan tulisan"AKU CINTA INDONESIA"

Berikut contoh kode html membuat lambang negara:

<!DOCTYPE html>
<html>
<body>

<title>Bendera Indonesia</title>

<center>
<table border="1" cellpadding="60" cellspacing="0" style="width:100%">

<tr style="background-color: red">
<td></td>
</tr>
<tr style="background-color: white">
<td></td>
</tr>
</table>

<h1>
<td><center>AKU CINTA INDONESIA</center></td>
</h1>
</center>
</body>
</html>

Jika di tulis dalam Notepad++ akan seperti ini:

Hasilnya akan seperti ini:

2.Membuat Tabel Gabungan

Berikut contoh kode htmlnya:

<!DOCTYPE html>
<html>
<body>
<center>
<table border="1" cellpadding="50" cellspacing="1">
<tr>
<td colspan="2" style="background-color:red"></td>
<td colspan="2" style="background-color:blue"></td>
<td colspan="2" style="background-color:blue"></td>
<td colspan="2" style="background-color:red"></td>
</tr>
<tr align="center">
<td colspan="2" style="background-color:blue"></td>
<td colspan="4" rowspan="2">
<h1>SMK 4</h1>
<h1>LPPM RI</h1>
<h1> PADALARANG</h1>
</td>
<td colspan="2" style="background-color:blue"></td>
</tr>
<tr align="center">
<td colspan="2" style="background-color:blue"></td>
<td colspan="2" style="background-color:blue"></td>
</tr>
<tr align="center">
<td colspan="2" style="background-color:red"></td>
<td colspan="2" style="background-color:blue"></td>
<td colspan="2" style="background-color:blue"></td>
<td colspan="2" style="background-color:red"></td>
</tr>
</table>
</body>
</html>

Jika di tulis dalam Notepad++ akan seperti ini:

Hasilnya akan seperti ini:

3.Membuat Tabel Absen Kelas

Berikut contoh kode html membuat absen:

<!DOCTYPE html>
<html>
<head>
<body>
<table border="1" cellpadding="1" cellspacing="1">
<tr>
<th align="center" colspan="4" style="background-color:blue">ANGGOTA GRUP KELAS XI RPL 1</th>
</tr>
<tr>
<th style="background-color:yellow">NO</th>
<th style="background-color:yellow">NAMA</th>
<th style="background-color:yellow">P/L</th>
<th style="background-color:yellow">ALAMAT BLOG</th>
</tr>
<tr>
<td>1</td>
<td>Yuni Sri M</td>
<td>P</td>
<td>http://yunisrimulyani pelajarperdulicovid19.blogspot.com</td>
</tr>
<tr>
<td>2</td>
<td>Pramesti Widia P</td>
<td>P</td>
<td>https://pramesti-pelajarpedulicovid19.blogspot.com</td>
</tr>
<tr>
<td>3</td>
<td> Fitri Rianti</td>
<td>P</td>
<td>https://fitririanti-pedulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>4</td>
<td>Aulia Rahma</td>
<td>P</td>
<td>https://agystarahmaaulia blogspot.com</td>
</tr>
<tr>
<td>5</td>
<td>Nurul Azzahra</td>
<td>P</td>
<td>https://nurulazzahra.blogspot.com/?m=1</td>
</tr>
<tr>
<td>6</td>
<td>Mita Dwi A</td>
<td>P</td>
<td>http://anjanidwimita.blogspot.com</td>
</tr>
<tr>
<td>7</td>
<td>Muhammad Arya C</td>
<td>L</td>
<td>http://muhamadaryacitra blogspot.com/?m=1</td>
</tr>
<tr>
<td>8</td>
<td>Fajar Mustopa</td>
<td>L</td>
<td>https://fajarmustopa-pelajarperdulicovid19 blogspot.com</td>
</tr>
<tr>
<td>9</td>
<td>Chelsea K</td>
<td>P</td>
<td>https://chelseakhariun19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>10</td>
<td>Vina Setia B</td>
<td>P</td>
<td>https://vinasetyavinasetya blogspot.com</td>
</tr>
</table>
</body>
</head>
</html>

Jika di tulis dalam Notepad++ akan seperti ini:

Dan Hasilnya akan seperti ini:

Foto siswi yang sedang mengerjakan:

Terima Kasih :V

MEMBUAT TABLE RELASI SISTEM JUAL BELI BARANG

Membuat Table Relasi Sistem

 Jual Beli Barang 

Studi kasus kali ini adalah pengembangan dari studi kasus minggu lalu.
Tujuannya : memberikan kalian pengalama bagaimana sebuah sistem aplikasi itu dibangun tidak lepas dari keberadaan database .
Tanpa data base maka sebuah sistem tidak akan berjalan dengan baik.

Saya akan menyampaikan studi kasus hari ini ... diharapkan melihat hasil kerja kalian yang minggu lalu sebagai perbandingan.
Judul studi kasus : membuat table relasi sistem jual beli barang
Design tabelnya adalah sebagai berikut:

Nama database : DB_TRANSAKASI

Perhatikan Baik2 Mengeni Primary Key dan Foreign Key.


Ini hasil tabel yang saya buat:

TUGAS DARING MATERI 3 BELAJAR HTML - HTML Tag, Element, Attribute & Comment

TUGAS DARING MATERI 3 BELAJAR HTML - HTML Tag, Element, Attribute & Comment

Membuat Halaman Website sederhana menggunakan Text Editor W3Schools / Text Editor apapun yang kalian 

miliki dengan rincian hasil akhir yang harus di capai sebagai berikut:

1. Website Harus mengandung data Profile Kalian 

• BIODATA (Nama Lengkap , Tempat & Tgl Lahir , Jenis Kelamin , Kelas , Alamat , No WA , Email

• FOTO PRIBADI 

2. Website harus mengandung Cerita Unik Selama STAY AT HOME dimasa Pandemi Covid19

3. Website harus mengandung Text Yang jika di KLIK akan mengarah ke Halaman BLOG Kalian Masing2. ( Hyperlink )

4. Website harus mengandung Comment dan Atribute

!DOCTYPE html>
<html>
<head>
<title>Website Pribadiku</title>
</head>
<body bgcolor="pink">
<!-- <h1>Hello World</body> -->
<h1><center>Welcome To My Website</center></h1>
<center><a href=" https://pramesti-pelajarpedulicovid19.blogspot.com/">Kunjungi BLOGku</a></center>
<hr>
<!-- <img> adalah tag untuk memasukan element gambar -->
<center> <img width="50%" src="Pramesti widia.jpeg" /></center>
<p><center> PRAMESTI WIDIA PUTRI</center></p>
    <h2><center><b> My Biografi</b></center></h2>
<p><center> Bandung, 27 Oktober 2003 </center></p>
<p><center> Perempuan </center></p>
<p><center> Kp.Sudimampir Rt05/Rw 03 </center></p>
    <p><center>Contact:</center></p>
<p><center>085314086067 - pramestiwidia27@gmail.com </p></center>
<br> Siap tidak siap,berbagai upaya menerapkan pembatasan soaial harus dilaksanakan demi mencegah meluasnya penyebaran virus corona .salah satunya adalah “Stay@Home” Dunia pendidikan ,meminta di berbagai jenjang pendidikan menerapkan pembelajaran jarak jauh dari rumah masing-masing.jadi,semua anak sekolah belajar di Rumah nya masing-masing,sayapun juga sama, sebagai anak sekolah belajar di rumah.
Pengalaman saya  selama Stay@Home banyak sekali ,membantu ibu mengerjakan pekerjaan rumah ya walaupun tidak sebaik dan secepat ibu saya,belajar membuat sesuatu untuk hidangan berbuka puasa walaupun hasilnya tidak memuas kan.Juga  dalam mengerjakan tugas secara online banyak cerita cerita lucu dalam setiap mengerjakan tugas nya .semua pasti ada hikmah dalam suatu cobaan dan semago kita semua  senantiasa dalam lindungan dan rahmat allah swt .amin….
Temen-temen tetap Stay@Home dan jaga kebersihan yaa…;D</br>
</body>

</html>

Halaman html diatas akan jadi seperti:

Hasil dari halaman html diatas:

Setelah selesai, kita bisa melihat di web lewat link yang ada di atas dan hasilnya akan seperti ini:

Foto siswi yang sedang mengerjakan:

TUGAS DARING MATERI 2 BELAJAR HTML - HTML Tag, Element, Attribute & Comment

TUGAS DARING MATERI 2 BELAJAR HTML - HTML Tag, Element, Attribute & Comment

Jum'at, 7 Mei

Membuat Halaman Website sederhana menggunakan Text Editor W3Schools dengan tampilan seperti pada

gambar tampilan halaman website dibawah ini :

<html>
<head><title>html element</title>
</head>
<body>
<br>
<center>
<font color="black">
<h1>WELCOME TO </h1>
<br>
<h2><b>SMK 4 LPPM RI PADALARANG</b></h2>
</font>
</h1><img src="https://scontent.fbdo1-1.fna.fbcdn.net/v/t1.0-
9/95607295_110713980626889_160179272000995328_n.jpg?_nc_cat=106&_nc_sid=85a577&_nc_eui2=AeFsKNuhxi4jQS6pKr3
V7ocqLUz1D8FhEoQtTPUPwWEShKYDajKIeIuc6deOJhoRi1E&_nc_ohc=lwUGa3382soAX-kY3At&_nc_ht=scontent.fbdo1-
1.fna&oh=dfed21c791c0b0c580e50ec60d16588b&oe=5EDA9E12" style="width : 200px"/>
</center>
<br>
<font color="navy">
<p><b><h3>Sekolah Menengah Kejuruan SMK 4 LPPM RI PADALARANG didirikan pada tahun 2008 dan baru mendapatkan ijin pendirian pada tahun 2011 di bawah naungan Yayasan Lembaga Pendidikan dan Pengetahuan Masyarakat Republik Indonesia. Pada Tahun 2008 SMK 4 LPPM RI PADALARANG dipimpin oleh seorang Kepala Sekolah yang bernama Visa Irany Thresna Dewi,S.Pd. MM, pada awal pendirian 4 LPPM RI PADALARANG membuka 2 Dua kompetensi Keahlian yaitu Rekayasa Perangkat Lunak dan Akomodasi Perhotelan dan pada tahun 2011 baru membuka kembali 2 Dua kompetensai keahlian yaitu Teknik Komputer Jaringan dan Teknik Sepeda Motor Pada Tahun Ajaran 20132014 SMK 4 LPPM RI PADALARANG memiliki siswa sebanyak 705 siswa.</h3></b></p>
</font>
</body>
</html>

Hasil dari halaman html diatas:

Foto siswi yang sedang mengerjakan: