Tag: HTML

  • Apa Kepanjangan URL?

    Apa Kepanjangan URL?

    Secara sederhana URL adalah singkatan dari Uniform Resource Locator. Pada awalnya, Kepanjangan URL adalah Universal Resource Locator lalu selanjutnya diganti seiring dengan perkembangan Protokol yang digunakan pada jaringan Global. Misalnya saja Populernya Protocol Hypertext dalam bentuk HTTP dan HTTPs.

    Defenisi Teknis URL

    URL adalah sebuah informasi yang digunakna oleh Browser untuk mengakses data atau file yang berada dalam jaringan, dalam hal ini kita umumkan saja untuk jaringan Internet. URL adalah alamat lengkap dari sebuah file atau laman yang secara spesifik sedangkan Domain hanyalah alamat yang umumnya digunakan untuk mengakses file Index.php dari sebuah website.

    URL dituliskan dengan dengan code lengkap yang teridiri dari karaketr dan simbil pemisah universal seperti (/) untuk menandakan direktori. Sumber Utama boleh menggunakan Top Level Domain (TLD) yang lebih dikenal sebagai nama Webiste namun bisa juga menggunakan IP Adress dari website yang dituju. Hal ini bergantung dari settingan masing-masing website.

    Misalnya Laman tentang kami di webiste Matamu.NET dapat diakses melalui dua cara yakni

    1. https://matamu.net/about-us
    2. 42.32.111.248/about-us

    Kita bisa analogikan URL dan Alamat Lengkap.

    Domianhttps://matamu.netNama Kota
    URLhttp://matamu.net/wp-content/uploads/2022/09/shortcut-di-microsoft-word.jpgAlamat Lengkap mulai dari Provinisi, Kota, Nama Jalan dan Nomor
    IP Adress42.32.111.248Koordinat Peta, misalnya 115,32,22:9,22,11

    URL pertama kali diperkenalkan oleh Tim Barens dan Lee bersamaan rancangan mereka mengenai sistem Hypertext Markup Languange atau HTML. URL ini memudahkan orang lain untuk menemukan file yang hendak di akses melalai protocol WWW. Saat ini ada banyak Protocol yang digunakan selain WWW seperti W2P, HTTP, HTTPs dan sejenisnya.

    Fungsi URL

    URL memiliki fungsi utama mengidentifikasi lokasi pasti dari sebuah file. Selain itu, manfaat dari URL adalah :

    1. Unifikasi nama file pada saat upload file
    2. Memudahkan user mengakses file, Dokumen dan laman yang akan di kunjungi
    3. Memudahkan proses identifikasi file dan pengelompokkan file yang diupload melalui CMS

    Parameter URL

    Parameter URL adalah alamat lengkap dari sebuah file, dokumen ataupun laman dari sebuah website beserta jenis dan meta tag yang terletak pada URL tersebut. Meta Tag ini memberikan informasi kepada Search Engine mengenai bagaimana URL itu dirayapi (Crawling).

    Adapun beberapa jenis Parameter URL

    1. Do Follow – Diindeks dan dianggap berkaitan erat dengan artikel
    2. No Follow – Diindeks namun dianggap tidak berkaitan
    3. No Index – Tidak diindeks oleh mesin pencari
    4. Index – Diindek oleh mesin pencari
    5. Target blank (Open New Tab) – Membuka link pad alaman baru
    6. Anchor Text – Link disajikan dalam bentuk Hyperlink pada Kata atau Frasa Kata
    7. Naked Link – Link disajikan secara langsung
  • Perbedaan HTML dengan HTML5

    Perbedaan HTML dengan HTML5

    Matamu.NET – HTML merupakan singkatan dari Hyper-Text Markup Language, umumnya halaman web ditulis dengan menggunakan variasi HTML. Dengan menggunakan HTML, pembuat website dapat memastikan bahwa text, gambar dan multimedia dapat menyatu dengan elemen lainnya ketika dijalankan di browser.

    Saat ini, perkembangan HTML sudah berada pada versi terbaru yaitu HTML5. Versi ini memiliki pembaharuan fitur-fitur dari HTML lama. Fitur baru selalu update dan ditambahkan ke dalam HTML5 pada setiap rilisnya.

    Berikut Matamu.NET akan mengulas apa saja perbedaan antara HTML dan HTML5.

    Perbedaan HTML dengan HTML5

    Salah satu frtur Teknologi lnformasi adalah pembaruan I perubahan berkala yang tidak dapat  dihindari. Tidak ada bahasa  yang tidak  ditingkatkan atau versi  baru. Juga di HTML. tidak ada pengecualian. HTML5 pertama kali didesain ulang untuk menyempurnakan  pengalaman  Internet  bagi   pengembang  dan   pengguna. Seperti disebutkan di  atas,  keuntungan  terbesar  dari  HTML5  dibandingkan pendahulunya adalah memiliki tingkat audio dan video yang lebih  tinggi yang tidak disertakan dalam versi HTML di atas. Perbedaan lainnya. versi HTML tidak mendukung JavaScript untuk berjalan dalam browser sedangkan HTML5 mengizinkan sepenuhnya JavaScript dapat berjalan di mode background

    Ada  banyak  elemen  baru yang diperkenalkan dalam  HTML.  Beberapa  yang paling penting adalah: summary. time, aside, audio, command,  data,  datalist, details, embed, wbr. figcaption, figure, footer. header, article. hgroup. bdi, canvas, keygen, mark, meter. nav, output. progress, rp, rt. ruby,  section,  source,  track, video.

    Baca Juga Mengenal VGA NVIDIA serta kelebihan dan kekurangannya

    Manfaat HTML5 Bagi Para Developer

    HTML5 menginginkan para developer mendapatkan lebih  banyak fleksibilitas dalam mendesain website dan karena itu justru banyak perkembangan yang signifikan dan layak dibanggakan:

    1. Penanganan error yang persisten

    Sebagian besar  browser web  memifiki kemampuan untuk  menafsirkan HTML /format standar.  Namun  hingga beberapa dekade  lalu, tidak  ada  solusi efektif untuk masalah ini. lni berarti bahwa pengembang browser dapat menjalankan tes HTML  di browser  yang  berbeda untuk  meningkatkan koreksi kesalahan  atau penanganan error oleh reverse engineering.

    Algoritma parsing yang  lebih  berkembang yang digunakan di HTML5 memiliki banyak manfaat. Survey membuktikan  bahwa   sekitar  90% website rentan terhadap kode yang salah. Sehingga,  penanganan error yang ada bisa membantu developer dalam pengerjaan.

    2. Semantik yang lebih baik

    Untuk meluaskan kode, tujuan adanya pengembangan juga untuk kontribusi semantik mulai berbagai element yang ada. Section,  article, nav  dan  header dengan sejumlah element baru yang  kini  beralih ke element div  dan ini menjadi trik pembetulan error yang lebih mudah

    3. Dukungan lebih lanjut untuk fitur web application

    Tujuan pokok HTML adalah membuat browser dapat berguna sebagai platform aplikasi. Kebutuhan website yang kini semakin tinggi membuat HTML5 memberikan para developer ruang untuk dapat mengendalikan secara luas seperti mengatur performa website

    4. Website responsive di mobile menjadi lebih mudah

    Saat ini, HTML5 memberikan support untuk perangkat bergerak dengan jauh lebih sederhana. Sehingga halaman web bisa berjalan  baik dan menyesuaikan dengan perangkat akses yang digunakan seperti hp, tablet maupun smartphone.

    5. Elemen canvas

    Elemen  canvas  merupakan salah  satu  fitur HTML5  yang paling banyak diperbincangkan oleh web developer. Dengan menggunakan elemen canvas, developer dapat menggambar menggunakan warnaa dan bentuk yang berbeda dengan menggunakan script.

    6. Elemen menu

    Elemen menu merupakan spesifikasi elemen yang interaktif yang   jarang digunakan atau diperbincangkan oleh web developer. Meski   begitu, elemen menu ini layak digunakan untuk meningkatkan  interaksi pada web, mobile dan desktop agar lebih sederhana.

    7. Atribut data yang mudah di kustom

    Sangat memungkinkan, jika kamu ingin menambahkan atribut khusus sebelum HTML5, tetapi hal tersebut berisiko; misalnya, di HTML4, atribut custom kadang-kadang berhenti me-render page menggunakan baik dan ini sering kali menjadi penyebab dokumen menjadi salah.

    8. Cookies

    Sebelum ada HTML5, web developer harus memanfaatkan cookies jika ingin menyimpan data variabel. HTML5 menyediakan fitur penting untuk mendukung penyimpanan lokal (local storage). Object local storage merupakan bagian global window namespace dan bisa diakses darimanapun yang diinginkan saat menggunakan script.

    Sekian pembahasan mengenai HTML kali ini, semoga bermanfaat.

  • Belajar HTML – Memasukkan Image dengan Tag IMG

    Belajar HTML – Memasukkan Image dengan Tag IMG

    Matamu.NET – Foto atau Image dapat digunakan untuk meningkatkan tampilan dari sebuah laman HTML. Gambar bisa dimasukkan ke dalam document HTML dengan tag <img> dengan syntax sebagi berikut :

    <img src="url gambar" alt="Tittle Gambar">

    Tag ini tidak perlu ditutup dengan penutup </img> sebagaimana lazimnya penggunaan tag pada HTML.

    src adalah alamat dari gambar yang disimpan. Alamat gambar bisa disimpan dalam folder lokal dan dipanggil dengan syntax :

    <img src="C://my document/picture/nama file gambar.jpg" alt="Tittle Gambar">

    Jika ditaruh dalam sebuah server atau website maka syntaxnya sebagai berikut :

    <img src="https://matamu.net/wp-content/uploads/2021/04/Membuat-website-Fotografi-keren-murah-dan-gratis.jpg" alt="Tittle Gambar">
    Contoh tampilan Image dengan tag igm di HTML

    A. Ukuran Tampilan Gambar

    File foto / image di komputer disimpan dalam satu px atau Pixel, namun kita menampilkan gambar di HTML berbeda dengan ukuran aslinya. Tujuannya agar lebih cantik atau sesuai dengan kebutuhan kita.

    Untuk mengganti ukuran gambar kita tambahkan atributte style pada gambar.

    <img src="https://matamu.net/wp-content/uploads/2021/04/Membuat-website-Fotografi-keren-murah-dan-gratis.jpg" alt="Tittle Gambar" style="width:400px; height:200px;">

    Hasilnya gambar akan ditampilan dengan ukuran fix yakni lebar 400 px dan tinggi 200 px. ukuran gambar tidak sesuai dengan propostional gambar asli, maka gambar akan ditampilkan stretch (tertarik)

    Tampilan gambar dengan tag HTML img dan value fix satuan px

    B. Floating

    Floating digunakan untuk membuat penampilan lebih menarik di mana gambar akan berada di suatu sisi dari paragraf, misalnya sisi kiri, tengah atau kakan.

    Contoh penggunaan tag IMG dengan style floating
    <h2>Image Size</h2>

<p> <img src="img_girl.jpg" alt="Girl in a jacket" style="float:left;width:66px;height:88px;">
Tulis paragrafinya disini... </p>

    Perhatikan bahwa tag <img> adalah bagian dari tag <p>.

    C. Background dengan Image

    Kita bisa menjadikan sebuah gambar menjadi background laman. Caranya dengan meletakkan informasi tersebut dalam CSS dari laman dengan syntax berikut :

    <style>
    body {
      background-image: url('example_img_girl.jpg');
    }
    </style>

    Secara dafault, HTML akan memasukkan gambar sebagai background, jika gambar berukuran kecil, maka gambar akan diulang (repeat) sampai laman terpenuhi, seperti pada gambar di bawah ini!

    Default tag IMG akan mengulang gambar jika ukurannya terlalu kecil

    Untuk membuat gambar tidak berulang kita berikat attribute no.repeat. Agar fit dengan ukuran layar kita tambahkan attributte attachment fix dengan syntax seperti berikut :

    <style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

    hasilnya akan terliaht seperti gambar di bawah :

    Contoh penggunaan tag IMG di gambar
  • Belajar HTML – Color Value dan Spesifikasi Warna

    Belajar HTML – Color Value dan Spesifikasi Warna

    Matamu.NET – Warna pada HTML akan membuat laman website kamu semakin menarik dan meningkatkan user experience. Warna bisa diberikan pada bagian background laman, elemen dan font.

    Pewarnaan dalam HTML dapat dilakukan dengan format RGB, HEX, HSL, RGBA, dan HSLA.

    A. Color Name

    Code HTML untuk Value color paling dasar adalah nama warna itu sendiri dalam Bahasa Inggris. Misalnya warna merah (255,0,0) itu bisa dipanggil dengan Red, sedangkan biru (0,0,255) bisa dipanggil dengan Blue.

    Contoh penggunaan warna dasar yang dikenali oleh Library HTML sebagai berikut :

    Contoh Penggunaan Warna dengan Code HTML

    Jika ingin mencoba pada, silahkan gunakan sintax berikut : 

    <h1 style="background-color:Tomato; color:white; text-align:center;">Tomato</h1>

    Perhatikan kata Tomato, Violet, LigthGray, StateBlue, Gray, MediumSeaGreen, Orange, dan DodgerBlue. Kata tersebut adalah Color value yang dikenal oleh HTML. Paling tidak ada 140 nama warna yang dikenal oleh HTML. Untuk lebih detailnya silahkan cek w3.org atau di w3School.com

    Contoh Code Warna HTML value dengan NAma

    B. Color Background

    Color Background dapat diberikan ke dalam elemen dan laman.

    1. Text Color Background

    Untuk memberikan latar belakang warna pada tulisan dapat dilakukan melalui pemberian attribute seperti background-color=value. Contoh Syntax seperti berikut :

    <h1 style="background-color:DodgerBlue;">Penggunan Warna</h1>

<p style="background-color:Tomato;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum ipsum quis justo consequat, sit amet ultricies felis luctus. Sed mattis eros nulla, vel ullamcorper nulla tempor non. Suspendisse iaculis consequat viverra. </p>

    Hasilnya sebagai berikut :

    Penggunaan Warna

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum ipsum quis justo consequat, sit amet ultricies felis luctus. Sed mattis eros nulla, vel ullamcorper nulla tempor non. Suspendisse iaculis consequat viverra. 

    2. Text Color

    Pemberian warna pada huruf di text diberikan melalui attribute style dengan syntax sebagai berikut :

    <p style="color:red;">Hello World</p>
<p style="color:green;">Lorem ipsum...</p>
<p style="color:blue;">Ut wisi enim...</p>

    Hasilnya sebagai berikut :

    Hello Word
    Lorem Ipsum…
    Ut wisi enim

    C. Color Value

    Seperti yang telah dijelaskan sebelumnya jika Warna dalam HTML bisa ditulis dalam format RGB, HEX, HSL, RGBA, dan HSLA. Untuk valuenya dapat dilakukan dengan syntax sebagi berikut :

    1. RGB syntax : rgb(255, 99, 71)
    2. HEX syntax : #ff6347
    3. HSL syntax : hsl(9, 100%, 64%)

    1. HTML RGB

    HTML RGB itu mengenali warna berdasarkan nilai dari masing-masing warna Red, Green, dan Blue. Masing-masing warna dapat dibagi ke dalam 255 warna, 0 berarti tidak ada warna dan 255 berarti warna merah penuh.

    Misalkan kita menuliskan value sebagai berikut : 

    color : rgb (255,0,0)

    Hal ini menunjukkan warna merah 255, green 0 dan blue 0. Sehingga warna yang muncul adalah Merah. Jika kita mencapurkan warna Red dan Green kita akan mendapatkan warna Yellow. Ingat!!! yang dicampurkan ini adalah panjang gelombangnya bukan berdasarkan pandangan seni (zat kiminya)

    Sintax untuk mencampurkan warna Red dan Green ditulis dengan :

    color : rgb (255,255,0)

    Warna hitam akan muncul jika tidak ada sama sekali warna disana, dan putih akan muncul jika semua warna dimunculkan :

    1. black = rgb (0,0,0)
    2. white = rgb (255,255,255)

    Karena masing-masing warna bisa menampilakn 255 level, maka combinasi warna yang bisa ditampilkan melalui HTML adalah :

    256 x 256 x 256 = 16.777.216 warna.

    Lumayan banyak warna bukan, 16,7 juta warna tentu saja tidak mungkin diberi nama satu-satu persatu. Hal ini yang membuat code RGD jadi penting dalam pewarnaan.

    2. HTML HEX

    Hex adalah singkatan dari Hexadesimal yang memberikan warna berdasarkan indek 6 digit desimal. Syntaxnya dimulai dari # lalu diikuti 6 angka.

    #53,23,21

    Secara umum indeks hex dapat diterjemahkan sebagai berikut #RRGGBB, dimana RR mewakili Red, GG mewakili Blue, dan BB mewakili Blue.

    Misalkan #430000, maka code hex ini menunjukkan warna merah 43. Untuk warna dasar penuh dituliskan dengan code ff. Misalkan code #00ff00, ini menunjukkan warna Green 255 di RGB karena Red dan Blue-nya kosong.

  • Belajar HTML – Formatting Pada Text

    Belajar HTML – Formatting Pada Text

    Matamu.NET – Pembuatan paragraf (text) di HTML hampir sama aturan membuat paragraf dalam penulisan buku. Kita membutuhkan format text yang berbeda untuk menunjukkan tanda-tanda dalam tulisan.

    Misalkan untuk menulis istilah yang masih dalam bahasa asing, maka istilah tersebut ditulis miring. Tulisan miring ini yang disebut sebagai format text italic.

    Seperti text dibawah ini :

    Ini adalah penulisan dengan text polos dimana semua huruf dalam paragraf ini dibuat seragam dan biasa saja. Hal ini tentu saja membatasi kerja kita dengan HTML.Ini adalah text dengan format yang lebih banyak yang dirancang sesuai kebutuhan seperti italic, bold, dan underline. Tujuannya agar lebih informatif

    Formating text di HTML dilakukan dengan menggunakan fasilitas tag format. Syntax-nya sebagai berikut : <tagformat> kata kata </tagformat>

    Tag Format TextHasil yang ditunjukkan
    <b>bold</b>Bold
    <i>italic</i>italic
    <u>underline</u>underline
    <strong>Strong</strong>Strong
    A<sup>Supscripe</sup>ASupscripe
    A<sub>Subscripe</sub>ASubscripe
    <del>Tercoret</del>Tercoret
    <mark>Mark stabilo</mark>Mark stabilo
    <pre>praformat seperti code</pre>
    praformat seperti code

    Sintaks untuk penggunaan Format Text lebih dari satu dilakukan dengan aturan nested tapi tidak memperdulikan order-nya seperti :

    <b><i><u>bold, italic dan uderline</u></i></b>bold, italic dan uderline
    <u><b><i>bold, italic dan uderline</i></b></u>bold, italic dan uderline

    Catatan :

    Dalam beberapa kasus, Format text mungkin saja menunjukkan hal yang sama dari segi visualisasi seperti

    Tag Format TextHasil yang ditunjukkan
    <b>bold</b>Bold
    <strong>Strong</strong>Strong
    <i>Italic</i>italic
    <em>empashis</em>empashis

    Meskipun secara visual beda, search enggine yang membaca struktur document HTML dari setiap postingan akan mengenali perbedaan dari masing-masing text formatting.

  • Belajar HTML – Membuat Jendela dengan Tag Iframe

    Belajar HTML – Membuat Jendela dengan Tag Iframe

    Matamu.NET – Tag Iframe HTML digunakan untuk memasukkan laman website ke dalam sebuah laman website. Laman website tersebut akan ditampilkan dalam bentuk jendela yang melekat pada laman. Sumbernya bisa berasal dari laman website sendiri maupun laman website lain.

    A. Syntax Iframe HTML

    Inline frame ditulis dengan tag <iframe>. Syntax Ifram ditulis dengan urutan sebagai berikut :

    <iframe src="url" title="description">

    Secara default Elemen HTML ini menampilkan laman dari link yang menjadi target. Kita dapat mengatur ukuran box Iframe dengan attribute width (lebar) dan height (tinggi).

    Contoh Syntax dari Iframe dengan attribute Height dan Witdh sebagai berikut :

    <iframe src="url" height="200" width="300" title="Iframe Example"></iframe>

    atau syntax bisa dimasukkan ke dalam style dengan syntax sebagai berikut :

    <iframe src="url" style="height:200px; width:300px;" title="Iframe Example"></iframe>

    Catata : Karena Style lebih tinggi dari CSS, maka menulsikan ukuran box ifram dengan style akan mencegah box tersebut dienterupsi oleh CSS. Jika langusng ditulis dalam bentuk attributte, maka attribute tersebut akan dienterupsi css.

    Responsive Size

    Value dari attribute height dan width di Iframe bisa dimasukkan ke dalam bentuk fix yakni px atau responsive. Responsive itu berarti ukurannya mengikuti ukuran device yang digunakan dengan value %. 

    <iframe src="url" style="height:200px; width:100%;" title="Iframe Example"></iframe>

    Catatan :

    Iframe ini banyak digunakan untuk memasukkan fitur yang tidak bisa disediakan pada pada website anda seperti memasukkan URL video dari Youtube.

    Membuat Source pemutar Video cukup berat apalagi pengguna VPS speksifikasi rendah. Jadi kita gunakan saja YouTube sebagai tempat penyimpanan dan pemutar Video, lalu masukkan Video tersebut dengan Tag Iframe.

  • Belajar HTML – Cara Membuat Link dan Hyperlink

    Belajar HTML – Cara Membuat Link dan Hyperlink

    Matamu.NET – Link dalam HTML disebut sebagai Hyperlink yakni fasilitas yang bisa membuat kamu berpindah ke laman lain setelah mengklik text yang sudah berisi link.

    Tujuannya tentu saja untuk memudahkan pembaca mendapatkan ifnormasi lebih yang berkaitan dengan artikel yang mereka baca. Selain itu pada beberapa kasus, Link bisa dimanfaatkan untu menghubungkan satu lama dengan laman lain.

    Syntaks HyperLink

    Link di HTML diset dengan tag <a> dengan bentuk sintaks : <a href=”url”>link text</a>.

    Contoh penulisan link about us di situs matamu.net dilakukan dengan syntax berikut :

    <a href="https://matamu.net/about-us>about us</a>

    Attribute Target dari Link

    Secara default sebuah link akan membuka laman target yang dituju. Misalkan pada kasu about us di atas, ketika di klik akan ke laman About Us dari matamu.Net.

    Link dapada diisi dengan 4 jenis atributte :

    • _self – Set dafault dimana laman akan dibuka di Tab yang sama ketika diklik.
    • _blank – Laman Target akan dibuka di tab atau jendela baru
    • _parent – Laman target akan terbuka di frame induk
    • _top – laman target akan di buka secara menyeluruh di jendela.

    Contoh penggunaan Atribute :

    <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

    Absolute dan Relative Link

    Absolut link adalah link dengan tipikal yang menuliskan seluruh alamat yang dituju lengkpa dengan protocol linknya. Seperti https://ahmaddahlan.Net/tentang-saya. Tipe link bisa digunakan baik keluar website maupun ke dalam website itu sendiri.

    Relative link hanya dapat digunakan untuk laman atau file target yang ada di dalam file blok server website yang sama.

    Conoth penggunaannya 

    <h4>Absolute URLs</h4>
<p><a href="https://ahmaddahlan.Net/tentang-saya">Tentang Saya</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h4>Relative URLs</h4>
<p><a href="/tag/html">Artikel HTML</a></p>

    Hasil nya jika dijalankan di website seperti berikut ini

    Absolute URLs

    Tentang saya

    Googel

    Relative URLs

    Artikel HTML

    Link dengan Target Gambar

    Link juga digunakan untuk menampilkan gambar dalam website, baik sumber dari internal maupun eksternal wesbite. Hanya saja dengan tag <img>.

    Contoh Penggunannya sebagai berikut :

    <a href="default.asp">
<img src="https://matamu.net/wp-content/uploads/2021/04/Pengertian-Exposure-pada-Foto.jpg" alt="Pemandangan" style="width:100%;">
</a>
    Contoh Penggunaan Link di HTML
  • Belajar HTML – Attribute Style

    Belajar HTML – Attribute Style

    Matamu.NET – Attribute Style dalam HTML digunakan untuk memberikan tampilan yang lebih baik dari sekedar Plain Text dari sebuah element. Atribute itu bisa dalam bentuk Warna, Ukuran Huruf, Jenis Huruf, dan Sejenisnnya.

    Tutorial Attribute Style HTML

    HTML Style Attribute

    Style dari HTML diset dalam Elemen sebagai Attribute. Syntaksnya sebagai berikut :

    <tagName Style="Properties1:Value; Properties2:Value;">...</tagName>

    Property seperti color, font-family, font-size, text-align, dan seterusnya, sedangkan Value adalah nilai dari masing-masing properti seperti pt, px, %, red, blue. Value harus sesuai dengan propertiesnya.

    Properties dan Value bisa dibaca di artikel CSS.

    Background Color

    Background Color diberikan untuk memberikan warna sebuah elemen atau laman.

    Contoh penggunaan Attribute style untuk warna latar belakang
    <body style="background-color:powderblue;">

<h1>Heading 1</h1>
<p>Disini dituliskan sejumlah kata yang dijadikan sebagai Paragraf</p>
</body>

    Background Style bisa digunakan dengan warna yang berbeda untuk masing-masing elemen. Contoh syntax nya seperti berikut :

    <body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>

    Text Color

    Text Color adalah Attribute style yang digunakna untuk memberikan warna pada text. Contoh pengunaan sebagai berikut :

    Contoh Menggunakan HTML Attribute Style untuk warna Text

    Value dari warna dasar bisa ditulis dalam bahasa inggris seperti merah, biru, kuni dan sejenisnya namun untuk wanra yang lebih ditail bisa menggunakan software seperti photoshoop atau Pick Color untuk mengetahui code HTML.

    Contoh Mengetahui Warna Pada Code HTML

    Misalkan saya memilih satu titik di Photoshoop dengan pcik Color, lalu saya buka library Photoshop maka disana ada kotak yang dimulai dengan # lalu disusul code. Ini ada Code HTML untuk value warna yang dipilih. Cara menulisnya #385f86.

    Jenis Huruf dan Ukuran Huruf

    Jenis huruf dituliskan font-family sedangkan untuk ukuran huruf dituliskan dalam bentuk font-size. Contoh penggunaan sebagai berikut :

    Contoh Penggunaan Style FOnt-Size dan font-family jenis huruf

    berikut ini contoh penulisan syntaks HTMLNya

    <p style=" font-family:verdana; font-size:14pt;">Ini adalah tulisan yang ditulis dengan jenis Huruf Verdana dengan ukuran 16 pt</p>

<p style="font-family:courier; font-size:16pt;">Sedangkan kalimat ini ditulis dengan jenis huruf Courier</p>

    untuk mengetahui jenis huruf yang dikenali Library HTML bisa di cek di google font sedangkan ukurannya, bisa dituliskan dalam value pt, px, em, rm, %

  • Belajar HTML – Cascading Style Sheet (CSS)

    Belajar HTML – Cascading Style Sheet (CSS)

    Matamu.NET – CSS adalah singkatan dari Cascading Style Sheet yang berfungsi untuk memberikan sebuat set up Style dari sebuah website. CSS ini membuat pekerjaan mengatur Layout website jadi lebih ringat dengan sedikit script dan dapat digunakan di banyak laman dalam website.

    A. Defenisi CSS

    CSS adalah set up yang berisi style yang digunakan untuk menformat elemen atau page dari website. Di CSS ini kita bisa mengatur dari warna, jenis huruf, ukuran huruf, style text, spasi antar elemen, posisi elemen, warna background, perbedaan tampilan antar device dna set up lain-lian yang berhubungan dengan tampilan.

    Cascading merujuk pada style yang disimpan pada element induk yang selanjutnya diapplikasikan di elemen turunan. Misalkan kita membuat atribut warna biru untuk type text, maka semua jenis huruf yang ada di Heading, Paragraf dan semua jenis huruf yang muncul di Laman.

    B. Penggunaan CSS

    CSS dapat diset dengan 3 cara

    1. Inline CSS
    2. Internal CSS
    3. External CSS

    Cara yang paling banyak digunakan dalam set up CSS adalah tipe External CSS namun dalam tutorial kita akan membahas Inline CSS dan Internal CSS.

    1. Inline CSS

    Inline CSS adalah Ctyle yang diterapkan pada sebuah element dalam bentuk Attribut. Attribute ini ditulis dengan sintaks Style = “…”. Value dari CSS disimpan di …

    Contoh penggunaan Inline CSS sebagai berikut : 

    <h2 style="font-size:13 px; color:red">Menggunakan Inline CSS</h2>
    Cara menggunkan Inline Css di elemen

    2. Internal CSS

    Internal CSS digunakan untuk menentukan Style dari sebuah singgel Page dari sebuah Website. Internal CSS ini didefenisikan pada bagian awal <Head> dari sebuah Laman HTML. Setelah didefenisikan di Head, setiap kali class atau elemen digunakan di laman, maka Style-nya akan mengikuti set up di Head tanpa perlu mengulang di setiap elemen.

    Misalkan kita akan mendefenisikan warna dari Tag Heading dan Paragraf.

    Penggunaan Internal CSS dalam di Head

    3. Atribute dan Value dari CSS

    Berikut ini beberapa jenis Atribusi diserta dengan Valui dan Fungsinya

    SintaksValueFungsi
    colorBlue, Red, #008B*B,…Memberi warna
    font-familysans, sans-serif, verdana,…Menentukan jenis huruf yang ditampilkan
    font-sizept, %, em, rem, pxMenentukan ukuran font yang digunakan
    font-weightbold, normal, strong, 100,Menentukan ukuran font yang digunakan pada paragraf
    borderpx, emMenentukan jarak batas pinggirin dari sebuah elemen layar
    marginpxMargin jarak batas border ke luar dari sebuah elemen
    widthpx, %, autoukuran panjang panjang box
    heightpx, %, ukuran panjang panjang box
    paddingpxMargin jarak batas border ke dalam dari sebuah elemen
  • Belajar HTML – Membuat Heading dan Paragraf

    Belajar HTML – Membuat Heading dan Paragraf

    Matamu.NET – Dalam menyajikan konten yang lebih rapi, HTML menyediakan tag Heading <h> dan Paragraf <p>. Tujuannya agar search enggine bisa membedakan antara judul dan isi dari konten yang ingin diberikan.

    A. Heading

    Heading adalah penanda yang dimulai dengan tag <h> dan ditutup </h>. Heading secara harfiah berfungsi untuk memberikan judul postingan, bukan tittle untuk judul website. Selain dari judul heading juga bisa digunakan untuk menunjukkan sub judul dengan tingkatan heading yang lebih rendah.

    Penulisan Heading dimulai dari <h1> sampai dengan yang terkecil adalah <h6>.

    contoh penggunaan Heading di HTML

    Catatan : Heading memiliki peran penting bagi Search enggine untuk mendeteksi garis besar dari pembahasan yang ditampilkan dipostingan blog. Semakin rapi cara menuliskan heading semakin baik skore SEO dari aspek heading.

    Sebagai Contoh Struktur Penulisan Heading yang SEO Friendly :

    1. H2 A (Topik-Topik yang Dibahas)
      1. H3 A1 (Sub-Topik A1)
      2. H3 A2 (Sub-Topik A2)
    2. H2 B
    3. H2 C
      1. H3 C1 (Sub-topik C1)
        1. H4 C1A (Sub Sub-topik C1A)
        2. H4 C1B (Sub Sub-topik C1B)
      2. H3 C2 (Sub-topik C2

    Menambahkan Style pada heading

    Karena heading merupakan tag dari html, maka heading juga bisa diberikan attribute seperti style. Tujuannya untuk mengubah ukuran misalnya atau merubah warnanya.

    Ukuran Heading dengan menggunakan HTML

    B. Paragraf

    Paragraf pada html selalu ditulis dalam bentuk satu blog, meskipun metode penulisanya bisa banyak misalnya menggunakan tag div, tapi agar lebih mudah dikenal oleh search enggine sebagai content dengan tipe paragraf maka sebaiknya menggunakan tag p.

    Cara membuat tampilan yang keren buat paragraf dengan tag P dan div

    Dalam pembuatan paragraf di html, penulis code tidak akan pernah bisa memastikan tampilan yang akan muncul, karena hal ini bergantung dari jenis perangkat yang digunakan.

    Prinsip pengaturan paragfraf menggunakan prinsip penambahan inline css atau attribusi, namun pada umumnya editor cms sudah menyedikan tombol klik untuk mengubah style paragraf tanpa harus mengedit html.

    Akan sebagai conoth editing style dari paragram sebagai berikut :

    Cara membuat inline ccs pada paragraf

    Catatan : Sekalipun dalam code html, spase tidak dianggap sebagai perintah, namun dalam paragraf, spasi akan ditayangkan, sedangkan enter tidak akan ditayangkan. Cara menampilkan enter bisa dilakukan dengan paragraf baru atau lline break dengan tag <br/>