Pertemuan I
HTML (HyperText
Markup Language) adalah sebuah bahasa yang digunakan untu membuat sebuah
halaman Web, menampilkan berbagai informasi didalam sebuah penjelajahan web
internet dan pemformatan hiperteks sederhana ynag ditulis dalam berkas format ASCII
agar dapat menghasilkan tampilan wujud yang terintegerasi.
Struktur umum HTML;
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Kita sering beranggapan bahwa membuat Web itu
sulit,dan perlu biaya yang mahal. Sebenarnya dengan software ynag sudah ada
tersedia secara gratis, untuk menguasainya tidak memerlukan biaya yang
mahal,bahkan bisa gratis.
Untuk itu kita
harus mengetahui bagaimana dasar membuat Website dengan benar,brikut adalah
langkah-langkah membuat HTML.
a.
Siapkan Tool
Belajar HTML
Pada langkah ini akan mengetahui hal apa saja yang harus disiapkan.
Hal
pertama dibutuhkan untuk mempelajari HTML tentunya adalah sebuah browser yang
digunakan untuk membuka file. Untuk aplikasi lain anda dapat menggynakan software
sederhana yaitu Notepad,ms.word ataupun media tulis lainnya.
Jadi
unutk mempelajari HTML Anda hanya memerlukan sebuah browser dan text editor
saja.
Apakah Perlu Koneksi Internet?
Untuk menjalankan HTML,tidak perlu koneksi internet.
a.
Mempelajari
Element,Tag,dan Attribut HTML
Element pada HTML membentuk sebuah Struktur dan memberitahu browser unutk
halman website yang akan ditapilkan. Biasanya untuk elemen terdiri dari Tag pembuka, Konten, dan Tag penutup.
Tag Pembuka Tag penutup
<p> Konten
</p>
Tag sendiri digunakan
untuk menandai sebuah element pada bagian awal dan akhir, dengan format yang
sama diawali dengan tanda < dan ditutup dengan >.
Cth. <p> MAHASISWA </p>
Untuk membuat sebuah
heading atau subjudul, digunakan element h1,h2,h3,h4,h5
atau h6. Dimana unutk ukuran
paling besar diawal dengan h1 dan h6 adalah urutan terkecil.
Cth.
<h1> Mahasiswa
</h1>
<h3> Mahasiswa
</h3>
<h4> Mahasiswa
</h4>
<h5> Mahasiswa
</h5>
<h6> Mahasiswa
</h6>
Maka hasilnya ;
Mahasiswa
h1
Mahasiswa
h2
Mahasiswa
h3
Mahasiswa
h4
Mahasiswa
h5
Mahasiswa
h6
Adapun
fungsi dari asing-masing Tag dalam HTML yakni;
Nama
Tag
|
Keterangan
/ Kegunaan
|
Basic
|
|
<!DOCTYPE>
|
Tag
untuk menentukan tipe dokumen
|
<html>
|
Tag
untuk membuat sebuah dokumen HTML
|
<title>
|
Tag
untuk membuat judul dari sebuah halaman
|
<body>
|
Tag
untuk membuat tubuh dari sebuah halaman
|
<h1>
to <h6>
|
Tag
untuk membuat heading
|
<p>
|
Tag
untuk membuat paragraf
|
<br>
|
Memasukan
satu baris putus
|
<hr>
|
Tag
untuk membuat perubahan dasar kata didalam isi
|
<!--...-->
|
Tag
untuk membuat komentar
|
Formatting
|
|
<acronym>
|
Tag
untuk membuat sebuah akronim (tidak disupport lagi di HTML5)
|
<abbr>
|
Tag
untuk membuat sebuah singkatan
|
<address>
|
Tag
untuk membuat kontak alamat
|
<b>
|
Tag
untuk membuat huruf bercetak tebal
|
<bdi>
|
Mengisolasi
bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain
di luarnya (tag baru HTML5)
|
<bdo>
|
Mengganti
arah teks
|
<big>
|
Tag
untuk membuat text berhuruf besar (tidak disupport lagi di HTML5)
|
<blockquote>
|
Tag
untuk membuat sebuah bagian text yang dikutip dari sumber lain
|
<center>
|
Tag
untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di
HTML5)
|
<cite>
|
Tag
untuk membuat judul karya
|
<code>
|
Tag
untuk membuat potongan kode komputer di antara text
|
<del>
|
Tag
untuk membuat teks yang telah dihapus dari dokumen
|
<dfn>
|
Tag
untuk membuat sebuah istilah definisi
|
<em>
|
Tag
untuk membuat penekanan teks (tidak disupport lagi di HTML5)
|
<font>
|
Tag
untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi
di HTML5)
|
<i>
|
Tag
untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood
|
<ins>
|
Tag
untuk membuat teks yang telah dimasukkan ke dalam dokumen
|
<kbd>
|
Tag
untuk membuat input keyboard
|
<mark>
|
Tag
untuk membuat teks yang disorot / ditandai (tag baru HTML5)
|
<meter>
|
Tag
untuk membuat pengukuran skalar
|
<pre>
|
Tag
untuk membuat teks terformat
|
<progress>
|
Memperlihatkan
kemajuan tugas (tag baru HTML5)
|
<q>
|
Tag
untuk membuat kutipan pendek
|
<rp>
|
Tag
untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung
penjelasan ruby (tag baru HTML5)
|
<rt>
|
Tag
untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia
Timur)
|
<ruby>
|
Tag
untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru
HTML5)
|
<s>
|
Tag
untuk membuat teks yang tidak lagi benar
|
<samp>
|
Tag
untuk membuat contoh keluaran dari program komputer
|
<small>
|
Tag
untuk membuat teks kecil
|
<strike>
|
Tag
untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5)
|
<strong>
|
Tag
untuk membuat teks penting
|
<sub>
|
Tag
untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)
|
<sup>
|
Tag
untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat)
|
<time>
|
Tag
untuk membuat tanggal / waktu (tag baru HTML5)
|
<tt>
|
Tag
untuk membuat teks teletype (tidak disupport lagi di HTML5)
|
<u>
|
Tag
untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya
|
<var>
|
Tag
untuk membuat sebuah variabel
|
<wbr>
|
Tag
untuk membuat kemungkinan garis-putus
|
Forms
|
|
<form>
|
Tag
untuk membuat sebuah form HTML untuk input pengguna
|
<input>
|
Tag
untuk membuat sebuah kontrol input
|
<textarea>
|
Tag
untuk membuat sebuah kontrol input multibaris (text area)
|
<button>
|
Tag
untuk membuat sebuah tombol yang dapat diklik
|
<select>
|
Tag
untuk membuat sebuah daftar drop-down
|
<optgroup>
|
Tag
untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down
|
<option>
|
Tag
untuk membuat pilihan dalam daftar drop-down
|
<label>
|
Tag
untuk membuat sebuah label untuk sebuah elemen <input>
|
<fieldset>
|
Grup
unsur terkait dalam bentuk
|
<legend>
|
Tag
untuk membuat sebuah caption untuk sebuah elemen <fieldset>, <
figure>, atau <details>
|
<datalist>
|
Menentukan
daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru
HTML5)
|
<keygen>
|
Tag
untuk membuat key-pair generator kolom input (tag baru HTML5)
|
<output>
|
Tag
untuk membuat hasil penghitungan (tag baru HTML5)
|
Frames
|
|
<frame>
|
Tag
untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak
disupport lagi di HTML5)
|
<frameset>
|
Tag
untuk membuat satu set bingkai (tidak disupport lagi di HTML5)
|
<noframes>
|
Tag
untuk membuat sebuah konten alternatif untuk pengguna yang tidak mendukung
frame (tidak disupport lagi di HTML5)
|
<iframe>
|
Tag
untuk membuat sebuah bingkai
|
Images
|
|
<img>
|
Tag
untuk membuat gambar
|
<map>
|
Tag
untuk membuat gambar-peta
|
<area>
|
Tag
untuk membuat area dalam gambar-peta
|
<canvas>
|
Digunakan
untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru
HTML5)
|
<figcaption>
|
Tag
untuk membuat sebuah caption untuk elemen <figure> (tag baru
HTML5)
|
<figure>
|
Menentukan
konten mandiri (tag baru HTML5)
|
Audio/Video
|
|
<audio>
|
Tag
untuk membuat isi suara (tag baru HTML5)
|
<source>
|
Tag
untuk membuat sumber beberapa media untuk elemen media (<video> dan
<audio>) (tag baru HTML5)
|
<track>
|
Tag
untuk membuat trek teks untuk elemen media (<video> dan
<audio>) (tag baru HTML5)
|
<video>
|
Tag
untuk membuat sebuah video atau film (tag baru HTML5)
|
Links
|
|
<a>
|
Tag
untuk membuat hyperlink
|
<link>
|
Tag
untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling
sering digunakan untuk link ke style sheet)
|
<nav>
|
Tag
untuk membuat navigasi link (tag baru HTML5)
|
Lists
|
|
<ul>
|
Tag
untuk membuat daftar dengan selain nomor
|
<ol>
|
Tag
untuk membuat daftar dengan nomor
|
<li>
|
Tag
untuk membuat sebuah item daftar
|
<dir>
|
Tag
untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5)
|
<dl>
|
Tag
untuk membuat sebuah daftar definisi
|
<dt>
|
Tag
untuk membuat istilah (item) dalam daftar definisi
|
<dd>
|
Defines
a description of an item in a definition list
|
<menu>
|
Tag
untuk membuat deskripsi dari item dalam daftar definisi
|
<command>
|
Tag
untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat
meminta (tag baru HTML5)
|
Tables
|
|
<table>
|
Tag
untuk membuat tabel
|
<caption>
|
Tag
untuk membuat sebuah caption tabel
|
<th>
|
Tag
untuk membuat sebuah sel header tabel
|
<tr>
|
Tag
untuk membuat baris dalam sebuah tabel
|
<td>
|
Tag
untuk membuat sel dalam sebuah tabel
|
<thead>
|
Mengelompokan
isi header dalam sebuah tabel
|
<tbody>
|
Mengelompokanisi
tubuh dalam sebuah tabel
|
<tfoot>
|
Mengelompokan
isi footer dalam sebuah tabel
|
<col>
|
Menentukan
properti kolom untuk setiap kolom dalam elemen <colgroup>
|
<colgroup>
|
Menentukan
kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat
|
Style/Sections
|
|
<style>
|
Tag
untuk membuat informasi style untuk dokumen
|
<div>
|
Tag
untuk membuat sebuah bagian dalam dokumen
|
<span>
|
Tag
untuk membuat sebuah bagian dalam dokumen
|
<header>
|
Tag
untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5)
|
<footer>
|
Tag
untuk membuat footer untuk dokumen atau bagian (tag baru HTML5)
|
<hgroup>
|
Pengelompokan
elemen heading (<h1> sampai <h6>) (tag baru HTML5)
|
<section>
|
Tag
untuk membuat bagian dalam dokumen (tag baru HTML5)
|
<article>
|
Tag
untuk membuat sebuah artikel (tag baru HTML5)
|
<aside>
|
Tag
untuk membuat konten lain selain dari konten halaman (tag baru HTML5)
|
<details>
|
Tag
untuk membuat rincian tambahan yang pengguna dapat lihat atau
sembunyikan (tag baru HTML5)
|
<dialog>
|
Tag
untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5)
|
<summary>
|
Tag
untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru
HTML5)
|
Meta
Info
|
|
<head>
|
Tag
untuk membuat informasi tentang dokumen
|
<meta>
|
Tag
untuk membuat metadata tentang dokumen HTML
|
<base>
|
Menentukan
URL dasar / target untuk semua URL relatif dalam dokumen
|
<basefont>
|
Menentukan
standar warna, ukuran, dan font untuk semua teks dalam dokumen (tidak
disupport lagi di HTML5)
|
Programming
|
|
<script>
|
Tag
untuk membuat script di sisi klien
|
<noscript>
|
Tag
untuk membuat sebuah konten alternatif bagi pengguna yang tidak mendukung
script di sisi klien
|
<applet>
|
Tag
untuk membuat sebuah java applet yang ditanam (tidak disupport lagi di
HTML5)
|
<embed>
|
Tag
untuk membuat sebuah wadah untuk aplikasi eksternal (non-HTML) (tag baru
HTML5)
|
<object>
|
Tag
untuk membuat sebuah objek yang ditanam
|
<param>
|
Tag
untuk membuat sebuah parameter untuk objek
|
Contoh
pada pertemuan Petama(I) yaitu membuat Biodata;
<html>
<head>
<title> Profilku
</title>
<style>
h1
{
color : green;
font-size : 40px;
}
</style>
</head>
<body bgcolor="pink">
<h1> Data Diri</h1>
<hr>
<pre>
NPM
: 180810010
Nama
: STEFFANNY PN SIMANJORANG
Alamat : Gg.Horas No.04
Prodi
: Sistem Informasi
Motto
: Nothing Imposible
</pre>
<img src=gambarku.jpg width=100px height= 120px>
<marquee>
<h1>UNIKA JAYA</h1>
</marquee>
<a href=biodata.html>Ganti Biodata</a>
</body>
</html>
hasil;
--> Background – Body : Pink. Dengan perintah
<body
bgcolor="pink">
--> Merupakan Title dalam HTML. Dengan perintah
<title>Profilku
</title>
--> Merupkan h1 (heading) dengan karakteristiknya; tulisan warna hijau,dan diikuti dengan garis bawah(hr) setelah judul. Dengan perintah
<h1>
Data Diri</h1>
<hr>
--> Merupakan isi dari html tersebut dengan perintah
<pre>
NPM
: 180810010
Nama
: STEFFANNY PN SIMANJORANG
Alamat : Gg.Horas No.04
Prodi
: Sistem Informasi
Motto
: Nothing Imposible
</pre>
--> Merupakan foto yang dimasukkan ke dalam html dengan menggunakan
<img
src=gambarku.jpg width=100px height= 120px>
--> Merupakan tulisan yang bergerak dari kanan kekiri. Dengan perintah
--> Dengan menambahkan link didalam nya. Dengan perintah
Sekianlah materi pembelajaran Pertemuan I
TERIMAKASIH☺
Nicee
ReplyDeleteNiceee
ReplyDeleteThankyouss...
ReplyDeleteNext will be better
Good
ReplyDelete