Halo teman-teman, saya mau bagi info nih tentang HTML dasar,
monggo dibaca :D semoga bermanfaat :D
HTML ( hyper text markup language) adalah skrip untuk menyimpan dokumen web.
Struktur dasar dokumen HTML :
<html>
<head>
<title> diisi
dokumen html </title>
</head>
Diisi penulisan informasi web
</body>
</html>
Struktur dasar HTML
:
a. Tag
Adalah teks khusus (markup) berupa dua karakter < dan
> sebagai contoh <body> adalah tag dengan body . secara umumteks
ditulis berpasangan yang terdiri atas tag pembuka dan tag penutup ( di
tambahkan karakter / setelah karakter < sebagai contoh <body> adalah
tag pembuka isi dokumen html dan </body> ini adalah tag penutup isi
dokumen html.
b. Element
Terdiri dari :
Tag
pembuka
Isi
Penutup
Untuk menampilakan judul dokumen html pada web browser
digunakkan element title. <title> adalah tag pembuka judul dokumen html
tag-tag yang ditulis pada html tidak boleh tumpang tindih harus berpasangan.
Contoh penulisan yang benar
<p>
<b>
</b>
</p>
ü Attribute
Mendefinisikan property daru suatu element html yang terdiri
atas nama dan nilai.
Contoh:
<tag>
Nama-attr=”nilai-attr”
Tag
Atrribut
Fungsi
<Body>
<body bgcolor=”red> Text=”….”
Link=”…”
Vlink=”…”
Alink=”….”
<body background=”D:\gambar.jpg”>
Background berwarna merah
Memberi warna teks
Warna link
Link yg sudah dikunjungi
Memberi gambar pada halaman
<a>….</a>
<a herf=”D:\home.html”>
home </a>
<a href=”html://www.yahoo.com/”>
yahoo ! </a>
Membuat hyperlink
<img>
<img src=”nama gambar.jpg width=”50” height=”50” >
Memasukkan gambar dengan lebar 50px tinggi 50px
<font>….
</font>
<font size=”2” color=”#ffffoo”
face=”arial”>…..</font>
Mengatur font dengan ukuran 2, warna kuning.huruf arial.
<big> ….</big>
<big> contoh </big>
Tag untuk membuat teks menjadi besar
<small<…
</small>
<small> contoh </small>
Untug membuat teks menjadi kecil
<b>…</b>
<b> contoh </b>
Untuk membuat teks menjadi bold
<i>…</i>
<i>contoh</i>
Untuk membuat teks menjadi italic
<strike>…
</strike>
<strike>contoh
</strike>
Untuk membuat teks tercoret
<u>…</u>
<u>contoh</u>
Teks underline
<h1>….</h1>
<h1>contoh
</h1>
Teks heading 1 tingkant heading bisa sampai 6 semakin besar
tingkatannya headong semakin kecil.
<hr>…</hr>
<hr widht=”600”>
<hr align=”center” size=”5=”80%”>
Garis dengan lebar 600
Tag <hr> tidak perlu di tutup, dengan tinggi 5, lebar
80% dari lebra layar browser dan rata tengah .
<p align=”center”>
</p>
Pargraf rata tengah perintah ini dapat ditulis juga dengan
<center>…</center>
<br>
Tag untuk ganti baris
<sup>…
</sup>
Tag untuk superscript
<sub>…</sub>
Tag untuk subscript
<pre>..</pre>
Untuk menampilkan teks sesuai asli nya
Nama-attr=”nilai-attr”
……………………………………………….
<tag>
Contoh untuk membuat warna pada background.
<body
bgcolor=”black” text=”yellow”>
ü Element html
Menyatakan pada browser bahwa dokumen yang digunakan adalah
html.
Sintaks:
<html>
………………………
</html>
ü Element head
ü Element title
ü Element body
TABLE
Beberapa perintah penting untuk membuat tabel:
1. <table border=”1”> .... </table> _ merupakan
perintah utama dalam pembuatan tabel,
tabel dengan ketebalan 1px
2. <tr> ... </tr> _ tag untuk membuat baris
3. <td> ... </td> _ tag untuk membuat kolom/cell
4. colspan _ merge/melebarkan kolom/cell
5. rowspan _ merge/melebarkan baris
Tag
Atribut/Contoh penulisan
Fungsi
<table>
...
</table>
border=”...”
Ketebalan tabel.
Contoh:
<table border=”1”>
align=”...”
Pengaturan tabel (rata tengah,
kanan atau kiri)
width=”...”
Lebar tabel. Bisa diisi dengan
satuan pixel atau persen.
Contoh:
<table width=”80%”> atau
<table width=”600”>
valign=”...”
Perataan secara vertikal dari
suatu cell.
(top, middle, bottom)
bordercolor=”...”
Warna border
bgcolor=”...”
Warna background tabel,
baris atau cell
`````````````````````````````````````````````````
Halo teman-teman, saya ingin berbagi mengenai HTML nih.
Postingan ini adalah lanjutan dari
postingan saya sebelumnya. Dalam postingan ini, ada cara menggunakan frame, border, form,
menghilangkan scrolling, tabel, dll.
Anda dapat membacanya langsung, silakan. Semoga bermanfaat :D
Color
Merupakan attribute yang bisa anda
tambahkan pada beberapa element seperti body, font, link, dll. Color dibagi
menjadi 3 kategori warna primer yaitu red, green & blue. Masing-masing
color didefinisikan dalam 2 digit hexadecimal number.
#RRGGBB
Hexadesimal Color
#FF0000 Red
#00FF00 Green
#0000FF Blue
#000000 Black
#FFFFFF White
· Pre
Tag untuk menampilkan text sesuai dengan aslinya.
· Hyperlink
Link Address
ú Absolute Address :
merupakan full internet address (URL) yang meliputi protocol, network location
and path & nama file.
Contoh : http://www.yahoo.com/index.html
ú Relative Address :
URL yang tidak menyebutkan protocol & network location-nya (hanya path
& nama file).
Anchor
Tag <a> untuk menentukan hyperlink dalam document
HTML, HREF property digunakan untuk menentukan tujuan dari hyperlink tersebut.
Contoh :
<a href=”URL”> Hypertext </a>
<a href “protocol”//hoat : Jomain : port/path/file
name”> Hypertext </a>
· Table
¨ Membuat Table
Tag <table> digunakan untuk membuat table dalam doc.
HTML, bagian pokok dari table adalah cell yang didefinisikan dengan tag
<td>.
Berikutnya, jika ingin membuat beberapa baris cell dalam
table menggunakan tag <tr>.
¨ Menambahkan
Heading Cell
Menggunakan tag <th>
¨ Pemformatan
Table
Untuk memformat perataan text didalam table anda bisa
gunakan attribute align &b valign (vertical align).
Attribute
Value
Align
Center Justify Right Left
Valign
Baseline Top Bottom Middle
© Image
3 jenis yang sering digunakan :
- GIF (Graphical
Interchange Format).
- JPEG (Joint
Photographic Expert Image).
- PNG (Portable
Network Grapgics).
<img src=”URL”>
Attribute
Value
Description
Align
Center, Justify, Left, Right, Baseline, Top, Bottom, Middle
Top, Bottom, Middle
digunakan untuk menentukan
posisi image terhadap text.
Left, right, center untuk
menentukan posisi image di doc.
© Form
Kegunaan Form
1. Memperoleh
data-data user baik nama, alamat & data lainnya.
2. Memperoleh
informasi pembelian secara online.
3. Memperoleh
feedback dari user mengenai website anda.
Kegunaan Element
Tag <form> digunakan untuk membuat form di HTML.
Attribute
Description
Accept
Mendefinisikan MIME yang diizinkan
oleh server yang memuat script
untuk memproses form.
Sintax :
Accept = “Internet Media Type”
Method
Menentukan bagaimana data akan
dikirim ke server. Get data akan
dikirim dengan menggunakan
query string pada URL Post data
akan dikirim ke server sebagai block
data ke script. Sintax :
Method = “Post/Get”
Action
Menentukan lokasi dari script yang
akan memproses data dari form.
Sintax :
Action = “URL”
© Frame
Dasar Penggunaan
Frame
Frame memungkinkan 1 halaman web / lebih ditampilkan pada
sebuah jendela browser. Untuk mempraktikan frame, buatlah terlebih dahulu 2
berkas HTML bersama framekir.htm & framekan.htm.
~ File framekir.htm :
<html>
<head>
<title> Frame Kiri </title>
</head>
<body bgcolor=”white”>
<h1> Frame disebelah kiri </h1>
</body>
</html>
~File framekan.htm :
<html>
<head>
<title> Frame Kanan </title>
</head>
<body bgcolor=”white”> <h1> Frame di sebelah
kanan </h1>
</body>
</html>
Halaman berbasis frame dibentuk dengan menggunakan pasangan
<frameset> & </frameset>, attribute cols digunakan untuk
menentukan lebar masing-masing frame.
Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*”>
<frame src=”framekir.htm”>
<frame src=”framekan.htm”>
</frameset>
</html>
Mengantisipasi
Tidak Adanya Dukungan Frame
Ada kemungkinan bahwa web browser yang digunakan pemakai
tidak mendukung fitur frame. Untuk mengatur agar ada pemberitahuan bahwa
halaman web hanya bisa dilihat denga browser yang mendukung frame digunakan
pasangan tag <noframes> & </noframes>.
Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*”>
<frame scr=”framekir.htm”>
<frame scr=”framekan.htm”>
<noframes> Sayang sekali halaman ini tak dapat dibuka karena
browser anda tidak mendukung frame. </noframe>
</frameset>
</html>
Menggunakan Border
Attribute BORDER pada tag <frameset> berguna untuk
mengatur ketebalan garis pemisah antar frame. Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*” border=”0”>
<frame scr=”framekir.htm”>
<frame scr=”framekan.htm”>
</frameset>
</html>
·
Menghilangkan Scrolling
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*” border=”0”>
<frame
src=”framekir.htm” scrolling=”no”>
<frame
src=”framekan.htm”>
</frameset>
</html>
· Frame &
Link
Untuk mempraktekan penggabungan pemakaian frame yang
melibatkan link ke frame yang lain, buatlah 3 file HTML berikut!
1. File
redflash.htm :
<html>
<head>
<title> </title>
</head>
<body>
<h2> Redflash </h2>
Mempunyai warna merah disekitar tulang daun & bintik-bintik
putih di daerah yang berwarna hijau.
</body>
</html>
2. File
rosebud.htm :
<html>
<head>
<title> </title>
</head>
<body>
<h2> Rosebud </h2>
Mempunyai warna dasar hijau dibagian pinggir, disekitar
tulang daun berwarna merah jembu & bagian tepi daun berwarna putih.
</body>
</html>
3. File daftar.htm
:
<html>
<head>
<title> </title>
</head>
<body>
<center>
<a href=”redflash.htm” target=”dinamis”>
<h2> Redflash </h2>
</a>
<a href=”rosebud.htm”> target=”dinamis”>
<h2> Rosebud </h2>
</a>
</center>
</body>
</html>
Pada file daftar.htm, attribute Target digunakan untuk
menentukan frame yang ditempati oleh halaman web yang dipanggil.
Kode yang digunakan untuk menggabungkan ke 3 file diatas
adalah seperti berikut :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*”>
<frame src=”daftar.htm”>
<frame src=”redflash.htm” name=”dinamis”>
</frameset>
</html>
§ Frame
Horizontal
HTML juga memungkinkan pembuatan frame horizontal. Caranya dengan
attribute cols pada <frameset> menjadi rows. Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<frame src=”daftar.htm”>
<frame src=”redflash.htm” pdname=”dinamis”>
</frameset>
</html>
- Penggunaan Noresize
Attribute noresize pada tag <frame> digunakan agar
frame tidak bisa diubah ketika ditampilkan pada browser.
Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<frame src=”daftar.htm”>
<frame src=”redflash.htm” noresize name=”dinamis”>
</frameset>
</html>
Gabungan frame horizontal & vertical :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<frame src=”judul.htm” scrolling=”no”>
<frameset border=”0” cols=”30%,*”>
<frame src=”daftar.htm” scrolling=”no”>
<frame src=”redflash.htm” name=”dinimis”>
</frameset>
</frameset>
</html>
File judul.htm :
<html>
<head>
<title> </title>
<body background=”keladi.jpg”>
<center>
<img src=”judul.gif”>
</body>
````````````````````````````````Halo, saya mau berbagi
sedikit informasi nih mengenai Algoritma. Silakan dibaca, semoga bermanfaat :D
Apa itu Algoritma ? Algoritma adalah urutan langkah-langkah
penyelesaian suatu permasalahan secara sistematis dan logis. Atau dapat
dikatakan juga algoritma ialah logika, metode dan tahapan (urutan) sistematis
yang digunakan untuk memecahkan suatu permasalahan. Langkah-langkah dalam
algoritma harus logis dan harus dapat ditentukan bernilai salah atau benar.
Kriteria
pemilihan algoritma yang baik :
© Ada output
ð Artinya suatu
algoritma haruslah mempunyai output yang merupakan solusi dari masalah yang
diselesaikan.
© Efektifitas
dan efisiensi
ð Dikatakan efektif
jika algoritma tersebut menghasilkan suatu solusi yang sesuai dengan masalah
yang diselesaikan (tepat guna). Dikatakan efisien jika waktu proses suatu
algoritma relatif lebih singkat dan penggunaan memori komputer lebih sedikit.
© Jumlah
langkahnya berhingga
ð Barisan instruksi
yang dibuat harus dalam suatu urutan tertentu agar masalah yang dihadapi dapat
deselesaikan dengan tidak memerlukan waktu relatif lama.
© Berakhir
ð Proses didalam
mencari penyelesaian suatu masalah harus berhenti dan berakhir dengan hasil
akhir yang merupakan solusinya.
© Terstruktur
ð Urutan barisan
langkah-langkah yang digunakan harus disusun sedemikian rupa agar proses
penyelesaian tidak berbelit-belit sehingga bagian-bagian dapat dibedakan dengan
jelas, mana input, proses, dan outputnya.
© Ditulis dengan
bahasa yang standar dengan format pemrograman agar mudah untuk
diimplementasikan dan tidak menimbulkan arti ganda.
Dari uraian kriteria-kriteria tersebut, dapat ditentukan
bahwa suatu algoritma yang terbaik adalah à “Harus menghasilkan output yang
tepat guna (efektif) dalam waktu yang relatif singkat dan penggunaan memori
yang relatif sedikit (efisien) dengan langkah yang berhingga dan prosedurnya
berakhir baik dalam keadaan diperoleh suatu solusi atau tidak adanya solusi.”
Dalam pembahasan yang lebih teoritis, kita mengenal
pengertian prosedur, semi algoritma, dan algoritma. Akan tetapi, ketiga
pengertian tersebut dianggap sebagai satu pengertian yang sama, yaitu prosedur
atau algoritma. Sebuah prosedur didefinisikan sebagai himpunan hingga instruksi
yang bersifat distrik dan jelas, serta dapat dijalankan dan dibuatkkan sebuah
program dalam suatu bahasa yang dikenal oleh komputer. Semi Algoritma diartikan
sebuah prosedur yang mampu menghasilkan pemecahan atau solusi suatu masalah
yang memang ada dan kemudian berhenti. Algoritma didefinisikan sebagai semi
algoritma yang mampu mendeteksi tidak adanya solusi, bila solusi memang tidak
ada dan mampu pula berhenti. Jadi, singkatnya algoritma merupakan suatu
himpunan hingga instruksi yang secara jelas merinci langkah-langkah proses
pelaksanaan dalam pemecahan suatu masalah tertentu atau suatu kelas tertentu,
dengan tuntutan bahwa himpunan instruksi tersebut dapat dilaksanakan dengan
sebuah program.
Contoh algoritma menghitung luas persegi panjang:
1. Mulai
2. Menentukan
panjang dan lebar
3. Hitung dengan
rumus Luas=panjang*lebar
4. Tampilkan
Luas persegi panjang
5. Selesai
0 100 komentar:
Posting Komentar