Pengertian dan Dasar-dasar HTML


822
822 points

Bicara tentang HTML, maka kita berbicara mengenai versi dari HTML dan pengembangannya XHTML. Saat ini HTML telah dikembangkan versi barunya yaitu HTML5, dengan beberapa elemen barunya.

HyperText Markup Language (HTML) adalah sebuah bahasa markah (markup) yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. (id.wikipedia).

 

Contoh Penulisan HTML
XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd“>

HTML 5 (lebih simpel dari doctype lainnya):

<!DOCTYPE html>

Lebih lengkap mengenai macam doctype anda dapat melihat di Recommended DTDs to use in your Web document diluar dari HTML 5.
Struktur Dokumen HTML

Struktur dokumen HTML dimulai dari doctype sebagai deklarasi jenis HTML yang digunakan, kemudian di dalam HTML terdapat elemen head dan body.

Contoh sebagai berikut:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>

<head>
<title> “Judul Weblog” </title>
</head>

<body>
<h1>”Heading”</h1>
<p>”Paragraph”</p>
</body>

</html>

Apabila kita lihat kode diatas, bahwa didalam head itu bisa kita masukkan, title, meta, stylesheet, dan juga script. Sedangkan bagian body adalah stuktur dari halaman yang akan dikembangkan, yang berisi informasi di dalam halaman web, baik itu di bagian header, navigasi, post, sidebar dan footer, dengan tag tertentu seperti<h1> dan <p>, dan lainnya.

Gambaran umum struktur dari elemen head sebagai berikut:

<head>
<title>Judul Weblog</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” href=”/styles.css” type=”text/css” media=”all” />
<script type=”text/javascript” src=”/javascript.js”></script>
</head>

Gambaran umum struktur dari elemen body sebagai berikut :

<body>
<div id=”header”>
<h1>”Judul Blog”</h1>
</div>

<div id=”nav”>
<ul>
<li>Beranda</li>
<li>Tentang</li>
</ul>
</div>

<div id=”post”>
<h2>”Judul Postingan”</h2>
<p>”Paragraph dari isi postingan”</p>
</div>

<div id=”sidebar”>
<h3>”Judul Sidebar”</h3>
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
</div>

<div id=”footer”>
<p>Paragraph Credit</p>
</div>

</body>


What's Your Reaction?

Happy Happy
0
Happy
Sedih Sedih
0
Sedih
hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win

0 Comments

Your email address will not be published. Required fields are marked *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format