Friday, April 3, 2015

Dasar HTML 2 | Membuat Judul Attribut dan Paragraf

4:17:00 AM

By: Utomo19 On: 4:17:00 AM  In: ,  4 comments
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.

Ditulis oleh

Flamingo Solution | Media Informasi Seputar Teknologi dan Seni Visual

4 komentar:

  1. WahabSaputra.co.vuApril 9, 2015 at 4:15 PM

    Tutornya bermanfaat nich...

    ReplyDelete
    Replies
    1. Utomo19April 12, 2015 at 5:27 PM

      Trims telah berkunjung, Salam Kenal WahabSaputra

      Delete
  2. defantri.comApril 9, 2015 at 4:27 PM

    Sangat baik untuk para pemula sperti saya,.. pantasan dalam satu paragraf ada tulisan warna warni.. dan cara membuatnya sangat sederhana. sukses flamingo :)

    ReplyDelete
    Replies
    1. Utomo19April 12, 2015 at 5:29 PM

      hehe, Sama sama pemula kok mas,
      Trims ya atas Kunjungannya, silahkan di share mas.
      Sukses juga DMATHHOLIC

      Delete

Mari Saling Berbagi, Membangun dengan memberi kritik, saran jika ada yang kurang jelas, dan tentunya Komentar yang tidak mengandung hal NEGATIF, SARA, BERBAU PORNO GRAFI.
Salam BLOGGER

Subscribe to: Post Comments (Atom)

 

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

Back To Top