Showing posts with label Belajar HTML. Show all posts
Showing posts with label Belajar HTML. Show all posts

Cara Membuat Tulisan Berjalan di Blog dengan Marquee

Salah satu bentuk modifikasi tulisan di blog adalah dengan membuat efek teks yang bisa bergerak. Bisa dari kanan ke kiri, atau dari atas ke bawah dan sebaliknya. Teks efek ini disebut marquee, untuk lebih jelasnya pengertian dari Marquee adalah bahasa HTML untuk memberikan efek sebuah kata atau kalimat menjadi berjalan atau bergerak. Marquee ini mempunyai daya tarik tersendiri karena animasi berjalan/bergeraknya tersebut, selain itu penggunaan marquee ini bisa menghemat tempat pada blog anda.
Cara membuat tulisan berjalan di blog, cara membuat teks berjalan di blog atau cara membuat tulisan dan teks berjalan pada blog atau cara membuat tulisan berjalan mondar-mandir di blog.
Apapun Judulnya, Akhirnya ke Marquee Juga




1. Cara membuat Tulisan Berjalan di Blog dengan mencantumkan Link. (tulisan berjalan dan mempunyai link)


Ini Kodenya :


<div style="background: #FFFFFF; border: 2px solid #ADFF2F; color: black; font-size: 15px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center"><a href="http://kursusgratis4u.blogspot.com/2013/05/kode-marquee-html.html"/>Cara membuat Tulisan Berjalan di Blog</a></marquee>
</div>

Kode perintah diatas hasilnya sepeti ini:


Keterangan :
URL yang berwarna merah silahkan diganti dengan URL yang anda inginkan.
background: #FFFFFF
: kode tersebut adalah untuk merubah baground
solid #ADFF2F
           : untuk merubah warna garis
size: 15px     
               ; merubah ukuran tulisan atau font.

2. Cara membuat Tulisan Berjalan di Blog dengan baground


Ini Kodenya :


<div style="background: #000000; border: 2px solid #ADFF2F; color: blue; font-size: 15px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Cara membuat Tulisan Berjalan di Blog</marquee>
</div>

 Maka hasilnya dibawah ini :

Cara membuat Tulisan Berjalan di Blog

Keterangan :
tulisan yang berwarna merah silahkan sobat ganti sesuai dengan keinginan anda.

Atau dengan kode ini :


<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 15px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Cara membuat Tulisan Berjalan di Blog</marquee>
</div>
Hasilnya :
Cara membuat Tulisan Berjalan di Blog

Keterangan :
Tulisan yang berwarna merah silahkan sobat ganti sesuai dengan keinginan anda.


3. Cara membuat tulisan berjalan di blog menggunakan warna

 <font color="blue"><marquee>Selamat Datang RJ-COMP JOGJA</marquee></font>

Hasilnya :
Selamat Datang RJ-COMP JOGJA


Keterangan :


Tulisan yang berwarna
biru silahkan sobat ganti sesuai dengan keinginan sobat untuk mengganti warna tulisan.
Tulisan yang berwarna merah silahkan sobat ganti sesuai dengan keinginan Tulisan atau teks anda. 


4. Cara membuat Tulisan Berjalan di Blog dari bawah ke atas


Kode :


<marquee direction="up" scrollamount="3" align="center"> Cara membuat Tulisan Berjalan di Blog </marquee>

Hasinya :
Cara membuat Tulisan Berjalan di Blog  Cara membuat Tulisan Berjalan di Blog


5. Cara membuat Tulisan Berjalan di Blog dari atas ke bawah


Kode:


<marquee direction="down" scrollamount="3" align="center"> Contoh Tulisan Berjalan </marquee>

Hasinya :
Contoh Tulisan Berjalan

Kode:


<marquee direction="right" scrollamount="3" align="center" behavior="alternate"> Cara membuat Tulisan Berjalan di Blog </marquee>

Hasilnya:
 Cara membuat Tulisan Berjalan di Blog

7. Cara membuat Tulisan Berjalan di Blog ( mondar - mandir ) dari kiri ke kanan


Kode:


<marquee direction="left" scrollamount="3" align="center" behavior="alternate"> Cara membuat Tulisan Berjalan di Blog </marquee>

Hasilnya:
  Cara membuat Tulisan Berjalan di Blog

8. Cara membuat Tulisan Berjalan di Blog dari kiri ke kanan


Kode :


<marquee direction="right" scrollamount="3" align="center"> Cara membuat Tulisan Berjalan di Blog </marquee>

Hasilnya:
Cara membuat Tulisan Berjalan di Blog
9. Cara membuat Tulisan Berjalan di Blog dari kanan ke kiri


Kode :


<marquee direction="left" scrollamount="3" align="center">Cara membuat Tulisan Berjalan di Blog</marquee>

Haasilnya:

Cara membuat Tulisan Berjalan di Blog

Bahasa HTML yang sering digunakan

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). [1]
Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Langiage, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.


Bahasa HTML yang sering digunakan:
1. Huruf tebal (bold).
    Kode untuk membuat huruf tebal yaitu <b> dan diakhiri dengan kode </b>
2. Huruf miring (italics)
    Kode untuk membuat huruf miring yaitu <i> dan diakhiri dengan kode </i>
3. Garis bawah (underline)
    kode untuk membuat garis bawah yaitu <u> dan diakhiri dengan kode </u>
4. Enter Kode
    kode untuk membuat enter yaitu <br />
    → Kucing<br />Garong, maka hasilnya seperti ini:
       Kucing
       Garong
5. Rataan Tengah (Center)
    Kode untuk membuat rataan tengah yaitu <center> dandiakhiri dengan kode </center>
6. Rataan Kanan (Right)
    Kode untuk membuat rataan kanan yaitu <p align="right"> dan diakhiri dengan kode </p>
7. Rataan Kiri (Left)
    Kode untuk membuat rataan kiri yaitu <p align="left"> dan diakhiri dengan kode </p>
8. Rata Kanan Kiri (Justify)
    kode untuk membuat rata kiri kanan yaitu <p align="justify"> dan diakhiri dengan kode
    </p>
8. Merubah Font atau gaya teks
    Kode untuk merubah font yaitu <font face="Courier"> dan diakhiri dengan kode </font>
    karena ini tulisan Arialmaka jika Kucing Garong diganti akan menjadi Kucing Garong 

9. Mengatur Warna Teks Kode untuk mengatur warna teks yaitu <font color="green"> dan
    diakhiri dengan kode </font>
    karena tulisan Kucing Garong berwarna merah (red) maka akan menjadi Kucing Garong

10. Mengatur Garis Atas Bawah
      Kode untuk mengatur garis atas bawah yaitu <hr/> dan diakhiri dengan kode yang sama
      yaitu <hr/>
      contoh : <hr/>Kucing Garong<hr/>
          akan menjadi


                                                          Kucing Garong


11. Ukuran Besar Kecil TulisanKode untuk membuat ukuran besar kecil tulisan yaitu 
      <font style="font-size:500%;"> dan diakhiri dengan kode </font>
       silahkan lo ganti bro size 500% itu sesuka hati lo bro.
12. Tulisan berjalan (marquee)
      kode untuk membuat tulisan berjalan yaitu <marquee> dan diakhiri dengan </marquee>   
      contoh : →   <marquee>Kucing Garong</marquee> dan tulisan akan menjadi bergerak
               
13. Garis Atas (Line Up)

        Kode untuk membuat garis atas yaitu <hr> dan diakhiri dengan kode </hr>

14. Panjang Pendek Garis

        Kode untuk membuat panjang pendek garis yaitu <hr width="25%"> dan diakhiri dengan 
        kode </hr> 
15. Lebar Tebal Garis
      Kode untuk membuat lebar tebal garis yaitu <hr size="2"> dan diakhiri dengan kode</hr>
      silahkan lo ganti bro angka 2 sesuka hati lo bro.
16. Lebar Tebal Garis Berwarna
       Kode untuk membuat lebar tebal garis berwarna yaitu 
       <hr size="8" width="80%" style="color:blue">dan diakhiri dengan kode </hr>
     silahkan lo ganti bro semua yang berwarna biru diatas
17. Membuat Garis Kotak (Box Line)
      Kode untuk membuat garis kotak yaitu  
      <div style="border: 1px #000000 inset; padding: 10px; background-color: #FFFFFF; text-
      align:left;">dan ditutup dengan kode </div>
      silahkan lo ganti bro yang bertulisan biru . 

18. Membuat Tulisan Berkedip
      kode untuk membuat tulisan berkedip yaitu <blink> dan diakhiri dengan kode </blink>

Belajar Bahasa HTML

HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan dan diakhiri dengan (terdapat tanda "/").

Sebuah halaman web minimal mempunyai empat buat tag, yaitu :

1. Sebagai tanda awal dokumen HTML

2. Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
3. Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser (pada title bar).

Berikut contoh dokumen HTML sederhana:


<HTML>

<HEAD>
<TITLE>title dari halaman</TITLE>
</HEAD>
<BODY>
 isi dari halaman html

</BODY>

</HTML>

PENGATURAN TEKS


Untuk mendapatkan halaman web yang baik kita harus melakukan pengaturan terhadap teks seperti memilih jenis dan ukuran huruf, perataan dan lain - lain. Tag - tag di bawah ini yang biasa digunakan dalam pengaturan teks :


HEADERS


Tag digunakan untuk mengatur ukuran huruf pada header.Header mempunyai besaran dengan nilai antara 1 - 6 yang dituliskan dengan tag COntoh Text dengan nilai n adalah angka 1 - 6


contoh <H4>Tutorial Html</4>


Kode di atas akan menampilkan hasil teks seperti berikut :

Tutorial Html

PARAGRAPH BARU


Tag ini digunakan untuk pindah alinea atau paragraf. Tag ini diawali dengan kode sebagai pembuka terhadap paragraph baru dan diakhiri dengan


LINE BREAK


Tag ini digunakan untuk pindah ke baris yang baru. Tag ini dituliskan dengan kode <BR>


FONT


Tag ini dituliskan dengan kode yang digunakan untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR. Uraian dari beberapa atribut tersebut adalah sebagai berikut :

   1. SIZE -> Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.
   2. FACE -> Kita bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya juga terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya unik,kita gunakan saja font standar, akan tetapi penggunaan font standar akan merubah tampilan website kita pada setiap komputer user yang menggunakan standar font yang berbeda - beda.
   3. COLOR -> Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya)
   4. Base Font -> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT

Contoh penggunaan atribut fotn di atas adalah sebagai berikut :


<FONT FACE='arial' SIZE='3' COLOR='red'>Contoh Atribut Font</FONT>


hasilnya adalah sebagai berikut :


Contoh Atribut Font



LISTS


Di dalam pemrograman dengan HTML, terdapat tiga tipe list yang dapat digunakan, yaitu :


UNORDERED LISTS


List ini digunakan untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <UL> dan di tutup dengan</UL>


seperti pada contoh berikut :

    <UL>
    <LI>list pertama</LI>
    <LI>list kedua</LI>
    </UL>

perintah diatas akan menghasilkan tampilan sebaga berikut :

    * list pertama
    * list kedua

ORDERED LIST


List ini digunakan untuk membuat daftar item dengan tanda berupa angka. List entries didefinisikan dengan tag  <OL> dan di tutup dengan</OL>


seperti pada contoh berikut :

   <OL>
   <LI>item pertama</LI>
   <LI>item kedua</LI>
   </OL>

perintah di atas akan mengahasilkan tampilan sebagai berikut :

   1. item pertama
   2. item kedua