henditecnoweb

Tutotorial Html:Cara Membuat Link pada HTML dengan tag a

December 08, 2016 Add Comment

Assalamu'alaikum
Selamat Sore

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:

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:

Gambar 1.1

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

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

html

October 15, 2016 Add Comment

Tutorial html,membuat list item dengan tag ul dan ol

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:

ol (ordered list) merupakan tag yang digunakan untuk membuat list / daftar secara beraturan.
ul (unordered list) merupakan tag yang digunakan untuk membuat list / daftar yang tidak beraturan.
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:

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

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

html

July 15, 2016 Add Comment

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:

Secara default tag heading di dalam browser ditampilkan dalam bentuk huruf yang lebih tebal dan besar sehingga akan beda mana teks biasa dan judul.
Tag heading mempunyai tag pembuka dan penutup yaitu : <h1> sebagai tag pembuka dan </h1> sebagai tag penutup.
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>.
Teks merupakan contoh teks yang dituliskan dalam diantara tag pembuka dan tag penutup pembuatan heading.
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

bootstrap

May 03, 2016 1 Comment

Assalamu’alaikum Wr.wb
Selamat Sore

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

Gambar 1.2

Folder Js

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>
    
    <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

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

html

April 25, 2016 Add Comment

<!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)

Php

January 24, 2016 Add Comment

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 :

$a merupakan variabel a

$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:


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:

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:

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:

Tutorial Php:tipe data dalam bahasa PHP

Php

January 01, 2016 Add Comment

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 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

Ttutorial Php:Operator Aritmatika pada PHP

Php

January 01, 2016 Add Comment

Operator Aritmatika
No.	Operator	Nama Operasi
1.	+	Penjumlahan
2.	-	Pengurangan
3.	*	Perkalian
4.	/	Pembagian
5.	%	Sisa Pembagian
6.	++	Penambahan 1 angka
7.	--	Pengurangan 1 angka

Tutorial Html:Perataan Paragraf dengan HTML

html

November 24, 2015 Add Comment

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 Pragraph

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

Php

September 13, 2015 Add Comment

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

Php

September 06, 2015 Add Comment

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.