html
Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Tutotorial Html:Cara Membuat Link pada HTML dengan tag a

December 08, 2016 Add Comment
Assalamu'alaikum
Selamat Sore



Link dengan html
LINK HTML

Pada kesempatan kali ini hendi akan berbagi tutorial bagaimana membuat link dengan menggunakan html untuk membuat link pada html kita menggunakan tag link yang di simbolkan dengan huruf (a). Penulisannya yaitu:


<a href="nama file.html">link</a>

saya akan mencoba membuat dua halaman, berikut ini adalah contohnya:

<!DOCYTYPE html>
<html>
    <head>
        <title>Halaman 1</title>
    <head>

<body>
        <a href="halaman2.html">Halaman 2</a>

</body>
</html>

<!DOCYTYPE html>
<html>
    <head>
        <title>Halaman 1</title>
    <head>

<body>
        <a href="halaman1.html">Halaman 1</a>

</body>
</html>

Jika script/kode di atas dijalankan maka hasilnya seperti pada gambar dibawah ini:

halaman1
Gambar 1.1

Jika link Halaman 2 diklik maka akan tampil seperti pada gambar di bawah ini:

halaman2




 Gambar 1.2
Begitu sebaliknya jika link Halaman 2 diklik maka akan kembali ke Halaman 1

Demikian tutorial tentang pembuatan link dengan html.
Kurang lebihnya saya mohon maaf.


Wassalamu'alaikum Wr.wb

Tutorial Html:Cara Membuat list item dengan ul,ol dan li pada html

October 15, 2016 Add Comment
Tutorial html,membuat list item dengan tag ul dan ol
list item
Gambar list item

Assalamu'alaikum Wr.wb
Selamat Siang


Pada kesempatan kali ini hendi akan berbagi tutorial bagaimana caranya membuat list/daftar dengan menggunakan html. Dalam html list dibagi menjadi dua yaitu:

  1. ol (ordered list) merupakan tag yang digunakan untuk membuat list / daftar secara beraturan.
  2. ul (unordered list) merupakan tag yang digunakan untuk membuat list / daftar yang tidak beraturan.
  3. untuk listnya kita menggunakan tag li untuk listnya
baik langsung saja di bawah ini adalah script/kode penulisan tag ol dan ul

  • ordered list

<!DOCTYPE html>
<html>
        <head>
                <title>
                    membuat ordered list html
                </title>
        </head>

<body>
    <h3>Daftar Hardware Komputer</h3>
    <ol>
        <li>Mouse</li>
        <li>Keyboard</li>
        <li>Harddisk</li>
        <li>Ram</li>
    </ol>
<body>
</html>

Jika script/kode diatas dijalankan maka hasil seperti pada gambar dibwah ini:

ordered list
Gambar Ordered List

  • Unordered list

<!DOCTYPE html>
<html>
        <head>
                <title>
                    membuat ordered list html
                </title>
        </head>

<body>
    <h3>Daftar Hardware Komputer</h3>
    <ul>
        <li>Mouse</li>
        <li>Keyboard</li>
        <li>Harddisk</li>
        <li>Ram</li>
    </ul>
<body>
</html>
Jika script/kode diatas dijalankan maka hasilnya seperti pada gambar dibawah ini;

Unordered list
Unordered List
Selain ul,ol dan li digunakan untuk membuat list/daftar bisa juga digunakan untuk membuat navigasi atau menu dalam suatu website dengan menambahkan css.

 Demikian tutorial membuat list/daftar, kurang lebihnya saya mohon maaf.
Wasslamu'alaikum Wr.wb

Tutorial Html:Membuat heading pada HTML

July 15, 2016 Add Comment
heading html



Assalamu'alaikum Wr.wb
Selamat siang

Pada kesempatan kali ini saya akan menjelasakan bagaimana membuat heading(Judul) dengan menggunakan tag html. Sebelum melanjutkan tutorial pembuatan heading perlu diketahui bahwa dalam penulisan tag heading ada beberapa hal yang harus dipahami yaitu:

  1. Secara default tag heading di dalam browser ditampilkan dalam bentuk huruf yang lebih tebal dan besar sehingga akan beda mana teks biasa dan judul.
  2. Tag heading mempunyai tag pembuka dan penutup yaitu : <h1> sebagai tag pembuka dan </h1> sebagai tag penutup.
  3. Tag heading terdiri dari enam tag yang dimulai dari tag <h1> sampai dengan <h6> sebagai berikut: <h1> Teks </h1>, <h2> Teks </h2>, <h3> Teks </h3>, <h4> Teks </h4>, <h5> Teks </h5>, <h6> Teks </h6>.
  4. Teks merupakan contoh teks yang dituliskan dalam diantara tag pembuka dan tag penutup pembuatan heading.
  5. Tag <h1> merupakan tag dengan output teks paling besar, Semakin besar angkanya maka teks yang ditampilkan semakin kecil, sebaliknya semakin kecil angkanya maka teks heading yang ditampilkan semakin besar.
Berikut ini penulisan script(code) pembuatan heading:

<!DOCTYPE html>
<html>
            <head>
                          <title> Pembuatan Heading Html  </title>
           </head>

<body>

<h1> Heading dengan tag h1 </h1>
<h2> Heading dengan tag h2 </h2>
<h3> Heading dengan tag h3 </h3>
<h4> Heading dengan tag h4 </h4>
<h5> Heading dengan tag h4 </h5>
<h6> Heading dengan tag h4 </h6>

</body>
</html> 

Jika script diatas dijalankan di browser maka hasilnya sperti pada gambar dibawah ini:
Gambar Heading


Demikian artikel tentang pembuatan heading pada html kurang lebihnya mohon maaf
Wassalamu'alaikum Wr.wb

Tutorial Html:Struktur HTML5 dan Penjelasan

April 25, 2016 Add Comment
Struktur html5

<!DOCTYPE html>
 <html>
 <head>
<title>Struktur HTML5</title>
 </head>
<body>
       Disini adalah tempat kita menuliskan isi dokumen html yang kita buat
 </body>
 </html>

 Penjelasan
<!DOCTYPE html> Merupakan tag yang menandakan bahwa dokumen yang kita buat bertipe html
dan versi html yang kita pakai adalah  HTML5. 
 <head></head> tag yang digunakan untuk menampug tag <title></title> , tag <head>  berguna untuk memberikan informasi tentang dokumen html yang kita buat. Untuk menginformasikan nama dokumen yang kita buat, kita membutuhkan tag untuk menuliskan judul dari dokumen html yang kita buat yakni tag</title> <title> tag ini lah yang berfungsi untuk menuliskan judul dari dokumen html yang kita buat tag ini berada diantara tag  <head></head>.
Contoh diatas yaitu:

<head>
<title>Struktur HTML5</title>
 </head>
Struktur HTML5 diatas  merupakan judul dari dokumen html yang kita buat.

<body ><body> merupakan tag yang kita gunakan untuk menuliskan isi dari dokumen html yang kita buat, untuk isi kita bisa mengisinya sesuai kebutuhan kita. Di bawah ini adalah contoh penulisannya

<body>
       Disini adalah tempat kita menuliskan isi dokumen html yang kita buat
 </body>

</html> Merupakan tag penutup dari dokumen html.

Script/Code dari dokumen diatas bisa dilihat pada gambar dibawah ini:

struktur html5 

Gambar 1.1




Jika script / Code diatas di ja:lankan di browser maka hasilnya adalah sebagai berikut :

struktur html5
Gambar 1.2

 NB: Editor yang saya gunakan diatas adalah sublime text, alasan menggunakan editor ini adalah untuk memudahkan saya untuk mengingat apa yang sudah ditulis, karena disini kit menulisnya mulai awal hingga benar-benar menjadi dokumen yang kita inginkan. Untuk opsi kalian bisa menggunakan editor seperti Dreamweaver, notepad, dan notepad ++. Selain yang sudah saya sebutkan masih banyak editor yang bisa kalian gunakan.

Untuk Video Tutorial bisa dilihat dibawah ini

Demikian tutorial dari saya kurang lebihnya saya mohon maaf, kritik dan saran anda yang membangun sangat dibutuhkan untuk menyempurnakan artikel tentang html5 ini.

Wassalamu'alaikum Wr.wb

Tutorial Html:Perataan Paragraf dengan HTML

November 24, 2015 Add Comment

Assalamu'alaikum Wr.wb
Selamat siang tetap semangat ya agan-agan :)

 kali ini kami akan berbagi tutorial bagaimana  membuat perataan paragraf dengan menggunakan kode HTML, ok langsung saja berikut cuplikan script HTML bisa dilihat pada gambar di bawah ini :

Perataan Paragraph html
Perataan Pragraph



perataan paragraf html 
Gambar 1.1 

dan di bawah ini adalah hasil script HTML diatas jika di running
perataan paragraf html 
 Gambar 1.2
Sekian tutorial dari kami kurang lebihnya mohon maaf.
Wassalamu'alaikum Wr.wb 

Subscribe to: Posts (Atom)