Langsung ke konten utama

Projek Pembuatan situs web

 Perjalanan Membuat Situs Web

( institut sains dan teknologi nasional )

    halo para pembaca dan teman-teman bagaimana kabar kalian?semoga sehat selalu ya..agar kalian bisa menjalanai aktivitas kalian sehari-hari..,oke baik pada postingan kali ini kita akan membahas mengenai projek situs web  yang sudah saya buat sebelumnya, wahhh penasaran bukan?yuk ikuti terus pembahasannya.  

Mau tau kegiatan PKL di hari ke-30?

Cerita PKL Hari ke-30

    Hari ini adalah hari ke-30 saya menjalani PKL. Seperti biasa, pagi saya dimulai sejak subuh. Setelah bangun tidur, saya langsung menunaikan sholat Subuh untuk memulai hari dengan penuh semangat. Usai berdoa, saya segera bergegas mandi agar tubuh terasa segar dan siap beraktivitas.

Tak lupa saya mengenakan seragam kebanggaan, yang setiap hari menemani perjalanan PKL ini. Setelah rapi, saya pun bersiap berangkat menuju kampus ISTN. Sesampainya di sana, motor saya parkirkan di area parkiran dengan tertib sebelum melangkah masuk ke dalam kampus.

Perjalanan saya berlanjut menuju laboratorium, tempat kegiatan PKL dilaksanakan. Di sana, saya sudah bertemu dengan teman-teman PKL lainnya. Hari ini kami memulai aktivitas dengan kegiatan piket bersama—membersihkan, merapikan, dan memastikan ruangan tetap nyaman untuk digunakan.

Kebersamaan saat piket membuat suasana terasa hangat dan penuh kerja sama. Meskipun sederhana, kegiatan ini menjadi bagian penting dari proses pembelajaran, melatih rasa tanggung jawab dan kekompakan di antara kami.

Hari ke-30 PKL ini kembali memberi saya pengalaman berharga, bukan hanya soal ilmu dan keterampilan, tetapi juga kebersamaan yang akan selalu saya kenang.


Materi Belajar HTML & CSS untuk Pemula

1. Apa itu HTML dan CSS?


  • HTML (HyperText Markup Language) adalah bahasa standar untuk membuat halaman web. HTML digunakan untuk menampilkan teks, gambar, video, tabel, dan elemen lainnya.

  • CSS (Cascading Style Sheets) adalah bahasa desain yang digunakan untuk mempercantik tampilan HTML, seperti warna, font, tata letak, animasi, dan efek visual lainnya.

2. Struktur Dasar HTML


Semua dokumen HTML punya struktur dasar seperti ini:

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
  </head>
  <body>
    <p>Halo, Dunia!</p>
  </body>
</html>

  • <!DOCTYPE html> → deklarasi tipe dokumen.

  • <html> → pembungkus utama dokumen.

  • <head> → berisi informasi meta, judul, dan link CSS.

  • <body> → isi halaman yang ditampilkan.

3. 21 Contoh Kode HTML untuk Pemula

Berikut daftar singkat elemen penting yang wajib dipelajari:

NoTopikContoh Kode
1Struktur Dasar HTML<html> ... </html>
2Heading (Judul)<h1>Judul Utama</h1>
3Paragraf<p>Ini paragraf.</p>
4Teks Tebal & Miring<b>Tebal</b> <i>Miring</i>
5Garis & Baris Baru<hr> <br>
6Link<a href="#">Link</a>
7Gambar<img src="gambar.jpg">
8Daftar Tidak Terurut<ul><li>Item</li></ul>
9Daftar Terurut<ol><li>Item</li></ol>
10Tabel<table><tr><td>Isi</td></tr></table>
11–23Form, Checkbox, Radio, Dropdown, Textarea, Tombol, Video, Audio, Warna Latar, Inline CSS, Div, Span, Komentar(sudah dibahas lengkap dalam tabel kode sebelumnya)

4. Membuat Bagian Profil dengan HTML

Contoh sederhana membuat profil singkat dengan identitas:

<section class="profile">
  <h1>๐Ÿ‘ค Anandito</h1>
  <p>Saya adalah siswa di <b>SMK Yadika 12</b> yang menekuni dunia IT sejak SMP.</p>
</section>

5. Menambahkan Foto Profil Bundar

Supaya lebih menarik, tambahkan foto profil bundar di atas nama:

<section class="profile">
  <img src="https://via.placeholder.com/150" alt="Foto Profil">
  <h1>๐Ÿ‘ค Anandito</h1>
  <p>Saya adalah siswa di <b>SMK Yadika 12</b> yang menekuni dunia IT sejak SMP.</p>
</section>

Dengan CSS:

.profile img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #ddd;
}

6. Membuat Profil Lebih Keren dengan CSS

HTML:

<div class="profile-card">
  <div class="profile-content">
    ๐Ÿ‘‹ Halo, saya Anandito Byhaqi
  </div>
  <div class="profile-description">
    Saya adalah siswa di <b>SMK Yadika 12</b> yang menekuni dunia IT sejak SMP.
  </div>
</div>

CSS:

body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #74ebd5, #ACB6E5);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.profile-card {
  background: #fff;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  text-align: center;
  max-width: 500px;
}

.profile-content {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
}

.profile-description {
  font-size: 18px;
  background: #f4f6f9;
  padding: 15px;
  border-left: 4px solid #6a5acd;
  border-radius: 8px;
  font-style: italic;
}

๐ŸŽจ Hasilnya:

  • Ada kartu profil modern dengan bayangan.

  • Nama besar dengan ikon ๐Ÿ‘‹.

  • Deskripsi di dalam box stylish.

  • Background halaman gradasi biru-ungu.

7. Kesimpulan

  • HTML digunakan untuk membuat struktur dasar halaman web.

  • CSS memperindah tampilan agar lebih modern dan menarik.

  • Dengan latihan membuat profil sederhana, kita bisa belajar gabungan HTML + CSS untuk membangun tampilan web nyata.

  • Setelah menguasai dasar ini, bisa dilanjutkan ke layouting (Flexbox/Grid), animasi, dan responsive design.

( projek situs web yang sedang berjalan )

    oke baik sekian dulu pembahasan pada projek situs web kali ini semoga apa  yang saya berikan dapat bermanfaat dan tentunya menambah wawasan teman-teman sekian terimakasih wr,wb...๐Ÿ˜„

Komentar

Posting Komentar

Postingan populer dari blog ini

Penggunaan Tools AI Emergent.sh dalam Pembuatan Situs Web

 Penggunaan Tools AI Emergent.sh dalam Pembuatan Situs Web ( institut sains dan teknologi nasional )      Perkembangan teknologi kecerdasan buatan (Artificial Intelligence/AI) telah membawa perubahan signifikan dalam berbagai bidang, termasuk dalam pengembangan situs web. Salah satu inovasi yang menarik perhatian dalam beberapa tahun terakhir adalah hadirnya platform Emergent.sh , sebuah layanan berbasis AI yang memungkinkan pengguna membuat situs web atau aplikasi secara otomatis hanya dengan memberikan instruksi dalam bentuk teks. Platform ini menjadi contoh nyata bagaimana teknologi AI dapat berfungsi sebagai asisten digital yang menggantikan sebagian besar proses teknis yang sebelumnya harus dilakukan secara manual oleh seorang pengembang web. Secara konseptual, Emergent.sh bekerja berdasarkan pendekatan multi-agent system , yaitu sistem yang terdiri dari beberapa agen kecerdasan buatan yang memiliki peran dan tanggung jawab berbeda. Setiap agen berfungsi sepert...
Posting Komentar
Baca selengkapnya

Hari Pertama PKL di ISTN: Awal Perjalanan Seru!

         cerita hari pertama pkl di (ISTN)  institut sains dan teknologi nasional  Cerita Hari Pertama PKL      Hari pertama PKL akhirnya tiba. Sejak malam sebelumnya, perasaan gugup dan antusias bercampur jadi satu. saya bangun lebih awal dari biasanya, mempersiapkan pakaian rapi dan segala perlengkapan yang diperlukan. Tepat pukul 07.00, saya sudah berangkat menuju tempat PKL: (ISTN) institut sains dan teknologi nasional , sebuah kampus universitas yang bergerak di bidang pengajaran berbasis sains dan teknologi.      Sesampainya di sana, suasana kampus masih cukup tenang. saya disambut oleh satpam dengan ramah dan kami langsung diarahkan ke ruang administrasi. Tak lama kemudian, pembimbing lapangan kami, Pak Ariadi , datang dan mengajak kami ke lab komputer. Ia memperkenalkan saya pada tempat saya akan melakukan pkl  serta  beliau memberikan kesempatan untuk memperkenalkan diri kami masing-masing. Kegiatan dila...
Posting Komentar
Baca selengkapnya

Level Up! Keseruan Hari Kedua PKL di ISTN

  cerita aktifitas pkl di hari kedua ISTN  (institut sains dan teknologi nasional) cerita di hari kedua pkl dan aktivitasnya Cerita Hari Kedua PKL Hari kedua PKL terasa lebih sibuk dibandingkan hari pertama, tapi tetap penuh pengalaman baru. Pagi-pagi, saya sudah datang lebih awal untuk memastikan tidak ada yang terlewat. Begitu sampai, saya langsung bertegur sapa dan bertemu dengan rekan-rekan teman saya dan pembimbing. Kegiatan dimulai dengan melanjutkan pekerjaan yang sudah diberikan, tetapi kali ini saya mulai lebih paham alurnya. Pembimbing kami PAK ARIADI   memberikan arahan tambahan dan tips agar pekerjaan lebih cepat selesai tanpa mengurangi kualitas. Saya juga diberi kesempatan mencoba tugas baru yang diberikan, sehingga bisa menambah keterampilan. Di sela-sela pekerjaan, saya sempat berbincang dengan teman-teman PKL lainnya. Kami saling bertukar cerita tentang tugas masing-masing yang sudah diberikan, dan ternyata cukup banyak hal yang bisa dipelajari dari penge...
Posting Komentar
Baca selengkapnya