0% menganggap dokumen ini bermanfaat (0 suara)
20 tayangan7 halaman

Contoh Sintaks Dasar HTML

Dokumen tersebut berisi contoh kode HTML untuk membuat berbagai elemen dasar seperti judul, paragraf, format teks, gambar, tabel, daftar terurut, video, audio dan tautan.

Diunggah oleh

Diana Marcus
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
20 tayangan7 halaman

Contoh Sintaks Dasar HTML

Dokumen tersebut berisi contoh kode HTML untuk membuat berbagai elemen dasar seperti judul, paragraf, format teks, gambar, tabel, daftar terurut, video, audio dan tautan.

Diunggah oleh

Diana Marcus
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

Contoh Syntax/ coding membuat Halaman Judul HTML :

<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Contoh Syntax/ coding membuat Judul HTML :

<html>
<body>
<h1>ini adalah judul 1</h1>
<p>This is some text.</p>
<hr>

<h2> ini adalah judul 2</h2>


<p>This is some other text.</p>
<hr>

<h3> ini adalah judul 3</h3>


<p>This is some other text.</p>

<hr>
<h4> ini adalah judul 4</h4>
<p>This is some other text.</p>
</body>
Contoh Syntax/ coding membuat Paragraph HTML:
</html>
Membuat Paragaraph dengan HTML

<html>
<body>

<p> Mencoba Membuat paragraf di HTML:</p>


<br> example

<p>

Nama saya adalah Indah.


Saya adalah siswi dari SMK N 1 Kupang.
Saya dari Jurusan Teknik jaringan dan Komputer.
Salam Kenal.

</p>

</body>
</html>

Contoh Syntax/ coding membuat formating HTML:

<html>
<body>

<p><b><h1>This text is bold</h1></b></p>


<p><i><h3>This text is italic</h3></i></p>
<p>This is<sub> subscript</sub> and
<sup>superscript</sup></p>
<p> <u>coba </u> </p>
<p> <small> Text Menjadi Kecil </small> </p>
<p> <address> alamat rumah </address> </P>
</body>
</html>
</body>
</html>
Membuat Jenis Pargraph di HTML:

<html>
<head>
<title> Contoh Paragraph pada HTML </title>
</head>
<body>
<p align="left"> 1. ini merupakan penulisan paragraf rata kiri dalam dokument HTML</p>
<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML </p>
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>
<p align="justify">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument
HTML</p>
</body>
</html>

Contoh Syntax Membuat Gambar pada HTML :


<html>

<body>

<h2>Alternative text</h2>

<p>The alt attribute should reflect the image content, so users who
cannot see the image gets an understanding of what the image
contains:</p>

<img src="[Link]" alt="Flowers in Chania" width="300"


height="300">

</body>

</html>
Contoh Syntax Membuat Gambarmap pada HTML :

<html>

<body>
<h2>Image Maps</h2>
<p>Click on the computer, to go to a new page and read more about the
topic:</p>
<img src="[Link]" alt="Workplace" usemap="#workmap" width="400"
height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="garden-
[Link]">
</map>
</body>
</html>

Mambuat Form di HTML :


<html>

<body>

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for


an input element.</p>

<form action="/action_page.php">

<input list="browsers" name="browser">

<datalist id="browsers">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

<input type="submit">

</form>

<p><b>Note:</b> The datalist tag is not supported in Safari or IE9


(and earlier).</p>

</body>

</html>
Membuat Tabel Di HTML :

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

padding: 5px;

table {

border-spacing: 15px;

</style>

</head>

<body>

<h2>Border Spacing</h2>

<p>Border spacing specifies the space between the cells.</p>

<table style="width:100%">

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Age</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>
Membuat Orderet List di HTML :

Ordered list atau list angka/nomor dibuat dengan menggunakan tag <ol>. Penulisan item-item
list tersebut menggunakan tag <li> yang ditelakkan diantara tag pembuka <ol> dan tag penutup
</ol>.

<html>
<head>
<title>Belajar ordered list</title>
</head>
<body>
<p>Urutan nama pemenang lomba koding:</p>
<ol>
<li>Nama juara pertama</li>
<li>Nama juara kedua</li>
<li>Nama juara ketiga</li>
</ol>
</body>
</html>

Membuat Video di HTML:

<html>
<head>
<title> Contoh Video di HTML </title>
</head>
<body>
<h1> <b1> CONTOH VIDEO DI HTML </h1> </b>
<video controls>
<source src="Cara Membuat Jaringan VoIp Pada
Cisco Packet Tracer.mp4" type="video/webm">
</video>
</body>
</html>
Membuat Audio di HTML:

<html>
<head>
<title> Contoh Audio DI HTML</title>
</head>
<body>
<h1> <font color ="crimson"> Contoh Membuat
Audio Di HTML</font> </h1>
<audio controls>
<source src="Cruel-summer-
([Link]).mp3"
type="audio/mpeg">
</audio>
</body>
</html>

Membuat Link di HTML

<html>
<head>
<title> Contoh Membuat Link</title>
</head>
<body>
<a href="[Link]
Membuat LINK </h1></a>
</body>
</html>

Anda mungkin juga menyukai