Mohon tunggu...
Lanesta Deo
Lanesta Deo Mohon Tunggu... Mahasiswa - MAHASISWA

SAYA MEMILIKI HOBI LARI DAN BERMAIN BOLA

Selanjutnya

Tutup

Ilmu Alam & Tekno

Membuat Halaman Web Sederhana dengan Menggunakan Elemen Dasar HTML dan Pemograman Bahasa HTML Dan CSS

31 Oktober 2024   07:25 Diperbarui: 31 Oktober 2024   07:32 82
+
Laporkan Konten
Laporkan Akun
Kompasiana adalah platform blog. Konten ini menjadi tanggung jawab bloger dan tidak mewakili pandangan redaksi Kompas.
Lihat foto
Bagikan ide kreativitasmu dalam bentuk konten di Kompasiana | Sumber gambar: Freepik

HTML (HyperText Markup Language) adalah bahasa markah standar yang digunakan untuk membuat dan menyusun halaman web. HTML memberikan struktur dasar pada halaman web dengan menggunakan tags (penanda) untuk mendefinisikan berbagai elemen, seperti teks, gambar, tautan, tabel, formulir, dan elemen multimedia.

  • Elemen dasar HTML

Tag atau elemen dasar HTML digunakan untuk mengorganisir dan menunjang isi dari sebuah halaman web. Jadilah itu bisa judul, paragraf, daftar, gambar, tautan dan masih banyak lagi. Ini adalah beberapa tag dasar yang umum dipakai:

: Menyatakan tipe dokumen dan versi HTML yang digunakan.

2. : Tag utama yang membungkus seluruh konten HTML.

3. : Berisi informasi metadata tentang dokumen, seperti judul dan gaya.

4. : Menampilkan judul halaman di tab browser.</p><p>5. <body>: Berisi konten utama yang akan ditampilkan di halaman web.ntuk tag   yang biasanya berpasangan, terdiri dari tag pembuka dan tag penutup</p><p><span class="fr-img-caption fr-fic fr-dib" style="width: 400px;"><span class="fr-img-wrap"><img data-fr-src="https://assets.kompasiana.com/items/album/2024/10/31/cuplikan-layar-2024-10-31-000000-6722ca5134777c74293df553.png" id="#LQAFCZZpYv_img"><span class="fr-inner">sumber:https://www.w3schools.com/html/html_basic.asp</span></span></span></p><p><span class="fr-img-caption fr-fic fr-dib" style="width: 400px;"><span class="fr-img-wrap"><img data-fr-src="https://assets.kompasiana.com/items/album/2024/10/31/cuplikan-layar-2024-10-31-033708-6722ca95c925c44cc07db9d2.png" id="#DP5nuUECmr_img"><span class="fr-inner">sumber:https://www.w3schools.com/html/html_basic.asp </span></span></span></p><ul><li>Bahasa Pemograman dan HTML CSS</li><li>CSS, atau Cascading Style Sheets, merupakan bahasa pemrograman yang digunakan untuk menentukan konten tampilan dan layout sebuah halaman web. 

CSS adalah untuk mempercantik tampilan elemen-elemen HTML dan mengatur warna, font, ukuran, jarak, dan penempatan. Konsep ini memungkinkan pengembang untuk mengelola bagaimana sebuah halaman web akan ditampilkan di berbagai perangkat, baik desktop maupun ponsel.</li></ul><p><span class="fr-img-caption fr-fic fr-dib" style="width: 400px;"><span class="fr-img-wrap"><img data-fr-src="https://assets.kompasiana.com/items/album/2024/10/31/cuplikan-layar-2024-10-31-035710-6722cad5c925c4495e7a7152.png" id="#5aZte5GqBj_img"><span class="fr-inner">SUMBER:https://www.w3schools.com/html/html_basic.asp</span></span></span></p><ul><li>Deklarasi DOCTYPE<!DOCTYPE html></li><li>Fungsi: Menunjukkan bahwa dokumen ini adalah file HTML5. Ini memberi tahu browser cara merender halaman dengan benar</li><li>.2. Tag HTML<html></li><li>Fungsi: Merupakan elemen akar dari dokumen HTML. 

Semua konten HTML lainnya harus berada di dalam tag ini</li></ul><p><br></p><p><span class="fr-img-caption fr-fic fr-dib" style="width: 400px;"><span class="fr-img-wrap"><img data-fr-src="https://assets.kompasiana.com/items/album/2024/10/31/cuplikan-layar-2024-10-30-220250-6722cb5934777c7fee5829d3.png" id="#I1xPUwgGLJ_img"><span class="fr-inner">SUMBER: https://www.w3schools.com/html/html_basic.asp</span></span></span></p><p>Tag Style<style>Table,</p><p> th, td {Border: 1px solid black;Text-align: center;</p><p> /* Menyusun teks di tengah</p><p> */}</style></p><p>Fungsi: Berisi CSS untuk mengatur gaya elemen dalam dokumen HTML.</p><p>Table, th, td: Selektor ini memilih elemen tabel, header tabel (th), dan sel tabel (td).Border: 1px solid black;: Menambahkan border dengan ketebalan 1 piksel, jenis garis solid, dan warna hitam pada tabel serta sel-selnya.

Text-align: center;: Mengatur teks dalam elemen yang dipilih (tabel, th, dan td) menjadi rata tengah</p><p>.4. Tag Body<body></p><p>Fungsi: Menyimpan semua konten yang akan ditampilkan di halaman web, termasuk teks, gambar, tabel, dan elemen lainnya.</p><p>5. 

Judul HalamanHtml<h2>TABEL KUOTA PENERIMAAN STMKG TAHUN 2024  </h2></p><p>Fungsi: Menampilkan teks sebagai judul dengan ukuran yang lebih besar (h2) di atas tabel. Ini memberikan konteks kepada pembaca tentang isi tabel</p><p><span class="fr-img-caption fr-fic fr-dib" style="width: 400px;"><span class="fr-img-wrap"><img data-fr-src="https://assets.kompasiana.com/items/album/2024/10/31/cuplikan-layar-2024-10-31-040819-6722cb9cc925c4565e18e9f2.png" id="#9eoFTymAB7_img"><span class="fr-inner">SUMBER: Ptb.stmkg.ac.id</span></span></span></p><p><br></p>

HALAMAN :
  1. 1
  2. 2
Mohon tunggu...

Lihat Konten Ilmu Alam & Tekno Selengkapnya
Lihat Ilmu Alam & Tekno Selengkapnya
Beri Komentar
Berkomentarlah secara bijaksana dan bertanggung jawab. Komentar sepenuhnya menjadi tanggung jawab komentator seperti diatur dalam UU ITE

Belum ada komentar. Jadilah yang pertama untuk memberikan komentar!
LAPORKAN KONTEN
Alasan
Laporkan Konten
Laporkan Akun