Links pada HTML

Link atau hyperlink (dalam Ms.word) adalah  gambaran bahwa apabila kita mengeklik sebuah kata atau gambar maka kita akan menuju atau diarahkan ke halaman lain sesuai dengan yang kita atur.

Link pada HTML ini menggunakan tag <a>

Dimana tag <a> dapat digunakan dengan dua jalan :

  1. Untuk membuat link menuju ke document lain, maka akan menggunakan atribut href
  2. Untuk membuat bookmark dalam sebuah document, maka akan menggunakan atribut name

Langkah :

  1. Tulislah script dibawah ini pada dreamwaver atau notepad  :
<html>

<head><title>Link</title></head>

<body>

<a href=<a href="http://www.facebook.com/">http://www.facebook.com</a> target=”_blank”>Kunjungi Facebook</a>

<p>Apabila anda men-setting atribut target dengan “_blank”, maka link tersebut akan terbuka di tab yang baru pada browser yang digunakan</p>

</body>

</html>

2. Lalu save dengan nama Link.html
3. Lalu buka file dengan browser yang anda miliki.

Hasilnya akan seperti gambar dibawah ini :

link

Iklan

Mengganti Warna Teks di HTML

Fungsi CSS adalah untuk  mendefenisikan style untuk suatu teks dengan jenis huruf, ukuran, warna tertentu. Cara mengaplikasikannya, antara lain :

1. Mengetikkan langsung dalam tag HTML sebagai atribut

1 nih

Gambar 1.1. CSS bila diketik langsung dalam file HTML

2. Menggunakan tag style dalam tag head

dua

Gambar 1.2. Penggunaan style CSS dalam tag head

 3. Menyimpan informasi style ke dalam sebuah file dengan ekstensi/ type file css Memanggil file cssdalam html dengan tag link yang diletakkan dalam tag head.

tiga

Gambar 1.3. Penggunaan style CSS dalam tag link dalam tag head

2.1.   ID Selector dan Class

ID selector diawali tanda # ( octothorpe)

CLASS diawali dengan tanda titik ( . )

empat

lims

Gambar 1.4. Penggunaan style CSS dalam tag link dalam tag head

Membuat List Item pada HTML

List item digunakan untuk mengelompokan data baik yang berurutan maupun yang tidak.

Ada dua macam list yang bisa digunakan :
1. Tidak berurutan (Bullet) – Unordered List

TAG ATTRIBUTE VALUE DESCRIPTION
<ul> type Square Bullet kotak
Disc Bullet titik
Circle Bullet lingkaran

Langkah :

1. Tulislah script diatas ini pada dreamwaver atau notepad :

List Terurut

Tidak berurutan
<h2>Menu Makanan</h2>
<ul type="”circle”">
	<li>Bakso</li>
	<li>Mie Ayam</li>
	<li>Soto</li>
</ul>

2. Lalu save dengan nama MenuMakanan.html
3. Lalu buka file dengan browser yang anda miliki.

Hasilnya akan seperti gambar dibawah ini :

gakur

2. Berurutan (Numbering) – Ordered List

TAG ATTRIBUTE VALUE DESCRIPTION
<ol> Start n Begin number
type I Upper Roman
I Lower Roman
A Uppercase
A Lowercase

Langkah :
1. Tulislah script dibawah ini pada dreamwaver atau notepad :

List Terurut

Al-Qur’an juga mengajarkan kita menjaga kesehatan, seperti membuat amalan antara lain :
<ol>
	<li>Mandi pagi sebelum subuh, sekurang-kurangnya sejam sebelum matahari terbit.  Air sejuk yang meresap ke dalam badan dapat mengurangi penimbunan lemak. Kita boleh saksikan orang yang mandi pagi kebanyakan badan tak gemuk.</li>
	<li>Rasulullah mengamalkan minum segelas air sejuk (bukan air es) setiap pagi. Mujarabnya, Insya Allah jauh dari penyakit (susah mendapat sakit).</li>
	<li>Waktu solat subuh, kita disunahkan bertafakur (yaitu sujud sekurang-kurangnya semenit setelah membaca doa). Kita akan terhindar dari sakit kepala atau migrain.</li>
</ol>

2. Lalu save dengan nama Kesehatan.html
3. Lalu buka file dengan browser yang anda miliki.

Hasilnya akan seperti gambar dibawah ini :

urut

OK semoga berhasil, tetap semangat teman- teman, masih banyak hal yang harus dan bisa kita pelajari. jangan malas ya 😀

Paragraf di HTML

Paragraf dapat dibuat dengan menggunakan tag <p>   …  </p>

Langkah :
1. Tulislah script dibawah ini pada dreamwaver atau notepad :

<h3>Paragraf</h3>
<p>
Dalam tugas akhir Mata Kuliah Praktek Sistem Basis Data ini, kami mendapatkan judul “ Sistem Informasi Penelitian Dosen “. Dimana website yang kami buat ini merupakan satu bentuk implementasi untuk sarana berbagi ilmu pengetahuan dan informasi melalui dunia maya.
</p><p>
Website yang kami rancang ini, menghadirkan pilihan mudah bagi para peneliti khususnya bagi Dosen Teknik Elektro Fakultas Teknik Universitas Negeri Semarang untuk berbagi atau meng-share hasil penelitiannya agar bisa bermanfaat bagi orang lain terutama bagi para civitas academia. Selain itu, kami juga memberikan cara mudah dan cepat bagi para pencari informasi yang mungkin dapat ditemukan dalam penelitian-penelitian para dosen tersebut, tentunya dengan cara mendownload file penelitian yang telah berhasil terupload.
</p>

2. Lalu save dengan nama heading.html
3. Lalu buka file dengan browser yang anda miliki.
Hasilnya akan seperti gambar dibawah ini :

paragrag

Format teks di HTML

Formating text digunakan untuk memformat atau mengatur text sesuai yang kita inginkan, seperti bold, underline, italic, strong dan masih banyak lagi.

Ada dua macam Formating text yang bisa digunakan :

  1. Formating secara fisik
  2. TAG

    DESCRIPTION

    <b> … </b> Bold text
    <i> … </i> Italic text
    <u> … </u> Underline text
    <big> … </big> Untuk ukuran lebih besar dari normal
    <small> … </small> Untuk ukuran lebih kecil dari normal
    <strike> … </strike> Untuk memberi garis di tengah text
    <sup> … </sup> Superscript text
    <sub> … </sub> Subscript text
    <center> … </center> Center document
  3. Formating secara logika

TAG

DESCRIPTION

<em> … </em> Text miring / <i>
<strong> … </strong> Text tebal / <b>
<del> … </del> Mencoret text / <strike>
<ins> … </ins> Underline text / <u>

Langkah :

  1. Tulislah script dibawah ini pada dreamwaver atau notepad  :
  2. 
    Formating text
    
    <b>Teks ini di format bold</b>
    
    <strong>Teks ini di format strong</strong>
    
    <i>Teks ini di format italic</i>
    
    <em>Teks ini di format em</em>
    
    <span style="text-decoration: underline;">Teks ini di format underline</span>
    
    <ins>Teks ini di format ins</ins></pre>
    <big>Teks ini di format besar</big>
    <pre>
    
    <small>Teks ini di format kecil</small>
    
    <code>This is computer output</code>
    
    Teks ini di format <sub> subscript</sub> dan <sup>superscript</sup>
    
    <del>Teks ini di format delete / coret</del>
    
    <span style="text-decoration: line-through;">Teks ini di format strike</span>
    
    </pre>
    <center>Teks ini di format center</center>
    <pre>
    
    
    
  3. Lalu save dengan nama formatingtext.html
  4. Lalu buka file dengan browser yang anda miliki.

Hasilnya akan seperti gambar dibawah ini :

for

Tag (Paragraf) di HTML

Paragraf dapat dibuat dengan menggunakan tag <p>

Langkah :

  1. Tulislah script dibawah ini pada dreamwaver atau notepad  :
  2. <html>
    <head><title>Paragraf</title>
    </head>
    <body>
    
    <p>Dalam tugas akhir Mata Kuliah Praktek Sistem Basis Data ini, kami mendapatkan judul “ Sistem Informasi Penelitian Dosen “. Dimana website yang kami buat ini merupakan satu bentuk implementasi untuk sarana berbagi ilmu pengetahuan dan informasi melalui dunia maya.</p>
    
    <p>Website yang kami rancang ini, menghadirkan pilihan mudah bagi para peneliti khususnya bagi Dosen Teknik Elektro Fakultas Teknik Universitas Negeri Semarang untuk berbagi atau meng-share hasil penelitiannya agar bisa bermanfaat bagi orang lain terutama bagi para civitas academia. Selain itu, kami juga memberikan cara mudah dan cepat bagi para pencari informasi yang mungkin dapat ditemukan dalam penelitian-penelitian para dosen tersebut, tentunya dengan cara mendownload file penelitian yang telah berhasil terupload.</p>
    
    </body>
    </html>
    
  3. Lalu save dengan nama heading.html
  4. Lalu buka file dengan browser yang anda miliki.

Hasilnya akan seperti gambar dibawah ini :

hasil tag p

Membuat Website dengan HTML

Tutorial Membuat Website dengan HTML ini kami buat untuk yang ingin benar benar belajar membuat website dari awal. karena ini adalah tutorial awal. jadi pasti sederhana sekali. tidak sussah pastinya 😀

Sebelum kita mulai membuat website ini perlu diketahui software yang akan kita gunakan, yaitu :

opera

opera

firefox

firefox

crome

crome

1. Browser
Browser adalah aplikasi yang kita gunakan untuk melihat hasil web buatan kita. Kita bisa menggunakan Mozila firefox, google crome, opera, safari, dan browser lainya bahkan internet explorer. jadi tidak usah pusing.. membuat website itu mudah.

2. Text Editot

dreamweaver

dreamweaver

notepad

notepad

notepad ++

notepad ++

Text editor adalah aplikasi yang kita pakai untuk mengedit website buatan kita, ada dreamwever, edit +, notepad ++ dan yang sederhana kita bisa pakai notepad.

Pasti teman – teman tau tentang aplikasi tersebut kan. asal ada salah satu dari mereka maka kita bisa lanjutkan baca tutorial ini dan membuat website, kita mulai yang sederhana. karena untuk tutorial pembahasan detailnya ada di tutorial selanjutnya. ok

Sederhana sekali buka notepad terlebih dahulu..

<html>
<body>

<h2>Pemakaian Heading untuk judul.</h2>
<p>Pemakaian tag P untuk membuat paragraf.</p>
<i>dan ini tag untuk membuat tulisan miring.</i>

</body>
</html>

Ketikan script di atas ke dalam notepad. singkatnya tinggal Copy & Pate tapi kalau seperti itu kamu tidak akan cepat hebat, untuk awalan ketiklah *Recomend. 🙂

setelah itu ada bagian penting yang banyak orang terlewatkan.. jadi ingat – ingat ya langkah berikut ..

Simpan file->save atau Ctrl+S dan

cara save web

  1. simpanlah di tempat yang mudah diingat. misal di dekstop,
  2. Beri nama file dengan ekstensi html contohkita ingin menyimpan dengan nama “latihan” maka =>  latihan.html
  3. lalu pada kolom save as type pilih All files

Seperti itu. tidak ada yang susah,. sekarang setelah file tadi kita simpan tinggal kita lihat hasilnya.

Buka dekstop ( tempat/folder Kamu menyimpan file tadi) dan cari file web Kamu latihan.html lalu klik kanan-> open buka file tersebut maka file yang kita buat tadi akan terbuka di browser default bawaan Komputer kamu. ok ok..

Atau kamu bisa buka Browser terlebih dahulu, lalu File-> Open pilih file tadi jika ingin melihat hasilnya. begitu juga jika Kamu ingin mengeditnya buka notepad lalu file->open dan pilih file tadi.

Mudah bukan.. seperti itulah cara membuat website dengan HTML. itu masih dasar kita tunggu tutorial pembahasan selanjutnya mengenai HTML. terima kasih..

Happy Coding 😀