Pengenalan HTML
Pengenalan HTML
Pengertian singkat tentang HTML
HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu,
dimana dengan kode-kode tersebut akan memerintahkan Web browser
bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file
seperti teks, grafik, animasi, link maupun audio-video.
dimana dengan kode-kode tersebut akan memerintahkan Web browser
bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file
seperti teks, grafik, animasi, link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
STRUKTUR DASAR DOKUMEN HTML
HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
Struktur dasar dokumen HTML adalah sebagai berikut:
<html>
<head> <title>Disini Judul Dokumen HTML</title> </head> <body> Disini penulisan informasi Web </body> </html> |
LATIHAN MEMBUAT HTML
A. membuat favicon
Apa favicon itu? Favicon singkatan dari Favourite Icons , itu adalah icon atau gambar kecil di samping kiri tulisan alamat website di browser, file nya disebut Favicon. ico.Favicon ico terdiri dari dua tipe Static favicon.ico dan animated favicon.ico yang sebagai file favicon.gift. Bagaimana keduanya static dan animated bisa bekerja bersama di website Kita ? Kita harus bikin file favicon.ico.
untuk memasang favicon yang kita inginkan, siapkan gambarnya dan ketikan scrip seperti di bawah ini:
<html>
<head>
<link href= "img\logo.png" rel='Shortcut Icon' type='image/x-icon'/>
......
......
</head>
B. membuat title
title merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser.
scrip untuk membuat title:
<html>
<head>
..................
<title> mahdi amir </title>
</head>
C. Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>.Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser.
scrip:
<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
..............
</body>
..............
</body>
D. ELEMENT H1,H2,H3,H4,H5,H6 (Header)
Element H1,H2,H3,H4,H5,H6 berfungsi untuk membuat header dengan format 6 jenis ukuran huruf dan tercetak tebal. Nilai ukuran huruf terbesar adalah H1 dan terkecil adalah H6. Element ini mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan posisi horizontal dari header (default: "left").
Sintaks:
<hx align="left"|"center"|"right">
..........................
</hx>
x : 1 ... 6
E. ELEMENT CENTER
Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal ditengah.
Sintaks:
<center>
..........................
</center>
Element CENTER berfungsi untuk menampilkan teks dengan posisi horizontal ditengah.
Sintaks:
<center>
..........................
</center>
F. menampilkan gambar
Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border,height, width, hspace (jarak kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama file-nya).
Sintaks:
<img
align="left"|"right"|"top"|"middle"|"bottom"
alt="text"
border="pixel"
width="pixel"|"%"
height="pixel"|"%"
hspace="pixel"
vspace="pixel"
src="uri">
Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border,height, width, hspace (jarak kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama file-nya).
Sintaks:
<img
align="left"|"right"|"top"|"middle"|"bottom"
alt="text"
border="pixel"
width="pixel"|"%"
height="pixel"|"%"
hspace="pixel"
vspace="pixel"
src="uri">
G. ELEMENT BR (Line Break)
Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup.
Sintaks:
<br>
H. ELEMENT P (Paragraph)
Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan akhir paragraf. Tag penutup </p> sifatnya optional jika suatu paragraf diikuti oleh paragraf berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan diikuti dengan baris kosong di akhir paragraf.
Element P mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan posisi tepi horizontal dari paragraf (default: "left").
Sintaks:
<p align="left"|"center"|"right">
..........................
</p>
Element BR berfungsi untuk ganti baris. Dan element BR ini tidak mempunyai tag penutup.
Sintaks:
<br>
H. ELEMENT P (Paragraph)
Element P berfungsi untuk ganti paragraf yang diikuti dengan baris kosong di awal dan akhir paragraf. Tag penutup </p> sifatnya optional jika suatu paragraf diikuti oleh paragraf berikutnya. Jika tag </p> diabaikan, maka paragraf itu tidak akan diikuti dengan baris kosong di akhir paragraf.
Element P mempunyai attribute yaitu align yang bernilai "left", "center", "right" yang menspesifikasikan posisi tepi horizontal dari paragraf (default: "left").
Sintaks:
<p align="left"|"center"|"right">
..........................
</p>
I. ELEMENT FONT
Element FONT berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf. Element ini mempunyai attribute color untuk merubah warna huruf, face untuk merubah jenis huruf (jika lebih dari satu jenis huruf, harus dibatasi dengan koma), dan size untuk merubah ukuran huruf (pixel).
Sintaks:
<font color="warna" face="font" size="pixel">
..........................
</font>
Element FONT berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf. Element ini mempunyai attribute color untuk merubah warna huruf, face untuk merubah jenis huruf (jika lebih dari satu jenis huruf, harus dibatasi dengan koma), dan size untuk merubah ukuran huruf (pixel).
Sintaks:
<font color="warna" face="font" size="pixel">
..........................
</font>
J. ELEMENT B (Bold)
Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).
Sintaks:
<b>
..........................
</b>
K. ELEMENT I (Italic)
Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).
Sintaks:
<i>
..........................
</i>
L. ELEMENT U (Underline)
Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).
Sintaks:
<u>
..........................
</u>
Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold).
Sintaks:
<b>
..........................
</b>
K. ELEMENT I (Italic)
Element I berfungsi untuk membuat tampilan teks tercetak miring (italic).
Sintaks:
<i>
..........................
</i>
L. ELEMENT U (Underline)
Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline).
Sintaks:
<u>
..........................
</u>
M. Hyperlink.
Hyperlink digunakan untuk menghubungkan antar dokumen di dalam web. Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href sebagai alamat tujuan dari link tersebut.
Element A befungsi untuk menghubungkan ke internal ataupun eksternal halaman web. Element ini mempunyai attribute href, name, dan target. Attribute href berfungsi sebagai hypertext reference yang mempunyai nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal halaman web. Attribute name berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web (anchor). Attribute target berfungsi untuk menampilkan halaman web pada suatu jendela frame atau jendela baru.
Sintaks:
<a href="uri" name="name" target="_blank"|"parent"|"_top"|"_self">
...........................
</a>
contoh:
<a href="http://mahdiamir00.blogspot.com/" target="_blank">polsri.ac.id</a>
N. footer
Footer merupakan teks, gambar, table yang tercetak di margin bagian bawah dari dokumen yang aktif. Footer atau kaki blog adalah bagian yang biasanya berisi informasi singkat soal copy right, mesin yang dipakai dan mungkin juga informasi kecil soal blog. Di footer ini juga bisa kita sisipkan judul artikel sehingga bisa menambah daya dorong SEO-nya.
contoh scrip footer:
.........
<footer>
<h5><font color="Black" face="arial" size="1">#belajar HTML. Teknik Komputer, POLSRI</font> <h5>
</footer>
.........
sumber:
0 comments :
Post a Comment