Sabtu, 16 Mei 2020

TUGAS DARING MATERI 4 BELAJAR HTML - HTML Tag Table

TAG TABLE

Tabel Html memungkinkan penulis web untuk mengatur data menjadi baris dan kolom.
Kali ini kita akan membuat 3 tag tabel, pertama kita akan membuat tag table bendera negara Indonesia, kedua tag table gabungan, dan ketiga tag table absen.

1. Bendera Indonesia

Berikut contoh kode html membuat lambang bendera :

<!DOCTYPE html>
<html>
<body>
<table border="1" cellpadding="50" style="width:100%">
<tr style="background-color:red">
<td></td>
</tr>
<tr>
<tr style="background-color:white">
<td></td>
</tr>
</table>
<p align="center"><b>AKU CINTA INDONESIA</p></b>
</body>
</html>

Jika ditulis dalam editor anwriter akan seperti dibawah :


Dan hasil nya akan seperti ini :


2. Gabungan

Berikut contoh kode html dari gabungan :

<!DOCTYPE html>
<html>
<body>
<center>
<table border="1" cellpadding="60" 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">SMK 4 LPPM PADALARANG</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 ditulis dalam editor anwriter akan seperti dibawah ini :
Hasil nya akan seperti ini :


3. Absen

Berikut contoh kode html dari 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 3</th>
</tr>
<tr>
<th style="background-color:yellow">NO</th>
<th style="background-color:yellow">NAMA</th>
<th style="background-color:yellow">L/P</th>
<th style="background-color:yellow">ALAMAT BLOG</th>
</tr>
<tr>
<td>1</td>
<td>RINI</td>
<td>P</td>
<td>rini-pelajarperdulicovid19.blogspot.com</td>
</tr>
<tr>
<td>2</td>
<td>EKA HERMAWAN</td>
<td>L</td>
<td>ekahermawan-pelajarpedulicovid19.blogspot.com</td>
</tr>
<tr>
<td>3</td>
<td>VIDKI</td>
<td>L</td>
<td>vidki-pelajarpedulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>4</td>
<td>RESTI NOPIANTI</td>
<td>P</td>
<td>http://restinopiantii-pelajarperdulicovid19.blogspot.com</td>
</tr>
<tr>
<td>5</td>
<td>ELISNA JUNGJUNAN</td>
<td>P</td>
<td>http://elisna-pelajarpedulicovid19.blogspot.com</td>
</tr>
<tr>
<td>6</td>
<td>DINI JULIANTI</td>
<td>P</td>
<td>http://dini-pelajarperdulicovid19.blogspot.com</td>
</tr>
<tr>
<td>7</td>
<td>MIFTAH FARIZ</td>
<td>L</td>
<td>miftah-pelajarpedulicovid19.blogspot.com</td>
</tr>
<tr>
<td>8</td>
<td>SUCI NUR SIFA</td>
<td>P</td>
<td>sucinursifa-pelajarperdulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>9</td>
<td>RISMA</td>
<td>P</td>
<td>risma-pedulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>10</td>
<td>WULAN</td>
<td>P</td>
<td>wulanfebriyantipelajarpedulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>11</td>
<td>MURTI HANDAYANI</td>
<td>P</td>
<td>murtihandayani-pelajarpedulicovid19.blogspot.com/?m=1</td>
</tr>
<tr>
<td>12</td>
<td>ADI TAJUDIN</td>
<td>L</td>
<td>aditajudin-pelajarperdulicovid19.blogspot.com/2020/03/pelajar-perduli-covid-19.html?m=1</td>
</tr>
</table>
</body>
</head>
</html>

Jika ditulis dalam editor anwriter akan menjadi seperti dibawah ini :

Dan hasil nya akan seperti ini :

Foto siswi yang mengerjakan :



Selamat Mencoba😄

Minggu, 10 Mei 2020

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

Membuat Website Sederhana

Berikut contoh kode html untuk membuat website sederhana biodata :

<!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://www.dini-pelajarperdulicovid19.blogspot.com/">Kunjungi BLOGku</a></center>
<hr>
<!-- <img> adalah tag untuk memasukan element gambar -->
<img src="DiniJulianti.jpg" >
<p><center> Dini Julianti </center></p>
    <h2><center><b> MY BIOGRAFI </b></center></h2>
<p><center> Bandung, 12 Januari 2003 </center></p>
<p><center> Perempuan </center></p>
<p><center> Jln.Pasir Gede Kp.Sudimampir Rt/Rw 03 </center></p>
    <p><center>Contact:</center></p>
<p><center>089516138051 - dinijuliyanti12@gmail.com </p></center>
<br> Pengalaman saya selama stay@home ini banyak sekali yang didapatkan, terutama untuk membantu ibu saya mengerjakan pekerjaan rumah. 
Saya juga menjadi lebih sering untuk memasak, tetapi tak jarang rasa dari masakannya tidak sesuai dengan ekspetasi. Kadang - kadang
saya juga menulis sebuah cerita fiksi dalam suatu aplikasi dengan imajinasi yang saya tuangkan dalam cerita tersebut. Dalam stay@home
ini juga orang - orang cenderung melakukan kegiatan positif dan lebih menggali bakat yang ada dalam diri masing - masing orang tersebut.
Maka dari itu untuk teman - teman sekalian, tetap stay safe dan menjaga kebersihan ya😊. </br>
</body>
</html>

Kode html di atas akan seperti di bawah ini :


Hasil kode html di atas akan seperti di bawah ini :


Setelah selesai, kita bisa mengklik link yang ada diatas dan hasil nya akan seperti di bawah ini : 

f

Foto siswi yang mengerjakan :


Kamis, 07 Mei 2020

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

SEJARAH SMK 4 LPPM RI PADALARANG

Berikut contoh kode html untuk menampilkan gambar dan
sejarah smk4 lppm ri padalarang :

<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku!</title>
<head>
<body bgcolor="black">
<p style="color:white">SMK 4 LPPM RI PADALARANG</p>
<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" alt="logo">
<p style="color:white">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.</p>
</body>
</html>

Jika kode di tulis dalam editor anwriter :


Dan hasil dari kode html akan seperti ini :



Foto siswi yang mengerjakan


Demikian penjelasan singkat yang saya sampaikan, terima kasih.

Minggu, 03 Mei 2020

MATERI 1- DARING PBO : PENGENALAN HTML DAN TAG HTML

Pengenalan HTML dan Tag HTML

Menampilkan tulisan HALLO WORLD! dalam text html :

<!DOCTYPE html>
<html>
<head>
<title>Website Pertamaku</title>
</head>
<body>

<h1>HALLO WORLD !</h1>

</body>
</html>


Hasil dari halaman web akan seperti di bawah ini :

Foto siswi yang mengerjakan 






Tugas Project PBO

  Tampilan Website Daftar Riwayat Hidup Dengan HTML dan CSS - Tampilan coding untuk halaman 1 Hasil tampilan coding diatas : - Tampilan codi...