Like Us

LightBlog

Breaking

Jumat, 21 September 2018

September 21, 2018

Belajar HTML Part 5: Membuat Paragraf Pada HTML


Belajar HTML Membuat Paragraf Pada HTML

untuk memahami pembuatan paragraf <p> pada HTML, diharapkan anda terlebih dahulu sudah memahami penulisan dan apa itu tag, element, atribut. paragraf disini merupakan suatu tag untuk membuat suatu elemen dalam penulisan HTML. dalam paragraf itu sendiri terdapat 3 element/tag lain yang bisa dikombinasikan langsung dengan tag paragraf <p>. element tag tersebut yaitu :
  1. paragraf rata kiri menggunakan align left
  2. paragraf rata kanan menggunakan align right
  3. paragraf rata tengah menggunakan align center
  4. paragraf rata kiri kanan menggunaan align justify

<p> penulisan paragraf <p>

HTML mengunakan tag kusus untuk membuat paragraf yaitu <p>. perhatikan contoh berikut :

 
<!DOCTYPE html>
<html>
<head>
	<title>belajar membuat paragraf</title>
</head>
<body>
ini adalah paragraf pertama
ini adalah paragraf kedua

<p align="left">1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
 <p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
 <p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>
 <p align="justivy">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>
</body>
</html>


dari contoh diatas kita dapat tahu bagaiman cara membuat sebuah paragraf di web atau HTML
Sekian Terima kasih
0
By di Tidak ada komentar:
Label:
September 21, 2018

Belajar HTML Part 4 : Format Text HTML


Macam macam format Text pada HTML seperti :

1.format text bold (tebal). untuk membuat teks menjadi tebal pada tampilan halaman web     menggunakan tag <b> berikut syntax HTML untuk membuat format text tebal :

 


<b>Ini Text Tebal dengan tag (b)</b>
format text italic (miring). untuk membuat teks miring pada HTML menggunakan tag , contohnya: 
 
<i>Ini Text Miring dengan tag (i)</i>
format text underline (garis bawah), untuk membuat teks underline/garis bawah pada HTML menggunakan tag 

<u> Ini Text Bergaris bawah dengan tag (u) </u>
berikut format text yang sering digunanakan dalam HTML.
tag description
<b> format text bold/tebal
<i> format text italic/miring
<u> format text underline/garis bawah
<small> format text kecil
<strong> format text yang hampir sama dengan format bold
<sub> format subscripted teks
<sup> format superscripted teks
<ins> format text garis bawah
<del> format text dengan garis di tengah
<mark> format text yang berwarna

Sampai jumpa!!
0
By di Tidak ada komentar:
Label:
September 21, 2018

Belajar HTML Part 3 : Heading Pada HTML


Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian penting pada halaman web. element tag heading ini memiliki enam tingkatan tyang berurutan yaitu <h1>,<h2>,<h3>,<h4>,<h5>,<h6> yang bisa digunakan untuk menambah ke struktur halaman web. perbedaan masing-masing heading yaitu besar hingga kecil teks. contohnya tag/element <h1> lebih besar dari element/tag <h2> dan seterusnya.
penggunaan masing-masing heading juga berbeda, berikut penggunaan masing-masing tag/element heading yang sering digunakan pada pengolahan halaman web :
  1. <h1> heading yang digunakan untuk penulisan judul utama dari dokument
  2. <h2> heading yang digunaakan sebagai sub <h1>
  3. <h3> heading yang digunakan sebagai sub <h2>
  4. untuk penggunaan <h4><h4><h5><h6> tergantung peogramer sendiri untuk memperindah halaman web.
berikut contoh penerapan masing-masing lement/tag heading :

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<h1>ini adalah heading 1</h1>
</body>
</html>

kesimpulannya : salah fungsi dari tag hading ini adalah untuk merapikan struktur penulisan dalam HTML, misalkan penulisan judul yang menggunakan text yang lebih besar dari sub judul.
0
By di Tidak ada komentar:
Label:

Kamis, 20 September 2018

September 20, 2018

Belajar HTML Part 2 : Tag, Element, Atribut HTML

Tag HTML

Tag merupakan kode yang digunakan untuk memperkenalkan pada web brawser untuk apa text HTML yang ditulis. HTML membutuhkan cara memperkenalkan text yang ditulis didalamnya kepada web brawser baik text itu berupa list, paragraf, link dan sebagainya. disinilah di gunakan tag. dalam penlisan tag, hampir semua menggunakan pembuka dan penutup tag, dimana objek yang dimaksudkan berada diantara pembuka dan penutup tag. berikut penulisan tag yang diguanakan dalam HTML
 
 Isi Tag HTML

perbedaan antara tag pembuka dan tag penutup yaitu, pada tag pembuka diawali kurung sudut pembuka, tag yang dimaksud, dan diakhiri dengan kurung sudut penutup. sedangkan pada penutup tag itu diawali dengan kurung sudut pembuka, backslash, tag yang dimaksud, dan diakhiri dengan penutup kurung sudut.

jenis tag yang sering digunakan dalam html

Di bawah ini adalah tagtag yang biasa digunakan dalam Progrramming Web :

Tag Fungsi
<!– ….–> Digunakan untuk memberi sebuah komentar atau keterangan
<!DOCTYPE html> digunakan untuk Mendefinisikan tipe document
<a> Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain
<b> membuat teks menjadi tebal
<p> membuat pargraf
<h1> membuat heading satu
<h2> membuat heading dua
<body> mendefinisikan body/isi dokument html
<head> mendefinisikan bagian kepala dokumen html
<title> memdefiniskan judul halaman
<div> mendefinisikan halaman
<link> mendefinisikan hubungan antar dokumen
<script> Mendefinisikan client-side script
<table> mendefinisikan tabel
<th> Mendefinisikan sel header di dalam  sebuah tabel
<td> Mendefinisikan sel di dalam sebuah tabel
<tr> Membuat baris di dalam sebuah tabel
<ul> Mendefinisikan daftar dalam format bullet
<li> mendefinisikan list

Element HTML
Element pada HTML merupakan isi atau objek yang berada tag. maksdunya, isi yang ada diantara tag pembuka dan tag penutup misalkan :
 
<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<strong><h2>Pengenalalan atribut HTML</h2></strong>
</body>
</html>


Atribut pada HTML, Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. informasi ini bisa berupa instruksi untuk memberikan efek warni, ketebalan, dll. atribut bisanya memiliki 2 bagian yaitu nama dan nilai, dapat ditulis name=”value”. penulisan nilai/value diapit oleh dua tanda kutip (bisa digunakan kutip satu atau kutip dua). penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri berikut contoh penulisan atribut pada HTML :




 




Pengenalalan atribut HTML
H2 adalah tag heading 2 align adalah nama dari atribut center adalah nilai dari atribut pengenalan atribut HTML adalah element dari tag h2 tidak semua tag ini membutuhkan atribut di dalamnya, namun bagi anda yang begelut di web programing akan sering menjumpai tag yang didalamnya terdapat atribut.
0
By di Tidak ada komentar:
Label:
September 20, 2018

Belajar HTML Part 1


Pengertian HTML

HTML (Hyper Text Markup Language) adalah sebuah bahasa Mark Up yang digunakan untuk membuat sebuah halaman website. di dalam dunia pemograman berbasis website(Web Programming) html menjadi pondasi dasar pada halaman website. sebuah file HTML di di simpan dengan ekstensi .html (dot html) dan dapat di eksekusi atau diakses menggunakan web browser(Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain). seperti yang sudah di jelaskan HTML adalah dasar dari sebuah website. untuk membuat sebuah website tidak cukup hanya menggunakan HTML, kita memerlukan bantuan CSS, JavaScript dan PHP untuk membuat sebuah website yang dinamis. jika halaman website dibuat hanya menggunakan HTML saja maka halaman website tersebut di sebut halaman statis karena tidak memiliki aksi atau fungsi-fungsi yang dapat mengelola website. tentu developer akan sangat di sibukkan dengan harus mengubah lagi file HTML setiap ingin mengupdate artikel.
HTML memiliki beberapa element yang tersusun dari tag-tag yang memiliki fungsi nya masing-masing. seperti tag heading, paragraf, pembuatan form, tombol, list, membuat hyperlink atau link yang menghubungkan antar halaman website dan banyak lagi lainnya yang akan malasngoding.com bahas pada artikel belajar HTML dasar selanjutnya di it-programmer.tk

Kegunaan HTML

HTML berfungsi sebagai pondasi sebuah halaman website. adapun yang dapat di lakukan dengan HTML adalah sebagai berikut :
  • Membungkus element-element tertentu sesuai kebutuhan
  • Membuat heading atau format judul
  • Membuat Tabel
  • Membuat List
  • Membuat Paragraf
  • Membuat  Form
  • Membuat Tombol
  • Membuat Garis
  • Membuat huruf tebal
  • Membuat huruf miring
  • Menampilkan gambar
  • Menampilkan video
Sampai saat ini HTML sudah sampai pada versi 5. HTML5 sudah memiliki banyak sekali fitur tambahan salah satunya dengan HTML5 memungkinkan kita untuk membuat streaming video tanpa bantuan flash. untuk tutorial cara membuat streaming video dengan HTML5 juga akan kita bahas pada tutorial belajar HTML dasar pada artikel selanjutnya di malasngoding.com. Belajar HTML Dasar Pengertian HTML
jadi kesimpulan dari pengertian HTML ini adalah HTML merupakan pondasi dasar dari sebuah pembuatan sebuah website. untuk mengeksekusi atau menjalankan file html harus menggunakan web browser.

0
By di Tidak ada komentar:
Label:

Rabu, 19 September 2018

September 19, 2018

Kumpulan Code Warna CSS ( Flat )



Di artikel kali ini kita tidak membahas tentang tutorial. tapi kita akan membahas tentang rekomendasi tentang warna-warna yang di rekomendasikan untuk membuat flat design.
Baik itu flat design website, flat design untuk membuat design grafis yang bergaya flat. maka warna-warna ini sangat di rekomendasikan.

Kumpulan Kode Warna Flat Design

Seperti yang kita ketahui, Flat design adalah design yang memasukan warna-warna cerah. yang memberikan kesan warna yang agak kabur. sehingga lebih nyaman rasanya di pandang.
Flat design merupakan design yang tidak menggunakan teknik gambar seperti gradasi, tekstur dan karakter desain 3 dimensi lain nya.
Jika teman-teman sedang belajar atau menggeluti dunia design grafis, atau web design. dan ingin membuat design dengan gaya flat. maka kumpulan kode warna flat berikut ini sangat di rekomendasikan.

Kumpulan Kode Warna Flat Design

Saya mengutip kode-kode warna flat design ini dari situs flatuicolors.com. dan saya rasa warna-warna yang di sediakan sangat cocok untuk di terapkan ke dalam konsep flat design yang ingin di bangun. 


Daftar Nama warna dan kode warna FLAT 

Nama Warna Kode Warna
 Turquoise  #1abc9c
 Green Sea  #16a085
 Sun Flower  #f1c40f
 Orange  #f39c12
 Emerald  #2ecc71
 Nephritis  #27ae60
 Carrot  #e67e22
 Pumpkin  #d35400
 Peter River  #3498db
Belize Hole  #2980b9
 Alizarin  #e74c3c
 Pomegranate  #c0392b
 Amethyst  #9b59b6
 Wisteria  #8e44ad
 Clouds  #ecf0f1
 Silver  #bdc3c7
 Wet Asphalt  #34495e
 Midnight Blue  #2c3e50
 Concrete  #95a5a6
 Asbestos  #7f8c8d

Sekian dulu artikel tentang Kumpulan Kode Warna Flat Design. semoga bermanfaat dan dapat menambah inspirasi dalam mencari Kumpulan Kode Warna Flat INi Semoga membantu.
0
By di Tidak ada komentar:
Label:
September 19, 2018

Membuat Menu Dropdown Sederhana Dengan CSS 3



Menu dropdown adalah salah satu fitur yang paling populer pada website. sejak jaman dulu menu dropdown sudah digunakan hampir di setiap template website. karena fungsi nya yang sangat berguna pada sebuah halaman website.
Diantaranya adalah sebagai petunjuk atau arahan halaman pada sebuah website. contohnya pada menu terdapat beberapa link atau hyperlink yaitu misalnya home, tentang, kontak kami, tutorial dan lain-lain.
Tidak hanya itu, menu juga dapat di buat memiliki anak atau memiliki sub menu. misalnya kita memiliki sebuah induk menu yang bernama “Tutorial”. nah kemudian di dalam menu tutorial tersebut kita bisa membuat anak-anak menunya seperti HTML, CSS. PHP dan lain-lain.
Pasti teman-teman penasaran Cara Membuat Menu Dropdown Dengan CSS. pada tutorial ini akan kita bahas tuntas tentang Cara Membuat Menu Dropdown Sederhana Dengan CSS. Langsung saja di simak.

Membuat Menu Dropdown Sederhana Dengan CSS

Untuk membuat menu dropdown dengan html dan css, langsung saja sediakan sebuah file html atau php terserah pada teman-teman.
Di sini saya hanya membuatnya pada file html. saya membuat sebuah file dengan nama menu.php.

 



<html>
<head>
 
 <title>Menu Dropdown - It - Programmer.tk</title>
 
</head>
<body>
 
 <style type="text/css">
 html,body{
  padding: 0;
  margin:0;
  font-family: sans-serif;
 }
 
 .menu-dah{
  background-color: #3141ff;
 }
 
 .menu-dah ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
 }
 
 .menu-dah > ul > li {
  float: left;
 }
 
 
 .menu-dah li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
 }
 
 .menu-dah li a:hover{
  background-color: #2525ff;
 }
 
 li.dropdown {
  display: inline-block;
 }
 
 .dropdown:hover .isi-dropdown {
  display: block;
 }
 
 .isi-dropdown a:hover {
  color: #fff !important;
 }
 
 .isi-dropdown {
  position: absolute;
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  background-color: #f9f9f9;
 }
 
 .isi-dropdown a {
  color: #3c3c3c !important;
 }
 
 .isi-dropdown a:hover {
  color: #232323 !important;
  background: #f3f3f3 !important;
 }
</style>
 
 
<header class="header">
 <div class="menu-dah">
 
  <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Home</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Menu 1</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Menu 2</a></li>
<li class="dropdown"><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Menu 3</a>
    <ul class="isi-dropdown">
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Sub Menu 1</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Sub Menu 2</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Sub Menu 3</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=5192304127243941516#">Menu 4</a></li>
</ul>
</div>
</header>
 


 
<center>
 <h1>
Menu Dropdown - It - Programmer.tk
itprogrammer.tk</h1>
</center>
</body>
</html>
Perhatikan!!.
 

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">Menu 1</a></li>
 <li><a href="#">Menu 2</a></li>
 <li class="dropdown"><a href="#">Menu 3</a>
  <ul class="isi-dropdown">
   <li><a href="#">Sub Menu 1</a></li>
   <li><a href="#">Sub Menu 2</a></li>
   <li><a href="#">Sub Menu 3</a></li>
   <li><a href="#">Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">Menu 4</a></li>
</ul>
Selanjutnya kita masukkan CSSnya dan atur sesuai selera :V.
 
<style type="text/css">
 html,body{
  padding: 0;
  margin:0;
  font-family: sans-serif;
 }
 
 .menu-dah{
  background-color: #3141ff;
 }
 
 .menu-dah ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
 }
 
 .menu-dah > ul > li {
  float: left;
 }
 
 
 .menu-dah li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
 }
 
 .menu-dah li a:hover{
  background-color: #2525ff;
 }
 
 li.dropdown {
  display: inline-block;
 }
 
 .dropdown:hover .isi-dropdown {
  display: block;
 }
 
 .isi-dropdown a:hover {
  color: #fff !important;
 }
 
 .isi-dropdown {
  position: absolute;
  display: none;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  background-color: #f9f9f9;
 }
 
 .isi-dropdown a {
  color: #3c3c3c !important;
 }
 
 .isi-dropdown a:hover {
  color: #232323 !important;
  background: #f3f3f3 !important;
 }
</style>
Coba kita jalankan pada browser dan lihat hasil dari menu dropdown sederhana yang telah kita buat ini..

0
By di Tidak ada komentar:
Label:
Screen Saver Actived
Gerakan Mouse untuk melihat halaman