Jumat, 21 Oktober 2016

TAG DALAM WEBSITE 

1. Point pixel pada Browser



1.         Satuan Ukuran Font: Pixel (px)



Satuan ukuran pixel
relatif mudah dipahami karena ia tidak terikat dengan setingan browser. Ketika
kita mendefenisikan ukuran font sebesar 20 pixel, maka web browser akan
menampilkannya sebesar (tentu saja) 20 pixel. Satuan pixel ini banyak digunakan
karena ditampilkan secara konsisten di dalam berbagai web browser.



Berikut adalah contoh
kode CSS untuk penggunaan pixel dalam mengubah ukuran text:



<!DOCTYPE html>



<html>



<head>



<title>Belajar
font-size</title>



<style
type="text/css">



   .satu {



   font-size: 12px;



   }



   .dua {



   font-size: 20px;



   }



   .tiga {



   font-size: 8px;



   }



</style>



</head>



<body>



   <h2>Belajar CSS: font-size
"pixel"</h2>



  



   <h3>font-size 12px:</h3>



   <p class="satu">Lorem ipsum
dolor sit amet, consectetur adipiscing elit.



   Nulla
erat dolor, ullamcorper in ultricies eget,



   fermentum rhoncus leo. Curabitur eu mi vitae
metus



   posuere laoreet.</p>



  



   <h3>font-size 20px:</h3>



   <p class="dua">Lorem ipsum
dolor sit amet, consectetur



   adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,



   fermentum rhoncus leo. Curabitur eu mi vitae



   metus posuere laoreet.</p>



  



   <h3>font-size 8px:</h3>



   <p class="tiga">Lorem ipsum
dolor sit amet, consectetur



   adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,



   fermentum rhoncus leo. Curabitur eu mi vitae



   metus posuere laoreet.</p>



</body>



</html>



2.         Satuan Ukuran Font: Persen (%)



Satuan persen adalah
satuan yang bersifat relatif. Perhitungan ukuran persen akan mendapatkan ukuran
font dari setingan parent element. Jika kita mendefenisikan ukuran font tag
<p> sebesar 100%, maka tag <p> akan memiliki ukuran yang sama
dengan parent element. Namun jika tag <p> dibuat sebesar120%, maka
ukurannya akan sebesar 120% dari parent element. 



Dalam kode HTML diatas,
terdapat 4 tag atau elemen, yakni tag <div>, <p>,<span>, dan
<i>. Tag <div> berada pada element terluar, sehingga ia
merupakanparent element dari tag <p>. Di dalam tag <p> terdapat tag
<span> dan tag <i>,sehingga tag <p> merupakan parent element
dari keduanya.



Jika kita membuat ukuran
font tag <p> sebesar 80%, maka ukuran font tersebut adalah sebesar 80%
dari ukuran font tag <div>. Jika tag <div> memiliki ukuran teks 14
pixel, maka tag <p> akan berukuran 80%*14px = 11,2px.



Namun bagaimana jika kita
membuat ukuran tag <div> sebesar 80% juga? maka kita harus melihat ukuran
teks dari parent elemen tag <div>. Apabila parent element tag <div>
adalah tag <body> yang ukuran fontnya tidak dinyatakan, maka perent
element akan ditentukan oleh ukuran default text web browser. Ukuran default
web browser ini disebut sebagai base text size yang umumnya berukuran 16px.



Agar lebih mudah memahami
konsep penggunaan persen sebagai ukuran font, berukut adalah contoh kode HTML
dan CSSnya:



<!DOCTYPE html>



<html>



<head>



<title>Belajar
font-size</title>



<style
type="text/css">



   .satu {



   font-size: 100%;



   }



   .dua {



   font-size: 16px;



   }



   .tiga {



   font-size: 80%;



   }



   span {



   font-size: 80%;



   color: blue;



   }



</style>



</head>



<body>



   <h2>Belajar CSS: font-size
"persen (%)"</h2>



  



   <h3>font-size 100%:</h3>



   <div>



   <p class="satu">Lorem ipsum
dolor sit amet, consectetur



   adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,



   fermentum rhoncus leo. Curabitur eu mi vitae



   metus posuere laoreet.



   </div>



  



   <h3>font-size 16px:</h3>



   <p class="dua">Lorem ipsum
dolor sit amet, consectetur



   adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,



   fermentum rhoncus leo. Curabitur eu mi vitae



   metus posuere laoreet.</p>



  



   <h3>font-size tag p = 80%, tag span =
80%:</h3>



   <p class="tiga">



   <span>Lorem ipsum dolor sit amet, 



   consectetur adipiscing elit.</span>



   Nulla erat dolor, ullamcorper in ultricies
eget,



   fermentum rhoncus leo.
<i>Curabitur</i> eu mi vitae metus



   posuere laoreet.



   </p>



</body>



</html>



3.         Satuan Ukuran Font: em



Jika anda telah memahami
cara penggunaan satuan persen, maka anda tidak akan kesulitan memahami satuan
em, karena keduanya nyaris sama. Web desainer lebih banyak menggunakan em
karena em berasal dari konsep typography.



Kata “em” berasal dari



typography media cetak dimana ia merujuk kepada ukuran huruf ‘m’ dari sebuah
font. Namun konsep itu tidak dipakai untuk pengertian em pada CSS. 1em di dalam
CSS sama dengan 100%, 0.5em sama dengan 50%, 1.2em sama dengan 120% dan
seterusnya. Konsep parent element dari pembahasan kita mengenai satuan persen
juga berlaku untuk satuan em.



<!DOCTYPE html>



<html>



<head>



<title>Belajar
font-size</title>



<style
type="text/css">



   body {



   font-size: 14px;



   }



   .satu {



   font-size: 1em;



   }



   .dua {



   font-size: 1.5em;



   }



   .tiga {



   font-size: 1.2em;



   }



   span {



   font-size: 1.2em;



   color: blue;



   }



</style>



</head>



<body>



   <h2>Belajar CSS: font-size
"em"</h2>



  



   <h3>font-size 1em:</h3>



   <div>



   <p class="satu">Lorem ipsum
dolor sit amet, consectetur



   adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,



   fermentum rhoncus leo. Curabitur eu mi vitae



   metus
posuere laoreet.



   </div>



  



   <h3>font-size 1.5em:</h3>



   <p class="dua">Lorem ipsum
dolor sit amet, consectetur



   adipiscing elit. Nulla erat dolor,
ullamcorper in ultricies eget,



   fermentum rhoncus leo. Curabitur eu mi vitae



   metus posuere laoreet.</p>



  



   <h3>font-size tag p = 1.2em, tag span
= 1.2em:</h3>



   <p class="tiga">



   <span>Lorem ipsum dolor sit amet, 



   consectetur adipiscing elit.</span>



   Nulla erat dolor, ullamcorper in ultricies
eget,



   fermentum rhoncus leo. <i>Curabitur</i>
eu mi vitae metus



   posuere laoreet.



   </p>



</body>



</html>

2. Fungsi Tag HTML



Html   = Menyatakan
pada browser bahwa dokumen Web yang digunakan adalah HTML



Head = Kepala dari dokumen HTML



Title  = Judul dari
dokumen HTML yang ditampilkan pada judul jendela browser



Body = Tag untuk menampilkan isi dokumen HTML



H2  = Header 2, sub
judul sebuah web



p  = Membuat paragraf



Center = Tag html berfungsi untuk menampilkan teks dengan
posisi horizontal ditengah



Hr  = Tag html
berfungsi untuk membuat suatu garis horizontal



Align  = Menentukan
posisi garis dihalaman web



Width = Mengatur panjang garis dalam satuan pixel



Noshade = Menyatakan bahwa garis yang kita buat tidak
menngunakan bayang-bayang 3D.



Pre  = Preformated
Text, tag html berfungsi untuk menampilkan teks apa adanya sesuai text editor



H1  = Header 1, untuk
judul sebuah web



br  = Tag untuk ganti
baris



a  = Tag html yang
berfungsi untuk menghubungkan ke internal atau ekserrnal halaman web



href  =  Atribut yang di tambahkan kedalam tag a
dimana value dari href ini adalah url



ol  = Order List, tag
html berfungsi untuk membuat nomor daftar urut, bisa berupa angka, huruf
atau                       angka romawi.



li  = List Item, tag
yang berada di elemen OL dan UL yang berbentuk list



Ul  = Unorder List,
tag html berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet)



dl   = Mendefinisikan
sebuah daftar isi



dd  = Mendefinisaikan
deskripsi dari item dalam daftar definisi <penjelasan>



dt  = Mendefinisikan
istilah (item) dalam daftar definisi <istilah>



Center  = Tag html
berfungsi untuk menampilkan teks dengan posisi horizontal ditengah



b   = Bold, tag html
yang berfungsi untuk mempertebal teks



img  = Tag html untuk
menampilkan gambar



src  = Source,
menyatakan lokasi penyimpan gambar atau lokasi dimana gambar diambil.



Border  = <mengatur
ketebalan garis>



tr  = Table Row,
mendefiniskan baris pada tabel



table  = Tag yang
berfungsi untuk membuat suatu data yang terdiri dari baris dan kolom



th  = <judul table
/ otomatis bold>



td   =
<penampilannya td tebal>



Font  = Tag html
berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf



Size  = Untuk merubah
ukuran huruf



Face  = Untuk merubah
jenis huruf



cellpadding = jarak tulisan/konten dengan garis cell (2
pixel)



cellspacing = jarak spasi antar cell (2 pixel)



bgcolor  = warna dasar
(#ffffff = putih)



rowspan  =
Menggabungkan baris



td  = Table Data,
terletak di dalam tag TR, yang berfungsi untuk memasukkan data-data



collspan  = Menggabungkan
kolom



div   = suatu element
yang di gunakan untuk mengelompokan suatu element atau tag tag agar
menjadi suatu group








3. Tag Pada HTML


<p>Recapture the essence of a true safari in the African


wilderness by treating your senses to a bush holiday at the Koro-Koro Safari Lodge.</p>


tag ini untuk membuat paragraf 




<title>Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House,


 </title>


tag ini untuk membuat judul


 


<ul>
<li><a title="Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House, Self-catering Accommodation" class="active">Home</a></li><li>
<a title="Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House, Self-catering Accommodation">Accommodation</a>
<ul style="display:none;">
<li><a title="Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House, Self-catering Accommodation">Caravan Park</a></li><li>
<a title="Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House, Self-catering Accommodation" >Bush Camp</a></li><li>
<a title="Koro-Koro Safari Lodge - Limpopo, Bela-Bela, Caravan Park, Bush Camp, Marula House, Self-catering Accommodation" >Marula House</a></li>
</ul> 


 tag ini untuk membuat sebuah list  












Diposting oleh



di







































Tidak ada komentar:















Posting Komentar


















        

      









Langganan:
Posting Komentar (Atom)