basic websiteHTMLkomputermodifikasi websitewonosobo

konsep dasar html

belajar konsep dasar html wonosobo

konsep dasar html

inget bgt dulu saat pertama kali bejar koding, mumet campur aduk ra karuan karena penuh dengan tulisan yg sama sekali tidak saya mengerti. banyak simbol-simbol aneh yang sangat tidak enak untuk dibaca.

ternyata dulu itu adalah tulisan bahasa pemrograman yang biasa kita sebut dengan coding. berusaha mengenal konsep dasar html inilah yg bikin saya pusing namun akhirnya suka juga setelah sedikit-sedikit belajar dan berusaha untuk memahaminya.

konsep dasar html

berikut adalah sedikit catatan tentang cara mengenal konsep dasar html, yuk simak sambil belajar bersama.. ^_^

<! DOCTYPE html>     => type file

<html>      => jenis file

<head>      =>header, biasa digunakan untuk tema atau judul utama pada halaman web

<title> text </title>  => isi header pada tulisan pada halaman

</head>  =>penyelesaian header

<body>  =>bagian kedua dari html, biasa disebut sub judul pada tiap halaman

<h1> text </h1> header 1 dst untuk membuat sebanyak header sub pada halaman

<p> text </p>  => isi paragraf

</body>  => penyelesaian badan halaman

</html>  => penyelesaian halaman

 

1. header for tema

penambahan header pada tiap halaman bisa dilakukan di bagian manapun. penambahan header <h> ataupun paragraf pada tiap halaman dilakukan sesudah <body> text </body>

contoh penambahan header <h1> dan paragraf <p> pada text

<body>

<h1> text </text>

<p1> text < /p1>

<h2> text </h2>

<p2> text </p2>

silakan tambahkan header 1,2,3 dst dan paragraf 1,2,3dst sebanyak apapun yg dibutuhkan dalam sebuah artikel

2. insert elemen

pada paragraf <p> anda bisa menggunakan break <br> ntuk tiap paragraf ataupun tulisan dimanapun lokasinya.

contoh pengunaan elemen:

<h> text <br> text </h>

<p> text text <br> text <br> text </p>

biasanya penambahan break <br> ini digunakan untuk merubah style pada tulisan.

3. insert atribut

memasukan atribut biasanya berbentuk link ataupun image pada tiap tulisan.

atribut ini digunakan untuk menuntun anda kepada sebuah link atau gambar yg sudah disetting sesuai link atau image yg sudah ditambahkan dalam atribut tersebut.

contoh:

<h><a href=”link”>text</h>

<p><img scr=”link image”>text</p>

ini bisa anda tempatkan dimanapun sesuka anda, karena  hanya akan mempengaruhi sebagian text yg diberi atribut saja.

4. heading to heading

ini merupakan penentuan untuk melihat seberapa penting dan tidak penting nya heading dari tiap halaman.

urutan heading dari yg paling penting sampai tidak penting.

<h1> text <h1>   =>urutan paling penting

<h2> text <h2>  => urutan penting k2

<h3> text <h3>  =>urutan penting k3

urutan numb kecil merupakan heading paling penting dan yg mempunyai numb besar merupakan header yg tidak penting.

5. paragraf

kode paragraf <p> merupakan isi paragraf dalam tiap halaman.

contoh:

<p> text </p>  => paragraf pertama

<p1> text <p1> paragraf kedua dst

6. style

the art of coding, ini yg sering dimainkan oleh para codingers kita. masukan code style=”style:style;”

contoh style:

  1. warna:  <span style=”color:red;”>text</span>
  2. background <span style=”background-color:blue;”>text</span>
  3. font: <p style=”font-times:verdana;”>text</p>        ==>times jenis tulisan
    <p style=”font-size:300%;”>text</p>        ==>dll  size untuk  style ukuran, 300% utk besaranya
  4. posisi <h style=”text-align:center;”>text</h>     ==>align jenis tulisan, center adalah posisi
    <h style=”text-align:left;”>text</h> dll

7. format tulisan

code ini digunakan untuk memformat tulisan pada halaman

<b> text tebal </b>

<strong> kuat/penting</strong>

<i> miring</i>

<em> ditekankan</em>

<mark> ditandai </mark>

<small> kecil</small>

<del> hapus/ delete</del>

<ins> insert/masuk</ins>

<sub> subscript</sub>

<sup> super script</sup>

semua fomat ini bisa dmasukan dimanapun anda inginkan.

8. advance format

<a> kutipan atau tanda petik</a>

<blockquote> quote </blockquote>

<lite> adress</lite>

<bdo> tulisan terbalik</bdo>

9. advance color

<span style=”color:red”>text</span>   =>warna hanya pada kata yg di insert text

<span style=”background-color:red;”>text</span> background pada semua tulisan tau text saja

<span style=”border:2px solid red:”>text </span> => bingkai ukuran dan warna pada tulisan

10. advance link

_blank (tab baru)          <span><a href=”link” target=”_blank”>text</a></span>

_self (default) masih di tab yang sama

_parent (kerangka induk)

img scr=”link” (utk foto)        <span><a href=”alamat foto” targert =”_blank”>text</a></span>

itulah sedikit catatan agaimana cara mengenal konsep dasar html.

JANGAN LUPA SELALU KUNJUNGI WONOSOBO.ORG UNTUK INFO UPDATE DAN SELALU BELAJAR BERSAMA TENTANG BANYAK HAL.

daftar ustaka: konsep dasar html

Tags

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close