Kamis, 22 September 2016

Cara Membuat HTML

Mari belajar membuat HTML Dasar
Sebelum membuat HTML perlu diketahui apakah itu HTML ??
HTML kepanjangan dari Hyper Text Markup Language adalah sebuah bahasa Markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.
HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:
  • Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
  • Menampilkan tulisan dalam bentuk cetakan tebal
  • Menampilkan sekelompok kata dalam bentuk miring
  • Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
  • Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.
Untuk belajar membuat HTML, anda membutuhkan 2 buah program aplikasi yaitu HTML editor dan web browser. Untuk HTML Editor, anda dapat menggunakan yang paling mudah dan mungkin sudah ada di komputer anda yaitu Notepad. Sedangkan untuk browser, silahkan nanti gunakan Internet Explorer atau Mozilla Firefox yang mungkin juga sudah ada di komputer anda.
Jadi saat ini kita bisa langsung mempraktekkan bagaimana cara membuat HTML dari yang paling dasar. Notepad nantinya akan kita gunakan mengetikkan kode-kode atau tag HTML. Sedangkan web browser atau biasa disebut “browser” saja, akan kita gunakan untuk melihat hasil halaman HTML yang sudah kita buat. Langsung saja kepada praktek cara membuat HTML dasar. Yuk ikuti langkah – langkah membuat HTML :
Cara pembuatan Dokumen HTML :
Klik START → Pilih All Program → Accesories → Pilih notepad
Setelah notepad terbuka ketikkan struktur dasar dokumen HTML seperti contoh di bawah ini :
Gambar
Gambar
Setelah itu simpan file tersebut dengan extension HTML.
Klik save → Pilih save → Simpan dengan nama (nama folder).html
 Gambar
Kamu bisa melihat hasil coding yang telah diketikkan di notepad tadi dengan mencari file yang tadi disimpan, dan double klik pada file tersebut dan akan muncul hasil nya
 Gambar
Gambar 
Dari Struktur dasar HTML di bawah dapat dijelaskan sebagai berikut :
Gambar
Gambar
  • <html> : Untuk mendefinisikan sebuah dokumen HTML
  • <head> : Merupakan kepala dari dokumen HTML
  • <title> : Tag pembuka judul dokumen
  • <body background=”sunset.jpg”>
<hr color=”GREEN” size=”3″>
    <font face=”castellar” size=”6″ color=”RED”>
      <marquee scrolldelay=”100″
           OnMouseOut=”this.start();”
           OnMouseMove=”this.stop();”>
     <blink>MARI BELAJAR HTML BERSAMA YUKZ ^_^</blink>
      </marquee>                         
    </font>
  <hr color=”#000000″ size=”3″>
            </hr> : Yaitu coding diatas untuk tulisan yang dapat bergerak dari kanan kiri, bentuk, font, dan kalimat tulisan bisa sesuai keinginan sendiri
  • <body bgcolor=”pink”> </body> : Untuk mendefinisikan isi/badan suatu dokumen, pink adalah untuk menentukan warna background sesuai keinginan
  • <h1 align=”center”>TUGAS PENGANTAR KOMPUTER 2</h1> : untuk mendefinisikan posisi heading berada di tengah halaman
  • <br>
<center> <img style=”
width: 200px;
height: 220px;”src=”http://sphotos-a.ak.fbcdn.net/hphotos-ak-ash3/15218_3960622580644_201867054_n.jpg”&gt; </center> : Untuk menyisipkan sebuah gambar pada HTML dan <br> untuk menyisipkan line break
  • <b> Nama </b> : <big>Gina Muthia </big> : Untuk membuat kalimat di HTML dengan format <b> untuk menebalkan teks, <big> untuk membuat hurufnya besar
  • <b> NPM </b>  : <b> <i> 431212164 </b> </i> : Untuk membuat angka di HTML dengan format <i> untuk membuat tulisan miring
  • <b> JURUSAN </b> : <big> <b> <i> <u> Akuntansi komputer </big> </b> </i> </u> : Untuk membuat teks di HTML dengan format menggunakan format tulisan besar, miring dan ditambah <u> yaitu tulisan di garis bawah.
  • <b> Motto </b> : <big> <b> Kalau berusaha dengan sungguh-sungguh pasti BISA. <u>”SEMANGAT” : Untuk membuat teks di HTML dengan format teks besar dan teks tebal menggunakan <big> dan <b>
  • <h1 align=”center”>UNIVERSITAS GUNADARMA</h1> : Untuk mendefinisikan posisi heading berada di tengah halaman.
  • <body background=”sunset.jpg”>
<hr color=”yellow” size=”5″>
    <font face=”GEORGIA” size=”6″ color=”purple”>
      <marquee scrolldelay=”100″
           OnMouseOut=”this.start();”
           OnMouseMove=”this.stop();”>
     <blink>MAN JADDA WA JADA</blink>
      </marquee>
    </font>
  <hr color=”#000000″ size=”5″>
            </hr> : Yaitu coding diatas untuk tulisan yang dapat bergerak dari kanan kiri, bentuk, font, dan kalimat tulisan bisa sesuai keinginan sendiri.
“SELAMAT MENCOBA”
Diposting oleh di 46 komentar:

Cara Mudah Tambahkan PHP Kode di Blog

PHP dianggap sebagai bahasa komputer yang paling kuat yang membuat sesuatu terjadi dengan sekilas detik. Namun, PHP tidak didukung oleh Blogger atau BlogSpot menjalankan platform yang yang membuatnya sangat sulit untuk menyesuaikan dan mengimplementasikan beberapa perkembangan terbaru yang baru, tetapi masih ada beberapa cara di mana Anda dapat menambahkan kode PHP di Blogger Anda diaktifkan Situs Web. Padahal, hasilnya tidak 100%, tapi itu jauh lebih baik daripada tidak memiliki kode PHP di situs blogger Anda. Pada artikel ini, kami akan menunjukkan cara untuk menambahkan kode PHP di Blogger.


Langkah # 1: Membuat File PHP:

Sebelum Anda dapat menambahkan PHP Kode di blogger, Anda harus terlebih dahulu membuat file PHP di mana Anda harus menggunakan semua kode PHP yang ingin Anda gunakan. Namun, pastikan bahwa file tersebut bebas dari kesalahan jika hal tidak akan terlihat bagus. Berikut ini adalah sederhana Hello World PHP contoh kode, hanya untuk pedoman dasar untuk beberapa pemula

<html>
<head>
    <title>Sinau</title>
</head>
<body>
    <?php
    include_once "koneksi.php";
    $namaTombol = "tambah";
    if(isset($_POST["tambah"])){
        // input data mahasiswa baru
        $namaMhs    = mysql_real_escape_string($_POST["jeneng"]);
        $alamatMhs  = $_POST["omah"];
        $teleponMhs = $_POST["telpon"];
        $emailMhs   = $_POST["surat"];
        mysql_query("INSERT INTO mahasiswa VALUES ('', '$namaMhs', '$alamatMhs', '$teleponMhs', '$emailMhs')");
        echo "<script>location.href='index.php';</script>";
    }elseif(isset($_POST["edit"])){
        $kodeMhsUntukEdit = $_GET["editMhs"];
        // ubah data mahasiswa -----------------------------------------------------
        $namaMhs    = mysql_real_escape_string($_POST["jeneng"]);
        $alamatMhs  = $_POST["omah"];
        $teleponMhs = $_POST["telpon"];
        $emailMhs   = $_POST["surat"];
        mysql_query("UPDATE dbmahasiswa SET namamhs = '$jeneng', alamatMhs = '$omah', teleponMhs = '$telpon', emailMhs = 'surat' WHERE kode_mhs = '$kodeMhsUntukEdit'");
        echo "<script>location.href='index.php';</script>";
    }
    if(isset($_GET["deleteMhs"]) AND trim($_GET["deleteMhs"])!=""){
        // jika terdapat query string (URL) deleteMhs & isi deleteMhs tidak kosong, maka dibawah ini ---------------------------
        $tampungKodeMhs = mysql_real_escape_string($_GET["deleteMhs"]);
        // query hapus data menggunakan "DELETE" -------------------------------------------------------------------
        mysql_query("DELETE FROM mahasiswa WHERE kode_mhs = '$tampungKodeMhs'");
        echo "<script>location.href='index.php';</script>";
    }
    if(isset($_GET["editMhs"]) AND trim($_GET["editMhs"])!=""){
        $namaTombol = "edit";
        $queryTampilkanEdit = mysql_query("SELECT * FROM mahasiswa WHERE kode_mhs = '$_GET[editMhs]'");
        $dataEdit = mysql_fetch_array($queryTampilkanEdit);
    }
    ?>
    <!-- Form tambah / edit data mahasiswa -->
    <form method="post" action="">
        Nama : <input type="text" value="<?php echo $dataEdit["nama_mhs"]; ?>" name="jeneng" /><br/>
        Alamat : <input type="text" value="<?php echo $dataEdit["alamat"]; ?>" name="omah" /><br/>
        Telepon : <input type="text" value="<?php echo $dataEdit["telepon"]; ?>" name="telpon" /><br/>
        Email : <input type="text" value="<?php echo $dataEdit["email"]; ?>" name="surat" /><br/>
        <input type="submit" name="<?php echo $namaTombol; ?>" value="simpan"/>
    </form>
    <hr/>
    <p></p>
    <!-- Tampilkan hasil semua yang ada di tabel mahasiswa -->
    <table cellpadding="3" cellspacing="1" border="1">
        <tr>
            <th>Kode</th>
            <th>Nama Mahasiswa</th>
            <th>Alamat</th>
            <th>Telepon</th>
            <th>Email</th>
            <th>Opsi</th>
        </tr>
        <?php
        // perintah menampilkan data "SELECT"
        $perintahTampil = "SELECT * FROM mahasiswa";
        $eksekusiSql = mysql_query($perintahTampil);
        while($tampilkan = mysql_fetch_array($eksekusiSql)){
            print "
                <tr>
                    <td>$tampilkan[kode_mhs]</td>
                    <td>$tampilkan[nama_mhs]</td>
                    <td>$tampilkan[alamat]</td>
                    <td>$tampilkan[telepon]</td>
                    <td>$tampilkan[email]</td>
                    <td>
                        <a href='index.php?deleteMhs=$tampilkan[kode_mhs]'>Hapus</a> |
                        <a href='index.php?editMhs=$tampilkan[kode_mhs]'>Edit</a>
                    </td>
                </tr>";
        }
        ?>
    </table>
</body>
</html>

Setelah membuat file dengan semua kode yang Anda inginkan pastikan Anda menyimpannya dalam ekstensi php. Misalnya, mybloggerlab.php, Anda dapat menggunakan Notepad ++ untuk kode menulis karena merupakan satu-satunya GRATIS standar alat berkembang.

Langkah # 2: Hosting PHP File:

Sejak, blogger tidak memungkinkan Anda untuk meng-host jenis file seperti PHP, HTML atau CSS. Oleh karena itu, Anda harus baik host di hosting Anda (jika Anda memiliki) atau Anda dapat menggunakan Google Drive untuk menjadi tuan rumah mereka secara GRATIS. Kami telah menulis tutorial rinci pada Ini, sehingga membacanya di sini . Anda juga dapat menggunakan Dropbox, dan banyak layanan hosting gratis lainnya tapi pasti mereka tidak lebih baik dari fitur dan keandalan Google Drive.

Langkah # 3: Menambahkan PHP Kode di Blogger

Setelah membuat dan hosting file PHP, login ke account Blogger Anda. Setelah login, kepala ke dashboard dan pilih blog yang Anda ingin menambahkan PHP Kode. Sekarang tergantung pada kebutuhan Anda apakah Anda ingin menambahkan kode PHP dalam posting, halaman, sidebar atau footer. Hanya paste kode berikut di mana pun Anda ingin menampilkan file PHP.


< object  width = "400"  height = "300"  Jenis = "text / html"  Data = "file-anda.php" > </ object >

Jangan lupa untuk mengganti-file.php Anda dengan URL dari file PHP Anda sendiri bahwa Anda mungkin sudah mendapat sementara hosting pada layanan seperti Google Drive Dropbox dan lain-lain  
Selamat: Anda telah berhasil menambahkan kode PHP untuk blogger. Pergi dan memeriksa blog Anda untuk melihat apakah hal bekerja seperti yang direncanakan. Marilah kita tahu, jika Anda memiliki cara yang lebih baik untuk melakukan pekerjaan ini. Kami berharap tutorial ini telah membantu Anda untuk belajar bagaimana menambahkan kode PHP di blogger. Namun, ini bukan cara yang paling akurat karena kita hanya menggunakan teknik iFrame untuk memasukkan kode. Blogger perlu berpikir lebih untuk membuat platform yang ramah untuk para pengembang sehingga mereka dapat membawa keangkeran ke blog dan situs web mereka.
Diposting oleh di 46 komentar:

Cara Membuat Blog di Blogspot Gratis

Untuk cara membuat blog di Blogspot gratis, silahkan menuju blogger.com dan login menggunakan akun Google. Jika belum memiliki akun Google (akun Gmail), silahkan menuju tutorial ” Cara Membuat Email Baru Lengkap Gambar “. Setelah anda mempunyai akun gmail atau akun google, silahkan kunjungi ” www.blogger.com ” dan kita akan melihat halaman login seperti gambar berikut.

cara_membuat_blog_di_halaman_login_blogger_nyekrip
Halaman Login
Setelah login kita akan menghadapi pilihan untuk menggunakan identitas, kita dapat memilih profil Google plus atau menggunakan profil Blogspot. Lebih di sarankan memilih profil Google plus.
cara_membuat_blog_di_memlilih_identitas_profil_nyekrip
Memilih Profil
Langsung tekan tombol ” Lanjutkan ke Blogger “.
Setelah itu kita akan melihat halaman membuat blog di blogspot seperti gambar berikut. Pada halaman ini kita akan melihat daftar blog yang telah dibuat, karena kita baru akan memulai dalam membuat blog maka kita belum melihat daftar blog tersebut, untuk memulai membuat blog silahkan klik tombol ” Blog Baru “.
cara_membuat_blog_di_blogspot_memulai_membuat_blog_nyekrip
Memulai Blog Baru

Memberi Nama dan Alamat Blog di Blogspot/blogger

Setelah kita klik tombol ” Blog Baru ” kita akan melihat sebuah halaman baru untuk memulai dengan menambahkan nama dan memilih nama domain. Untuk tips trik dalam memilih nama domain silahkan anda kunjungi tutorial ” Tips Cara Memilih Nama Domain Blog atau Website “.
Untuk lebih jelasnya silahkan perhatikan gambar membuat blog di blogspot berikut:
cara_membuat_blog_di_blogspot_memilih_nama_blog
Halaman Membuat Blog
Keterangan nomor pada gambar
  • Nomor 1 adalah tempat kita untuk memberi judul atau nama blog
  • Nomor 2 adalah tempat kita untuk memberi alamat blog kita
  • Nomor 3 adalah tempat kita untuk memilih template blog kita, kita bisa merubah-nya nanti pada halaman template, jadi untuk sementara pilih saja yang standar
  • Nomor 4 merupakan keterangan alamat blog yang kita ketik tersedia atau tidak, pastikan alamat blog tersedia.
  • Nomor 5 adalah tombol untuk mengakhiri , tekan tombol ini jika anda sudah merasa puas dengan nama dan alamat yang anda pilih.
cara_membuat_blog_di_blogspot_memulai_posting_nyekrip
Memulai Post

Mengenal Dashboard di Blogspot/blogger

Sekarang blog kita sudah dibuat tetapi belum selesai sepenuhnya. Ada beberapa pengaturan yang perlu kita lakukan pada blog yang baru dibuat, agar membuat blog di Blogspot kita semakin SEO, seperti merubah template dan menambah halaman. Sekarang kita berada di dashboard Blogspot di mana kita akan melihat backend blog dan bisa pergi ke pengaturan dan membuat perubahan untuk meningkatkan visibilitas blog. Berikut adalah screenshot dashboard beserta penjelasan:
cara_membuat_blog_di_blogspot_dashboard_lengkap_blogspot_nyekrip
dashboard blogspot
Keterangan nomor pada gambar
  • Nomor 1 merupakan tombol yang bisa kita gunakan jika ingin membuat blog baru
  • Nomor 2 merupakan tombol yang bisa kita gunakan jika ingin membuat post baru
  • Nomor 3 merupakan tombol yang bisa kita gunakan jika ingin melihat blog secara live
  • Nomor 4 merupakan daftar shortcut menuju pengaturan, post, dan lain-lain
  • Nomor 5 merupakan area artikel dari blog yang kita ikuti atau follow
  • Nomor 6 merupakan area identitas atau profil kita di google, dalam area ini kita bisa login dan logut.
Setelah kita mengenal fungsi dari dashboard blogspot/blogger, silahkan anda klik menu “ Ikhtisar ” untuk melihat daftar menu dalam memulai membuat post, halaman, sampai mengatur adsense pada blog kita.
Untuk melihat tampilan blog yang sudah dibuat, silahkan klik tombol no 3 pada nomor diatas, maka tampilan blog akan terlihat seperti gambar dibawah ini. Perhatikan bahwa template sudah sesuai dengan template yang telah dipilih sebelumnya.
Tampilan_Blog_Cara_Membuat_Blog_di_Blogspot_Lengkap_Gambar_-_Nyekrip
Tampilan Blog Nyekrip


Sumber   :   http://www.nyekrip.com/cara-membuat-blog-di-blogspot-lengkap-gambar/
Diposting oleh di 44 komentar:
Langganan: Postingan (Atom)