Materi : 
1. Konsep Dasar HTML 
2. Elemen pada Tag Head 
3. Elemen pada tag Body 
Oleh : Dedy Setiawan, ST
 HyperText Markup Language (HTML) adalah suatu 
bahasa pengkodean (Script) yang digunakan untuk 
membangun sebuah halaman web. 
 “HTML merupakan standar bahasa yang digunakan 
untuk menampilkan dokumen web”. 
 Ekstensi File : ‘html’ atau ‘htm’. 
 Editor HTML: Notepad, atau aplikasi khusus scripting 
(Macromedia Dreamweaver, dll). 
 Tag adalah Unsur bahasa atau elemen HTML 
dinyatakan dengan tanda khusus
 Bentuk umumpenulisan sintak tag HTML : 
<ELEMENT [ATRIBUT1 =”value” … ATRIBUTN=”value”] > … </ELEMENT> 
Keterangan : 
ELEMENT : Nama Tag HTML 
ATRIBUT : Atribut dari Tag HTML (optional) 
VALUE : Nilai dari Atribut Tag HTML (optional) 
Contoh : 
< BODY BGCOLOR =”red”> ……… </BODY>
 Open Element 
Merupakan elemen-elemen (tag) HTML yang bersifat terbuka, atau tidak 
memiliki elemen penutup. Format penulisan <name element /> 
Contoh : <hr/>, <br/> 
 Close Element 
Merupakan elemen-elemen (tag) HTML yang bersifat tertutup, atau memiliki 
elemen penutup. 
Format penulisan : <name element > ….. </name element> 
Contoh : <body>…<body/>, <div>…</div>, dll. 
 Comment 
Merupakan baris yang tidak akan dieksekusi oleh penerjemah. Biasanya 
digunakan untuk informasi script . 
Format Penulisan : < ! - - comment text -- > 
Contoh : < ! - - Hallo saya adalah baris yang tidak akan diekskusi -- >
Struktur elemen dalam dokumen HTML adalah struktur dasar penulisan 
script untuk dokumen HTML. Berikut ini adalah gambar struktur 
dokumen HTML, dan hubungannya dengan output pada halaman web 
browser.
 Elemen-elemen pada tag HEAD HTML, adalah 
elemen-elemen yang didefinisikan dan ditulis diantara 
Tag <HEAD> dan </HEAD>. Ada beberapa macam 
elemen pada tag HEAD HTML, yaitu antara lain :
 TITLE 
Tag yang digunakan untuk menampilkan judul homepage/ halaman web pada 
title browser area. 
Contoh : 
< TITLE > halaman web pertamaku </TITLE> 
 META 
Tag yang digunakan untuk mendefinisikan informasi (keywords, http 
header, dll) dan 
identitas (author, copyright, dll) pada sebuah halaman web (dokumen HTML). 
Contoh : 
< META keywords = “web, pemrograman”/> 
< META name =”author” content =”eko win kenali”/> 
< META name =”copyright” content =”2006”/>
 LINK 
tag yang digunakan untuk menyertakan dokumen lain ke dalam halaman web 
untuk tujuan khusus. Dokumen lain tersebut biasa berupa file dengan format 
CSS, PHP, ICO dan lain- lain. 
Contoh : 
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon“/> 
<link rel="stylesheet" href="../css/style.css" media="screen" type="text/css“/>
 Elemen-elemen pada tag BODY HTML, adalah 
elemen-elemen yang didefinisikan dan ditulis diantara 
Tag <BODY> dan </BODY>.
 HEADING 
Heading adalah elemen tag yang digunakan untuk mendefinisikan sebuah teks 
sebagai kepala (judul/title). Ada 6 macam elemen heading, yaitu H1, H2, H3, 
H4, H5 dan H6. 
Contoh : 
< H1 > Contoh Heading 1 </H1> 
 PARAGRAPH 
Paragraph adalah elemen tag yang digunakan untuk mendefinisikan sebuah 
teks atau lebih sebagai paragraph. Elemen Paragraph ditandai dengan close tag 
<p>..</p>. 
Contoh : 
<p> 
HyperText Markup Language (HTML) adalah suatu bahasa pengkodean 
(coding/scripting) yang digunakan untuk membangun sebuah halaman web. 
Script HTML akan diinterpretasikan dan diterjemahkan olehbrowser, kemudian 
browser akan menampilkan hasil ke pengguna. 
</p>
 LIST ITEMS 
List Item adalah tag digunakan untuk mengelompokkan data (teks) baik 
dengan metode pengelompokan tidak berurutan (unordered list) maupun 
pengelompokan berurutan (ordered list). 
Contoh :
 DEFINITON LIST 
Definition List fungsinya sama dengan list item. Elemen Definition List 
ditandai oleh tag 
<DL> … </DL>. Didalam tag Definition List terdapat tag Definition Term 
<DT>, yaitu tag untuk menentukan definition term. Serta tag Definition 
<DD>, yaitu tag untuk menentukan definition itu sendiri. Contoh :
 HORIZONTAL RULE 
Horizontal rule adalah tag digunakan untuk menggambar garis horizontal 
dalam document 
HTML. Elemen Horizontal Rule ditandai dengan tag <hr>. Contoh : 
<hr/>
 BREAK LINE 
Break Line adalah tag di gunakan untuk memulai/ganti baris baru 
pada document HTML. Elemen Break Line ditandai dengan tag <br>. 
Contoh : 
<br/> 
 FONT 
Font adalah tag di gunakan untuk menentukan format font pada 
dokumen html. Elemen 
Font ditandai dengan tag <font>…</font>.
Presentasi konsep dasar html

Presentasi konsep dasar html

  • 1.
    Materi : 1.Konsep Dasar HTML 2. Elemen pada Tag Head 3. Elemen pada tag Body Oleh : Dedy Setiawan, ST
  • 2.
     HyperText MarkupLanguage (HTML) adalah suatu bahasa pengkodean (Script) yang digunakan untuk membangun sebuah halaman web.  “HTML merupakan standar bahasa yang digunakan untuk menampilkan dokumen web”.  Ekstensi File : ‘html’ atau ‘htm’.  Editor HTML: Notepad, atau aplikasi khusus scripting (Macromedia Dreamweaver, dll).  Tag adalah Unsur bahasa atau elemen HTML dinyatakan dengan tanda khusus
  • 3.
     Bentuk umumpenulisansintak tag HTML : <ELEMENT [ATRIBUT1 =”value” … ATRIBUTN=”value”] > … </ELEMENT> Keterangan : ELEMENT : Nama Tag HTML ATRIBUT : Atribut dari Tag HTML (optional) VALUE : Nilai dari Atribut Tag HTML (optional) Contoh : < BODY BGCOLOR =”red”> ……… </BODY>
  • 4.
     Open Element Merupakan elemen-elemen (tag) HTML yang bersifat terbuka, atau tidak memiliki elemen penutup. Format penulisan <name element /> Contoh : <hr/>, <br/>  Close Element Merupakan elemen-elemen (tag) HTML yang bersifat tertutup, atau memiliki elemen penutup. Format penulisan : <name element > ….. </name element> Contoh : <body>…<body/>, <div>…</div>, dll.  Comment Merupakan baris yang tidak akan dieksekusi oleh penerjemah. Biasanya digunakan untuk informasi script . Format Penulisan : < ! - - comment text -- > Contoh : < ! - - Hallo saya adalah baris yang tidak akan diekskusi -- >
  • 5.
    Struktur elemen dalamdokumen HTML adalah struktur dasar penulisan script untuk dokumen HTML. Berikut ini adalah gambar struktur dokumen HTML, dan hubungannya dengan output pada halaman web browser.
  • 6.
     Elemen-elemen padatag HEAD HTML, adalah elemen-elemen yang didefinisikan dan ditulis diantara Tag <HEAD> dan </HEAD>. Ada beberapa macam elemen pada tag HEAD HTML, yaitu antara lain :
  • 7.
     TITLE Tagyang digunakan untuk menampilkan judul homepage/ halaman web pada title browser area. Contoh : < TITLE > halaman web pertamaku </TITLE>  META Tag yang digunakan untuk mendefinisikan informasi (keywords, http header, dll) dan identitas (author, copyright, dll) pada sebuah halaman web (dokumen HTML). Contoh : < META keywords = “web, pemrograman”/> < META name =”author” content =”eko win kenali”/> < META name =”copyright” content =”2006”/>
  • 8.
     LINK tagyang digunakan untuk menyertakan dokumen lain ke dalam halaman web untuk tujuan khusus. Dokumen lain tersebut biasa berupa file dengan format CSS, PHP, ICO dan lain- lain. Contoh : <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon“/> <link rel="stylesheet" href="../css/style.css" media="screen" type="text/css“/>
  • 9.
     Elemen-elemen padatag BODY HTML, adalah elemen-elemen yang didefinisikan dan ditulis diantara Tag <BODY> dan </BODY>.
  • 10.
     HEADING Headingadalah elemen tag yang digunakan untuk mendefinisikan sebuah teks sebagai kepala (judul/title). Ada 6 macam elemen heading, yaitu H1, H2, H3, H4, H5 dan H6. Contoh : < H1 > Contoh Heading 1 </H1>  PARAGRAPH Paragraph adalah elemen tag yang digunakan untuk mendefinisikan sebuah teks atau lebih sebagai paragraph. Elemen Paragraph ditandai dengan close tag <p>..</p>. Contoh : <p> HyperText Markup Language (HTML) adalah suatu bahasa pengkodean (coding/scripting) yang digunakan untuk membangun sebuah halaman web. Script HTML akan diinterpretasikan dan diterjemahkan olehbrowser, kemudian browser akan menampilkan hasil ke pengguna. </p>
  • 11.
     LIST ITEMS List Item adalah tag digunakan untuk mengelompokkan data (teks) baik dengan metode pengelompokan tidak berurutan (unordered list) maupun pengelompokan berurutan (ordered list). Contoh :
  • 14.
     DEFINITON LIST Definition List fungsinya sama dengan list item. Elemen Definition List ditandai oleh tag <DL> … </DL>. Didalam tag Definition List terdapat tag Definition Term <DT>, yaitu tag untuk menentukan definition term. Serta tag Definition <DD>, yaitu tag untuk menentukan definition itu sendiri. Contoh :
  • 16.
     HORIZONTAL RULE Horizontal rule adalah tag digunakan untuk menggambar garis horizontal dalam document HTML. Elemen Horizontal Rule ditandai dengan tag <hr>. Contoh : <hr/>
  • 17.
     BREAK LINE Break Line adalah tag di gunakan untuk memulai/ganti baris baru pada document HTML. Elemen Break Line ditandai dengan tag <br>. Contoh : <br/>  FONT Font adalah tag di gunakan untuk menentukan format font pada dokumen html. Elemen Font ditandai dengan tag <font>…</font>.