TuKomNet: Html

Html

Showing posts with label Html. Show all posts

Belajar Penggunaan Background di Css

Belajar Penggunaan Background di Css - Pada bagian ini kita akan membahas tentang Penggunaan background untuk memperindah tampilan Web. Untuk elemen-elemen background di html dan css adalah Sebagai berikut:

background-color property ini biasanya digunakan untuk warna latar belakang elemen.
background-image property ini digunakan untuk memasang background gambar.
background-repeat property ini untuk mengatasi pengulangan background (gambar).
background-position property ini biasanya digunakan untuk meletakan posisi background (gambar).
background-attachment property ini mengatur bagaimana background diatur.
background property mencakup semua yang diatas, jadi dengan satu property kamu bisa memasukan semua yg diatas.


<html>
   <head>
   <body>
      <p style = "background-color:yellow;">
      This text has a yellow background color.</p>
   </body>
   </head>
<html>

Hasilnya

This text has a yellow background color.

Kita juga bisa menggunakan Background gambar untuk mempercantik, contohnya sebagai berikut:


<html>
   <head>
      <style>
         body  {
            background-image: url("/css/images/css.jpg");
            background-color: #cccccc;
         }
      </style>
      <body>
         <h1>Hello World!</h1>
      </body>
   </head>
<html>

Hasilnya

This text has a yellow background color.

Sekian Tutorial singkat dari saya :D

Membuat Alert Box atau Kotak Peringatan Dengan Javascript

Blogger Css Design Html Tutorial Web Design

Juliansyah 6:21 PM Add Comment

Juliansyah

Hello Gan :D
Ketemu lagi dengan Saya, kali ini kita akan membahas tentang javascript, tutorial kali ini juga tergolong sangat mudah untuk dipelajari untuk pemula.

apa sih alert box atau kotak peringatan itu, alert box atau kotak peringatan itu adalah suatu fungsi di javascript yang menampilkan sejenis kotak ada suatu browser.

untuk mengetahui lebih mengenai alert box atau kotak peringatan itu sendiri alangkah baiknya jika kita praktekan secara langsung.

<script>
 alert("Contoh Perigatan yang ingin ditampilkan");
</script>

script diatas dipasang di dalam kode html website anda supaya bisa menampilkan lert box atau kotak peringatan.
sebagai contoh script berikut ini


<html>
<head>
</head>
<body>
<script>
 var tanggal=Date();
 alert("Assalamualaikum! Waktu sekarang adalah: "+tanggal);
</script>
</body>
</html>

Hasilnya akan muncul seperti gambar dibawah ini:

jika sudah muncul seperti gambar diatas berarti script anda sudah berhasil.

Sekian posting dari saya untuk hari ini tunggu posting selanjutnya ya :D

Mengabungkan HTML dengan Php

Aplikasi Html Tutorial Tutorial PHP Web Design

Juliansyah 2:46 PM Add Comment

Juliansyah

Hallo Guys :)
hari ini saya akan membagikan tutorial singkat banget, tapi mohon maaf dulu karena sudah saya sudah lama vakum blog, sekarang blog ini akan aktif terus minimal posting dua kali dalam seminggu.

Ok kita kembali ke pembahasan yaitu cara menggabungkan html dengan php yang menurut saya adalah tutorial yg sangat mudah untuk dipahamai bahkan bagi para newbie sekalipun, tutorial ini hanya menggunakan satu fungsi echo, apa itu fungsi echo??? fungsi echo itu adalah fungsi di php yg berguna untuk menampilkan data kedalam browser, sebenarnya ada banyak fungsi lain selain fungsi echo tersebut yg akan admin bahas dilain waktu.

coba kalian perhatikan kode dibawah ini.

<?php echo "Selamat Belajar di Tukomnet"; ?>

Hasilnya: Selamat Belajar di Tukomnet
ok kode selanjutnya kita akan menggunakan HTML:

<?php echo "Selamat Belajar di <b&gtTukomnet</b&gt"; ?>

Hasilnya: Selamat Belajar di Tukomnet

Sekarang Mungkin kalian sudah paham jika belum paham siahkan tanyakan kepada saya di facebook. sekian tutorial dari saya terima kasih

Halaman Web Static Dan Dinamis, Apa bedanya?

Blogger Css Html Web Design

Juliansyah 5:38 AM Add Comment

Juliansyah

Apa itu halaman web statis? Apa itu halaman web dinamis? Apa bedanya? semua pertanyaan itu akan kita bahas di tutorial kali ini yang berjudul Halaman Web Static Dan Dinamis, Apa bedanya?.

Sebelumnya apakah anda sudah pernah mendenggar tentang apa itu web statis dan web dinamis? saya rasa kalian sudah pernah mendengarnya. Di dalam teknologi Website terbagi menjadi dua, yaitu web statis dan web dinamis, untuk penjelasan lebih detail kita bahas dibawah ini.

Web Statis

Web statis yang didalam bahasa inggris yaitu STATIC yang berarti tetap, jadi bisa kita artikan kalau halaman web statis itu adalah halaman tetap yang dimana tidak perlu pemprograman dan database apapun melainkan hanya mengolah HTML, data dan informasi tidak bisa diubah kecuali di ubah syntax halaman webnya.

Sebagai contoh yaitu web fotografi yang hanya memiliki satu halaman, biasanya hanya menggunakan html dan css biasanya untuk web statis yang bagus biasanya menggunakan javascript.

Web Dinamis

Web dinamis adalah kebalikan dari web static dimana halama web static bisa diubah menggunakan program seperti PHP, ASP ,.NET dan masih banyak lagi, web dinamis juga memiliki database yang dimana semua data dan informasi bisa diubah dan diperbaruhi dengan inputan, web dinamis ini sangat komplek karena bisa di ditambah oleh client sendiri sesuai dengan inputannya lalu dikirim dengan request.

Sebagai contoh adalah jejaring sosial, website berita dan masih banyak lagi, coba anda perhatikan pasti ada perbedaan besan antara keduannya.
salah satu contoh nya bisa dilihat dengan url sebagai berikut:

http://tukomnet.blogspot.co.id/search?q=dinamis

Dalam url diatas bisa di lihat bahwa halaman web tersebut adalah dinamis.

Perbedaannya

Interaksi antara pengguna dan pemilik web
dalam web statis tidak memungkinkan adanya interaksi antar pengguna dan pemilik website. Tetapi di web dinamis bisa melakukan interaksi seperti komentar chat dan lain-lain.
Syntax atau script yang digunakan
Biasanya web statis hanya menggunakan Html saja sebagai susunan halaman webnya. Tetapi kalau di web dinamis bisa menggunakan berbagai program seperti PHP,JAVA,.NET dan lain-lain
Adanya database atau tidak
Biasanya web stais tidak memiliki database karena tidak adanya inputan serta request ke server halaman. Untuk web dinamis biasanya menggunakan database untuk menyimpan data dan informasi supaya bisa diubah atau dihapis suatu hari nanti
Konten
Konten dalam web statis hanya dibuat oleh pemilik web dan jarang di-update, sementara konten dalam web dinamis bisa berasal dari pengunjung dan lebih sering di-update. Konten dalam web dinamis bisa diambil dari database sehingga isinya pun bisa berbeda-beda walaupun kita membuka web yang sama.

Web Designer Dan Web Developer, Apa bedanya?

Css Design Html Web Design

Juliansyah 4:59 AM Add Comment

Juliansyah

Apa itu web designer dan web developer? Apa saja pekerjaannya web designer dan web developer? mungkin sebagian dari kalian sudah tahu apa itu web developer dan web designer ini karena kata-kata ini sudah tidak lazim lagi di dunia perusahaan dan banyak membuka jasa, tetapi sebagian orang belum mengetahui perbedaan antara web designer dan web developer ini, karena mereka menganggap pekerjaan ini adalah sama, jadi pada posting kali ini saya akan membahas perbedaaan antara keduanya.

Web Designer

Web designer ini adalah orang yang memiliki keterampilan khusus dalam mengolah interface suatu website, mereka membuat suatu website menjadi indah saat mata memandang, seorang web designer biasanya menambah gambar, musik, video, animasi seperti flash dan css atau multimedia lainnya yang bertujuan untuk membuat suatu web menjadi enak dilihat pengunjung.

Pemahaman yang harus dikuasai oleh web designer adalah Client-side scripting seperti html,css,javascript dan gambar manipulasi seperti gambar svg.

Seorang web designer tidak sembarangan dalam mendesign mereka juga mengutamakan Seo friendly serta UI (UserInterface) dan UX (UserExperience) yang harus sesuai dengan W3C, serta halaman web yang dibuat harus responsive supaya pengguna handphone, tablet dan komputer PC bisa lebih mudah dalam menelusuri web tersebut.

Web Developer

Web developer adalah orang yang membuat suatu program untuk suatu website, mereka lebih cenderung ke arah pemprograman website seperti PHP,.NET, Java atau Python.

Mereka lebih menggunakan alogaritma ketimbang seni grafis, peran web developer biasanya sebagai penghubung seperti database ke program php membuat halaman dinamis atau membuat halaman yang berinteraksi dengan elemennya.

Seorang web designer handal biasanya bisa menguasai peran web developer ini, mereka bisa Client side scripting maupun Server side scripting.

Web developer biasanya tidak menghiraukan tampilan yang penting mereka bisa html css itu sudah cukup.

Bagi seorang web designer kemampuan seni grafis dan kreativitas sangat diperlukan untuk membuat tampilan web menjadi menarik sedangkan web developer sendiri memerlukan logis yang hebat untuk membuat alur program website tersebut.

Tutorial membuat Css Speech Bubble

Css Html Tutorial Web Design

Juliansyah 10:33 PM Add Comment

Juliansyah

Kali ini kita akan membahas cara membuat speech bubble dengan css yang tergolong tidak sulit untuk dipahami, yaitu hanya menggunaakan box-shadow,border-radius dan permainan border.

Untuk scriptnya lihat di bawah ini:

index.html

<html>
<head>
 <title>CSS Speech Bubble Comment by TUTORIALWEB.NET</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>Css Speech Bubble By TUkomNet</h3>
 <div class="bubble-list">
  <div class="bubble clearfix">
   <div class="bubble-content">
    <div class="point"></div>
    <p>Pellentesque at nibh gravida, vehicula felis sed, sollicitudin lectus. Donec quis dapibus nisi. Maecenas sit amet faucibus massa. Phasellus pulvinar nisi quis lectus sodales, at aliquam est commodo. Nunc erat purus, viverra lobortis blandit vel, dictum quis urna. Etiam vitae consectetur nibh.</p>
   </div>
  </div>
  <div class="bubble clearfix">
   <div class="bubble-content">
    <div class="point"></div>
    <p>Phasellus pulvinar nisi quis lectus sodales, at aliquam est commodo. Nunc erat purus, viverra lobortis blandit vel, dictum quis urna. Etiam vitae consectetur nibh.</p>
   </div>
  </div>
 </div>

</body>
</html>

Dan untuk Script untuk mempercantik Speech Cssnya silahkan dicopy dibawah ini

style.css

body {
 background: #DDD;
 font: 1em "Trebuchet MS";
}

.clearfix {
 display: inline-block;
}

* html .clearfix {
 height: 1%;
}

.clearfix {
 display: block;
}

.bubble-list .bubble {
 margin-bottom: 20px;
}


.bubble-list .bubble .bubble-content {
 position: relative;
 margin-left: 20px;
 width: 400px;
 padding: 10px 20px;
 border-radius: 10px;
 background: #fff;
 box-shadow: 1px 1px 5px rgba(0,0,0,.2);
 color: #333
}

.bubble-list .bubble:nth-child(even) .bubble-content .point {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 12px solid #fff;
 position: absolute;
 left: -12px;
 top: 12px;
}
.bubble-list .bubble:nth-child(odd) .bubble-content .point {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-left: 12px solid #fff;
 position: absolute;
 right: -12px;
 top: 12px;
}
h3 {
 background: #f4778f;
 text-align: center;
 padding: 10px;
 color: #fff;
 font-size: 18px;
 width: 400px;
 margin-left:20px 
}

Jangan lupa untuk menyimpan dengan nama style.css dan index.html dan lihat hasilnya :)

Cara membuat layout masonry css3 tanpa plugin jquery

Css Design Html Tutorial Web Design

Juliansyah 10:11 PM Add Comment

Juliansyah

Apa itu masonry layout? masonry layout adalah sistem grid dengan kolom yang memiliki baris dan tinggi yang tidak tetap, biasanya masonry ini di buat menggunakan plugin jquery masonry tetapi sekarang css3 sudah bisa digunakan untuk membuat layout masonry.

Yang harus anda pelajari hanya css3 multiple columns:

column-count:
column-gap:

Keterangan:

column-count: untuk memberi banyak kolom
column-gap: untuk memberi jarak antara kolom

Example:

div {
column-count:4;
column-grap:10px;
}

Hasilnya adalah Empat Kolom dengan margin atau jarak setiap kolom adalah 10px

Untuk contoh lainnya bisa dilihat dibawah ini:

HTML

<div class="item-konten">
    <ul>
        <div class="isi">
            <li><img ="#" /></li>
            <li>Dekripsi yang disini</li>
        </div>
    </ul>
</div>

CSS

.item-konten {
 padding:20px;
}
ul {
 column-count:3;
 column-grap:10px;
 border:1px solid #333;
}

Sekian tutorial singkat yang dapat saya sampaikan, jika ada kekuranngan mohon kritik di kolom komentar.