Home » , , » Belajar HTML cepat dan pasti

Belajar HTML cepat dan pasti

Written By Unknown on Kamis, 10 Mei 2012 | 20.46


Hal pertama yang membuat saya untuk mencoba belajar html adalah mendengar kata-kata teman yang namanya div, tab dsb.. bagiku itu hal yang asing. apaan tuch kan jadi bingung saya.
akhirnya dengan rasa penasaran pun saya tanya mbah google lagi dan finally i know it although not much, litle-litle gitu atau bahasa kerennya sikit-sikit lah, ane bisa tahu .. haha
HTML itu ternyata singkatan alias julukannya panjang trus di singkat-singkat gitu, kayak nama orang-orang di indo gitu :D, nama saya aja Heny Alice kalo temen manggil cuman "Hen" dari yang awalnya 2 suku kata jadi cuman satu kata gak lengkap lagi.. huft :( jadi inget juga kalo temen yang pnya namanya puanjang misalnya Bagus I Gede Anune Ngurah Rai Mangun Joyoyo Boyo trus manggilnya cuman "Gus" jadi singkat mudah dan jelas, Itulah Bangsa Kami yang suka kesederhanaan, mudah, gampang dicerna dan always praktis. "Make It simple" kata temanku. Nice motivation kan (ntar dech aku tulis tentang motivasi itu :D ).
Balik lagi ke topik bahasan, HTML singkatannya adalah Hypertext Markup Language, apaan tuch.. Gue ajah juga gak tahu kog :P.
contoh penulisan yang paling sering di pake seperti ini nih :

<html>
<head>
<title>Titel Websiteku</title>
</head>
<body>
Ini adalah dokumen HTML pertamaku
</body>
</html>

komponen utama halaman dari halaman HTML itu head, title, body dan yang lainnya itu kebutuhan sekunder ajh :P. sudah ngerti gak sampe sini, soalnya ane juga udah bingung sendiri padah baru beberapa baris doank.
perintah lainnya di dalam html itu buanyaaaak , sebagian saya kutip dech di bawah ini :


<H1> sampai <H6>
fungsi : untuk tulisan header, jadi header tingkat 1 sampai tingkat 6, semakin besar angkanya maka hurufnya semakin kecil

<HR>
Fungsi : perintah untuk membuat garis horizontal penuh layar

<I>
Fungsi : membuat teks miring

<B>
Fungsi : membuat teks tebal

<U>
Fungsi : membuat teks bergaris bawah

<CENTER>
Fungsi : membuat text ke tengah layar

<ALIGN>
Fungsi : Membuat teks rata kiri dan rata kanan
Contoh penulisan :
<P ALIGN=right>untuk rata kanan
<P ALIGN=left>untuk rata kiri
<P ALIGN=center>untuk rata tengah
<P ALIGN=justify>untuk rata kiri dan rata kananatau<H?ALIGN=right>
<H ALIGN=left>
<H ALIGN=center>
<H ALIGN=justify>Contoh pemakaian:
<H2 Align=right>Selamat Datang Ke Website heny-lcon.blogspot.com <H2>

<BR>
Fungsi : memasukkan fungsi enter
Jika perintah <BR> diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya

<!->
Fungsi : membuat komentar Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan

<P>
Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain

<DD>
Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam

<BASEFONT>
Fungsi : Mengubah ukuran font
Contoh penulisan:
<BASEFONT SIZE=6>
Selamat Datang di website Heny lcon
<B>WELCOME TO MY WEBSITE DAN TEBAL</B>

<FONT>
Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda  kutib

<FACE>
Fungsi : mengubah jenis font

<SUP>
Fungsi : membuat cetak naik suatu teks

<SUB>
Fungsi : membuat suatu teks cetak turun

<UL> atau Unorder List, <OL> atau Ordered List
Fungsi : membuat bullet

<LI>
Fungsi : juga untuk membuat bullet
Catatan : perintah <LI> harus berada dalam perintah OL,UL,DIR,Menu
Contoh penulisan:
<UL>
<LI>
<H2> Jawa Timur </H2>
<UL>
<LI> SURABAYA </LI>
<LI> MALANG </LI>
<LI> GRESIK </LI>
</UL>
</LI>

<IMGSRC>
Fungsi : memasukkan gambar ke dalam Website, dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp dll
Contoh penulisan :<IMG BORDER=”5″>
“5″ merupakan ukuran border(Bingkai), ganti angka ini sesuai keinginan anda

<BGSOUND>
Fungsi : memasukkan suara atau musik ke dalam Website
Contoh penulisan : <BGSOUND loop=infite src=”d:/Selamat datang.WAV”>

<BLOCKQUOTE>
fungsi : Indenting Text
Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara otomatis dari kiri ke kanan.

<DL> dan <DT>
fungsi : untuk Penerapan Definisi ListDefinisi List adalah serupa dengan daftar kata.
Contoh Penulisan :
<DL>
<DT>Heny lcon
<DD>Developed by Blogger Inc
<DT>Yang kedua
<DD>Developed by Heny lcon
</DL>

Link dengan sorot
Fungsi : bagaimana membuat link hanya dengan sorot saja (link tak perlu diklik, tetapi cukup disorot dengan mouse.
Contoh Penulisan :
<HTML>
<HEAD>
<TITLE> </TITLE>
<META Name=”description”Content=” “>
<META Name=”keywords”Content=” “>
<META Name=”generator”Content=”Cute HTML”>
</HEAD>
<BODY BG Color=”#FFFFFF”Text=”#000000=”#”0000FF”VLink=”#800080″>
<Center>
<A href=” “target=main on mouse over=”Window.open(‘c:/html/keterangan.html’):”>
<Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e>
</CENTER>
</BODY>
</HTML>

Link dengan tombol
Fungsi : link dengan menggunakan tombol
Contoh penulisan :
<Input type=”button”Value=”Nama Tombol”
On Click=”parent.location=”Link anda disini” >
Membuat Frame
Fungsi : memberikan layar berbeda atau frame pada layar
-Framecols : membagi layar dalam bentuk kolom
-FrameRows : membagi layar dengan bentuk baris
-Frame Src : menampilkan file dalam frame
Bentuknya
(Frame cols=”30%,*”)
(Frame src=”Nama.file Name=”Teks”)
(Frame Rows=”40%,*”)
(Frame src=”Nama.file”Nama=”teks”)
(Frame src=”Nama.file”Nama=”Teks)
(/Frameset)

Contoh Penulisan :

< Html >
< Head >
< Title >Melink dengan sorot < /Title >
< /Head >
< Frameset cols=”30%,*” >
< Frame src=”Nama file”Nama=”Teks” >
< Frame Rows=”40%%,*” >
< Frame src=”Gambar File’Nama=”Gambar” >
< Frame src=”Nama File”Nama=”Teks >
< /Frameset >

Untuk menyederhanakan perintah-perintah html bisa digunakan css, ya supaya general gitu. daripada menulis satu-persatu perintah html mendingan manggil satu perintah yang sudah ada, kan lebih cepat hasilnya.
posting berikutnya di css cheat sheet yach kalo tidak lupa :D


Share this article :

0 komentar:

Posting Komentar

Diberdayakan oleh Blogger.
 
Support : http://travel-pangkalanbun.blogspot.com/
Copyright © 2013. Tour and Travel Palangkaraya Pangkalan Bun - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger