- Ada pertanyaan hubungi?
- 0831 8393 2425
- rasid [at] pintar.id
Tag dasar HTML
Pendahuluan
World Wide Web / WWW, lebih dikenal dengan web, merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke internet.
Web telah diadopsi oleh perusahaan sebagian dari strategi teknologi informasinya, karena beberapa alasan:
- Akses informasi mudah.
- Setup server lebih mudah
- Informasi mudah didistribusikan
- Bebas platform.
Sekilas Lahirnya Web
Pada tahun 1993 tim Berners-Lee dan peneliti lain di European Particle Physics Lab (Consei Europeen pour la Recherche Nucleaire / CERN) di Genewa Swiss mengembangkan suatu cara menshare data antar kolega menggunakan sesuatu yang disebut hypertext.
W3C / World Wide Web Consortium
Dibentuk Oktober 1994 merupakan badan resmi yang membuat standar web.
Standar web yang mendasar adalah HTML, CSS dan XML
Standar HTML yang terakhir adalah XHTML.
www.w3.org
Bagaimana www bekerja ?
- Web pages / halaman web adalah informasi web yang disimpan dalam dokumen.
- Web servers / server web adalah web page atau file yang disimpan dalam komputer.
- Web client adalah komputer komputer yang membaca web page.
- Web browser adalah program yang digunakan web client untuk menampilkan page.
Istilah istilah:
- URL = Universal Resource Locator adalah konsep nama file yang diperluas dengan jaringannya.
- URL File: file://ftp.elearning.upbatam.ac.id/pub/file/rasid.txt
- URL Golpher sedikit lebih rumit / “triky” untuk diakses dari server FTP. (port default nya 70) gopher://cpanel.emerer.com:1234/
- URL HTTP(Hypertext Transfer Protocol) untuk melayani dokumen hypertext. Port defaultnya adalah 80. http://www.emerer.com/pub/file/tentangrasid.html
- URL Partial,untuk menunjukan file yang berada pada direktori yang sama. http://www.emerer.com/pub/file/tentangrasid.html http://www.emerer.com/pub/file/web-rasid.html
- Surfing = kegiatan menelusuri dan mencari informasi dalaminternet melalui layanan informasi web.
- Surfer, pemakai komputer yang melakukan surfing.
Apa itu Dokumen HTML.
HTML= Hyper Text Markup Langguage.
Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang.
Ada 2 cara untuk membuat sebuah web page:
- dengan HTML editor
- dengan editor teks biasa (misalnya notepad)
Penamaan Dokumen
Berikan sebuah nama yang kemudian ditambahkan sebuah ekstensi
.htm atau .html
Catatan :
Nama dokumen pada beberapa sistem operasi bersifat case sensitive
Definisi Elemen
Elemen merupakan istilah bagi komponen komponen dasar pembentukan dokumen HTML.
Contoh elemen: head, body, table, paragraf dan list.
Definisi Tag
Untuk menandai elemen dalam suatu dokumen HTML, kita menggunakan Tag.
Bentuk umum:
<namatag> ….. </namatag>
Ada beberapa tag yang tidak mengharuskan tag ditulis berpasang :
- paragraf <p>
- ganti baris <br>
- garis datar <hr>
- list item <li>
Catatan:
Penulisan penamaan tag bebas atau tidak case sensitive. Dapat menggunakan huruf besar , huruf kecil atau keduanya.
Elemen HTML yang dibutuhkan
<html>
<head>
….… informasi tentang dokumen HTML
</head>
<body>
…….informasi yang tampil dalam browser web
</body>
</html>
Contoh
<!——rasid.html ——–>
<html>
<head>
<title>Judul Website</title>
</head>
<body>
Ini website pertamaku
<b>Cuma test dari emerer.com saja</b>
</body>
</html>
Petunjuk untuk Menggunakan Tag
Tag html diapit dengan dua karakter kurung bersudut / angle bracket. < >
- Tag HTML secaranormal selalu berpasangan. <b></b>
- Tag pertama dalam suatu pasangan adalah tag awal dan yang kedua merupakan tag akhir.
- Tag HTML tidak case sensitive. <b> sama dengan <B>
- jika dalam tag ada tag lagi, maka penulisan tag akhir tidak boleh bersilang harus berurut.
Contoh : <b> <i> </i> </b>
Atribut Tag
Tag tidak mempunyai atribut: <body>
maka background sesuai dengan warna default nya umumnya berwarna putih.
Tag yang mempunyai atribut : <body bgcolor=”red”>
maka dokumen yang akan ditampilkan mempunyai warna background merah.
Tips:
Pernah melihat suatu website dan terkagum ingin mengetahui cara membuatnya:
View Page Source atau CTRL+U pada browser
Tag-tag Dasar HTML
HTML
Merupakan tag dasar dan satu keharusan bagi pemrograman web untuk menuliskannya sebagai tag pertama dalam dokumen html. <html>…</html>
Head
Merupakan tag berikutnya setelah <html> untuk menuliskan keerangan tentang dokumen web.
<head>…</head>
Title
Merupakan tag di dalam head untuk menulis judul/informasi pada caption browser.
<title>…</title>
Body
Merupakan section utama dalam dokumen web. Semua isi dokumen web yang ditampilkan di dalam browser.
…..
<body>…</body>
….
</html>
Paragraf
Setiap paragraf harus dimulai dengan memberi tag <p> dan tidak harus diakhiri dengan </p>.
Tetapi setiap pergantian paragraf harus dimulai dengan <p> kembali.
contoh:
<!–paragraf.html–>
<html>
<head>
<title> Contoh Paragraf emerer.com</title>
</head>
<body>
<p>Ini paragraf </p>
<p>Ini paragraf </p>
<p>Ini paragraf </p>
<p> Ini kalimat ini kalimat ini kalimat ini kalimat ini kalimat. </p>
</body>
</html>
Line Break / <br>
Digunakan untuk ganti baris, maksudnya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf.
<!–line-break.html–>
<html>
<head>
<title> Contoh Line Break emerer.com</title>
</head>
<body>
Ini kalimat <br>ini kalimat <br> ini kalimat <br>
</body>
</html>
Heading
Teks dalam dokumen umumnya mempunyai judul topik, pada dokumen html disebut heading.
Heading tulisan akan ditampilkan dengan huruf yang lebih besar atau ditebalkan.
Contoh
<!–heading.html–>
<html>
<head>
<title> Contoh Heading emerer.com</title>
</head>
<body>
<h1> Heading 1 emerer </h1>
<h2> Heading 2 emerer </h2>
<h3> Heading 3 emerer </h3>
<h4> Heading 4 emerer </h4>
<h5> Heading 5 emerer </h5>
<h6> Heading 6 emerer </h6>
</body> </html>
Mengatur Letak Heading
Tag heading mempunyai atribut yang digunakan untuk mengatur letak heading dalam baris-align
Aligment heading:
- kiri left
- tengah center
- kanan right
Contoh
<!–letak heading.html–>
<html>
<head>
<title> Letak Heading emerer.com</title>
</head>
<body>
<h1 align=”left”> Heading di kiri </h1>
<h1 align=”center”> Heading di tengah </h1>
<h1 align=”right” > Heading di kanan </h1>
</body>
</html>
Penggaris Mendatar
Sebuah garis dapat didipkan dalam dokumen web, umumnya digunakan sebagai pemisah antar bagian atau paragraf.
Contoh
<!–garis.html–>
<html>
<head>
<title> Contoh Garis Mendatar emerer.com</title>
</head>
<body>
<p>Ini paragraf </p>
<hr>
<p>Ini paragraf </p>
<hr>
<p>Ini paragraf </p>
</body>
</html>
Komentar
Dalam suatu dokumen informasi ada sebagian teks dalam dokumen yang berfungsi sebagai catatan atau komentar terhadap dokumen itu sendiri
Catatan / komentar dalam dokumen ini tidak ditampilkan dalam browser.
diawali dengan tag <!–
diakhiri dengan tag –>
Contoh
<!–komentar.html–>
<html>
<head>
<title> Contoh Komentar emerer.com</title>
</head>
<body>
<!–komentar ini tidak akan ditampilkan –>
<p>Ini paragraf </p>
</body>
</html>
Daftar Pustaka:
Sidik, Betha. PEMROGRAMAN WEB dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya : Informatika Bandung. 2009.
Motivasi
Hidup dengan melakukan kesalahan akan tampak lebih terhormat daripada selalu benar karena tidak melakukan apa-apa (George Bernard Shaw)
Saya tak pernah menjumpai seseorang yang menderita karena terlalu banyak bekerja. Lebih banyak orang menderita karena terlalu banyak ambisi tetapi tak cukup berusaha (Dr. James Mantague)
Kesempatan Anda untuk sukses di setiap kondisi selalu dapat diukur oleh seberapa besar kepercayaan Anda pada diri sendiri (Robert Collier)
