Rabu, 26 April 2017

layout

MODEL-MODEL LAYOUT HALAMAN WEB
layout 




Keterangan :
Elemen Header
merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.
Elemen Navigation
Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.
Elemen Sidebar
Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.
Elemen Konten
Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.
Elemen Footer

Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain

PENGERTIAN & PENULISANNYA

1.      CSS
CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk mempercantik penampilan HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna teks atau background dan lain sebagainya.

 



 Gambar 1. Contoh Kode CSS
 HTML & CSS : Tutorial Fundamental dalam mempelajari HTML & CSS
Selector
Selector adalah elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>
Jika tag HTML yang ingin diberi style memilik tersebut dengan diawali tanda kress (#) #header dan jika tag yang diberi style memiliki Class, dengan tanda titik (.) diikuti dengan nama class .artikel

Property dan value

Property adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar elemen, garis pinggir dan lain sebagainya. Untuk memberikan nilai/value pada property kita gunakan tanda titik dua ( : ). Setiap property diakhiri dengan titik koma (;)

Penulisan CSS
Ada tiga cara penulisan kode CSS, yaitu
1.      Inline
Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin diberi style dengan menggunakan atribut style.
<h1 style=‚color : red; ‚> Judul Situs </h1>
2.      Internal
Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head.
<HTML>
<head>
<title>Judul HTML</title>
<style>
h1 {color : red;}
 </style>
 </head>
......
3.      External
Metode yang terakhir adalah dengan membuat file CSS dan dipanggil di dalam tag head. File CSS memiliki ekstensi (akhiran) .CSS misanya namafile.CSS. Pemanggilan file CSS dilakukan dengan menggunakan tag link:
<HTML>
 <head>
  <title>Judul HTML</title>
  <link rel=‚stylesheet‛ href=‚fileCSS.CSS‛ />
 </head>
...
Atribut rel adalah informasi hubungan (relationship) dari tag link tersebut, yaitu sebagai stylesheet. Href diisi dengan lokasi file CSS yang ingin dimuat. Pemanggilannya sama dengan pemanggilan gambar atau link

Properti
Keterangan
Cara penulisan
Color
Mengatur warna dari teks
Selector {color:nilai warna}
Letter-spacing
Menambah ataupun mengurangi spasi antar karakter dalam teks
Selector {letter-spacing:nilai spasi;}
Line-height
Mengatur  tinggi baris teks
Selector {line-height:nilai text line-height;}
Text-align
Menentukan batas teks secara horisontal
Selector {text-align:nilai text-align;}
Text- decoration
Menentukan dekorasi/hiasan pada teks
Selector {text-decoration : nilai text-decoration }
Text-indent

Menentukan jarak inden dari baris pertama dalam teksblok
Selector { text-indent: nilai indent}
Text-shadow
Menentukan efek bayangan pada teks
Selector { text-shadow: koordinatx koordinat Y nilai Warna Teks Bayangan;}
Text-transform
Mengatur huruf besar-huruf kecil dari teks
Selector {text-transform: nilai text transform}
Word-spacing

Menambah ataupun mengurangi spasi antar kata dalam teks
Selector  {word-spacing:nilai spasi;}
Border
Untuk memberikan garis pinggir pada elemen, setidaknya
Ada tiga property yang harus anda set, yaitu color, style dan width
Selector  {Border color:nilai color;}
Selector  {Border style:nilai style;}
Selector  {Border width:nilai width;}
Font
Untuk mengatur huruf .Ada tiga property yang harus anda set, yaitu family,color, style,weight
Selector  {Font-color:nilai color;}
Selector  {Font-style:nilai style;}
Selector  {Font-weight:nilai weight;}
Selector  {Font-family:jenis font;}
Image
Untuk menampilkan gambar
selector <img>
Video
Untuk menampilkan video
selector <video>
Contoh
<html>
  <head>
    <title>Halaman HTML</title>
    <style type="text/css">
     #headline1 {
           background-image:url(mtk.jpg);
                           width:500px;
                           height:4px;
                   background-repeat: no-repeat;
           background-position: left top;
           padding-top:96px;
           margin-bottom:10px;
                          }
            h1 {
            font-family:Arial, Helvetica, sans-serif;
            font-size:24px;
            color:red;
            text-decoration : underline
            }

     p {
           font-family:Georgia, "Times New Roman", Times, serif;
           font-size:12px;
           color:orange;
                           Border: solid; Padding: 5px;
                           text-indent: 0.5cm;
                           text-transform: capitalize;
           }
            ac {
           font-family:Georgia, "Times New Roman", Times, serif;
           font-size:30px;
           color:blue;
                           Background-color: #ccff66;
                           word-spacing: 30px;
                           text-decoration : overline;
                           }
            cc{
           font-family:Georgia, "Times New Roman", Times, serif;
           font-size:15px;
           color:black;
                           letter-spacing: -2px;
                           text-decoration: line-through;
           }
    </style>
  </head>
  <body>
            <div id="headline1"></div>
            <h1>Bengawan Solo Cipt Gesang</h1>
            <p>  Bengawan Solo, Riwayatmu ini<br>
                     Sedari dulu jadi perhatian insani<br>
                     Musim kemarau, tak seb'rapa airmu<br>
                     Di musim hujan air meluap sampai jauh</p>
            <ac>Mata airmu dari Solo, Terkurung gunung serbu<br>
                    Air meluap sampai jauh, Akhirnya ke laut</br></ac>
             <cc>Itu perahu, riwayatmu dulu<br>
                    Kaum pedagang slalu naik itu perahu</cc></br>
<video controls="controls" style="display:block; margin: 0 auto; width:400px ;      heigth:400;" >
              <source src="tutor.mp4" type="video/mp4" />
               Your browser does not support the video tag.
   </video>
    </body>
</html>


Tampilan hasil sebagai berikut
                                                                                           

Senin, 17 April 2017

Hyperlink

Hyperlink atau tautan dalam HTML sangatlah penting karena ia yang menghubungkan antara satu Halaman dengan halaman lain. Untuk membuat Hyperlink, bahan yang diperlukan adalah tag <a>. Tag ini merupakan tag yang paling umum digunakan pada dokumen HTML. A adalah Singkatan dari Anchor yang dalam bahasa Indonesia berarti jangkar, tetapi akan lebih tepat jika diartikan sebagai tautan dikarenakan tag ini digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain.

Contoh;

<A HREF="awal.html">Tautan ini menuju halaman awal</A>

Catatan;
           dokumen yang akan digunakan sebagai tautan harus terletak dalam satu direktori/folder

ATRIBUT HYPERLINK

HREF
Atribut ini merupakan atribut yang wajib digunakan pada tag Anchor karena atribut ini digunakan untuk menentukan arah tautan yang dimaksud. Jika kita ingin menautkan ke halaman tujuan.html maka kita tinggal tulis HREF="tujuan.html". Begitu juga bila kita ingin menautkan ke halaman http://google.com maka kita tinggal menuliskan HREF="http://google.com".

NAME
Atribut ini digunakan untuk memberikan nama dari suatu tautan. Atribut ini berbeda dengan atribut HREF yang akan mengubah warna teks menjadi biru dan teks tersebut akan memiliki garis bawah, atribut NAME tidak akan mengubah tampilan teks sama sekali dengan teks yang lain. Penggunaannya pun berbeda dengan atribut HREF yang digunakan untuk mengarahkan ke halaman lainnya, atribut NAME hanya berguna untuk memberikan nama dari suatu tautan


TARGET
TARGET adalah pilihan cara pembukaan suatu link dalam browser. Link tersebut akan dibuka di jendela baru atau di halaman yang sedang dibuka saat itu dapat di setting melalui atribut TARGET.

TITLE
Atribut ini digunakan untuk memberikan keterangan tambahan dari sebuah tautan. Atribut ini akan menampilkan keterangan apabila mouse berada diatas tautan yang akan di-klik.

Contoh;
<a href="tampilan_awal.html" title="kembali ke halaman awal">Tautan ini 
menggunakan title</a>


ACCESSKEY
Atribut ini digunakan untuk memberikan tombol shortcut dari sebuah tautan, jadi tautan yang menggunakan atribut ACCESSKEY ini dapat diakses dengan tombol shortcut ALT +[ yang diinginkan].

Contoh;
<a href="tampilan_awal.html" ACCESSKEY="H">Halaman awal</a>

  • Untuk membuat suatu link di buka di jendela baru kalian dapat memasukkan "_blank" dalam atribut target.

Contoh; <a href="tampilan2.html" target="_blank">Klik disini untuk membuka tampilan 2</a>  
  • Untuk membuat suatu link dibuka di halaman yang sedang dilihat saat itu juga gunakan "_self".

Contoh; <a href="tampilan2.html" target="_self">Klik disini untuk membuka tampilan 2</a> 
  • Untuk membuat suatu link dengan image. Hyperlink juga bisa diletakkan dalam gambar. Caranya sama persis seperti menaruh hyperlink pada tulisan hanya saja tag <a> dan </a> menjepit tag gambar <img>.

Contoh <a href="coba2.html"><img src="image.jpg" /></a>

contoh :
<html>
<head>
    <title>HALAMAN GALERY</title>
</head>

<body background="BG.PNG">

<center>
<img src="kayu.jpg" width=50 height=50>
<img src="kayu.jpg" width=100 height=100>
<img src="kayu.jpg" width=150 height=150>
<img src="kayu.jpg" width=100 height=100>
<img src="kayu.jpg" width=50 height=50>

<BR>
<BR>
<a href="awal.html">KLIK DISINI UNTUK KEMBALI KE AWAL...</a>
</center>

</body>

</html>

hasil dari script diatas