SUBLIME TEXT 3, Aplikasi Web Editor Terbaik

Assalamualaikum Wr. Wb,

Alhamdulillah, kali ini bisa posting artikel lagi. Dan pada postingan ini saya akan membagi sedikit pengalaman pribadi dalam membuat halaman website. Yang mana dalam membuat website tersebut pasti tidak pernah lepas dari aplikasi web editor sebagai pendukungnya.

 

Sublime Text 3 merupakan aplikasi Web Editor yang saya pakai sampai saat ini. Yang mana aplikasi ini sangat ringan dan tidak ribet dalam penggunaannya. Desain warna tulisan kodingnya yang sangat interaktif beserta variasi warna yang menarik. Selain itu warna teks kodingnya juga bisa diganti warna temanya. Jadi dengan teks koding yang enak untuk dilihat bisa membuat banyak pengguna betah dalam proses koding. Itulah beberapa alasan yang tepat untuk membangun sebuah web.

Continue reading

Pentingnya Belajar Web Desain

Assalamualaikum Wr. Wb,

Kembali lagi dengan saya, dan Alhamdulillah sekarang bisa posting artikel lagi. Pada postingan ini, saya ingin membahas tentang Web Desain. Yang mana Web Desain itu merupakan suatu ilmu atau pemahaman tentang desain bentuk halaman suatu website.

 

Web Desain itu termasuk penting, karena web desain itu merupakan tahap awal dalam membuat suatu website. Web desain itu meliputi style, warna, bentuk kerangka suatu website. Dengan tampilan yang baik juga, seorang pengguna website bisa merasa nyaman dan betah berada dalam web yang kita bangun.

Continue reading

Kesalahan yang sering Dilakukan dalam Menulis HTML

Assalamualaikum, Wr. Wb.

Alhamdulillah bisa posting artikel lagi di Webhozz BlogO, iya langsung saja.

Pada artikel ini, kita akan membahas sedikit tentang HTML. Ya, mungkin untuk teman-teman programmer web tidak asing mendengarnya. Karena HTML itu, merupakan suatu bahasa yang paling pertama untuk dipelajari dalam membangun sebuah website. HTML ini juga merupakan kerangka utama dalam membuat sebuah website yang mana HTML bisa diibaratkan saat kita membangun rumah, kita punya pondasi utama seperti tiang, atap, pintu, jendela dan lain-lain. Untuk menghiasi pondasi tersebut dibutuhkanlah CSS untuk mempercantik pondasi tersebut agar terlihat lebih baik.

Continue reading

Tutorial Dasar JQUERY Menggunakan Fungsi Event Click()

Assalamualaikum Wr. Wb

JQuery merupakan Javascript Library yang mana JQuery ini merupakan kumpulan script-script perintah pada Javascript yang sudah siap untuk dipakai. JQuery digunakan untuk meringkas listing kode Javascript sendiri agar lebih mudah untuk dipakai. JQuery sendiri, memiliki banyak versi dan selalu update. Kalo yang sekarang saya pakai ini adalah Jquery versi v3.2.1, yang mana Jquery ini merupakan versi terbaru dari JQuery saat ini. Hanya saja ada kemungkinan bakal ada lagi muncul versi-versi terbaru dari Jquery yang akan update lagi. Sebenarnya, setiap versi itu tidak jauh berbeda hanya saja versi terbaru masih punya fungsi-fungsi dari versi-versi sebelumnya. Jadi, jikalau kamu nanti downloadnya versi yang lebih baru daripada versi yang saya gunakan saat ini maka tidak masalah.

Continue reading

HTML Layouts

Website sering menampilkan konten dalam beberapa kolom (seperti majalah atau koran). tata letak html menggunakan elemen. Div elemen sering digunakan sebagai alat tata letak, karena dengan mudah dapat diposisikan dengan CSS.
Contoh ini menggunakan 4 div elemen untuk membuat tata letak beberapa kolom:

kode html nya seperti berikut:


<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>

<p>
London is the capital city of England.
 It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>

<p>
Standing on the River Thames, 
London has been a major settlement for two millennia,
its history going back to its founding by the Romans, 
who named it Londinium.
</p>

</div>

<div id="footer">
Copyright © webhozz.com
</div>

lalu kode css seperti ini:

 

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;
}
#section {
    width:350px;
    float:left;
    padding:10px;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;
}
</style> 

maka hasinya akan sperti ini:

html_layout

HTML Symbols

HTML Simbol Entitas

Entitas HTML yang dijelaskan dalam bab sebelumnya.

Banyak matematika, teknis, dan simbol mata uang, yang tidak hadir pada keyboard normal.

Untuk menambahkan simbol-simbol ini ke halaman HTML, Anda dapat menggunakan nama entitas HTML.

Jika tidak ada nama entitas ada, Anda dapat menggunakan nomor entitas; desimal (atau heksadesimal) referensi.
Jika Anda menggunakan nama entitas HTML atau nomor heksadesimal, karakter akan selalu muncul dengan benar.
Ini adalah independen dari apa set karakter (encoding) halaman Anda gunakan!

 <p>I will display &euro;</p>
<p>I will display €</p>
<p>I will display €</p> 

maka hasilnya akan seperti ini:
HTML-Symbol

HTML Forms

tag Form

Bentuk HTML digunakan untuk mengumpulkan input pengguna.
tag form mendefinisikan bentuk HTML:

<form>
.
form elements
.
</form>

Bentuk HTML mengandung Unsur Bentuk.

Elemen bentuk BERBAGAI JENIS masukan elemen, checkbox, radio Tombol, Tombol mengirimkan, Dan Banyak Lagi.

tag Input

tag Input adalah elemen bentuk yang paling penting.

Input memiliki banyak variasi, tergantung pada jenis atribut.

Berikut adalah jenis-jenis yang digunakan dalam bab ini:

jenis Keterangan
teks Mendefinisikan input teks biasa
radio Mendefinisikan masukan tombol radio (untuk memilih salah satu dari banyak pilihan)
mengirimkan Mendefinisikan sebuah tombol submit (untuk mengirimkan formulir)

-Text Input

input type = “text” mendefinisikan input satu baris untuk input teks:

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form> 

Maka Hasil nya di browser seperti ini:

FORM-1

Catatan: Bentuk itu sendiri tidak terlihat. Juga mencatat bahwa lebar default kolom teks adalah 20 karakter.

-Radio Button Input
input type=”radio” Tombol radio membiarkan pengguna memilih SATU dari sejumlah pilihan , mendefinisikan tombol radio.:

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form> 

Maka hasilnya akan seperti ini:

FORM-2

-The Submit Button

input type=”submit” mendefinisikan tombol untuk mengirimkan formulir ke bentuk-handler.

Bentuk-handler biasanya halaman server dengan script untuk memproses input data.

Bentuk-handler yang ditentukan dalam aksi atribut form:

 <form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form> 

Maka hasilnya akan seperti ini:
FORM-3

HTML Tables

HTML Table Headings
Tabel Headings didefinisikan dengan tag

<th> </th>

secara default,semua browser menampilkan judul tabel dengan bold dan center.
scriptnya seperti berikut:

<table border="1px" align="center">
    <tr>
        <th>No.</th>
        <th>Nama</th>
        <th>Devisi</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Dedy Setiawan</td>
        <td>Marketing</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Rizki</td>
        <td>Manager IT</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Fadli</td>
        <td>Produksi</td>
    </tr>
</table>

maka hasilnya akan seperti ini:
Tables2

HTML Block dan Inline Elements

Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemen itu. Tampilan nilai default untuk sebagian besar elemen adalah blok atau inline.

Elemen blok-tingkat

Sebuah elemen blok-tingkat selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh itu bisa).
Elemen div adalah elemen blok-tingkat.

Contoh unsur blok-tingkat:

     <div>
     <h1> - <h6>
     <p>
     <form>

-Inline Elements

Sebuah elemen inline tidak dimulai pada baris baru dan hanya membutuhkan sebanyak lebar yang diperlukan.

Ini adalah inline span elemen dalam sebuah paragraf.

Contoh elemen inline:

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

-span Elemen

span elemen merupakan elemen inline yang sering digunakan sebagai wadah untuk beberapa teks.

span elemen tidak memiliki atribut yang diperlukan, tapi gaya dan kelas yang umum.

Ketika digunakan bersama dengan CSS, span elemen dapat digunakan untuk style bagian dari teks:

<h1>My <span style="color:red">Important</span> Heading</h1>

maka hasilnya akan seperti ini:

HTML-Block-Inline