Membuat Halaman Profil sederhana dengan HTML5

Haloo Sobat Webhozz, kali ini kita akan mempelajari bagaimana cara membuat biografi di dalam html.
begini caranya.



<!DOCTYPE html>
<html>
<head><!--Tag head ini gunanya untuk penamaan tab pada browser.-->
	<title>BIOGRAPHY</title>
</head>
<body><!-- Tag body ini gunanya untuk mengisikan semua konten yang ada di dalam web-->
	<h1 align="center">BIOGRAPHY</h1><!--Judul Halaman Web-->
	<hr align="center" width="100%" color="#3a3634" size="2"><!--Untuk Membuat Garis-->
	<center><!--Tag untuk ke tengah gambarnya-->
		<img src="gambar.png" width="300" height="300" alt="image in here"><!--tag img src itu sesuaikan nama file di dalam folder dan file gambar harus di dalam folder yang sama dengan file web kita-->
	</center>
	<h1 align="center" size="36"> BINGO </h1>
<p align="center"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). <a href="http://www.bingo.com/" target="_blank">Read More </a> <br><!--ini untuk link ke halaman selanjutnya --> </p>

<p align="left"><!-- Ini untuk penulisan list -->
	Hobbies:
	<ul>
		<li>Traveling</li>
		<li>Playing</li>
	</ul>
	<hr align="center" width="100%" color="#3a3634" size="2">
<p align="center"> Copyright 2018 </p>
</body>
</html>

Berikut hasilnya

Gimana? mudah kan sobat Webhozz, dan kamu juga bisa mengubah sesuai keinginanmu.
Sekian dulu, pembelajaran dari saya. semoga bermanfaat untuk kalian. selamat mencoba.

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