Rabu, 11 Maret 2015

html


 DASAR-DASAR HTML
Heading

01<html>
02<head>
03<title>Contoh Heading</title>
04</head>
05<body>
06<h1>Ini heading 1</h1>
07<h2>Ini heading 2</h2>
08<h3>Ini heading 3</h3>
09<h4>Ini heading 4</h4>
10<h5>Ini heading 5</h5>
11<h6>Ini heading 6</h6>
12</body>
13</html>

Paragraf

1<html>
2<head>
3<title>Contoh Paragraf</title>
4</head>
5<body>
6<p>Ini merupakan sebuah contoh paragraf dalam HTML.</p>
7<p>Dan ini merupakan contoh paragraf yang lainnya. Sebuah paragraf dapat terdiri dari satu atau beberapa kalimat.</p>
8</body>
9</html>

Link

1<html>
2<head>
3<title>Contoh Link</title>
4</head>
5<body>
6<a href="http://kuliah.com">Ini contoh link</a>
7</body>
8</html>

Image

1<html>
2<head>
3<title>Contoh Image</title>
4</head>
5<body>
6<img src="fotoku.jpg" />
7</body>
8</html>
HTML BASIC
Dokumen HTML

Semua dokumen HTML harus dimulai dengan deklarasi tipe: <! DOCTYPE html>.

Dokumen HTML itu sendiri dimulai dengan <html> dan diakhiri dengan </ html>.

Bagian terlihat dari dokumen HTML adalah antara <body> dan </ body>.

contoh:
  •  
    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    </body>
    </html> 

    HTML Pos

    Judul HTML didefinisikan dengan <h1> sampai <h6> tag:

    contoh: 
     

  • <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>

    HTML Paragraf

    Paragraf HTML didefinisikan dengan tag <p>:

    contoh 
     
  •  
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

    Link HTML

    Link HTML didefinisikan dengan tag <a>:
    contoh: 
     
  •  
    <a href="http://www.w3schools.com">This is a link</a>

    HTML gambar

    Gambar HTML didefinisikan dengan tag <img>.

    File sumber (src), teks alternatif (alt), dan ukuran (lebar dan tinggi) disediakan sebagai atribut:

    contoh: 
     
  •  
    <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

    gaya HTML

    Setiap elemen HTML memiliki gaya default (warna latar belakang putih dan warna teks hitam).

    Mengubah gaya default elemen HTML, dapat dilakukan dengan atribut style.

    Contoh ini akan mengubah warna latar belakang standar dari putih ke lightgrey:
     
  • <body style="background-color:lightgrey">
      <h1>This is a heading</h1>
      <p>This is a paragraph.</p>
    </body>
    GAYA HTML
    HTML Warna Teks

    Properti warna mendefinisikan warna teks yang akan digunakan untuk elemen HTML:
    contoh:
    <body>
      <h1 style="color:blue">This is a heading</h1>
      <p style="color:red">This is a paragraph.</p>
    </body>
    HTML Fonts

    Properti font-family mendefinisikan font yang akan digunakan untuk elemen HTML:
    contoh: 
    <body>
      <h1 style="font-family:verdana">This is a heading</h1>
      <p style="font-family:courier">This is a paragraph.</p>
    </body>
    HTML Text Size

    Properti font-size mendefinisikan ukuran teks yang akan digunakan untuk elemen HTML:
    contoh:
    <body>
      <h1 style="font-size:300%">This is a heading</h1>
      <p style="font-size:160%">This is a paragraph.</p>
    </body>
    HTML Teks Keselarasan

    Properti text-align mendefinisikan perataan teks horisontal untuk sebuah elemen HTML:
    contoh:
    <body>
      <h1 style="text-align:center">Centered Heading</h1>
      <p>This is a paragraph.</p>
    </body>
     HTML Paragraf

    HTML Paragraf

    HTML <p> mendefinisikan sebuah paragraf.
    contoh:

    <p>This is a paragraph</p>
    <p>This is another paragraph</p> 
    HTML Tampilan

    Anda tidak bisa yakin bagaimana HTML akan ditampilkan.

    Besar atau kecil layar, dan jendela ukurannya akan menciptakan hasil yang berbeda.

    Dengan HTML, Anda tidak dapat mengubah output dengan menambahkan spasi ekstra atau baris tambahan dalam kode HTML Anda.

    Browser akan menghapus spasi ekstra dan garis ekstra saat halaman ditampilkan.

    Sejumlah ruang, dan sejumlah jalur baru, dihitung sebagai satu ruang.
    contoh:

    <p>
    This paragraph
    contains a lot of lines
    in the source code,
    but the browser
    ignores it.
    </p>

    <p>
    This paragraph
    contains         a lot of spaces
    in the source         code,
    but the        browser
    ignores it.
    </p>
    Jangan Lupakan Tag Akhir

    Kebanyakan browser akan menampilkan HTML dengan benar bahkan jika Anda lupa tag akhir:
    contoh:
    <p>This is a paragraph
    <p>This is another paragraph 
    Breaks HTML Baris

    HTML <br> elemen mendefinisikan satu baris.

    Gunakan Situs jika Anda ingin istirahat baris (baris baru) tanpa memulai sebuah paragraf baru:
    contoh:
    <p>This is<br>a para<br>graph with line breaks</p>
    HTML <pre> Elemen

    HTML <pre> elemen mendefinisikan teks terformat.

    Teks di dalam <pre> elemen ditampilkan dalam font fixed-width (biasanya Kurir), dan mempertahankan kedua ruang dan jeda baris:
     contoh:
    <pre>
      My Bonnie lies over the ocean.

      My Bonnie lies over the sea.

      My Bonnie lies over the ocean.

      Oh, bring back my Bonnie to me.
    </pre>
      





  • Menambah gambar,mp3,dan vidio
    <html>
    <head>
       <title> </title>
    </head>
    <body>
       <img alt="Gambar Koala" src="koala.jpg" height="200" width="100" />
    </body>
    </html>

    <html>
    <head>
       <title> </title>
    </head>
    <body>
    <a href="song1.mp3">Putar Lagu 1</a>
    </body>
    </html>

    <html>
    <head>
       <title> </title>
    </head>
    <body>
    <audio src="audio.mp3"></audio>
    </body>
    </html>

    <html>
    <head>
       <title> </title>
    </head>
    <body>
    <marquee behavior="alternate" direction="left"><img width="200" height="50" src="gambar-berjalan.gif" /></marquee>
    </body>
    </html>

    <html>
    <head>
       <title> </title>
    </head>
    <body>
    <marquee behavior="alternate" direction="right"><img width="200" height="50" src="gambar-berjalan.gif" /></marquee>
    </body>
    </html>

    <html>
    <head>
       <title> </title>
    </head>
    <body>
     <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate"width="90%"><marquee direction="right" behavior="alternate">Contoh Tulisan berJalan teMplates mMn</marquee></marquee></center>
    </body>
    </html>




    Html 5
    membuat docume di html 5
    <!docktype html>
    <html>
    <head>
             <meta charset=”utf-8”>
             <title>materi html5</title>
    </head
    <body>
    Materi tentang html…….
    </body>
    </html>

    Membuat article di html 5
    <!docktype html>
    <html>
    <head>
             <meta charset=”utf-8”>
             <title>fitur html</title>
    </head
    <body>
    <header>
            <h2>materi html5</h2
    </header>
    <article>
               Tuliskan materi tentang html 5
    </article>
    </body>
    </html>

    Tag figure dan figcaption
    <!docktype html>
    <html>
    <head>
             <meta charset=”utf-8”>
             <title>tag figure dan figcaption</title>
    </head
    <body>
    <figure>
    <img src=”masukan gambar atau foto” width=”195” height=”320”>
    <figcaption>jpg</figcaption>
    </figure>
    </body>
    </html>

    Tag video
    <!docktype html>
    <html>
    <head>
             <meta charset=”utf-8”>
             <title>vidio</title>
    </head
    <body>
    <vidio control=”control” width=”450” height=”260”>
             <source src=””masukan video”  type=”video/webm”/>
    </video>
    </body>
    </html>





     
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)