HTML

WEB_PROGRAMING
MohMaulana
Hypertext Markup Language
“bahasa markup yang digunakan untuk membuat struktur halaman website”
TAG
< NamaTag > isi </ NamaTag >
< NamaTag >

Struktur HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>
<head>
• Judul Halman <tittle>
• CSS <style>
• Js <script>
• Meta data <meta> untuk mendiskripsikan data
kita
<body>
• Texts
– <h1> - <h6>, <p>
• Pendukung Texts
– <br>, <hr>, <em>, <strong>
• Gambar
– <img>
• hyperlink
– <a> (anchor)
<body>
• list(bullets & numbering)
– <ul>, <ol>, <li>, <dl>, <dt>, <dd>
• tabel
– <table>, <thead>, <tbody>
• form
– <form>, <input>, <select>, <button>
• Js
– <script>
• object
– <object>
• grouping
– <div>, <span>, <section>
Komentar


Struktur dari TAG
<Namatag Atribut = "nilai">
<body bgcolor="lightblue">
boleh lebih dari satu atribut atau tidak ada sama sekali
<body bgcolor="lightblue" id="home" class="container">

Atribut Global
accesskey, elemen ini bisa diakses oleh keyboard
class, id,
dir, untuk arah
lang, untuk language
style, untuk inline css
tabindek, untuk menentukan urutan
title, membri judu pada taks
Tag Texts
<p> paragraf
<br> line break
<hr> horizontal rule
<b> bold
<i> italic
<u> underline
Tag Texts
Membuat penekan terhadap suatu kalimat
<strong>
<em>
Komentar

heading
Penerapannya biasanya digunakan untuk
membuat suatu herarki
<h1> sampai <h6>

List Html
<ol> </ol> order list (terurut)
<ul> </ul> unorder list (tidak terurut)
<dl> </dl> description list
<li> </li> list
<ol> </ol>
<ol>
<li>Memasak</li>
<li>Makan</li>
<li>Mandi</li>
<li>Pergi Kuliah</li>
</ol>
atribut
<ol type= ""> </ol>
1
A
a
i
|
<ul> </ul>
memiliki tiga type :disc, square, circle
<ul type="disc">
<li>Memasak</li>
<li>Makan</li>
<li>Mandi</li>
<li>Pergi Kuliah</li>
</ul>
<dl></dl>
<dl>
<dt>term 1</dt>
<dd>description 1</dd>
<dt>term 2</dt>
<dd>description 2</dd>
</dl>
hyperlink
koneksi antara sumber web ke web lainnya baik
secara internal maupun external
<a> </a> anchor (jangkar)

<a href="https://"></a>
<a href="belajar1.html“ target="_blank"></a>
<a href="#bagian1"></a>
img
<img src="">
Ex/
<a href="belajar2.html">
<img
style="width: 100px; height: 100px“
src="logo.png“
alt="error“ ketika gambar rusak
title="yakpermas“ judul gambarnya
/>
Table
Baris 1, kolom 1 Baris 1, kolom 2

Nama Nomer RM
Budi 00-00-01
Siti 00-00-02
<table></table>
Simple
<table>
<tr>
<td></td>
</tr>
</table>
or
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
kompleks
<table>
<thead>
<tr>
<th></th>
<th>genap</th>
<th>genap</th>
</tr>
</thead>
<tbody>
<tr>
<th>ganjil</th>
<td>ganjil, genap</td>
</tr>
<tr>
<th>ganjil</th>
</tr>
</tbody>
</table>
<table></table>
Border menambahkan garis disekitar tabel
Cellspacing menambah jarak antara cell
Cellpadding memberi luas pada sekitar cell
Colspan
rowspan
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>baris 1, kolom 1</th>
<th>baris 1, kolom 2</th>
</tr>
<tr>
<td>baris 2, kolom 1</td>
</tr>
<tr>
</tr>
</table>
<table></table>
Colspan
Rowspan
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th> 1, 1</th>
<th> 1, 2</th>
<th> 1, 3</th>
<th> 1, 4</th>
</tr>
<tr>
<td> 2, 1</td>
<td> 2, 2</td>
<td> 2, 3</td>
<td> 2, 4</td>
</tr>
<tr>
<td> 3, 1</td>
<td> 3, 2</td>
<td> 3, 3</td>
<td> 3, 4</td>
</tr>
<tr>
<td> 4, 1</td>
<td> 4, 2</td>
<td> 4, 3</td>
<td> 4, 4</td>
</tr>
</table>
colspan
<tr>
<th colspan="2"> 1, 1</th>

<th> 1, 3</th>
<th> 1, 4</th>
</tr>
Rowspan
<tr>
<th rowspan="2"> 1, 1</th>
<th> 1, 2</th>
<th> 1, 3</th>
<th> 1, 4</th>
</tr>
<tr>

<td> 2, 2</td>
<td> 2, 3</td>
<td> 2, 4</td>
</tr>
Form
Sebuah elemen html untuk mengola data yang
di inputkan oleh user sampai menekan suatu
tombol
<form></form>
Input
Textarea
Select
Button
label
Input
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting
one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero
or more of many choices)
<input type="submit"> Displays a submit button (for
submitting the form)
<input type="button"> Displays a clickable button
<input type=“password">
text
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
Radio
<input type="radio" id="html" name="fav_language“ value="HTML">

<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
Checkboxes
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
submit
<input type="submit" value="send">
<input type=“reset" value="send">
<input type=“button" value="send">
<button type="submit"> send</button>

<textarea> <textarea>
<textarea
name="deskripsi"
id="TaDeskripsi"
cols="0"
rows="0">
</textarea>
select
<form>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>

HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

WEB_PROGRAMING

< NamaTag >

<body bgcolor="lightblue" id="home" class="container">

<h1> sampai <h6>

<a> </a> anchor (jangkar)

Baris 1, kolom 1 Baris 1, kolom 2

Baris 2, kolom 1 Baris 2, kolom 2

Baris 3, kolom 1 Baris 3, kolom 2

<input type="radio" id="html" name="fav_language“ value="HTML">

<button type="submit"> send</button>

Anda mungkin juga menyukai