Friday, April 3, 2015

Dasar HTML 2 | Membuat Judul Attribut dan Paragraf

Kesempatan kali ini Blog ingin melanjutkan postingan terdahulu/sebelumnya yaitu "Belajar Dasar Membuat HTML" . Dalam Postingan terakhir kita sudah sampai pada pembahasan /membuat HTML dasar biasa , dimana hanya menampilkan text dengan Format biasa, namun seperti halnya di aplikasi Tulis menulis seperti MS.WORD, dalam HTML juga berlaku hal yang namanya permak -permak, atau mempercantik tampilan, baik dari segi Font, Latar, dll,
Hal itu bisa kita lakukan melalui Penerapan/ variasi pada Kode <Tag> atau Attribut pada Tag .

Sebelumnya pembahasan kita sudah sampai pada pembuatan html sederhana dibawah ini, yang mana dibuat dalam notepad dan disimpan dalam format .html

<html>
              <head>
                      <title> Belajar HTML </title>
              </head>
                                  <body bgcolor="Yellow">
                                    BELAJAR HTML Bersama
                                   </body>
 </html>

Berikut Keterangannya :
Merah  : Adalah tag (yang mana memiliki Pembuka dan Penutup) NB; perhatikan Tag yang saling berpasangan

Biru   : Adalah Attribut ( berguna untuk menambah fungsi suatu Elemen/Merubah Latar)

Orange : ELEMEN (Isi dari TAG/ yang diapit oleh Tag)

Dalam Tag ada Attribut yang dapat menambah Fungsi Elemen yang ada didalamnya
yaitu dengan menambah beberapa Atribut seperti dibawah ini;
Contohnya Merubah FONT                    : <font face="arial">

                   Mewarnai FONT                 : <style="color:#0F6"> (untuk warna diawali # )
                   Membuat Text Rata Tengah : <align="center">
                   Membuat Text Rata Kiri      : <align="left">
                   Mengganti Warna FONT     : <color="RED">
                   Membuat Latar Halaman     : <bgcolor="Yellow">

Sehingga Jika mencoba menerapkan beberapa attribu HTML menjadi seperti dibawah ini :

<html>
              <head>
                      <title> Belajar HTML </title>
              </head>
                                  <body bgcolor="Yellow">
                                    <a style="color:#F00">BELAJAR HTML Bersama</a>
                                   </body>
 </html>
Kode Attribut yang biru (bgcolor="Yellow")berfungsi untuk membuat membuat latar menjadi warna KUNING.

 Kode attribut biru (style="color:#F00") berfungsi untuk membuat Teks "Belajar HTML Bersama menjadi berwarna Merah"

(Klik Perbesar)
 

                  



 "PEMBUATAN JUDUL"
Dalam Pembuatan Judul ada hingga 6 (Heading & SubHeading) Yaitu ;


<h1>Judul Halaman</h1>

<h2>Judul Halaman</h2>

<h3>Judul Halaman</h3>

<h4>Judul Halaman</h4>

<h5>Judul Halaman</h5>

<h6>Judul Halaman</h6>

Sehingga diterapkan dalam sebuah HTML menjadi seperti ini ;

<html>
              <head>
                      <title> Belajar HTML </title>
              </head>
                                  <body bgcolor="Yellow">
                                    BELAJAR HTML Bersama
                        <h1>Judul Halaman</h1>

                        <h2>Judul Halaman</h2>

                        <h3>Judul Halaman</h3>

                        <h4>Judul Halaman</h4>

                        <h5>Judul Halaman</h5>

                         <h6>Judul Halaman</h6>
                                    </body>
          </html>
  tampilannya setelah disimpan kira kira seperti ini (Klik untuk memperbesar)


Sehingga bisa kita rangkum bahwa H1 adalah ukuran paling besar, hingga H6 maka jenis judul akan semakin mengecil

 Namun dalam Tag Judul <h1> tersebut kita juga bisa menambahkan attribut attribut diatas sebelumnya menjadi seperti dibawah ini ;

<html>
              <head>
                      <title> Belajar HTML </title>
              </head>
                                  <body bgcolor="RED">
                                    BELAJAR HTML Bersama
                        <h1 align="Center">Judul Halaman</h1>

                        <h2 align="right">Judul Halaman</h2>

                        </body>
          </html>

Tampilannya seperti ini (Klik untuk perbesar)


Disimpulkan bahwa attribut untuk judul H1 berlaku untuk membuat rata tengah, dan attribut pada H2 untuk rata kanan.



Selain membuat judul dalam html berlaku/diperlukan juga peran untuk membuat sebuah paragraf

PARAGRAF (Kode Tag : <p> </p> )

misalkan setelah membuat judul dibawah kamu ingin memasukkan sebuah paragraf,
maka kode tag <p> </p>

Sehingga dalam html diapit seperti ini

<h1> Judul Paragraf </h1>
<p> contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf,</p>

Namun jika kamu ingin memberi warna pada paragraf  , mungkin sudah paham kan....??
maka menjadi demikian

<h1> Judul Paragraf </h1>
<p style="color:#F00"> contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf, contoh isi paragraf,</p>

Attribut pada tag paragraf tersebut berfungsi untuk mewarnai Paragraf tersebut.

Nah, Sekian untuk ulasan tambahan mengenai " Attribut hingga Membuat Judul Heading & Sub Heading dan Paragraf "

Dalam Postingan Berikutnya Blog akan menjelaskan "Cara Membuat Tabel Dalam HTML". Dan linknya akan Update pada Kotak Komentar.
so... Ditunggu ya...

Jika berkenan silahkan klik tombol like Facebook dibawah ini / share atau bagikan ke teman teman yang juga ingin belajar HTML Bersama, Berbagi itu Banyak Pahalanya Loh..

Trima kasih telah berkunjung, Salam BLogger.
By: Utomo19 On 4:17:00 AM
Continue Reading

Thursday, April 2, 2015

Belajar Dasar Membuat HTML

Jika sebelumnya kamu telah membaca Postingan "Belajar Desain Web (Perkenalan HTML)", maka kali ini kita akan mencoba membahas dan praktek yaitu Dasar Membuat HTML.

Untuk Membuat HTML tahap dasar ini kita hanya memerlukan aplikasi bawaan sederahana yaitu "Notepad".
Namun sebelum mencoba alangkah lebih baik untuk menyimak Hal hal penting dibawah ini;


Dalam HTML ada 3 Bagian yang perlu kamu ingat yaitu ;
1. TAG
2. ATTRIBUT
3. ELEMEN

1. Tag
Yaitu Coding berupa bagian elemen dari HTML. Singkatnya HTML berisi sekumpulan tag- tag.

Tag dalam HTML dituliskan dengan Awalan dan Akhirnya (ingat!!)


Contoh :
Awalan / pembukanya    <html>
Akhiran/ Penutup           </html>  "Penutup memakai Slash"

Ada 3 Bentuk Tag Utama  (Sebagai Dasar yang perlu diingat!!)

(klik untuk Perbesar)


Nah.. Jadi yang perlu digaris bawahi ;
Pertama : <html> </html> (adalah Badan HTML) berada di awal dan akhiran
Kedua    : <head> </head> (adalah Untuk Judul) berada kedua dalam Badan
Ketiga    : <body> </body> (adalah untuk Isi) ditengah


NB : Namun tak semua Tag harus memakai akhiran/penutup, akan ada contoh penulisan yang hanya awalan saja, akan dijelaskan.


Salah satuTag tag yang tidak memiliki akhiran/ penutup
1. <br/> (berfungsi untuk menurunkan Tulisan kebawah/ENTER)




2. Attribut
Nah, Attribut adalah Sebuah kode yang berguna untuk menambah fungsi dari Tag itu tadi. Hanya saja codingnya ditambahkan didalam Tag.
Contoh : color="yellow"
Jadi misalkan kita ingin membuat latar halaman berwarna kuning, maka dalam kode Tag <body> ditulis seperti ini;
<body bgcolor = "yellow">

 </body>
attribut ini (bgcolor="yellow">) yaitu berfungsi untuk mengubah latar halaman menjadi warna kuning.



Attibut juga berlaku untuk mengganti jenis tulisan pada "Judul "(head) atau " isi" (Body).
untuk mengganti jenis font attributnya seperti berikut

<font face=”arial”> <font face=”arial”>
dll.



3. Elemen
Merupakan isi kode tag yang berada diantara tag pembuka dan tag penutup. Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title.
terkadang banyak yang berpikir bentuk ini  sama dengan attribut namun jangan salah paham dulu ya,

elemen bisa kita lihat seperti contoh dibawah


<html>
          <head>
                  <title> Belajar HTML </title>
          </head>
                              <body>
                                BELAJAR HTML Bersama
                               </body>
</html>

Elemen adalah Tulisan berwarna Hitam (berarti berada dalam tag pembuka dan penutup)
Nah, Sekarang kita sudah Paham, Langsung saja silahkan untuk membuka NOTEPAD kamu dan ketikan kode diatas :

Simpan File Namun sebelum menyimpan HARAP PERHATIKAN, Atur type filenya dengan merubah menjadi All Files dan ganti namanya menjadi format .html (jangan lupa titiknya)
lihat contoh dibawah ini.


setelah itu buka lah file yang sudah disimpan tersebut, maka jika format yang disimpan benar, secara otomatis file tersebut akan berekstensi dan akan dibuka oleh browser (ex; firefox).
Cukup Mudah Mudah bukan,  sekian postingan kali ini, selanjutnya blog akan menambahkan tutorial lanjutan antara lain: Cara Membuat JUDUL (HEADING & SUB HEADING)

Silahkan Tunggu Updatenya di kotak KOMENTAR (secepatnya)

 Terima kasih telah berkunjung, Salam Blogger.
By: Utomo19 On 4:18:00 AM
Continue Reading
Subscribe to: Posts (Atom)

 

© 2013-2019 Flamingo Solution. All rights resevered. Designed by Templateism

Back To Top