ZenTutorials

Blog ini memuat artikel yang membahas tentang dunia teknologi informasi seperti Bahasa pemrograman, aplikasi dan internet.

populer android APPS

  1. apps
  2. apps
  3. apps
  4. apps

Populer android Games

  1. games
  2. games
  3. games
  4. games
  5. games

Sabtu, 26 Januari 2019

Element div dan span di HTML

Seperti yang kita ketahui, hampir setiap element di HTML memiliki fungsi masing masing. seperti element dengan tag <a> untuk membuat link (penghubung), <img> menampilkan gamabar, <i> mencetak huruf miring (italic) dan lain-lain.

Element html dengan tag <div> dan <span> adalah element html yang tidak memeiliki makna secara dafault (bawaan). namaun meskipun kedua elemement ini (div danspan) tidak memeiliki makna dalam penggunaannya, kedua element ini akan sering kita gunakan utamanya dalam pembuatan layout web.

Element dengan tag div sering kali di gunakan untuk membuat pondasi atau tata letak sebuah struktur web modern. misalnya untuk container atau box yang menampung berbagai macam element lainnya.

Perbedaan element div dan span di HTML

Secara garis besar, element di html di bagi menjadi dua bagian menurut sistem kerjanya yakni element Blok-line/Blog-style dan In-line/in-line style.

  • Element Blok-line di HTML

  • Element jenis ini adalah element yang memisahkan diri dari element dengan cara menempatkan diri di garis baru atau enter. element div termasuk dalam ketegori ini.

  • Element In-line di HTML

  • Element jenis ini adalah element yang tidak memisahkan diri dari element lainnya ketika di terapkan. element jenis ini akan selalau mengikuti line (garis) secara horizontal dan tidak tersususn seperti blok. element Span masuk dalam kategori ini.

Fungsi element div dan span di HTML

seperti yang sudah di katakan sebeleumnya, element div dan span biasanya digunakan untuk pembuatan container atau struktur web. dan sering juga di gunakan untuk menampung berbagai macam element lain agar element-element dapat terstruktur dengan baik saat di baca dan di tampilkan oleh web browser. element ini adalah element yang paling mudah di atau dengan CSS.

contoh penggunaan element div dan span di html.

Contoh penggunaan Element dengan tag <div>

<!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css">

div {
text-align:center;
width:100%;
}

#container {
background:cyan;
}

#header {
background:red;
color:white;
}

#content {
background:white;
border:1px solid black;
}

#footer {
background:black;
color:white;
}

</style>
</head>
<body>

<div id="container"> 
	<div id="header">
		<h1>Belajar Elemet div</h1>
	</div>

	<div id="content">
		<p>helloo.... my name is Zen..!</p>
	</div>

	<div id="footer">
		<p>about</p>
	</div>
</div>

</body>
</html>

Preview

Belajar Elemet div

helloo.... my name is Zen..!

about

Div sangat cocok di gunakan untuk mengatur tata letak element-element lainnya agar tertata rapi saat di tampilkan di webrowser


Contoh penggunaan Element dengan tag <Span>

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {

background:gray;
}

#container {
width:100%;
}

.merah {
color:white;
background:red;
}

.putih {
color:red;
background:white;
}

</style>
</head>
<body>

<div id="container"> 
	<span class="merah">merah</span>
	<span class="putih">putih</span>
</div>
</body>
</html>

Preview

merah putih

Element span sangat cocok di gunakan untuk memberi style kepada teks seperti warna teks, background teks dan lain-lain.

Admin ZenTutorials di Januari 26, 2019
Label: Bahasa pemrograman, HTML

Tidak ada komentar:

Posting Komentar

#Tanggapi artikel ini dengan berkomentar.
#Dilarang keras, komentar Spam, berbau SARA, PORNOGRAFI, PELECEHAN DAN UJARAN KEBENCIAN.
#Terimakasih di awal bagi yang berkomentar.

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar (Atom)

Postingan Populer

  • else if di JAVA
    Pengkondisian atau Statement else IF ? Kondisional else IF sering di gunakan ketika ada lebih dari satu kondisi yang perlu di uji. struct...

Halaman

  • Beranda
  • Belajar Bahasa markup HTML
  • Belajar Bahasa pemrograman JavaScript
  • Belajar bahasa pemrograman PHP
  • Belajar bahasa pemrograman JAVA
  • Belajar Style CSS
  • Belajar bahasa pemrograman C++

Label

  • Bahasa pemrograman
  • C++
  • CSS
  • HTML
  • JAVA
  • PHP

tentang saya dan profesi saya

  1. About me
  2. Contact form
  3. Disclaimer
  4. Policy privacy
  5. TOS
Copy right