Skip to main content

Posts

Showing posts with the label Web Design

Belajar CSS Selector

CSS selector dapat dikatakan suatu pola untuk memilih elemen yang akan diubah atau diberikan suatu gaya. Selector memiliki beberapa macam Selector Class(.) Selector Class berfungsi untuk menyeleksi semua elemen <div class=”elemen”></DIV> Berikut ini adalah contoh selector class() <html> <head> <style> .mulai{ Color:green; } </style> </head> <body> <h1> Selamat Datang di ilmuinformatika</h1> <div class=mulai> <p> Nama Saya Blade. </p> </div> <p> Saya Tinggal di Bandung. </p> </body> </html> Berdasarkan Skrip diatas ditunjukan untuk penilisan CSS selector Class yang akan digunakan untuk mengubah didalam tag html <div class=mulai></div> Dimana hasilnya adalah seperti dibawah ini :
Post a Comment
Read more

Belajar CSS Selector id(#)

Selector id berfungsi untuk menyeleksi semua elemen <div class=”elemen”></DIV> Berikut ini adalah contoh selector id() <html> <head> <style> #nama{ color:red; } </style> </head> <body> <div id=nama> <h1> Selamat Datang di ilmuinformatika</h1> <p> Nama Saya Blade. </p> </div> <p> Saya Tinggal di Bandung. </p> </body> </html> Berdasarkan Skrip diatas ditunjukan untuk penilisan CSS selector id yang akan digunakan untuk [wpedon id="211" align="left"]mengubah didalam tag html <div class=nama></div> Dimana hasilnya adalah seperti dibawah ini :
Post a Comment
Read more

Belajar CSS Selector {*}

Pada selector ini bertujuan memilih semua element menjadi seperti yang telah tentukan pada bagian ini, seperti contoh : <html> <head> <style> *{ color:red; } #nama{ background-color:yellow; } </style> </head> <body> <div id=nama> <h1> Selamat Datang di ilmuinformatika</h1> <p> Nama Saya Blade. </p> </div> <p> Saya Tinggal di Bandung. </p> </body> </html> Dalam skript diatas saya membuat 2 selector , selector (*) saya gunakan untuk merubah warna tulisan yang ada pada  semua elemen ytang ada pada halaman html yang saya buat, sedangkan untuk selector id saya gunakan untuk membedakan hasil dari selector (*)[wpedon id="211" align="right"] Seperti gambar dibawah ini :
Post a Comment
Read more

Selector (element) CSS

Pada selector ini berfungsi untuk menyeleksi semua element yang didefinisikan pada selector, misyal kita akan menyeleksi elemen <h1></h1> , Berikut ini adalah cara penyeleksiannya yaitu dengan menggunakan h1 sebagai selector <html> <head> <style> h1{ color:red; } </style> </head> <body> <h1> Selamat Datang di ilmuinformatika</h1> <p> Nama Saya Blade. </p> <h1> Saya Harus Pintar </h1> </body> </html> Dari skript di atas kita telah memahami dan mengetahui apa fungsi dari selector element, berikut ini adalah hasil dari selector tersebut :
Post a Comment
Read more

CSS : Selector elemen,elemen1{}

Selectror ini berfungsi untuk memberikan even kepada elemen dan elllement1 pada kode html, misyal kita akan menyeleksi h1,p{} makan ketika ada elemen didalah <h1><h/1> dan <p></p> akan mendapatkan even yang dibuat, sebagai contoh <html> <head> <style> h1,p{ color:red; } </style> </head> <body> <h1> Selamat Datang di ilmuinformatika</h1> <p> Nama Saya Blade. </p> <h1> Saya Harus Pintar </h1> <br>Kemana</br> </body> </html> Berikut ini adalah contoh hasilnya :
Post a Comment
Read more

CSS : Selector elementA elemenB{} CSS

Pada selector kali ini berfungsi untuk merubah style yang terdapat pada elemenB yang terletak di element A Sebagai contoh : <html> <head> <style> h1 b{ color:blue; } </style> </head> <body> <h1> gue juga <b>Nama Saya Blade. <b> Saya Harus Pintar </h1> <b> Aku Manusia </b> </body> </html> Pada source code diatas bisa kita lihat terjadi perubahan pada elemenB yaitu <b><b> yang berada pada element a yaitu <h1></h1> sedangkan element b yang berapada diluar elementA tidak berubah. berikut ini adalah hasil script diatas :
Post a Comment
Read more

CSS : Selector elementlokasi > elementseleksi

Mengapa pada selector ini saya gunakan nama lokasi dan seleksi, karena element ini berfungsi untuk menyeleksi semua script html element seleksi yang berada pada elementlokasi namun tidak boleh ada pada element lain pada element lokasi. Untuk yang masih bingung bias perhatikan script dibawah ini : <html> <head> <style> lok > sel{ background-color:red; } </style> </head> <body> <h1> <lok> <sel> Aku adalah Superman </sel> <span> <sel> you = kamu </sel> </span> <sel>surat</sel> </lok> <h1> </body> </html> Pada script diatas kita membuat sebuat script html yang yang berisi selector css, perhatikan pada bagian style saya membuat elementlokasi dengan nama lok dan elementseleksi dengan nama sel, jadi ketika sel berada pada lok secara langsung maka akan diberikan sebuat style background merah seperti script diatas namun tiak berlaku ketika ada element lain didalam ele
Post a Comment
Read more

CSS : Selector Hover

Selector hover digunakan  untuk membuat objek yang kita sentuh dengan kursor berubah baik itu warna background maupun warna tulisan. Untuk elemen hover ketentuan penulisannya adalah sebagai berikut “namaelemen:hover{}”  berikut ini adalah contoh CSS element hover <html> <head> <style> h1:hover,p:hover{ background-color:red; } </style> </head> <body> <h1> Selamat Datang di ilmuinformatika</h1> <p> Nama Saya Blade. </p> <h1> Saya Harus Pintar </h1> <br>Kemana</br> </body> </html> Pada bagian source code diatas saya coba memberikan style menggunakan elemen hover apabila <p></p> dan <h1></h1> disentuh dengan kursor maka warna backgrounnya akan berubah. Sebagai contoh gambar dibawah ini :
Post a Comment
Read more

Belajar memberi background berbentuk kotak HTML & CSS

Berikut ini adalah kode html yang saya gabungkan dengan css untuk memberikan sebuah aksi pada objek yang saya buat. berikut ini adalah kode programnya <html> <head> <style> .mulai{ width:110px; height:110px; background-color:red; } </style> </head> <body><center><br> <h1> Selamat Datang Bro<br> ini adalah belajar ngasih warna background dengan dibuat kotak<p> <div class="mulai"> kamu<br> aku<br> dia<br></h1></div> </body> </html> Pada kodingan diatas saya membuat style dengan bantuan css selector class dengan nama mulai. pada mulai saya isikan width dan hightnya dengan ukuran 110 px agar berbentuk kotak ukurannya sama panjang, kemudian saya berikan background-color dengan warna merah. kode program css selector class diatas saya aktifkan pada bagian <div class="mulai"> dan diakhiri </div> dan saya letakan posisinya dengan kode <ce
Post a Comment
Read more

Latihan 5 - Pembuatan Soal di html

Pada latihan kali ini adalah pembuatan contoh soal menggunakan html, dengan text input, combobox(option), radio, button, image biodata dll. pada kesempatan kali ini saya pisahka antara script CSS dan HTMLnya 1. Pembuatan CSS ( berikan nama soal.css ) *{ box-sizing:border-box; margin:0 auto; } body{ background-color:azure; } html,body{ font-family:Helvetica; } form { top:-150px; left: -0px; position:relative; width:100%; max-width:400px; background-color:azure; border-radius:0px; box-shadow:0px 0px 0px azure; } .input-mode{ border:1px solid silver; border-radius:1px; font-size:1px; height:20px; padding:10 0px; display:inline; width:60%; } soal { top:-150px; left: -0px; position:relative; width:100%; max-width:400px; background-color:azure; border-radius:0px; box-shadow:0px 0px 0px azure; } ad { top:-1px; left: 20px; position:relative; width:100%; max-width:400px; background-color:azure; border-radius:0px; box-shadow:0px 0px 0px azure; } p
1 comment
Read more

Latihan 4 - Pembuatan biodata

Pada latihan kali ini adalah pembuatan biodata dengan penambahan background color, marquee, color text, backgroun color pada text, underline dan bold berikut ini adalah contoh kode htmlnya : <html> <head> <title>Biodata</title> <style> lok > sel { background-color:Red; } </style> </head> <body bgcolor="black"> <font color="green" face="verdana" size="12"</font> <marquee>Ini Biodata Saya</marquee><p> <font color="white" face="verdana" size="12"</font> <lok> <b>Nama:</b><sel><u>Rizky</u><br></sel> <b>Kelas:</b><sel><u>1</u></sel><br> </lok> </body> </html> Berikut ini adalah hasilnya :
Post a Comment
Read more

Latihan 3 - Pembuatan Table kolom Header dan penambahan background melalui css

Berikut ini adalah contoh pembuatan html dasar di latihan 3, dengan menambahkan image backgroun di css dan warna tulisan <html> <head> <title>Cara Membuat Header dan Kolom</title> <style type="text/css"> body { background-image: url(a.png); color: black ; } </style> </head> <body> <font color ="blue" face="verdana" size="12"</font> <center><b><h2> Kolom dan Header </h2> <table border="1"> <tr> <th>NO</th> <th>NIM</th> <th>Nama</th> <th>Mata Kuliah</th> </tr> </center> <tr> <td>1</td> <td>311510268</td> <td>Rizky Muhamad Ridwan</td> <td>Teknik Informatika</td> </tr> <tr> <td>2</td> <td>
Post a Comment
Read more

Latihan 2 - HTML dasar menggunakan form radio dan button

Berikut ini adalah contoh script html dasar menggunakan css, form, input text, radio, image header dan button <html> <head> <title>Latihan 2017</title> <style> #head{ background-color:red; } #uj{ background-color:yellow; } #isi{ background-color:orange; } #atas{ background-color:violet; } #welcome{ background-color:white; } </style> </head> <body bgcolor="red"> <div id=atas><b>Silahkan Pilih Jurusan</b> <select> <option value="">Teknik Informatika</option> <option value="">Sistem Informatika</option> <option value="">Bahasa Indonesia</option> <option value="">Bahasa Inggris</option> </select></div> <div id=welcome> <center><img src="b.png"><img src="c.png"><img src="d.png"><img src="e.png"><img src="f.png"><
Post a Comment
Read more

Latihan 1 - Pembuatan design tugas akhir menggunakan HTML

Pada kesempatan kali ini saya akan memperlihatkan bagaimana cara pembuatan sebuah contoh penyusunan sebuah halaman dari script html dibawah ini dengan menggunakan CSS dan link <html> <head> <title>Latihan 2017</title> <style> #head{ background-color:red; } #uj{ background-color:yellow; } #isi{ background-color:orange; } #atas{ background-color:violet; } #welcome{ background-color:white; } </style> </head> <body bgcolor="red"> <div id=head> <div id=uj> <center><b> Tugas Akhir Kelompok TA 2017/2018<br> Pengembangan TI STT Pelita Bangsa</b></center><p></div> <div id=isi> <ul> <b><li>Pendahuluan</b> <ol> <li><a href=#>Latar Belakang</a> <li><a href="new 1.html">Rumusan Masalah</a> <li><a href="new 2.html">Tujuan</a> <li><a href="new 2.html">Batasan
Post a Comment
Read more

Mengenal Struktur HTML

Berikut ini saya akan coba menjelaskan mengenai struktur html <html> <head> <title> </title> </head> <body> </body> </html> Penjelasan Kode <html>....</html> Tag Html diatas dimaksudkan bahwa website menggunakan bahasa html <head>.....</head> Tag <head> merupakan kepala dari halaman website, pada tag ini biasanya digunakan untuk peletakan css, java/script, font, dll <title>web gue</title> tag <title> digunakan untuk menyatakan title website anda, title terletak pada <head> <body>.....</body> tag <body>, tag body digunakan sebagai tempat pengisian web anda, atau isi dari website anda terletak di body
Post a Comment
Read more