Presentasi konsep dasar html
-
Upload
dedy-setiawan -
Category
Education
-
view
169 -
download
6
Transcript of Presentasi konsep dasar html
![Page 1: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/1.jpg)
Materi :
1. Konsep Dasar HTML2. Elemen pada Tag Head3. Elemen pada tag Body
Oleh : Dedy Setiawan, ST
HTML
![Page 2: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/2.jpg)
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
Konsep Dasar HTML
![Page 3: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/3.jpg)
Bentuk umum penulisan 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>
![Page 4: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/4.jpg)
Open ElementMerupakan elemen-elemen (tag) HTML yang bersifat terbuka, atau tidak memiliki elemen penutup. Format penulisan <name element />Contoh : <hr/>, <br/>
Close ElementMerupakan elemen-elemen (tag) HTML yang bersifat tertutup, atau memiliki elemen penutup. Format penulisan : <name element > ….. </name element>Contoh : <body>…<body/>, <div>…</div>, dll.
CommentMerupakan 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 -- >
Pemahaman tentang tag HTML
![Page 5: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/5.jpg)
Struktur Elemen dalam Dokumen HTML
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.
![Page 6: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/6.jpg)
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 :
Elemen-Elemen Pada Tag HEAD HTML
![Page 7: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/7.jpg)
TITLETag yang digunakan untuk menampilkan judul homepage/ halaman web pada title browser area.Contoh :< TITLE > halaman web pertamaku </TITLE>
METATag yang digunakan untuk mendefinisikan informasi (keywords, http header, dll) danidentitas (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”/>
Elemen Pada Tag Head
![Page 8: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/8.jpg)
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 Pada Tag Head
![Page 9: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/9.jpg)
Elemen-elemen pada tag BODY HTML, adalah elemen-elemen yang didefinisikan dan ditulis diantara Tag <BODY> dan </BODY>.
Elemen Tag pada BODY
![Page 10: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/10.jpg)
HEADINGHeading 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>
PARAGRAPHParagraph 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>
Elemen Tag pada Body
![Page 11: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/11.jpg)
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 :
![Page 12: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/12.jpg)
Contoh tag <ul>
![Page 13: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/13.jpg)
Contoh Tag <li>
![Page 14: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/14.jpg)
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 :
![Page 15: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/15.jpg)
Contoh Tag Definition List
![Page 16: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/16.jpg)
HORIZONTAL RULE
Horizontal rule adalah tag digunakan untuk menggambar garis horizontal dalam document
HTML. Elemen Horizontal Rule ditandai dengan tag <hr>. Contoh :
<hr/>
![Page 17: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/17.jpg)
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>.
![Page 18: Presentasi konsep dasar html](https://reader033.fdocument.pub/reader033/viewer/2022061611/55b98206bb61ebbb798b45ec/html5/thumbnails/18.jpg)
Contoh Tag FONT