AlfiBlog: HTML TUTORIAL

1) Basic, Html document adalah semua dokumen html harus dimulai dengan deklarasi tipe <!DOCTYPE html>. html dokumen itu sendiri dimulai dengan <html> dan diakhiri dengan </html>. bagian yang tampak dari html dokumen yaitu diantara <body> dan </body>.

Contoh :

<!DOCTYPE html>

<html>

<body>

<h1>Dasar Internet dan Desain Web</h1>

<p>My first paragraph.</p>

</body>

</html>

Hasil :

2) Elements, Html element ditulis dengan tag mulai, tag akhir dan konten. tetapi ada beberapa html element tidak mempunyai tag akhir.

<!DOCTYPE html>

<html>

<body>

<h1>Dasar Internet dan Desain Web</h1>

<p>My first paragraph.</p>

</body>

</html>

Hasil :

3.) Attribut, Adalah sebuah html yang menyediakan informasi tambahan tentang Elements, atirbut selalu ditetapkan dalam tag mulai dam mempunyai sepasang nama atau niali seperti name=”value”.

bahasa atribut (dokumen) bisa dideklarasikan dalam tag <html>. bahasa dideklarasikan dalam atribut lang. deklarasi bahasa sangat penting untuk tingkat kemudahan akses aplikasi.

Contoh :

<!DOCTYPE html>

<body>

<h1>Dasar Internet dan Desain Web</h1>

<p>My first paragraph.</p>

</body>

</html>

Hasil :

4) Heading, Headings didefiniskan dengan tag <h1> sampai <h6>. <h1> mendefinisikan heading yang paling penting. <h6> mendefinisikan heading yang kurang penting

Contoh :

<h1>Ini Adalah Heading</h1>

<h2>Ini Adalah Heading</h2>

<h3>Ini Adalah Heading</h3>

Hasil :

5) Paragraph, Dokumen html terbagi menjadi beberapa paragarf. elemen <p> mendefinisikan sebuah paragraph

Contoh :

<p>Ini adalah sebuah paragraf</p>

<p>Ini adalah paragraf lainnya</p>

Hasil :

6) Styles, Setiap elemen html mempunyai sebuah style (warna bbackground, warna teks, ukuran teks dan lain-lain). perubahan style dari elemen html bisa diselesaikan dengan atribut style.

Contoh :

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue">Princess</h1>

<p style="color:red">Alfi Maghfiroh Izzani Maulania.</p>

</body>

</html>

Hasil :

7) Text Formating, didesain untuk menunjukkan tipe-tipe special dari teks

Contoh :

<p>This text is normal.</p>

Hasil :

8) Quotattion Elements, Dalam elemen ini ada beberapa tag, tag <q>, <blockquote>, <abbr>, <dfn>, <address>, <cite>, dan <bdo>.

Contoh :

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

Hasil :

9) Computer Code Elements, Elemen ini mempunyi beberapa tag, seperti, <kbd>, <samp>, <code>, dan <var>. Semua elemen tersebut digunakan untuk ukuran dan jarak letter

Contoh :

<p>To open a file, select:</p>

Hasil :

10) Coment, Dengan html comment kita bisa menempatkan notifikasi dan peringatan-peringatan dalam HTML kamu

Contoh :

<p>Ini Komen yang tertinggal.</p>

Hasil :

11) CSS, Dengan html comment kita bisa menempatkan notifikasi dan peringatan-peringatan dalam HTML kamu

Contoh :

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color:lightgray}

h1 {color:blue}

p {color:red}

</style>

</head>

<body>

<h1>Headingnya disni</h1>

<p>Paragraph disini.</p>

</body>

</html>

Hasil :

12) Links, Link ditemukan hampir semua halaman web. Link menunjukkan pengguna untuk mengklik cara mereka dari halaman ke halaman. Hyperlink adalah sebuah elemen, teks, atau gambar yang kamu bisa mengklik tersebut dan melangkah ke dokumen lain.

Contoh :

<a href="url">link text</a

Hasil :

13) Images, Dalam html, image didefinisikan dengan tag <img>. Tag <img> hanya mengandung atribut-atribut dan tidak mempunyai tag akhir atau penutup. Atribut src mendefinisikan url (alamat web) dari gambar. Atibut alt mendefnisikan teks alternative. Atribut width dan Height mendefinisikan ukuran gambar.

Contoh :

<!DOCTYPE html>

<html>

<body>

<h2>Princess Cantik</h2>

</body>

</html>

Hasil :

14) Tables, Tabel didefinisikan dengan tag <table>. Tabel terbagi menjadi baris table <tr>, data table <td>, dan heading table <th>.

ontoh :

<tr>

<td>Vibri</td>

</tr>

<tr>

<td>Shocib</td>

</tr>

<tr>

<td>Synister</td>

<td>Gates</td>

</tr>

</table>

Hasil :

15) List, Html list dapat ditambahkan dengan atribut style. Pendeskripsian atribut style, yaitu (1) list-style-type:disc (daftar item akan ditandai dengan bullet (default)) (2) list-style-type:circle (daftar item akan ditandi dengan lingkaran) (3) list-style-type:square (daftar item akan ditandai dengan persegi) (4) list-style-type:none (daftar item tidak menggunakn tanda).

Contoh :

<p>Kebutuhan Pokok Kekinian</p>

<li>Sandang</li>

<li>pangan</li>

<li>Papan</li>

<li>Pacar</li>

</ul>

Hasil :

16) Block Elements, Html block ini mempunyai beberapa elemen (<span> dan <div>). Elemen <span> adalah elemen dalam baris yang digunakan sebagai wadah untuk teks. Elemen <div> adalah Elemen level block yang digunakan sebagai wadah untuk elemen-elemen html lain.

Contoh :

<h2>Fighting Morning</h2>

<p>

A new sun, a fresh day, acool greeting asking you to forget all your worries, sorrows, or tears for someone who wants to see you happy

</p>

<p>

Wake up every morning with the thought that something wonderful is about to happen. good morning.

</div>

Hasil :

17) Classes, Elemen html class membuat kemungkinan untuk mendefinisikan style CSS untuk class-class dari elemen-elemen.

Contoh :

<!DOCTYPE html>

<html>

<head>

<style>

.cities {

background-color:blue;

color:white;

margin:50px;

padding:40px0px;

}

</style>

</head>

<body>

<h2>Fighting Morning</h2>

<p>

A new sun, a fresh day, acool greeting asking you to forget all your worries, sorrows, or tears for someone who wants to see you happy

</p>

</div>

</body>

</html>

hasil :

18) Layout, Website seringkali menunjukkan konten dalam kolom-kolom yang banyak (seperti majalah dan koran). Dalam layout, elemen <div> digunakan sebagai tool layout, karena mudah diposisikan dengan CSS. Elemen <table> tidak ddesain untuk tool layout, karena tujuan dari elemen <table> untuk menunjukkan data tabular.

Contoh :

<body>

<h1>Healty Life</h1>

</div>

Fighting<br>

Smile<br>

posthinksthink<br>

</div>

<h1>Fighting Morning</h1>

<p>

A new sun, a fresh day, a cool greeting asking you to forget all your worries, sorrows, or tears for someone who wants to see you happy

</p>

<p>

Wake up every morning with the thought that something wonderful is about to happen. good morning.

</p>

</div>

</div>

</body>

Hasil :

19) Responsive,

<!DOCTYPE html>

<head>

<style>

.city {

float: left;

margin: 5px;

padding: 15px;

width: 300px;

height: 300px;

border: 1px solid black;

}

</style>

</head>

<body>

<h1>W3Schools Demo</h1>

<h2>Resize this responsive page!</h2>

<br>

<p>A new sun, a fresh day, acool greeting asking you to forget all your worries, sorrows, or tears for someone who wants to see you happy.</p>

</div>

<p>Wake up every morning with the thought that something wonderful is about to happen. good morning.</p>

</div>

</body>

</html>

20) Iframe, Iframe digunakan untuk menunjukkan sebuah halaman web dalam halaman web.

Contoh :

Hasil :

21) Color Names, Dalam html color name terdapat 140 nama warna yang didukung oleh semua browser. 140 nama warna tersebut didefinisikan dalam spesifikasi warna HTML5 dan CSS3. 17 warna dari spesifikasi HTML dan 124 warna dari spesifikasi CSS.

Hanya mengklik salah satu fungsi dalam kolom dibawah ini. Kita dapat mengetahui semua

warna dalam HTML dan CSS.

Hasil :

22) Color Values, warna didefinisikan menggunakan notasi hexadecimal (hex) untuk niali merah, hijau dan biru (RGB). Nilai paling rendah untuk tingkat sumber kecerahan adalah 0 (hex 00). Nilai paling tinggi adalah 255 (hex FF). Nilai Hex ditulis # dan diikuti dengan tiga atau 6 karakter hex.

Notasi tiga digit (#rgb) secara otomatis diubah ke enam digit (#rrggbb) :

23) Color Shades, Warna gray (Shades of gray) ditunjukkan menggunakan jumlah yang sama dari kekuatan untuk semua sumber kecerahan.

Table :

24) JavaScript, JavaScript membuat halaman HTML lebih dinamis dan interaktif.

Tag <script> mendefinisikan script client-side.

Tag <noscript> mendefinisikan konten alternative untuk pengguna ynag tidak mendukung script client-side.

25) Head Elements, Elemen <head> adalah sebuah wadah untuk meta data (data tentang data). Meta data adalah data tentang dokumen html.Secara khusus meta data mendefinisikan judul dokumen, style, link, script, dan informasi meta lainnya.

(Omitting <html> and <body>)

Contoh :

<!DOCTYPE html>

<head>

<title>Page Title</title>

</head>

<h1>Fighting Morning</h1>

<p>A new sun, a fresh day, acool greeting asking you to forget all your worries, sorrows, or tears for someone who wants to see you happy.</p>

Hasil :

26) Entities, Beberapa karakter disediakan dalam HTML. Jika kita menggunakan tanda kurang dari (<) atau lebih dari (>) dalam teks kita, browser mungkin mencampurnya denga tag-tag. Karakter entities digunakan untuk menunjukkan karakter dalam HTML.

Contoh :

27) Symbols, Untuk menambahkan beberapa simboldalam sebuah halaman html, kita bisa menggunakan nama entity html. Jika nama entity tersebut tidak keluar, kita bisa menggunakan nomor entity, referensi decimal (atau hexadecimal).

Contoh :

<p>I will display €</p>

<p>I will display ♥</p>

<p>I will display Δ</p>

Hasil :

28) Charset, Charset (Character set) mendefinisikan 127 karakter alfanumerik yang berbeda yang bisa digunakan dalam internet. Charset didukung oleng nomor 0-9, huruf bahasa inggris A-Z, dan beberapa karakter special seperti ! $ + - ( ) @ < > .

29) URL Encode, URL Encode memasukkan karakter dalam format yang bisa ditransmisikan di atas internet. URL Encode hanya bisa dikirim di atas internet menggunakan SCII Character Set.

Contoh ASCII Encoding :

AlfiBlog

Senin, 21 Maret 2016

HTML TUTORIAL

Tidak ada komentar:

Posting Komentar