Assalamualaikum sahabat semua kali ini saya mau sering mengenai ilmu Dasar
Bahasa Markup atau HTML berikut ulasannya
HTML (hyper Text Markup Language) merupakan bahasa pemograman
yang digunakan untuk membuat halaman situs (homepage).
Bahan yang mesti kita siapkan diantaranya:
1.
Notepad / Notepad ++
/ Edit Plus / dream weaver /program edit lainnya
2.
Browser “kita akan
menggunakan Mozila firefox”
3.
So simak Baik-baik
Ya
4.
Ini adalah Struktur dalam HTML dasar
<html>
<head>
<title> Letakanlah Judul Situs disini ok
</title>
</head>
<body>
Nah
Sobat disinilah Halaman situs anda. Letakan perintah-perintah Html disini ok
</body>
</html>
Setelah diketikan , anda simpan dengan nama Latihan
01.html untuk mengecek file yang anda buat dan simpan klik dua kali yang
berakhiran .html tadi
Gambar 01 . hasil yang kita buat tadi
Sampai disini sudah bisa dipahamikan . mudah
bukan nah sekarang hayo kita lanjutkan perjalanan karena perjalanan kita masih
panjang siapkan bekalnya ya.
Sekarang Kita Akan Berlatih dengan Latihan ke-2
dan simpan Latihan 02.html dalam folder yang sama
<html>
<head>
<title> Latihan 02 Belajar Website
</title>
</head>
<body bg color=”#000000”>
<p align=”left”>
Ini
Merupakan Perintah Paragraf berada di samping kiri <br>
/*
(Br) digunakan untuk ganti bari <br>
<b>
fungsi Menebalkan tulisan beri tag b dan jangan lupa ditutup tagnya
ya<br>
<i>
fungsi memiringkan tulisan beri tag i dan jangan lupa ditutup tagnya
ya<br>
<hr width=”100”><br>
Perintah /* hr digunakan untuk membuat garis
</body>
<html>
Lihatlah gambar berikut ini sob.hasil
dari latihan 02 yang kita buat tadi
Oke Mudahkan sobat kalo masih penesaran dengan
bahasa ini kita lanjutkan mari ......
Berikut
beberapa perintah HTML dan fungsinya
|
Tag
|
Atribut/Contoh penulisan
|
Fungsi
|
|
<body>
|
<body bgcolor=”red”>
<body bgcolor=”#FF0000”>
text=” ... “
link=” ...”
vlink=”...”
alink=”...”
<body
background=”D:\Gambar.jpg”>
|
Backgorund halaman berwarna
Merah
Memberi warna pada teks
Warna link
Warna link yang sudah dikunjungi
Warna link yang aktif
Memberi background gambar
pada halaman
|
|
<a> ... </a>
|
<a
href=”D:\home.html”>Home</a>
<a
href="http://www.yahoo.com/">Ya
hoo!</a>
<a
href="mailto:name@domain.com"
>here</a> to email me!
|
Membuat hyperlink/link
|
|
<img>
|
<img src="person.jpg"
width="50"
height="50"
border="0"
alt="Person"
align="left">
<img src=”C:\Documents and
Settings\All Users\Documents\My
Pictures\Sample
Pictures\Sunset.jpg>
|
Memasukkan gambar dengan
nama file gambar person.jpg,
lebar 50px, tinggi 50px, border 0,
rata kiri, dan jika gambar tidak
muncul akan keluar teks Person
|
|
<font>.. </font>
|
<FONT size="2"
color="#FFFF00"
face="arial">...</font>
|
Mengatur font dengan ukuran 2,
warna kuning, jenis huruf Arial
|
|
<BIG>...</BIG>
|
<BIG>Contoh </BIG>
|
Membuat teks Contoh menjadi
lebih besar
|
|
<SMALL>...</SMALL>
|
<SMALL> Contoh</SMALL>
|
Membuat teks Contoh menjadi
lebih kecil
|
|
<b>...</b>
|
Teks bold/dicetak lebih tebal
|
|
|
<i>…</i>
|
Teks italic/miring
|
|
|
<strike>...</strike>
|
Teks tercoret
|
|
|
<u>...</u>
|
Teks underlined
|
|
|
<h1>...</h1>
|
Teks heading 1. Tingkat heading
bisa sampai tingkat 6. Semakin
besar tingkar heading, maka teks
aka dicetak semakin kecil
|
|
|
<hr>
|
<hr width=”600”>
<hr align=”center” size=”5”
width=”80%”
|
Garis dengan lebar 600. Tag
<hr>
tidak perlu ditutup
Garis dengan tinggi 5, lebar 80%
dari lebar layar browser dan rata
tengah
|
|
<p align=”center’> ...
</p>
|
Paragraf rata tengah. Perintah ini
juga dapat ditulis dengan tag
<center>...</center>
|
|
|
<br>
|
Tag untuk ganti baris
|
Tag <br> tidak perlu ditutup
|
|
<sup>...</sup>
|
Teks superscript
|
|
|
<marquee> ....
</marquee>
|
Teks berjalan. Memiliki atribut
direction, behavior dan lain-lain.
Contoh:
<marquee direction=”right”>
....</marquee>
<marquee behavior=”alternate”>
... </marquee>
|
|
Oke sekian dulu ya kawan dah pegel istirahat
dulu ah tar kita lanjutin lagi latihannya okay
Salam sukses – ma’an najah fi ta’alumikum amin
Jika ada pertanyaan tweet aja ke @buddy_sp okay bos
0 komentar:
Speak up your mind
Tell us what you're thinking... !