1. Buka google, kemudian cari codepen di tempat search lalu enter
2. Jika sudah muncul pilih lah yang pertama untuk masuk ke halan aplikasi codepen
Ini adaah tampilan/ halam utama codepen
3. Pilih start coding pada bagian kiri atas
Ini tampilan untuk memasukkan program atau scriptnya. Terdapat 3 macam pemrograman (HTML,CSS,JS). Di sini kita akan pakai yang HTML. Berikut scrip pertama yang akan kita ketik.
4. Membuat tulisan jadi berjalan, ini scripnya :
<marquee>
<b> SELAMAT DATANG</b>
</marquee>
Keterangan :
<marquee> : tag untuk membuat tulisan berjalan
<b> : tag untuk menebalkan tulisan
Setiap ingin membuat tulisan harus ada tanda pembuka an tanda penutup kata, contoh <marquee> (kata pembuka/tag pembuka) </marquee> (kata akhir/tag akhir)
5. Membuat tulisan ada warnanya, berikut script dan keterangannya :
<marquee>
<font Color="Blue">
<b> SELAMAT DATANG</b>
</marquee>
Keterangan :
<font Color=”Blue”> :tag untuk memberi warna pada text
6. Membuat heading, berikut script dan keterangannya :
<marquee>
<font Color="Blue">
<b> SELAMAT DATANG</b>
</font><h1>LKP TIFA KARYA</h1>
</marquee>
Keterangan :
</font><h1>LKP TIFA KARYA</h1> : tag untuk membuat heading
Heading pada HTML adalah elemen struktural yang digunakan untuk menunjukkan bagian penting pada halaman website. Heading ditandai dengan tag <h1> hingga <h6>, yang memiliki enam tingkatan yang berurutan. Tag <h1> digunakan untuk penulisan judul terbesat, sedangkan <h6> digunakan untuk menuliskan judul yang lebih kecil.
7. Membuat tulisan jadi tersusun kebawah :
Nama : LKP TIFA KARYA
Kelas : !! TKJ
Alamat : Pangkalan Brandan
Tampilan tulisan di coding akan seperti lurus saja tidak seperti yang kita buat di html script, berikut scrip tag dan keterangannya :
<font color=Black>Nama : LKP TIFA KARYA</font><br>
<font color=black>Kelas : !! TKJ</font><br>
Alamat : Pangkalan Brandan
Keterangan :
<br> : tag untuk membuat garis baru
Setiap akhir kata missal tentang nama akhirkan juga dengan script </font><br> . kecuali untuk di bagian akhir kalimat tidak menggunakan kata penutup atau tag scrip apapun
8. Membuat biodata dalam scrip html seperti gambar berikut ini :
Scrip untuk biodata dan keterangan :
|
Buka
google Lalu
cari codePen Klik
web codePed Setelah
ke tampilan klik “star coding” Setelah
itu klik tanda ke samping di bagian kanan atas samping setting Lalu
pilih bentuk gambar yang ke samping Lalu
klik geser batas dari html ke css Geser
css ke bawah Lalu
klik <html> <head> <div
class=”judul”> <h1>BIODATA
DIRI</h1> </div> <div
class=”blok”> <h2>Informasi</h2> <div
class=”kanan” <table> <tr> <th>Nama</th> <th>:</th> <td>LKP TIFA KARYA</td> </tr> <tr> <th>Tempat</th> <th>:</th> <td>LANGKAT</td> </tr> <tr> <th>Tgl.lahir</th> <th>:</th> <td>05
JULI 2007</td> </tr> <tr> <th>Agama</th> <th>:</th> <td>ISLAM</td> </tr> <tr> <th>Alamat</th> <th>:</th> <td>LANGKAT</td> </tr> <tr> <th>Email</th> <th>:</th> <td>lkptifakarya@gmail.com> </tr> <tr> <th>No.Hp</th> <th>:</th> <td>0821-6147-3015</td> </tr> <tr> <marquee> <font
color=”red” <b>SELAMAT
MEMBACA</b> </marquee> |
Keterangan :
<html> : tag membuat sebuah
dokumen html
<head> : tag untuk
memberikan informasi tentang dokumen
<div
class="judul"> : tag untuk
mengelompokkan konten dan elemen lain
</div> : tag untuk konten
pada website
<table> : tag untuk
membuat table
<tr> : tag untuk membuat
baris baru dalam table
<th> : tag untuk
menentukan judul kolom atau baris dalam table
.webp)
