Blogroll

Senin, 15 Januari 2018 Januari 15, 2018

pengertian CSS dan penerapannya



Assalamualaikum…

A. Pendahuluan
      kali ini saya mempelajari tentang CSS. Dan mempraktikkan coding dari CSS tersebut,target minggu ini adalah membuat tamplate menggunakan Bootstrap. Padahal sebelumnya saya masih bingung apa itu bootstrap. Kemudian hari ini saya akan berusaha mempelajari dulu CSS sampai selesai,kemudian baru fokus ke Bootstrap.

B. Pengertian
       CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer
untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari
memformat text, sampai pada memformat layout. Tujuan dari penggunaan CSS ini adalah
supaya diperoleh suatu kekonsistenan style pada elemen tertentu.

C. Latar Belakang
       Perkembangan CSS sendiri diawali pada tahun 1996, dimana W3C (World Wide Web
Consortium), sebuah konsorsium untuk standarisasi web, menyusun draft proposal untuk
membuat CSS ini dan akhirnya dapat berjalan. Selanjutnya pada pertengahan tahun 1998,

W3C mengembangkan CSS2 yang diperbarui untuk kepentingan media lain (tidak hanya
untuk PC web browser). Akhirnya mulai pada tahun 2000, telah dikembangkan CSS3
oleh W3C yang sampai saat ini masih terus diperbarui lagi.

Namun pada saat ini, hanya CSS2 yang masih didukung oleh kebanyakan web browser,
tapi tidak demikian halnya untuk CSS3. Masih sedikit web browser yang mendukung
CSS3. Oleh karena itu pada tutorial ini hanya akan dibahas mengenai CSS2 saja.

Dengan menggunakan CSS, Anda (sebagai webmaster) akan lebih mudah untuk
mengatur style elemen dalam halaman web Anda. Sebagai contoh, misalnya untuk
mengatur style elemen heading, Anda menginginkan jenis font nya adalah Arial, 20 pixel
dan berwarna merah. Dengan CSS, Anda cukup menuliskan properti dari elemen heading
tersebut sekali saja, dan Anda akan memperoleh hasil yang diinginkan. Bandingkan
apabila tidak menggunakan CSS, Anda akan mengatur style pada setiap elemen heading
yang ada.

Contoh :
coding:







hasil :






Perhatikan code sebelumnya! Untuk mengatur style elemen heading 1 (h1) cukup
menuliskannya pada CSS sekali saja. Bandingkan apabila Anda tidak menggunakan CSS.
Selain itu, dengan CSS akan diperoleh suatu kekonsistenan style. Anda tentu dapat
merasakan keuntungan ini, dibandingkan dengan tanpa adanya CSS yang kemungkinan
besar ketidakkonsistenan akan terjadi. Hal ini dikarenakan style hanya dituliskan sekali,
tidak seperti dengan tanpa CSS yang ditulis style berulang kali.

Struktur Style

Style pada CSS memiliki struktur sebagai berikut
Selector digunakan untuk menentukan pada elemen apa style tersebut diterapkan.
Selector dapat berupa nama id elemen atau nama class. Bagian deklarasi menerangkan
style yang akan dibuat. Bagian ini terdiri dari properti dan value. Properti dapat diisi
dengan jenis warna, ukuran, perataan margin dll, sedangkan value diisi dengan nilai dari
propertinya, misalnya red untuk warna dll. Berikut sintaksnya :



h1, h2, h3 { properti1 : value1;
properti2 : value2;
properti3 : value3;
.
.
.
}


Apabila Anda lupa memberikan tanda titik koma, maka style tersebut tidak akan
dijalankan oleh browser.
Dalam CSS, terdapat cascade yang merupakan metode untuk mengatur style supaya tidak
terjadi konflik. Untuk lebih jelasnya perhatikan contoh berikut ini.

<html>
<head>
<title>CSS Guide</title>
<style type="text/css">
p {
color: red;
}
em {
color: green;
}
</style>
</head>
<body>
<h1>Ini adalah heading 1</h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf.
Ini
adalah
paragraf.
<em>Ini
adalah
huruf
dicetak
miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
<h1><em>Ini adalah heading 1</em></h1>
<p>Ini adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini
adalah paragraf. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf.
Ini
adalah
paragraf.
<em>Ini
adalah
huruf
dicetak
miring</em>. Ini adalah paragraf. Ini adalah paragraf. Ini adalah
paragraf. Ini adalah paragraf. </p>
</body>
</html>



Hasilnya :







Pada code di atas terdapat style untuk mengatur tampilan elemen paragraf (<p>) dan
untuk emphasize atau <em> (cetak miring seperti halnya italic). Perhatikan apa yang
terjadi dengan tampilannya di browser.

Dengan Anda mendeklarasikan style warna hijau untuk elemen <em>, maka style
tersebut akan berlaku untuk setiap elemen tersebut (termasuk pada bagian heading).
Tentu saja hal ini membuat tampilan halaman web tidak bagus, karena style heading
menjadi tidak konsisten (terdapat heading yang berwarna hijau). Lantas.. bagaimana cara
mengatur style supaya warna hijau hanya berlaku untuk emphasize yang terletak di dalam
paragraf saja


Value

Pada bab ini akan dijelaskan lebih lanjut tentang aturan penulisan value dari properti
yang diberikan.
Terdapat beberapa jenis value yang dapat berikan pada properti style, antara lain berupa
predefined value, bilangan, prosentase, url, dan juga warna.

Predefined Value
Predefined value merupakan nilai yang sudah terdefinisikan oleh (X)HTML. Nilai ini
dapat dipilih dari beberapa alternatif pilihan yang ada. Contoh penggunaan predefined
value ini adalah pada style berikut

h1 {
font-style : italic;
}

Style di atas digunakan untuk membuat text miring pada elemen heading 1. Dalam hal ini
value ‘italic’ merupakan predefined value. Untuk properti font-style terdapat pilihan
value yang telah didefinisikan oleh (X)HTML yaitu italic, normal, dan oblique.
Perhatikan bahwa predefined value ditulis tanpa diapit tanda petik.
Bilangan
Suatu value dapat pula berupa bilangan tertentu (tanpa satuan apapun). Berikut ini
contohnya:

p
{
line-height : 2;
}

Maksud style di atas adalah mengatur jarak antar baris paragraf menjadi 2 kali dari
ukuran fontnya.
Panjang, Besar dan Prosentase
Untuk menyatakan panjang, besar dan prosentase, value harus diberikan satuan seperti px
(pixel), in (inch), cm (centimeter), mm (milimeter), pt (points) dan pc (picas). Berikut ini
beberapa contohnya

h1
http://blog.rosihanari.net
{
font-size : 20px;
/* membuat ukuran font 20 pixel */
}
hr
{
width : 20%;
/* membuat garis horizontal dengan panjang 20% terhadap lebar
jendela browser /*
}


URL
Sebuah value juga dapat berupa URL. Berikut ini contohnya:

body
{
background : url(img/image.jpg);
}

Style di atas untuk memberi background image pada body yang diambil dari folder img
dengan nama file image.jpg.


Warna
Untuk memberi value berupa warna pada properti, ada beberapa cara yang dapat
dilakukan yaitu dengan menuliskan secara eksplisit warna yang diinginkan, misal (red,
green, yellow, dll) atau dengan menuliskannya dalam kode hexadesimal. Berikut ini
contohnya :

p
{
color : red;
}
p
{
color : #FF0000;
/* identik dengan warna merah (hexadesimal)
}



Membuat CSS Eksternal
Pada contoh-contoh sebelumnya, jenis CSS yang dibuat adalah CSS internal karena
ditulis jadi satu dengan code (X)HTML nya. Perhatikan kembali contoh berikut ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Guide</title>
<style type="text/css">
p {
color: #FFFFFF;
font-family: arial;
background: #FF0000;
font-weight: bold;
}
p.group {
color: #FF0000;
/* membuat warna text putih */
font-family: arial;
background: #FFFFFF; /* membuat background putih */
}
p#one {
color: blue;
font-family: "times new roman";
}
</style>
</head>
<body>
<p>Ini adalah paragraf 1. Ini adalah paragraf 1. Ini adalah paragraf 1.
Ini adalah paragraf 1. Ini adalah paragraf 1. </p>
<p class="group">Ini adalah paragraf 2. Ini adalah paragraf 2. Ini
adalah paragraf 2. Ini adalah paragraf 2. Ini adalah paragraf 2. </p>
<p class="group" id="one">Ini adalah paragraf 3. Ini adalah paragraf 3.
Ini adalah paragraf 3. Ini adalah paragraf 3. Ini adalah paragraf 3.
</p>
</body>
</html>

Anda dapat menaruh CSS yang ada dalam code di atas ke dalam file tertentu, dengan
harapan file CSS itu dapat digunakan oleh halaman web yang lain. File CSS inilah yang
disebut CSS eksternal yang memiliki file extension .css

Membuat Teks Tebal (Bold)
Untuk membuat teks tebal atau bold, properti yang digunakan adalah
font-weight : bold;


Mengatur Ukuran Font
Pengaturan ukuran font dapat dilakukan dengan style yang menggunakan properti
font-size : size;
dengan size diisi angka yang menyatakan ukuran disertai satuannya.

Mengatur Jarak Baris Dalam Paragraf
Anda dapat mengatur jarak baris teks dalam suatu paragraf dengan menggunakan CSS.
Berikut ini adalah nama properti nya
line-height : size;
dengan size diisi angka yang menyatakan ukuran disertai satuannya.

Mengubah Warna Text
Untuk mengubah warna font, propertinya adalah:
color : warna;
dengan value warna diisikan dengan warna yang diinginkan, dapat berupa kode
hexadesimalnya, maupun nama eksplisitnya.


Mengubah Warna Background Text
Apabila Anda ingin mengubah warna background text, maka berikut ini adalah
propertinya:
background : warna;
cara penulisan value dari warna sama dengan color, yaitu dapat berupa nama eksplisit
warna yang diinginkan maupun kode hexadesimalnya.


Mengatur Jarak Spasi Antar Text
Pada judul heading terlihat bahwa antar kata dan huruf terdapat jarak tertentu. Jarak
tersebut diatur dengan menggunakan properti sbb:
word-spacing : jarak;
letter-spacing : jarak;
Properti pertama di atas digunakan untuk mengatur jarak antar kata, sedangkan yang
kedua untuk mengatur jarak antar huruf.


Membuat Text Indent
Pada bagian awal paragraf biasanya terdapat text indent atau teks yang agak menjorok ke
dalam paragraf dalam jarak tertentu. Berikut ini adalah properti yang digunakan untuk
mengaturnya:
text-indent : jarak;


Perataan Teks (Text Alignment)
Anda dapat mengatur perataan teks dengan menggunakan properti
text-align : jenis;
dengan value jenis dapat digantikan dengan left, center, right dan justify.


Mengubah Text Case
Dengan CSS, Anda dapat pula mengubah suatu teks menjadi huruf kecil semua
(lowercase), besar semua (uppercase), atau capitalize (hanya huruf pertama dari kata
yang dibuat besar). Hal ini dilakukan dengan menggunakan properti
text-transform : option;
dengan option dapat diganti dengan lowercase, uppercase, atau capitalize.

D. Maksud dan Tujuan
mengerti apa itu CSS dan mempraktikkan contoh programnya dengan benar dan teliti.

E. Alat dan Bahan
1. Laptop
2. File Items
3. Teext Editor

F. Hasil yang diharapkan
dapat menerapkan dan mempelajari css dengan mudah tanpa kebingungan.

G. Referensi

1.

Tidak ada komentar:

Sabtu, 13 Januari 2018 Januari 13, 2018

membuat halaman web sederhana






Membuat Halaman Web



Assalamu’alaikum…

A. Pendahuluan
hari ini adalah tahapan evaluasi dari hari senin-sabtu. Pertama saya mempelajari tentang sejarah HTML kemudian tag tag yang ada, pambuatan paragrafm pembatan tabel, kemudian pembuatan Link dan penyisipan file (gambar,mp3 dan video).tapi kali ini saya akan mencoba membuat sebuah tampilan halaman web.

B.Pengertian
membuat tampilan halaman web adalah sangat mudah jika kita sebelumnya bisa memahami HTML. Mendesain atau kita bisa memperindah tampilan yang kita akan buat. Supaya orang jika melihat tampilan yang kita buat tertarik untuk melihat.

C. Latar Belakang
Cara membuat halaman web sederhana sangatlah mudah, dikarenakan perangkat membuat web sangat mudah ditemui di internet dan rata-rata program tersebut gratis. Dalam tutorial kali ini perangkat yang dibutuhkan antara lain:
  • Notepad, atau anda bisa mencoba notepad ++yang mana dalam program ini tersedia fitur yang lebih baik, kita juga bisa mengunakan text editor.
  • Browser sebagai program penampil halaman web. Jika anda pengguna windows, biasanya browser IE(Internet Explorer) akan terinstall otomatis. Anda juga bisa menggunakan browser dari google, yaitu chrome.
Contoh desain halaman web yang saya buat :
1. pertama, saya membuat form Login terlebih dahulu tetapi disini username dan passwordnya sudah saya isi sebelumnya pada coding jadi tidak usah memasukkan username dan password lagi pada form login. Disini terdapat coding form action dimana fungsi dari coding tersebut adalah memenggil sebuah file lain yang akan ditampilkan pada saat kita klik Login. Pada username dan password saya masukkan value pada username “laila” kemudian value pada password “khoirullaila” ketika kita masukkan akan menampilkan pada saat kita Login, tanpa kita mengetik username dan password .


<!DOCTYPE html>
<html>
<head>
<title> Login </title>
<style>
body{margin: 200px 500px; background:aqua;}
</style>
</head>
<body>
<form action="..//Documents/left index.html" method="get">
<h3>SElamat Datang Admin</h3>
<hr>
<table>
<tr>
<td>username</td><td>:</td><td> <input type="text" name="username" value="laila"/></td>
</tr>
<tr>
<td>Password </td><td>:</td><td> <input type="password" name="password" value="khoirullaila"/></td>
</tr>
<tr>
<td></td><td></td> <td><input type="submit" name="login" value="log in"/> <input type="submit" name="cencel" value="cencel"/></td>
</tr>
</table>
</form>
</body>
</html>


Hasil tampilannya :



ketika kita klik login maka tidak akan muncul apa”. Oleh karena itu kita buat file htl lagi untuk agar bisa menampilkan halaman web yang kita panggil melalui login tadi. Kuncinya pada coding <form action="..//Documents/left index.html" method="get"> disini tertulis “..//Documents/left index.html” dijelaskan bahwa file yang kita panggil berada atau disimpan pada Documents kemudian left index.html adalah nama file.






2. Selanjutnya, kita buat halaman web dengan nama “Left index.html” pada text editor dan disimpan pada “Documents”. Berikut adalah codingnya:
coding:
<head>
<title>Left Colour</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="1000" height="447" border="0"
align="center" cellspacing="1">
<tr>
<th width="200" rowspan="3" valign="top"
bgcolor="#FF0000"><img src="..//Downloads/info.jpeg">
<p><a href="..//Documents/galery.html">Home</a></p>
<p><a href="..//Documents/tabel3.2.html">HTML Tabel</a></p>
<p><a href="..//Documents/tabel bersarang praktik.html">HTMl Tabel bersarang</a></p></p></th>
<th width="800" height="40" align="center"
bgcolor="#FFA500"><strong><font color="#CCCCCC"
size="+4">Macam macam praktik HTML</font></strong></th>
</tr>
<tr>
<td height="500" align="center" valign="top"
bgcolor="#DA70D6"><p>&nbsp;</p>
</td>
</tr>
<tr>
<td height="20" align="center" bgcolor="#FFA500">
<font size="+2">lailaa08.blogspot.com</font></td>
</tr>
</table>
</form>
</body>
</html>


Hasil :








ketika dijalankan terdapat beberapa Hyperlink dan penyisipan gambar, semua itu bisa diganti atau diubah sesuai kemauan tapi juga harus memakai coding yang sudah ada, kita cuma mennganti dimana kita taruh file yang akan kita panggil.
disini menggunakan Left index kenapa menggunakan Left index karena digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama.Navigasi atau daftar isi berada dibagian kiri dari halaman web, seperti yang kita buat tadi.
Contoh left index yang kita gunakan :



3. setelah kita buat file kedua, kita buat lagi file yang ketiga simpan dengan nama “galery.html” dalam pembuatan ini kita harus menyediakan gambar terlebih dahulu karena memerlukan gambar buat mengubah background dan memasukkan gambar. Disini saya menggunakan screenshoot kode warna, kalian bisa menggantinya sesuai kemauan. Juga terdapat empat link yang pertama, pada menu ada “pengertian HTML” kan nah kita buat filenya terlebih dahulu dengan nama “htmll.html” membuatnya cukup sederhana dengan coding pargraf, terdapat juga Marquee yaitu coding yang digunakan untuk teks berjalan.
coding :
<html>
<head>
<title>Profilku</title>
</head>
<body
cursor:url("galery.html"),text;>
<center>
<table width='1000' height='400' border="0" background="..//Downloads/S.jpg" cellpadding="0" cellspacing="20" >
<tr>
<td colspan="2" color="white" align='center'>
<img src="..//Downloads/w.jpg" width="1000" height="500" >
</td>
</tr>
<tr height="50">
<td colspan='2' background="#FF0000" align='left' height="5">
<p><ul><ul><left><BLINK><b> <marquee direction="right"><font color="#FFFF00" size="5"><h2>~ Selamat datang ~ </h2></font></BLINK></b></marquee></ul></ul></p></left>
<p><ul><ul><left><BLINK><b> <marquee direction="left"><font color="#FFFF00" size="5"><h2>~ di website ~ </h2></font></BLINK></b></marquee></ul></ul></p></left>
<p><ul><ul><left><BLINK><b> <marquee direction="right"><font color="#FFFF00" size="5"><h2>~ pertama saya ~ </h2></font></BLINK></b></marquee></ul></ul></p></left>
<tr>
<td width='796' height='700' background='gambar/zz.jpg' valign='top' >
<p><table align="center" border="0" bgcolor="" cellpadding="0" cellspacing="8" >
<td>
<p><b><center><font face="Bauhaus 93" size="7" color='#FF0000'>Galery</font></center></b></p><b>
<table color="blue" align="center" border="9px">
<tr><p align="center"><font color="#FF0000" size='6'>Album Kode Warna </font>
<td><img src="..//Pictures/kode warna5.png" border="3" width="300" height="300" /></td>
<td><img src="..//Pictures/kode warna12.png" border="3" width="300" height="300" /></td>
<tr><td><img src="..//Pictures/kode warna1.png" border="3" width="300" height="300" /></td>
<td><img src="..//Pictures/kode warna7.png" border="3" width="300" height="300" /></td>
<tr><td><img src="..//Pictures/kode warna2.png" border="2" width="300" height="300" /></td>
<td><img src="..//Pictures/kode warna9.png" border="3" width="300" height="300" /></td></p></tr>
</table>
</td>
<table align='left' width='200' border='0' bgcolor='' bordercolor='green'>
<center>
<td width="300" valign="left"><font color="#FFFF00" face="Cooper Std Black">
<b>Menu</b><ul>
<li><a href="htmll.html" title='Pengertian HTML'><font color='#66CDAA' face='Forte'>Pengertian HTML</a></font></li>
<li><a href='mp3.html' title='MP3'><font color='#66CDAA' face='Combria'>MP3</a></font></li>
<li><a href='video.html' title='video'><font color='#66CDAA' face='Forte'>Video</a></font></li>
</ul></font></table></td></tr>
<p>
<a href="..//Documents/left index.html"><h3>Kembali ke halaman utama</h3></a></p>
<tr height="50">
<td <center><b><marquee><font face="Cooper Std Black" color="#00FFFF" size="7">~ Meskipun banyak kendala dalam pembuatan desain web ini, tapi tetap berusaha untuk mencapai hasil yang terbaik ~</font></b></marquee></center></td>
</tr></table>
<body>
</body>
</html>






Hasil :




































D. Maksud dan Tujuan
agar dapat mengubah atau mengatur sendiri tampilan web yang kita buat sendiri dengan kreatifitas masing-masing.
E. Alat dan Bahan
1. Laptop
2. File Items
3. Text Editor
F. Hasil yang di harapkan
menghasilkan tampilan web yang menarik dan indah untuk dilihat dan digunakan.
G. Referensi
1.http://www.nyekrip.com/cara-membuat-halaman-web-sederhana/
Wassalamu’alaikum Wr.Wb

Semoga Bermanfaat……;)



Tidak ada komentar:

Jumat, 12 Januari 2018 Januari 12, 2018

Penyisipan file (Audio, Video, dan Gambar) pada HTML



Penyisipan File

Assalamu;alaikum…

A. Pendahuluan
Hai kawan… dalam kesempatan ini saya akan memberitahu cara membuat Hyperlink pada HTML,Penyisipan file seperti: MP3,IMAGE,VIDEO dll. Dan juga yang pokok dalam praktik kali ini adalah membuat desain halaman web pada browser kita sendiri, pasti kalian bingung bagaimana sih cara pembuatannya. Mari kita simak sama sama pembahasan saya kali ini.

B. Pengertian
Penyisipan file adalah Memasukkan Gambar ke dalam Halaman Web, tidak hanya gambar saja akan tetapi mp3,video juga bisa di masukkan ke halaman web.

C. Latar Belakang
Suatu halaman web akan terlihat kaku, terkesan formal, dan sedikit menjemukan
bila tidak disertai dengan gambar. Kita bisa lihat saat ini, halaman web yang ada
di internet, hampir semuanya memasukkan unsur gambar, animasi, bahkan
audio dan video untuk menarik dan membuat tercengang para pengunjungnya. Cara yang diperlukan untuk memasukkan atau menambah gambar ke halaman web, HTML sudah menyediakan tag khusus yaitu <img>.

Atribut terpenting dari tag <img> adalah SRC (source atau sumber), yang berisi file gambar yang akan ditampilkan ke halaman web.
Contoh:
<img src=”namafile”>

Untuk menampilkan format gambar digunakan tag <img>, dengan atribut
src=”letak dan nama file gambar”, serta ukuran width=”” untuk lebar
gambar dan height=”” untuk tinggi gambar.

Contoh penerapannya :

Coding :
<html>
<head>
<title>gambar</title>
</head>
<body>
<img src="../Downloads/info.jpeg" width="150" height="150">
</body>
</html>

Hasilnya :








berikut juga contoh penerapan hyperlink :

Coding :
<html>
<head>
<title> Belajar HTML </title>
</head>
<hr width="80">
<body bgcolor="violet">
<marquee behavior="alternate" direction="right">Ayo sama sama belajar HTML</marquee>
<h1 align="center"><font color ="blue"> Belajar HTML </font> </h1>
<center><a href="Home.html">Home</a><center>
<p>
<a href="gambar.html" align="center">Gambar</a>
</p>
</hr>
</body>
</html>

Hasilnya :





Dalam Hyperlink kita dapat berpindah halaman hanya dengan mengeklik pada tulisan maupun gambar. hasil diatas jika kita klik pada tulisan "Home" akan menampilkan gambar sebagai berikut :







Dan jika kita klik pada tulisan HTML akan muncul halaman web seperti dibawah ini :







kembali lagi pada tampilan awal jika kita klik tulisan "gambar" maka yang akan muncul adalah gambar yang diinginkan sudah dijelaskan diatas tadi bagaimana memasukkan gambar pada halaman web. pada Hyperlink mempunyai ciri khas yaitu garis bawah. ini hasil tampilan dari gambar :



  1.  Format tampilan audio
    Kebanyakan file audio diputar melalui sebuah plug-in, misalnya seperti flash. Namun, browser yang berbeda mungkin memiliki berbagai plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web: elemen <audio> </audio>.
    Untuk memasukkan suara pada html bisa menggunakan tag <audio>. Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP. File-file Audio yang didukung HTML5 adalah MP3,WAV, dan OGG. Tidak semua tipe file audio tersebut didukung oleh browser.
    Tidak semua tipe file audio tersebut didukung oleh browser.
    • OGG merupakan format audio yang didukung oleh Mozilla firefox, opera, dan google chrome.
    • MP3 merupakan format audio yang didukung oleh Google Chrome dan safari.
    • WAV merupakan format audio yang didukung oleh Mozilla Firefox dan Opera.
  1. saat meletakan file mp3 di web yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil embed mp3 di web yan telah kita buat tersebut. Hal tersebut bisa jadi disebabkan browser yang digunakan tidak support pada file berekstensi mp3.
  2. MIME untuk format audio
    MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format audio.

Format
MIME-type
MP3
Audio/mpeg
Ogg
Audio/Ogg
Wav
Audio/Wav

Menyajikan audio dalam tampilan web

berikut ini adalah contoh coding yang digunakan :


<html>
<head>
<title>cek suara</title>
</head>
<body>
<audio controls>
<source src="house.mp3" type="audio/mp3">
<source src="house.ogg" type="audio/ogg">
</audio>
</body>
</html>

Ketika mencoba listing program diatas , file audio ditempatkan dalam satu
folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan
file audio yang anda gunakan. Untuk listing program di atas menggunakan file
audio bernama "house.mp3" dan "house.ogg".

Menerapkan listing program memasukkan video ke dalam halaman web :

Untuk menampilkan video pada halaman web dapat ditangani secara
langsung oleh HTML5. Tag yang digunakan untuk menampilkan video adalah
<video> </video>. Namun tidak semua format videonya dapat ditampilkan di web.
Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya
adalah WebM ,OGG , MP4.
File video seperti mp4 dapat dimainkan pada halaman web melalui
tag<video> < /video>. Ketika mencoba menjalankan video pada halaman web
, file video ditempatkan dalam satu folder yang sama dengan file *.htm dan nama
file audio nya disesuaikan dengan file audio yang anda gunakan.

<html>
<head>
<title>cek video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="bola.mp4" type="video/mp4">
browser anda tidak mendukung format video ini.
</video>
</body>
</html>


D. Maksud dan Tujuan
mengenal lebih lagi tentang Hyperlink,penyisipan file dan membuat tampilan halaman web dengan benar.

E. Alat dan Bahan
1. Laptop
2. File Items
3. Software aplikasi yang mendukung penggunaan HTML

F. Hasil yang diharapkan
mempraktikkan dengan benar dan bisa memahami masing-masing penggunaan coding yang terdapat pada contoh di atas.

G. Referensi


Tidak ada komentar:

Kamis, 11 Januari 2018 Januari 11, 2018

penggunaan Link HTML...


 Pengertian LINK HTML


Assalamu’alaikum…

A. Pendahuluan
      kali ini saya akan membahas dan mempelajari tenntang pengertian Link pada HTML, bagaimana penggunaan link tersebut pada HTML. Pasti kalian sudah tau sebelumnya HTML itu apa, pasti juga sudah mempraktikkannya, kemudian langkah selanjutnya adalah mempraktikkan tag yang ada dalam HTML termasuk penggunaan link pada HTML.yuk kita simak sama sama.

B. Pengertian
      Link atau tautan adalah referensi ke data yang dapat diikuti pembaca dengan mengklik, mengetuk, atau melayang.

C.Latar Belakang
    Browser web biasanya menampilkan hyperlink dengan cara yang membedakan, mis. dalam warna, font atau gaya yang berbeda. Perilaku dan gaya tautan dapat ditentukan menggunakan bahasa Cascading Style Sheets (CSS).
Dalam antarmuka pengguna grafis, tampilan kursor mouse bisa berubah menjadi motif tangan untuk menunjukkan link. Di sebagian besar browser web grafis, tautan ditampilkan dalam teks biru bergaris bawah saat mereka belum dikunjungi, namun menggarisbawahi teks ungu saat mereka memiliki. Saat pengguna mengaktifkan tautan (mis., Dengan mengekliknya dengan mouse) peramban menampilkan target tautan. Jika target bukan file HTML, tergantung pada jenis file dan browser dan pluginnya, program lain mungkin diaktifkan untuk membuka file.

Ini menggunakan elemen HTML "a" dengan atribut "href" (HREF adalah singkatan  dari "Hypertext REFerence" dan secara opsional juga atribut "title", "target", dan "class" atau "id".
Ini coding yang di pakai:
<a href="URL" title="link title" target="link target" class="link class"> label tautan </a>
 
Untuk menyematkan tautan ke laman web, blogpost, atau komentar, mungkin diperlukan coding :
<a href="http://example.com/"> Contoh </a> 
 
Di browser web biasa, ini akan menampilkan sebagai kata "Contoh" yang di garisbawahi
dengan warna biru, yang saat di klik akan membawa pengguna ke sutus  web example.com.
 ini berkontribusi pada teks, dokumen yang bersih dan mudah dibaca.

Cara kerja Hyperlink :

  • Tautan dari satu domain ke domain lain di katakan keluar dari jangkar dan masuk ke sasarannya.
  • Jangkar tujuan yang paling umum adalah URL yang digunakan di World Wide Web. ini bisa merujuk ke dokumen, mis. halaman web, atau sumber  lain, atau ke suatu posisi dalam sebuah halaman web. yang terakhir ini dicapai dengan menggunakan elemen HTML dengan atribut "nama" atau "id" pada posisi dokumen HTML tersebut. URL dari posisi adalah URL dari halaman web dengan fragmentifier - "#id atribut" – ditambahkan.
  • Saat menautkan ke dokumen PDF dari HTML, "atribut id" 
    dapat diganti dengan sintaks yang merujuk pada nomor halaman atau elemen
    lain dari PDF, misalnya, "#page=386"
Pada html, jenis link di bagi menjadi dua bagian, yaitu relatif dan absolut, perbedaan dari kedua jenis tersebut hanya cara penulisan alamat tujuannya saja, mari kita coba jabarkan agar lebih mudah di pahami.

Link Relatif

Link relatif adalah link yang bisa dikatakan link yang mengarah langsung pada lokasi path atau direktori tujuan yang tersimpan pada web server atau komputer tanpa di awali dengan alamat domain website tersebut, sehingga dalam pengunaannya sangat tergantung pada lokasi file berada, contohnya.
<a href="relatif.html">Relatif Link</a>
atau..
<a href="direktori/relatif.html">Relatif Link</a>
Dan apabila ingin mundur selangkah pada lokasi halaman sekarang ke halaman sebelumnya maka harus dengan menggunakan “../” agar dapat pindah ke halaman pada direktori diatasnya atau ke halaman sebelumnya.


Link Absolut

Link absolut adalah link yang mengarah langsung pada website tertentu, dimana sebuah dokumen di kunci pada alamat valid sebuah website, dan tidak tergantun pada direktori lokasi dokumen html berada. Sehingga alamat dapat di gunakan pada lain website selama alamat tersebut masih valid.
Contoh:
<a href="<a class="vglnk" href="http://domain.com/absolut.html" rel="nofollow">
<span>http</span>
<span>://</span>
<span>domain</span>
<span>.</span>
<span>com</span>
<span>/</span>
<span>absolut</span>
<span>.</span>
<span>html</span>
</a>">Absolut</a>






D. Maksud dan Tujuan
      supaya dapat lebih mengetahui penggunaan link pada html dengan mudah.

E. Alat dan Bahan
1. Laptop
2. File Items
3. Text editor/notepad

F. Hasil yang di harapkan
     dapat menerapkan atau mempraktikkan pembahasan tadi menggunakan text editor atau notepad atau yang lainnya, dengan mudah.

G. Referensi

Tidak ada komentar:
Langganan: Postingan (Atom)

About

RPL (Rekayasa Perangkat Lunak) . Diberdayakan oleh Blogger.

Number Of Visitors :

Cari Blog Ini

BTemplates.com

Pages

Blogger templates

Popular Posts