PEMFORMATAN TEKS
Berikut ini adalah contoh yang dihasilkan pemformatan teks pada dokumen web :
HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring.
Tag HTML ini disebut tag format, selengkapnya dalam tabel berikut :
Tag HTML Pemformatan Teks
Tag
|
Deskripsi
|
<b>
|
Mendefinisikan teks tebal
|
<em>
|
Mendefinisikan teks menekankan
|
<i>
|
Mendefinisikan teks miring
|
<small>
|
Mendefinisikan teks kecil
|
<strong>
|
Mendefinisikan teks penting
|
<sub>
|
Mendefinisikan teks di bawah garis
|
<sup>
|
Mendefinisikan teks di atas garis
|
<ins>
|
Mendefinisikan teks sisipan
|
<del>
|
Mendefinisikan teks dicoret
|
<mark>
|
Mendefinisikan teks ditandai
|
Tag HTML “keluaran computer”
Tag
|
Definisi
|
<code>
|
Mendefinisikan teks code computer
|
<kbd>
|
Mendefinisekan teks keyboard
|
<samp>
|
Mendefinisikan teks contoh code
|
<var>
|
Mendefinisikan teks variable
|
<pre>
|
Mendefinisikan teks terformat
|
HTML Citations, Quotations, and Definition Tags
Tag
|
Deskripsi
|
<abbr>
|
Mendefinisikan sebuah singkatan
|
<address>
|
Mendefinisikan alamat atau kontak informasi
|
<bdo>
|
Mendefinisikan arah teks
|
<blockquote>
|
Mendefinisikan sebuah bagian yang dikutip dari sumber lain
|
<q>
|
Mendefinisikan sebuah kutipan pendek
|
<cite>
|
Mendefinisikan judul karya
|
<dfn>
|
Mendefinisikan sebuah istilah definisi
|
PEMFORMATAN PARAGRAF
Tag HTML untuk paragrap adalah <p>, dengan tag penutup </p>. Berikut ini contohnya :
<p>ini adalah paragrap</p>
Cara membuat List Minimal dan List kombinasi Menggunakan Kode HTML
Baiklah kali ini saya akan share tentang Cara membuat List Minimal dan List kombinasi Menggunakan Kode HTML. Cara membuat List atau Daftar dengan kode HTML cukup mudah kok, kalian harus mengetahui dulu kode dasar html klikPengertian HTML dan Kode Dasar HTML Bagi kalian yang belum mengerti.
Oke kita lanjutkan, list dalam kode html menggunakan tag :
1. <ol> </ol> = Ordered List (Membuat list dengan urutan contoh 1,2,3,.., a,b,c,... dll)
Attribut tag ol : type
Value tag ol : 1, i, I, a, dan A
Contoh : <ol type='i'><li> Ade Putra Blo</li><ol>
Value tag ol : 1, i, I, a, dan A
Contoh : <ol type='i'><li> Ade Putra Blo</li><ol>
2. <ul> </ul> = Unordered list (membuat list tanpa orutan lihat screenshot pada gambar.
Attribut tag ul : type
Value tag ul : disc, circle, dan square
contoh : <ul type='square'><li> Ade Putra Blo</li><ul>
Value tag ul : disc, circle, dan square
contoh : <ul type='square'><li> Ade Putra Blo</li><ul>
3. <li></li> = Tag li berfungsi untuk menampilkan kalimat yang ingin kita buat.Tag li disisipkan diantara tag ol ataupun tag ul
contoh :
<ol>
<li>teks </li>
li>teks 2 </li>
li>teks dsb. </li>
</ol>
<li>teks </li>
li>teks 2 </li>
li>teks dsb. </li>
</ol>
Cara Membuat List Minimal
<html>
<head>
<title>Membuat list minimal</title>
</head>
<body>
<ol>
<li>teks </li>
<li>teks 2 </li>
<li>teks dsb. </li>
</ol>
</body>
</html>
<head>
<title>Membuat list minimal</title>
</head>
<body>
<ol>
<li>teks </li>
<li>teks 2 </li>
<li>teks dsb. </li>
</ol>
</body>
</html>
Copy ke notepad dan buka lewat browser kalian, maka tampilannya akan seperti gambar dibawah ini.
Kalian bisa mengganti tag ol dengan ul dan juga menambahkan attribut sesuai dengan kreasi kalian masing-masing.
Cara Membuat List Kombinasi.
Membuat list kombinasi saya rasa tidak cukup sulit, hanya saja kita harus meletakkan kodenya dengan teliti agar list yang kita buat tidak kacau. Kita akan membuat list kombinasi sesuai seperti gambar dibawah.
Cara Membuat List Kombinasi.
Membuat list kombinasi saya rasa tidak cukup sulit, hanya saja kita harus meletakkan kodenya dengan teliti agar list yang kita buat tidak kacau. Kita akan membuat list kombinasi sesuai seperti gambar dibawah.
Pertama, tulis atau copy kode dibawah dengan notepad kalian.
<html>
<head>
<title>Membuat list Kombinasi</title>
</head>
<body>
Daftar Makanan
<ol>
<li>Ayam </li>
<li>Soto </li>
</ol>
</body>
</html>
<head>
<title>Membuat list Kombinasi</title>
</head>
<body>
Daftar Makanan
<ol>
<li>Ayam </li>
<li>Soto </li>
</ol>
</body>
</html>
Simpan dan tampilkan di browser maka tampilannya akan seperti gambar dibawah.
Yang kedua adalah cara membuat submenu pada ayam dan soto. caranya yaitu dengan menyisipkan tag ol atau ul di dalam tag li pada ayam dan soto. Caranya seperti kode dibawah.
<html>
<head>
<title>Membuat list Kombinasi</title>
</head>
<body>
Daftar Makanan
<ol>
<li>Ayam
<ul>
<li type='circle'>Daging</li>
<li type='disc'>Bakar</li>
<li type='square'>Kecap</li>
</ul>
</li>
<li>Soto
<ol type='a'>
<li>Daging</li>
<li>Bakar</li>
</ol>
</li>
</ol>
</body>
</html>
<head>
<title>Membuat list Kombinasi</title>
</head>
<body>
Daftar Makanan
<ol>
<li>Ayam
<ul>
<li type='circle'>Daging</li>
<li type='disc'>Bakar</li>
<li type='square'>Kecap</li>
</ul>
</li>
<li>Soto
<ol type='a'>
<li>Daging</li>
<li>Bakar</li>
</ol>
</li>
</ol>
</body>
</html>
Sehingga tempilannya akan seperti gambar dibawah ini.
Bagaimana ? Mudah bukan ? Jika kalian mengetahui dasar kode html, pasti membuat list minimal juga akan terasa lebih mudah. Intinya, kalian harus benar menempatkan kodenya sehingga browser bisa menampilkan hasil coding yang kalian buat.
Kode Warna
Atribut Elemen <body>
Elemen Heading <h1>… <h6>
Elemen yang dihilangkan di HTML5
Anatomi Dokumen Web
ANATOMI DOKUMEN WEB
1. Dasar-Dasar HTML
HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protocol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML. HTML ini digunakan untuk memperindah tampilan pada program web.
Fitur-Fitur dalam HTML:
1. Canvas : digunakan untuk membuat gambar dalam gambar, yang hasilnya kita tidak perlu diambil secara utuh melainkan dapat disusun sendiri menggunakan program tertentu
2. Header : Digunakan sebagai tempat diletakkannya judul, yang bias diisi dengan elemen logo atau nama suatu instansi
3. Footer : Sebagai temmpat untuk menaruh informasi di bagian bawah halaman sebuah web.
4. Time : Berguna untuk menyajikan informasi tentang waktu.
5. Audio : Memungkinkan untuk melakukan pememutar suara atau lagu.
6. Video : Memungkinkan untuk memainkan atau memutar video atau film.
Secara prinsif, fitur-fitur dalam dokumen HTML dapat dikelompokkan menjadi 5, yaitu:
1. Struktur halaman
2. Presentasi visual
3. Peranti penyaji gambar
4. Pendukung media
5. Peningkatan koneksi dengan JavaScript
Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan symbol lebih besar (<) dan symbol lebih kecil (>). Pasangan dari sebuah tag ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag <html > adalah</html>. Dalam hal ini <html> kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu.
2. Struktur Dasar Dokumen HTML
Dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut :
Struktur file HTML diawali dengan sebuah tag<html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag<head>…</head> dan tag <body>…</body>.
· HEAD : Merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <tittle>… </tittle> yang berpungsi untuk mengeluarkan judul pada tittle bar window web browser.
· BODY : Merupakan bagian yang akan ditampilkan pada halaman web browser nantinya.
3. Pengaturan Properti Dokumen
Properti document adalah pengaturan tampilan web melalui atribut-atribut yang terdapat dalam elemen <body>.
Kode Warna
Warna
|
Hexadesimal
|
Warna
|
Hexadesimal
|
White
|
#FFFFFF
|
Black
|
#B87333
|
Red
|
#FF0000
|
Green
|
#00FF00
|
Blue
|
#0000FF
|
Magenta
|
#FF00FF
|
Cyan
|
#00FFFF
|
Yellow
|
#FFFF00
|
Aquamarine
|
#70DB93
|
Chocolate
|
#5C3317
|
Violet
|
#9F5F9F
|
Brass
|
#B5A642
|
Coper
|
#B87333
|
Pink
|
#FF6EC7
|
Atribut Elemen <body>
a. BACKGROUND = Latar belakng dokumen image dokumen
b. BGCOLOR = Warna latar belakng dokumen, biasanya putih
c. TEXT = Warna teks dokumen, biasanya hitam
d. LINK = Warna link dokumen, biasanya biru
e. VLINK = Warna visited link dokumen, biasanya ungu
f. ALINK = Warna aktif link dokumen, biasanya merah
Elemen Heading <h1>… <h6>
Heading berfungsi untuk memformat judul dari suatu halam web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada 7 buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>.
Elemen yang dihilangkan di HTML5
1. <acronym>
2. <applet>
3. <basefont>
4. <big>
5. <center>
6. <dir>
7. <font>
8. <frame>
9. <frameset>
10. <noframes>
11. <strike>
12. <tt>
Tidak ada komentar:
Posting Komentar