Tutotorial Html:Cara Membuat Link pada HTML dengan tag a

Assalamu'alaikum
Selamat Sore



Link dengan html
LINK HTML

Pada kesempatan kali ini hendi akan berbagi tutorial bagaimana membuat link dengan menggunakan html untuk membuat link pada html kita menggunakan tag link yang di simbolkan dengan huruf (a). Penulisannya yaitu:


<a href="nama file.html">link</a>

saya akan mencoba membuat dua halaman, berikut ini adalah contohnya:

<!DOCYTYPE html>
<html>
    <head>
        <title>Halaman 1</title>
    <head>

<body>
        <a href="halaman2.html">Halaman 2</a>

</body>
</html>

<!DOCYTYPE html>
<html>
    <head>
        <title>Halaman 1</title>
    <head>

<body>
        <a href="halaman1.html">Halaman 1</a>

</body>
</html>

Jika script/kode di atas dijalankan maka hasilnya seperti pada gambar dibawah ini:

halaman1
Gambar 1.1

Jika link Halaman 2 diklik maka akan tampil seperti pada gambar di bawah ini:

halaman2




 Gambar 1.2
Begitu sebaliknya jika link Halaman 2 diklik maka akan kembali ke Halaman 1

Demikian tutorial tentang pembuatan link dengan html.
Kurang lebihnya saya mohon maaf.


Wassalamu'alaikum Wr.wb



Tutorial Html:Cara Membuat list item dengan ul,ol dan li pada html

Tutorial html,membuat list item dengan tag ul dan ol
list item
Gambar list item

Assalamu'alaikum Wr.wb
Selamat Siang


Pada kesempatan kali ini hendi akan berbagi tutorial bagaimana caranya membuat list/daftar dengan menggunakan html. Dalam html list dibagi menjadi dua yaitu:

  1. ol (ordered list) merupakan tag yang digunakan untuk membuat list / daftar secara beraturan.
  2. ul (unordered list) merupakan tag yang digunakan untuk membuat list / daftar yang tidak beraturan.
  3. untuk listnya kita menggunakan tag li untuk listnya
baik langsung saja di bawah ini adalah script/kode penulisan tag ol dan ul

  • ordered list

<!DOCTYPE html>
<html>
        <head>
                <title>
                    membuat ordered list html
                </title>
        </head>

<body>
    <h3>Daftar Hardware Komputer</h3>
    <ol>
        <li>Mouse</li>
        <li>Keyboard</li>
        <li>Harddisk</li>
        <li>Ram</li>
    </ol>
<body>
</html>

Jika script/kode diatas dijalankan maka hasil seperti pada gambar dibwah ini:

ordered list
Gambar Ordered List

  • Unordered list

<!DOCTYPE html>
<html>
        <head>
                <title>
                    membuat ordered list html
                </title>
        </head>

<body>
    <h3>Daftar Hardware Komputer</h3>
    <ul>
        <li>Mouse</li>
        <li>Keyboard</li>
        <li>Harddisk</li>
        <li>Ram</li>
    </ul>
<body>
</html>
Jika script/kode diatas dijalankan maka hasilnya seperti pada gambar dibawah ini;

Unordered list
Unordered List
Selain ul,ol dan li digunakan untuk membuat list/daftar bisa juga digunakan untuk membuat navigasi atau menu dalam suatu website dengan menambahkan css.

 Demikian tutorial membuat list/daftar, kurang lebihnya saya mohon maaf.
Wasslamu'alaikum Wr.wb

Tutorial Html:Membuat heading pada HTML

heading html



Assalamu'alaikum Wr.wb
Selamat siang

Pada kesempatan kali ini saya akan menjelasakan bagaimana membuat heading(Judul) dengan menggunakan tag html. Sebelum melanjutkan tutorial pembuatan heading perlu diketahui bahwa dalam penulisan tag heading ada beberapa hal yang harus dipahami yaitu:

  1. Secara default tag heading di dalam browser ditampilkan dalam bentuk huruf yang lebih tebal dan besar sehingga akan beda mana teks biasa dan judul.
  2. Tag heading mempunyai tag pembuka dan penutup yaitu : <h1> sebagai tag pembuka dan </h1> sebagai tag penutup.
  3. Tag heading terdiri dari enam tag yang dimulai dari tag <h1> sampai dengan <h6> sebagai berikut: <h1> Teks </h1>, <h2> Teks </h2>, <h3> Teks </h3>, <h4> Teks </h4>, <h5> Teks </h5>, <h6> Teks </h6>.
  4. Teks merupakan contoh teks yang dituliskan dalam diantara tag pembuka dan tag penutup pembuatan heading.
  5. Tag <h1> merupakan tag dengan output teks paling besar, Semakin besar angkanya maka teks yang ditampilkan semakin kecil, sebaliknya semakin kecil angkanya maka teks heading yang ditampilkan semakin besar.
Berikut ini penulisan script(code) pembuatan heading:

<!DOCTYPE html>
<html>
            <head>
                          <title> Pembuatan Heading Html  </title>
           </head>

<body>

<h1> Heading dengan tag h1 </h1>
<h2> Heading dengan tag h2 </h2>
<h3> Heading dengan tag h3 </h3>
<h4> Heading dengan tag h4 </h4>
<h5> Heading dengan tag h4 </h5>
<h6> Heading dengan tag h4 </h6>

</body>
</html> 

Jika script diatas dijalankan di browser maka hasilnya sperti pada gambar dibawah ini:
Gambar Heading


Demikian artikel tentang pembuatan heading pada html kurang lebihnya mohon maaf
Wassalamu'alaikum Wr.wb





Tutorial Bootstrap:Menu dropdown dan Footer menggunakan Bootstrap



Assalamu’alaikum Wr.wb 
Selamat Sore

Menu Dropdown
dropdown menu
Pada kesempatan kali ini hendi akan share tutorial bagaimana cara mengimplementasikan bootstrap Dalam pembuatan website. Bootstrap sendiri merupakan framework front-end yang memudahkan kita dalam mengembangkan sebuah website agar terlihat lebih cantik dan responsive sehingga tampilannya tidak terlihat kaku. Kita bisa menggunakan bootstrap untuk design template suatu web dengan tampilan yang menarik dan juga bisa digunakan untuk membuat template web yang responsive sesuai dengan kebutuhan kita. 

Namun sudah tahukah anda bagaimana cara menggunakan Booststrap itu sendiri??
Cara menggunakan Bootstrap yaitu sama dengan ketika kita menggunakan css ekternal, kita tinggal memanggil file pendukung yang sudah tersedia dalam bootstrap itu sendiri, bisaanya file yang kita perlukan terbagi ke dalam beberapa folder yakni :
1.      Css
2.      Fonts
3.      Js

Folder css digunakan untuk meletakkan file css dari bootstrap, folder fonts merupakan folder yang di dalamnya terdapat beberapa font yang disediakn oleh bootstrap, namun kita juga bisa menambahkan fonts kita sendiri ke dalam folder dengan fonts yang sesuai dengan kebutuhan. Folder Js merupakan folder dari file-file javascript. Intinya 3 folder diatas adalah untuk memudahkan kita meletakkan atau menyimpan file yang sesuai dengan exstensinya dan juga filenya tidak campur-campur sehingga pemanggilan file bisa dilakukan dengan lebih mudah.

 Baiklah selanjutnya hendi akan menjelaskan bagaiman cara penulisan dan pemanggilan file bootstrap. Namun sebelum mengikuti tutorial ini anda diharuskan untuk mendownload file Bootstrap, untuk mendownloadnya kunjungi laman ini http://getbootstrap.com/

     Berikut adalah isi dari masing-masing folder dan bisa dilihat dari gambar di bawah ini:

                              Folder css

Gambar 1.1

                             Folder Fonts

font bootstrap
 
Gambar 1.2

                             Folder Js

bootstrap java script

Gambar 1.3



        Setelah file yang kita butuhkan sudah terdownload maka langkah selanjutnya adalah membuat file untuk memanggil Bootstrap. Pada contoh kali ini saya akan membuat satu file index.html sebagai contohnya.
Index.html 
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tutorial Bootstrap</title>
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link  rel="stylesheet" type="text/css" href="css/latihan.css">  
  </head>
  <body>

      <nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Html</a></li>
<li><a href="#">Php</a></li>
<li><a href="#">Mysql</a></li>
<li><a href="#">Css</a></li>
<li><a href="#">Bootstrap</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Download<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Ebook</a></li>
<li><a href="#">Video Tutorial</a></li>
<li><a href="#">Source Code</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
<div id="wrap">
<div id="main" class="="container" clear-top>
<p><h1 align="center">Tutorial perancangan web menggunakan Framework Bootstrap</h1></p>
</div>
</div>
<div class="footer"><h4>HendiTecnoWeb &copy 2016 All Right Reserved</h4></footer>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
  </body>
</html>

File index.html tujuannya adalah ketika kita mengakses alamat dari file web yang kita buat melalui browser maka yang tampil/di load adalah file index.html tersebut,intinya file index itu adalah jembatan dari file-file yang lain. File index.html sudah kita buat selanjutnya adalah membuat satu file css untuk membuat footer yang posisinya tetap berada dibawah meskipun tidak ada artikel pada index.html yang sudah kita buat. Untuk file Cssnya saya beri nama latihan.css

latihan.css

html, body{ height: 100% } #wrap{ min-height: 100%; } #main{ overflow: auto; padding-bottom: 150px; } .footer{ position: relative; margin-top: -75px; height: 75px; clear: both; padding-top: -20px; background-color: #E7E7E7; text-align: center; outline-width: 8px; outline-style: ridge; outline-color: #0F0F0F; } h4{ text-align: center; color: #0F0F0F; }

NB
Untuk mengakses file bootstrap harus sesuai dengan alamat dimana file bootstrap di simpan contohnya diatas script yang digunakan untuk mengakses file bootstrap yaitu sebagai berikut


Script untuk memanggil file css dalam bootstrap
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link  rel="stylesheet" type="text/css" href="css/latihan.css">

perintah dasarnya adalah <link href="nama folder/nama filecss.css">
script untuk memanggil file javascript dari bootstrap
Pada halaman bootstrap script untuk memanggil file bootstrap diletaakkan
pada bagian paling bawah yaitu berada diantara tag <body></body> dan untuk tag-tag yang lainnya
diletakkan diatas script yang digunakan untuk memanggil file javascript contohnya sebagai berikut
 

<body>
ini tempat untuk tag-tag yang lainnya

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>

        Setelah semuanya file diatas sudah dibuat kita tinggal menjalankannya di Browser, filenya saya simpan di dalam folder htdoc milik xampp dan saya buat folder lagi dengan nama latihanku. Sudah familiar tentunya agan-agan dengan xampp, file-file yang kita buat termasuk kedalam bahasa stylesheet jadi meskipun tidak akses melalui localhost dan disimpan pada folder htdoc juga bisa, namun disini tujuannya adalah untuk memudahkan kita dalam belajar Bootstrap dan kawan-kawannya hehhe ;). Untuk mengakses file yang sudah kita buat yaitu dengan menggetikkan http://localhost/latihanku/ dan jika berhasil maka hasilnya seperti gambar dibawah ini:

Tampila Web
Gambar 2.1

Tampilan Mobile
menu responsive dengan bootatrap
Gambar 2.2




Gambar 2.3

Pada gambar 2.3 merupakan tampilan mobile dan tampilannya sudah responsive sehingga meskipun web yang kita buat diakses di dalam Smartphone/mobile akan tetap terlihat bagus, tersunsun tampilannya dan tidak Acak-acakn itulah salah satu kelebihan dari framework Bootstrap.
Untuk file latihan diatas biasa  anda download disini.  

Sekian Tutorial mmembuat header dan footer dengan bootstrap kurang lebihnya hendi mohon maaf.
Kritik dan saran yang membangun dari anda kami butuh untuk untuk menyempurnakan artikel ini.

Wassalamu'alaikum Wr.wb




Tutorial Html:Struktur HTML5 dan Penjelasan

Struktur html5

<!DOCTYPE html>
 <html>
 <head>
<title>Struktur HTML5</title>
 </head>
<body>
       Disini adalah tempat kita menuliskan isi dokumen html yang kita buat
 </body>
 </html>

 Penjelasan
<!DOCTYPE html> Merupakan tag yang menandakan bahwa dokumen yang kita buat bertipe html
dan versi html yang kita pakai adalah  HTML5. 
 <head></head> tag yang digunakan untuk menampug tag <title></title> , tag <head>  berguna untuk memberikan informasi tentang dokumen html yang kita buat. Untuk menginformasikan nama dokumen yang kita buat, kita membutuhkan tag untuk menuliskan judul dari dokumen html yang kita buat yakni tag</title> <title> tag ini lah yang berfungsi untuk menuliskan judul dari dokumen html yang kita buat tag ini berada diantara tag  <head></head>.
Contoh diatas yaitu:

<head>
<title>Struktur HTML5</title>
 </head>
Struktur HTML5 diatas  merupakan judul dari dokumen html yang kita buat.

<body ><body> merupakan tag yang kita gunakan untuk menuliskan isi dari dokumen html yang kita buat, untuk isi kita bisa mengisinya sesuai kebutuhan kita. Di bawah ini adalah contoh penulisannya

<body>
       Disini adalah tempat kita menuliskan isi dokumen html yang kita buat
 </body>

</html> Merupakan tag penutup dari dokumen html.

Script/Code dari dokumen diatas bisa dilihat pada gambar dibawah ini:


Gambar 1.1




Jika script / Code diatas di ja:lankan di browser maka hasilnya adalah sebagai berikut :

Gambar 1.2

 NB: Editor yang saya gunakan diatas adalah sublime text, alasan menggunakan editor ini adalah untuk memudahkan saya untuk mengingat apa yang sudah ditulis, karena disini kit menulisnya mulai awal hingga benar-benar menjadi dokumen yang kita inginkan. Untuk opsi kalian bisa menggunakan editor seperti Dreamweaver, notepad, dan notepad ++. Selain yang sudah saya sebutkan masih banyak editor yang bisa kalian gunakan.

Untuk Video Tutorial bisa dilihat dibawah ini

Demikian tutorial dari saya kurang lebihnya saya mohon maaf, kritik dan saran anda yang membangun sangat dibutuhkan untuk menyempurnakan artikel tentang html5 ini.

Wassalamu'alaikum Wr.wb





Tutorial Php:Operator Perbandingan dalam PHP (Relasional)

operator perbadingan php
Gambar 1.1

Assalamu'alaikum Wr.wb

Pada kesempatan kali ini hendi akan berbagi tutorial tentang Operator perbandingan oke langsung saja cekidot :).
Operator Relasional(Perbandingan) merupakan operator yang digunakan untuk membandingkan dua buah nilai dan berikut adalah pembahasannya :
Operator Aritmatika
No. Operator Keterangan
1. $a == $b Nilai pada $a sama dengan $b
2. $a != $b Nilai pada $a tidak sama dengan $b
3. $a < $b Nilai pada $a lebih kecil dari $b
4. $a > $b Nilai pada $a lebih besar dari $b
5. $a <= $b Nilai pada $a lebih kecil atau sama dengan $b
6. $a >= $b Nilai pada $a lebih besar atau sama dengan $b

note :
$b merupakan variabel b 

contoh penggunaan operator perbandingan sebagai berikut:
  Operator == (sama dengan)
<?php
    $nilai1=90;
    $nilai2=90;

    if ($nilai1 == $nilai2){
        echo"Benar";
    }else{

        echo"Salah";
    }
?>

$nilai1 dan $nilai2 merupakan variabel nilai yang bernilai bernilai sama,jika dijalankan di browser maka hasilnya seperti gambar dibawah ini:

operator perbandingan
Gambar 1.2



Apabila kita merubah nilai salah satu variabel dengan nilai yang berbeda seperti pada code/script di bawah ini:

<?php
    $nilai1=90;
    $nilai2=80;

    if ($nilai1 == $nilai2){
        echo"Benar";
    }else{

        echo"Salah";
    }
  
?>

ketika dijalankan di browser maka hasil seperti pada gambar di bawah ini:

nilai variabel berbeda
Gambar 1.3

Operator != ( tidak sama dengan)

Kebalikan dari operator == (sama dengan) pada operator !=(tidak sama dengan) jika nilai dari variabel $nilai1 dan $nilai2 adalah sama maka hasilnya adalah salah, jika kedua variabel bernilai berbeda maka hasilnya adalah benar perhatikan script/code di bawah ini:

Variabel bernilai sama

<?php
    $nilai1=90;
    $nilai2=90;

    if ($nilai1 != $nilai2){ //!= merupakan operator tidak sama dengan
        echo"Benar";
    }else{

        echo"Salah";
    }
  
?>


Ketika dijalankan di browser maka hasilnya sebagai berikut:

operator tidak sama dengan
Gambar 1.4
 Variabel bernilai berbeda


<?php
    $nilai1=90;
    $nilai2=80;

    if ($nilai1 != $nilai2){ //!= merupakan operator tidak sama dengan
        echo"Benar";
    }else{

        echo"Salah";
    }
  
?>

Jika kedua variabel bernilai berbeda hasilnya sebagai berikut:

variabel bernilai berbeda



Tutorial Php:tipe data dalam bahasa PHP

Assalamu'alaikum Wr.wb

Pagi teman-teman semuanya dan pastinya tetap semangat ya. Langsung saja pada kesempatan kali ini hendi akan share tentang jenis tipe data dalam bahasa pemrograman php, berikut ini adalah deskribsinya.
tipe data php
Tipe  Data dalam PHP
No. Type Data Example Describe
1. Integer $jumlah = 99; Bilangan Bulat
2. Double $jumlah = 99.99; Bilangan Real
3. Srtring $nama = "Hendi Priyo Sendib" Karakter

Demikian artikel mengenai tipe data dalam php, kritik yang membangun dari anda kami butuhkan
Wassalamu'alaikum Wr.wb

Tutorial Html:Perataan Paragraf dengan HTML


Assalamu'alaikum Wr.wb
Selamat siang tetap semangat ya agan-agan :)

 kali ini kami akan berbagi tutorial bagaimana  membuat perataan paragraf dengan menggunakan kode HTML, ok langsung saja berikut cuplikan script HTML bisa dilihat pada gambar di bawah ini :

Perataan Paragraph html
Perataan Pragraph



perataan paragraf html 
Gambar 1.1 

dan di bawah ini adalah hasil script HTML diatas jika di running
 Gambar 1.2
Sekian tutorial dari kami kurang lebihnya mohon maaf.
Wassalamu'alaikum Wr.wb 

Tutorial Php:Pengertian dan Sejarah PHP

sejarah php


PHP(Hypertext Prepocessor) Merupakan bahasaa pemrograman yang bisa ditanamkan atau disisipkan ke dalam dokummen html. Php peratama kali ditemukan oleh seorang programmer yang lahir di Denmark yaitu Rasmus Ledorf sekitar tahun 1994. Php juga dapat digunakan untuk membuat halaman web dinamis.

Php merupakan bahasa server side karena php diprosess oleh komputer server.Bahasa php bersifat open source artinya kita bisa menggunkan php secara gratis.

Mungkin itu penjelasan singkat mengenai apa itu php kurang lebihya saya moho maaf. Kritik dan saran yang membangun sangat kami harapkan.

Wassalamu'alaikum Wr.wb

Tutorial Php:Penulisan Struktur Dasar Php


Struktur Php



Assalamu'alaikum Wr.wb
Selamat Pagi


Pada kesempatan kali ini hendi akan menjelasakan bagaimana penulisan struktur php, penulisan php dimulai dengan tag <?php dan diakhiri dengan tag penutup yaitu ?>. Php merupakan bahasa pemrograman yang bersifat server side, artinya php diproses di komputer server. Php tidak bisa langsung dijalankan di browser seperti bahasa HTML. Sebagai contohnya kita akan menjalankan script php menggunakan xampp.

Apa itu xampp??

Xampp merupakan software/aplikasi web server yang di dalamnya terdapat Apacehe,MySQL dan disupport dengan bahasa pemrograman php untuk membuat sebuah website dinamis. Xampp mendukung beberapa operating system / sistem operasi yaitu windows dan linux. Penginstalan xampp pada windows sama seperti install software lain kita tinggal mengikuti petunjuk yes, next dan seterusnya, akan tetapi berbeda ketika menginstall xampp di linux yaitu dengan menggunakan cmd (command prompt).

Beikut ini adalah penulisan stuktur php:

Script Struktur  Php

<?php ... ?>

Sebagai contohnya
<?php ini adalah script php ?>

Sebelum kita menjalankan script/kode di atas kiat harus menyimpannya kedalam folder htdoc pada saat kita menggunakan, sebagai contoh saya akan menyimpannya kedalam folder latihan.

Struktur Php

 Gambar 1.1

 Gambar 1.2

Jika Script diatas dijalankan maka hasilnya seperti pada gambar di bawah ini:

Gambar 1.2



Sekian artikel singkat mengenai penulisan Struktur PHP
kurang lebihnya hendi priyo mohon maaf

Wassalamu'alaikum Wr.wb