Cara Membuat HTML Dasar Berikut Contoh

LAPORAN PRAKTIKUM
PEMROGRAMAN WEB 1
MODUL I
“HTML Dasar”
Diajukan untuk memenuhi salah satu Mata Kuliah Praktikum Pemrograman Web 1
Dosen Pengampu : Rio Andriyat Krisdiawan, S.Kom., M.Kom.





Disusun Oleh
Cecep Pauji Ramadhan
20160910077
Sistem Informasi 2016 C



FAKULTAS ILMU KOMPUTER
PROGRAM STUDI SISTEM INFORMASI
UNIVERSITAS KUNINGAN
2018




KATA PENGANTAR

Puji syukur penulis ucapkan atas kehadirat Allah SWT, karena rahmat dan karunia-Nya penulis diberi kesempatan untuk menyelesaikan Laporan Praktikum Pemrograman Web 1. Shalawat dan salam kita hanturkan kepada junjungan besar Nabi Muhammad SAW beserta keluarganya, sahabatnya, beserta pengikutnya hingga akhir zaman.

Penulis menyusun laporan ini dengan tema HTML Dasar. Laporan ini menjelaskan cara pembuatan sebuah halaman website dengan menggunakan bahasa pemrograman HTML, dengan mempelajari struktur dasar pemrograman web, dan memanipulasi tamppilan web dengan cara penggunaan tag / atribut HTML.


Tidak lupa juga saya ucapkan terima kasih kepada kedua orang tua kami masing-masing dan terima kasih kepada dosen Pemrograman Web 1 yaitu Rio Andriyat Krisdiawan S.Kom., M.Kom. yang telahmembimbing penulis dalam menyusun laporan.

Penulis menyadari bahwa dalam laporan ini masih jauh dari kata sempurna, untuk itu penulis sangat mengharapkan kritik dan saran yang sifatnya membangun guna sempurnanya laporan ini.


Kuningan, 11Maret 2018
                                                                                                                                         

                                                                                                                Penulis.





DAFTAR ISI

Kata Pengantar
Daftar Isi

BAB I PENDAHULUAN
1.1 Maksud dan Tujuan
1.2 Landasan Teori

BAB II PEMBAHASAN
2.1 Post Test
2.2 Tugas

BAB III PENUTUP
3.1 Kesimpulan

DAFTAR PUSTAKA




BAB I
PENDAHULUAN

1.1 Maksud dan Tujuan
  1. Mampu memahami struktur dasar pemrograman HTML
  2. Mampu memanipulasi teks menggunakan tag dan atribut HTML
  3. Mampu menyisipkan gambar di HTML


1.2 Landasan Teori

HTML(Hyper Text Markup Language)
HTML adalah singkatan dari Hypertext Markup Language. Bahasa HTML digunakan untuk membangun halaman web. Selain itu, HTML adalah bahasa markup yang umum digunakan oleh para developer web. Karena kemudahan dalam menggunakannya, HTML menjadi bahasa pemrograman web yang populer dikalangan para developer.

HTML mempunyai fungsi di antaranya dapat menentukan format suatu teks, membuat list, membuat link ke dokumen lain, menyisipkan gambar, serta dapat menampilkan informasi dalam bentuk tabel. Selain itu, HTML juga berfungsi untuk mengatur tampilan dari halaman web dan isinya, menambahkan objek seperti gambar, video, audio, dan lain-lain.

Struktur Dasar HTML
Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari : Tag DTD atau DOCTYPE, tag HTML, tag head, dan tag body. Inilah yang merupakan struktur paling dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.

Tag HTML
Tag adalah suatu penanda untuk menandai elemen-elemen dalam suatu dokumen HTML dan Fungsi Tag adalah untuk memberikan instruksi atau memberitahu kepada browser bagaimana suatu objek di tampilkan berdasarkan Tag yang di gunakan, objek disini bisa berupa teks, video, audio dan gambar.


TagPenjelasan

<!--...-->Mendefinisikan Komentar

<!DOCTYPE>Mendefinisikan tipe atau jenis dokumen

<a>Mendefinisikan hyperlink

<abbr>Mendefinisikan sebuah singkatan atau akronim

<acronym>Tag ini tidak didukung pada HTML5. Gunakan <abbr> sebagai penggantinya pada HTML5.Mendefinisikan akronim

<address>Mendefinisikan informasi kontak penulis atau pemilik dokumen
<applet>Tag ini tidak didukung pada HTML5. Gunakan <embed> atau <object> sebagai penggantinya pada HTML5. Mendefinisikan embedded applet

<area>Mendefinisikan sebuah area didalam image-map

<article>Mendefinisikan sebuah artikel

<aside>Mendefinisikan selain dari konten halaman

<audio>Mendefinisikan konten suara

<b>Mendefinisikan teks bold atau cetak tebal
<base>Menentukan basis URL atau target untuk semua URL relatif dalam dokumen

<basefont>Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5.Menentukan warna default, ukuran, dan font untuk semua teks dalam dokumen
<bdi>Isolat bagian teks yang mungkin diformat dalam arah yang berbeda dari teks lain di luar itu sendiri

<bdo>Mengganti arah teks saat ini

<big>Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5.Mendefinisikan teks besar

<blockquote>Mendefinisikan bagian yang dikutip dari sumber lain

<body>Mendefinisikan tubuh atau badan dokumen

<br>Mendefinisikan satu baris tunggal atau sama dengan fungsi enter

<button>Mendefinisikan sebuah tombol

<canvas>Digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript)

<caption>Mendefinisikan caption dari sebuah tabel

<center>Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5.Mendefinisikan teks yang posisinya berada ditengah

<cite>Mendefinisikan Judul karya

<code>Mendefinisikan bagian dari code pada komputer

<col>Menentukan sifat kolom untuk setiap kolom dalam <colgroup> element

<colgroup>Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat

<datalist>Menentukan daftar pilihan yang telah ditentukan untuk kontrol input

<dd>Mendefinisikan deskripsi / nilai istilah dalam daftar deskripsi

<del>Mendefinisikan teks yang telah dihapus dari dokumen

<details>Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan

<dfn>Merupakan contoh mendefinisikan istilah

<dialog>Mendefinisikan sebuah kotak dialog atau jendela

<dir>Tag ini tidak didukung pada HTML5. Gunakan <ul> sebagai penggantinya pada HTML5.Mendefinisikan daftar direktori

<div>Mendefinisikan sebuah bagian dalam sebuah dokumen

<dl>Mendefinisikan daftar deskripsi
<dt>Mendefinisikan istilah / nama dalam daftar deskripsi

<em>Mendefinisikan menekankan teks

<embed>Mendefinisikan sebuah wadah untuk eksternal (non-HTML) aplikasi

<fieldset>Sebauh Grup untuk pengelompokan dalam form

<figcaption>Mendefinisikan sebuah caption untuk <figure> element
<figure>Menentukan konten mandiri

<font>Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5.Mendefinisikan font, warna, dan ukuran dari sebuah teks

<footer>Mendefinisikan sebuah footer dari sebuah dokumen atau section

<form>Mendefinisikan sebuah form HTML untuk input pengguna

<frame>Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah jendela (frame) dalam sebuah frameset

<frameset>Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah satu set frames

<h1> sampai <h6>Mendefinisikan headings pada HTML

<head>Mendefinisikan informasi tentang dokumen

<header>Mendefinisikan sebuah header untuk dokumen atau bagian dokumen

<hr>Mendefinisikan perubahan tematik dalam konten atau memberikan garis pada dokumen

<html>Mendefinisikan root dari sebuah dokumen HTML

<i>Mendefinisikan sebuah bagian dari teks dengan suara alternatif atau suasana hati

<iframe>Mendefinisikan sebuah frame inline

<img>Mendefinisikan sebuah image

<input>Mendefinisikan sebuah input control

<ins>Mendefinisikan teks yang telah dimasukkan ke dalam dokumen

<kbd>Mendefinisikan input keyboard

<keygen>Mendefinisikan sebuah key-pair generator field (for forms)

<label>Mendefinisikan sebuah label dari sebuah <input> element

><legend>Mendefinisikan sebuah caption dari sebuah <fieldset> element

<li>Mendefinisikan sebuah daftar item

<link>Mendefinisikan hubungan antara dokumen dengan sumber daya eksternal (digunakan untuk link ke style sheet)

<main>Menentukan konten utama dari dokumen

<map>Mendefinisikan client-side image-map

<mark>Mendefinisikan ditandai / teks yang disorot

<menu>Mendefinisikan daftar / menu perintah

<menuitem>Mendefinisikan item perintah / menu bahwa pengguna dapat memanggil dari menu popup

<meta>Mendefinisikan metadata tentang sebuah dokumen HTML

<meter>Mendefinisikan pengukuran skalar dalam kisaran dikenal (gauge)

<nav>Mendefinisikan navigasi untuk links

<noframes>Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung frame

<noscript>Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung script sisi klien

<object>Mendefinisikan sebuah embedded objek

<ol>Mendefinisikan sebuah daftar tersusun

<optgroup>Mendefinisikan sekelompok opsi terkait dalam daftar drop-down

<option>Mendefinisikan sebuah option dari sebuah daftar drop-down

<output>Mendefinisikan hasil dari sebuah perhitungan

<p>Mendefinisikan sebuah paragraph

<param>Mendefinisikan sebuah parameter untuk sebuah object

<pre>Mendefinisikan teks preformatted

<progress>Menggambarkan kemajuan tugas

<q>Mendefinisikan sebuah kutipan singkat

<rp>Mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby

<rt>Mendefinisikan sebuah penjelasan / pengucapan karakter (untuk tipografi Asia Timur)

<ruby>Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)

<s>Mendefinisikan teks yang sudah tidak benar

<samp>Mendefinisikan contoh output dari program komputer

<script>Mendefinisikan sebuah script dari sisi klien

<section>Mendefinisikan sebuah section didalam sebuah dokumen

<select>Mendefinisikan sebuah daftar drop-down

<small>Mendefinisikan teks kecil

<source>Mendefinisikan lebih dari satu sumber media untuk elemen media seperti (<video> dan <audio>)

<span>Mendefinisikan sebuah section didalam sebuah dokumen

<strike>Tag ini tidak didukung pada HTML5. Gunakan <del> atau <s> sebagai penggantinya pada HTML5. Mendefinisikan teks strikethrough

<strong>Mendefinisikan teks yang penting

<style>Mendefinisikan informasi style untuk sebuah dokumen

<sub>Mendefinisikan teks subscripted

<summary>Mendefinisikan sebuah judul yang terlihat dalam sebuah <details> element

<sup>Mendefinisikan teks superscripted

<tabel>Mendefinisikan sebuah tabel

<tbody>Grup isi tubuh dalam sebuah tabel

<td>Mendefinisikan sebuah cell didalam sebuah tabel

<teksarea>Mendefinisikan sebuah input control multiline atau teks area

<tfoot>Grup isi footer dalam sebuah tabel

<th>Mendefinisikan sebuah header cell didalam sebuah tabel

<thead>Grup header dalam sebuah tabel

<time>Mendefinisikan sebuah tanggal atau waktu

<title>Mendefinisikan sebuah title untuk dokumen

<tr>Mendefinisikan sebuah row didalam sebuah tabel

<track>Mendefinisikan trek teks untuk elemen media yang (<video> dan <audio>)

<tt>Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5.Mendefinisikan teletype teks

<u>Mendefinisikan teks yang harus berbeda dari teks biasa

<ul>Mendefinisikan sebuah unordered list

<var>Mendefinisikan sebuah variable

<video>Mendefinisikan sebuah video atau movie

<wbr>Mendefinisikan sebuah kemungkinan line-break

Element HTML
Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk tag itu sendiri dan atribut yang dimilikinya (jika ada). Sebagai contoh perhatikan kode HTML berikut:

  • <p> Sebuah Paragraf </p>



Atribut HTML
Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki pasangan nama dan nilai (value) yang ditulis dengan name=”value”. Value diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“).
   
<<code class="html keyword">a</code> <code class="html color1">href</code><code class="html plain">=</code><code class="html string">"https://mrcheperz14.blogspot.co.id"</code><code class="html plain">>ini adalah sebuah link</</code><code class="html keyword">a</code><code class="html plain">></code>



   




BAB II
PEMBAHASAN

2.1 Post Test dan Tugas


Post Test
Buat halaman website untuk menampilkan informasi Riwayat Hidup Anda,dengan menggunakan HTML!

 <html>
<head>
<title>Post Test Modul 1</title>
</head>
<body><left><img align="left" src="uniku.jpg" width="130" height="130"></img><center><h1>UNIVERSITAS KUNINGAN</h1>
<h2>FAKULTAS KOMPUTER UNIVERSITAS KUNINGAN</h2>
<h3>Jalan Cut Nyak Dhien No.36 Kuningan</h3></td>
</table>
<hr size="5" color="blue">
</center>
<h1>DAFTAR RIWAYAT HIDUP</h1></br>
<pre>
NIK : 20160910077
Nama         : Cecep Pauji Ramadhan
Tempat,Tanggal Lahir : Kuningan,14 Februari 1995
Alamat : Ds. Ciomas Blok Kliwon Kec.Ciawigebang KAb.Kuningan
Jenis Kelamin         : Laki-Laki
Agama : Islam
No.Hp : 081233445566
Email : ceceppauji@gamail.com
</pre>
</body>
</html>
  
Hasil tampilan


Tugas
Buat halaman website untuk menampilkan informasi Riwayat Hidup Anda, seperti latihan diatas tambahkan footer dan buat tampilan menarik! 

 <html>
<head>
<title>Tugas</title>
</head>
<body bgcolor="blue">
<body>
<table>
<img align="left" width ="120" heigt="120" src="uniku.jpg">
</img>
<center><h1>UNIVERSITAS KUNINGAN</h1>
<h3>FAKULTAS ILMU KOMPUTER UNIVERSITAS KUNINGAN</h3>
<h3>Jalan Cut Nyak Dien Cijoho Kuningan</h3>
</table>
<hr size="3" color="red">
<marquee behavior="alternate">Assalamualaikum Salam Kenal!!!!</Marquee>
</center>
<center>
<h2>DAFTAR RIWAYAT HIDUP</h2>
<form action="#" style="width: 840px">
<fieldset class="h"/>
<table style="width: 790px;">                                                                                       
<tr>
<td rowspan="150" width="150px">
<img src="cecep.jpg" width="170px" height="220px"/>
</td>
</tr>
<tr>
<td><b>NIM</b></td>
<td>:</td>
<td>20160910077</td>
</tr>
<tr>
<td><b>Nama</b></td>
<td>:</td>
<td>Cecep Pauji Ramadhan</td>
</tr>
<tr>
<td><b>Tempat, Tanggal Lahir</b></td>
<td>:</td>
<td>Kuningan, 14 Agustus 1995</td>
</tr><tr>
  <td><b>Alamat</b></td>
  <td>:</td>
  <td>Ds. Ciomas Blok Kliwon Kec. Ciawigebang Kab. Kuningan</td>
 </tr>
 <tr>
  <td><b>Jenis Kelamin</b></td>
  <td>:</td>
  <td>Laki-Laki</td>
 </tr>
 <tr>
  <td><b>Agama</b></td>
  <td>:</td>
  <td>Islam</td>
 </tr>
 <tr>
  <td><b>No. HP</b></td>
  <td>:</td>
  <td>081233445566</td>
 </tr>
 <tr>
  <td><b>Email</b></td>
  <td>:</td>
  <td>ceceppauji@gmail.com</td>
 </tr>
</table>
</fieldset>
</form>
</center>
  <hr size="3" color="red">
  <div>Copyright &#169; 2018 by cecep(Mr. Cheperz)</div>
 </body>

</html>


Hasil tampilan









BAB III
PENUTUP

3.1 Kesimpulan

HTML adalah singkatan dari Hypertext Markup Language. Bahasa HTML digunakan untuk membangun halaman web. Selain itu, HTML adalah bahasa markup yang umum digunakan oleh para developer web. Karena kemudahan dalam menggunakannya, HTML menjadi bahasa pemrograman web yang populer dikalangan para developer.
Setiap halaman HTML memiliki struktur dasar yang terdiri dari : Tag DTD atau DOCTYPE, tag HTML, tag head, dan tag body.





DFTAR PUSTAKA
  

Maret 18, 2018 | | 0 Comments  

Langganan: Postingan (Atom)

Cari Blog Ini
Diberdayakan oleh Blogger.