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.
HTML Style Attribute
Style dari HTML diset dalam Elemen sebagai Attribute. Syntaksnya sebagai berikut :
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.
Background Color diberikan untuk memberikan warna sebuah elemen atau laman.
<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 :
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.
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 :
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, %
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
Inline CSS
Internal CSS
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 …
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.
3. Atribute dan Value dari CSS
Berikut ini beberapa jenis Atribusi diserta dengan Valui dan Fungsinya
Sintaks
Value
Fungsi
color
Blue, Red, #008B*B,…
Memberi warna
font-family
sans, sans-serif, verdana,…
Menentukan jenis huruf yang ditampilkan
font-size
pt, %, em, rem, px
Menentukan ukuran font yang digunakan
font-weight
bold, normal, strong, 100,
Menentukan ukuran font yang digunakan pada paragraf
border
px, em
Menentukan jarak batas pinggirin dari sebuah elemen layar
margin
px
Margin jarak batas border ke luar dari sebuah elemen
width
px, %, auto
ukuran panjang panjang box
height
px, %,
ukuran panjang panjang box
padding
px
Margin jarak batas border ke dalam dari sebuah elemen
Matamu.NET – Exposure adalah jumlah intensitas cahaya atau paparan cahaya yang menerpa sensor kamera selama proses pengambilan foto. Sekalipun waktunya sangat singkat, namun sebuah foto adalah hasil perekaman cahaya yang anda di depan lensa. Mudahnya, Expsoure adalah faktor yang menentukan terang gelap gambar yang dihasilkan.
Pada kamera digital, Exposure dihitung secara otomatis oleh prosesor yang adalam body kamera namun pada kamera analog, exposure dihitung sendiri dengan bantuan lightmeter.
A. Triangel Exposure
Sistem kamera baik manual maupun digital memiliki tigas aspek pencahayaan yang saling berhubungan satu sama lain. Aspek ini selanjutnya disebut sebagai Triangel Exposure. Aspek tersebut adalah:
Sensitifitas Sensor (ISO)
Kecepatan Ranah (Shutter Speed)
Bukaan Lensa (Aperture Valua)
Tiga aspek Exposure ini menentukan jumlah cahaya yang direkam oleh sensor namun membawa efek tambahan (nurturant) pada Efek tersebut adalah Picture Noise, Picture Freezing, dan Depth Of Field. Ketiganya disebut sebagai Segitiga Eksposure (Triangle Exposure).
Exposure
High
Low
ISO Value
Noisy
Clear
Aperture Value
Panjang
Pendek
Shutter-speed Value
Freze Picture
Motion Blur
1. Sensitifitas Sensor
Sensitifitas sensor adalah kuantitas kepekaan sensor terhadap respon cahaya. Hal ini ditandi dengan iso tinggi, misalnya semakin tinggi ISO akan menghasilkan gambar yang terang pada kondisi terang.
Foto Landscape pada Kondisi Low Ligth di Sore Hari
Semakin tinggi nilai sensor semakin tinggi sensitifitas akan tetapi menghasilkan gambar yang lebih noisy. Sensitifitas cahaya diukur dengan satuan ISO yang dibuat dengan satuan STOP.
Semakin canggih sensor sebuah kamera semakin rendah noisy yang dihasilkan pada ISO tinggi, misalkan kita motret dengan Canon 5D mark I pada ISO 800 akan menghasilkan foto yang lebih noisy dibandingkan dengan motret dengan Canon 60 D pada ISO 800.
2. Shutter Speed
Shutter Speed adalah kecepatan ranah terbuka pada saat Sensor menyimpan gambar. Semakin Cepat sensor dibuka semakin sedikit jumlah cahaya yang masuk dan semakin gelap gambar yang dihasikan.
Semakin cepat gambar menyimpan gambar maka akan menghasilkan gambar freeze, jika shutterspeed lambat makan akan menghasilkan motion blur. Tehnik terkadang di manfaatkan untuk mengambil gambar konsep Panning.
Kuantitas kecepatan merekam gambar (Shutterspeed) di nyatakan dalam satu waktu, detik atau menit.
Deret 1 STOP untuk SS : …,1/120′, 1/60′, 1/30′, 1/16′,1/8′,1/4′,1/2′,1′, 2′, 4′. 8′, 16′,…
Deret 1/3 STOP untuk SS : …,1′, 1.33′, 1,6′, 2′, 2.5′, 3′, 4′, 5′, 6′, 8′, 10′, 13′, 16′,…
3. Aperture Value
Aperture Value adalah ukuran besar bukaan diagfragma pada lensa, dimana semakin besar lensa dibuka akan membuat semakin banyak cahaya yang masuk atau gambar yang lebih terang.
Nilai bukaan pada lensa kamera akan berpengaruh tidak hanya pada terang gelapnya gambar tapi juga pada daerah tajam dari foto. Daerah Tajam ini di sebut sebagai Depth of Filed atau DoF.
Selain dari terang dan Gelap. Efek dari nilai Av ini sangat beragam dan tergantung dari lensanya.
Semakin jauh daerah fokus dari lensa semakin panjang DoF
Semakin panjang Focal length lensa akan menghasilkan nilai DoF yang semakin sempit
Jadi misalnya saya memotret dengan lensa 24 mm dengan F/2 akan pada objek berjarak 3 meter di depan lensa akan memiliki DoF yang lebih lebar dibandingkan dengan lensa 85 mm dengan F/2.
Kuantitas Av diukur dengan besaran perbandingan dengan bukaan lensa terhadap diameter bukaan. F/1 itu berarti besar bukaan lensa sama lebar dengan ukuran Focal Length lensa. Adapun kuantitasnya di ukur dengan STOP juga
Aturan dasar Fotografi adalah menghasilkan gambar dengan nilai Expsore yang normal di mana jumlah cahaya yang di rekam pada gambar tepat. Tidak terang dan tidak gelap. Karena jumlah cahaya ini di pengaruhi Triangle Exposure maka Tehnik dasar menghitung jumlah cahaya ini bisa di hubungkan dengan satuan STOP.
Misalkan sebuah gambar akan menghasilkan Exposure yang normal dengan Exift foto : ISO 800, F/4, dan SS 1/60. Jika gambar yang di hasilkan terlalu noise, maka kita turunkan ISO ke 400 misalnya. maka kita akan kekurangan 1 Stop cahaya.
1 Stop cahaya ini bisa tutupi dengan merubah nilai dari F/4 ke F/2.8 atau SS 1/60 ke SS 1/30.
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>.
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 :
H2 A (Topik-Topik yang Dibahas)
H3 A1 (Sub-Topik A1)
H3 A2 (Sub-Topik A2)
H2 B
H2 C
H3 C1 (Sub-topik C1)
H4 C1A (Sub Sub-topik C1A)
H4 C1B (Sub Sub-topik C1B)
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.
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.
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 :
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/>
Matamu.NET – Ingin menguji kemampuan kamu mengambil gambar dengan persiapan minim dan waktu yang sangat singkat? Kalau benar, coba deh sesekali ikut main ke Pameran Otomotif atau Teknologi. Di sana ada banyak SPG yang bisa kamu jadi jadikan model fotografi dadakan.
Yah dadakan, karena semuanya kamu potret ketika kamu sudah sampai di sana. Tema dan konsep yang ada tidak bisa kamu set up dan hanya bisa menerima keadaan yang ada. Wardrobe model, siapa talent yang jadi model, set up bacground, fore ground dan semuanya hanya bisa diatur oleh EO-nya.
Tapi tenang saja, salah stau peran SPG di ajang Pameran Mobil itu adalah menjadi Point of Intereset dari foto-foto yang bereda di dunia maya. Hal ini memang sengaja dilakukan oleh vendor dan perusahaan agar event mereka semakin ramai dibicarakan, selain itu wadah promosi gratis buat merek-merek yang ikut dalam event tersebut.
Makanya jangan heran kalau para produsen dengan merek-merek terkenal ini akan berlomab-lomba menggunakan vendor-vendor SPG yang cantik dan juga seksi tentunya.
Hanya saja tidak semua wanita-wanita cantik disana adalah model profesional yang bisa dengan mudah mengganti pose dan mood saat kamu tiba-tiba datang untuk motret, Kamu tentu saja harus melakukan beberapa persiapan. Adapaun persiapan sebagai berikut :
1. Pilih Lensa
Jika kamu punya lensa Sapu Jagat tipe Premium seperti L series dari Canon atau Type Nikkor dari Nikkon Mungkin hal ini tidak perlu dikhawatirkan. Tapi kalau kamu cuman punya lensa KIT standar dengan bukaan F/3.5 dengan motor fokus yang sangat lambat, seperti kamu harus berfikir ulang deh motret. Soalnya exppsure di runag Indoor dengan lampu itu masih sangat terbatas.
Solusinya mungkin pilih lensa Fix yang memiliki kinerja jauh lebih cepat dibandingkan lensa sapu jagat. Nah aturannya sederhana sih, yakni
Lensa 16 mm sampai 24 mm untuk motret SPG besarta Mobilnya secara utuh. Jika memungkinkan pilih lensa 24 yang distorsinya rendah.
Lensa 50 mm dan 75 mm jika kamu mau buat model lebih close up atau dengan DoF yang tipis.
Sepertinya itu saja deh, kan kalau kamu datang bawa lensa 200 mm, kira-kira mau motret apa di ajang pameran yang super sempit? Kecuali kamu adalah pemburu foto bocor, tapi saran saya gak usah dibawah deh. Biar otak kamu gak kemana-mana.
2. Perhatikan Shift
SPG-SPG diajang pameran mobil itu punya tugas khusus menarik perhatian costumer dan pengunjung yang datang tentu saja ini adalah pekerjaan yang melelahkan. Jika kamu datang pada penghujung Shift dari SPG ini, kemungkinan kamu susah dapat wajah senyum manis atau mood yang sesuai.
Yah secara SPG yang lelah itu juga manusia, kalau sudah lelah lebih mudah bad moodn-ya dibandingkan good mood-nya bukan.
Jadi datanglah pada saat Pameran masih relatif Sepi dan di awal-awal shift atau pergantian shift mereka.
3. Komunikasi
Yup jangan asal jepret aja, kamu kan pengen motret bukan pengen BAB, asal ketemu closed, langsung sikat.
Motret itu adalah pekerjaan seni jadi cobalah rancang dengan baik-baik konsep dan jenis foto yang akan kamu buat. Setelah punya konsep yang matang. Coba pilihlah kalimat yang baik untuk menyampaikan ide kamu ke SPG-nya. Kalau diterima dengan baik, akan tercipta sinergi yang berkualitas natar fotografer dan SPG-nya kan.
Selain itu, jika kamu berhasil membuka Komunikasi yang baik tentu saja SPG-nya akan lebih mudah untuk diarahkan dan membuat pose yang baik buat kamu. Syukur-Syukur kalau Doi ngajak kamu buat sesi pemotretan tambahan di luar event Pameran Mobilnya.
Lumayan kan buat menambah koleksi portofolio foto kamu.
4. Hunting SPG yang Jadi Target.
Memang bukan huting strike to the person sih, kecuali kamu kenal beberapa SPG dan Model yang ada di event tersebut namun jika tidak kamu harus tetap punya target seperti kriteria SPG dan Boot yang akan kamu foto.
Misalnya saya mau motert SPG dengan Mobil warna merah jika baju doinya warnanya biru, tinggi badan, warna kulit, warna rambut, merek mobil dan sejenisnya.
Buatlah list-list tersebut agar lebih fokus dalam membuat fotonya. Kalau sudah sering motret kamu juga bakalan paham kok, gestur tubuh dari SPG yang foto genik atau memang cocok buat dipotret.
5. RAW dong
Motret Model di Event pameran mobil itu masih masuk kategori Incidental loh. Yang artinya hampir semua momen yang kamu dapatkan itu tidak disetting, sekalipun kamu sudah melakukan komunikasi yang baik dengan modelnya.
Misalnya saja ini kamu kan tidak akan pernah tahu warna lampu dan luminous dari lampu yang digunakan di setiap boot tersebut, jadinya kamu bakalan sulit dalam mengatur White Balance dari foto kamu.
Jika kamu kotret dalam RAW mode, semuanya akan selamat bukan, tanpa perlu khawatir lagi dengan warnanya.
Akhir Kata
Sebagai akhir kata saya akan berikan Tips Penutup yang mungkin sederhana tappi jarang disadari. Yakni Motret itu adalah seni yang melibatkan keterampilan. Bukan ilmu yang dihafal tapi dipraktikkan. Jadi sering-seringlah berlatih agar kamu bisa menguasai berbagai jenis kondisi di lapangan
Matamu.NET – Pada saat belajar HTML ada tiga aspek yang penting untuk diperhatikan sebagai informasi dasar penyusunan code HTML. Tiga aspek adalah Tag, Element, dan Atribute.
1. Tag
Tag adalah text yang berfungsi sebagai penanda khusus (markup) yang memiliki fungsi untuk dijalankan. Misalnya tag <p> ini menjadi penandai bahwa setelah tanda ini akan ada kalimat yang terususn dalam bentuk paragraf. Tag memiliki syntak pembuka <tagName> dan penutup dengan tanda garis miring </tagName>.
Contoh-contoh tag umum dalam html adalah <html>, <body>, <p>, <div>, dan sejenisnya. Contoh penggunaan tag seperti berikut L:
<h2> Latihan HTML </h2>
<p> Disini adalah contoh penggunaan tag P dalam membuat paragfraf di HTML </P>
Pada awal dikembangkan di HTML 1.0, html hanya mengenal 18 tag, namun pada saat ini di HTML 5.2, sudah terdapat lebih dari 250 tag.
Tag disusun dengan tipe nested (bersarang) yakni :
<p><b><u>Contoh penulisan tag HTML yang benar </u></b></p>
Penulisan seperti ini dianggap salah pada struktur tag html.
<p><b><u>Contoh penulisan tag HTML yang salah </p></b></u>
2. Elemen
Elemen adalah semua yang diletakkan di awal pembuka tag sampai penutup tag.
<tagName> <tagName2> isi tag ini adalah bagian dari element </tagName2> </tagName>
Elemen terkadang juga disebut sebagai node. Element digunakan untuk menyusun komponen-komponen document html. Node dalam html terbagi ke dalam tiga jenis :
node elemen
node atribut
node tesk
Elemen adalah satu kesatuan dari dari tag pembuka, isi tag dan penutup tag. Konsep dari elemen adalah bentuk yang tampilkan pada laman webpage ketika document html.
3. Attribute
Atribute adalah modifier yang memberikan informasi tambahan dari sebuah elemen. Posisinya diletakkan pada bagian tag pembuka sebelum tanda “>”. Penulisan attribute selslaui ditulis dalam bentuk nameattribute=”value”
<p>Ini adalah contoh penggunaan atribusi</p>
Setelah diberikan atribute style sseperti contoh berikut ini!
<p style="color:red; font-family:sans-serif; font-size:22pt;">Ini adalah contoh penggunaan atribusi</p>
Perbedaanya dapat dilihat pada compiler html berikut ini
Attribute terbagi ke dalam tiga jenis atribut :
Atribute Global – Atribut yang dapat ditambahkan pada semua html
Atribute Event – Atribut yang ditambahkan sebagai bentuk aksi terhadap sebuah element. Atribut ini banyak digunakan pada penggunaan script tambahan seperti javascript.
Atribute Khusus – Atribut yang hanya bisa dipakai dengan tag yang khusus dan tidak bisa pada tag lain.
Contoh dari atribut khusus :
atribute
tag pengguna
src
<a>, <img>, <audio> <video> dll.
href
<a> <link>
action
<form>
autoplay
<audio> <video>
Catatan : Atribute ditulis dengan huruf kecil dengan nilai yang atribusi diketikan diantara tanda petik “…”
Matamu.NET – Sebenarnya tidak ada struktur dasar dalam pengembangan document HTML tapi ada pola-pola yang sering digunakan secara umum sehingga pola-pola ini selanjutnya disebut sebagai struktur dasar.
Document HTML secara default harus memiliki
Pembuka document dalam bentuk tag deklrasi <!DOCTYPE html>
Document html akan dibuka dengan tag <html> dan ditutup dengan tag </html>
Bagian yang dilihat oleh client saat diterbitakan diletakkan pada bagian <body> … </body>
secara umum struuktur document html dituliskan dalam bentuk :
Declaration
Head
Body
Contoh penulisan :
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Paragraf di HTML #3</title>
</head>
<body>
<h1>Judul Tulisan</h1>
<p>Paragraf diletakkan di tag P atau bis adalam bentuk tag div</p>
</body>
</html>
contoh view dari document :
1. Deklarasi
Bagian deklarasi memberikan jenis document html yang dibuat. Meskipun bisa dibuat tanpa bagian declarasi, namun document yang disusun dianggap tidak valid oleh W3C.
Tag deklarasi pembuka document hanya dituliskan sekali di setiap document. Tag ini tidak sensitive case seperti pada umumnya code html.
Jika kita menghilangkan tag <!DOCTYPE html>, dokumen ini masih menampilkan laman yang sama dengan <!DOCTYPE html>.
Pada contoh tag deklarasi yang digunakan dibagian atas menggunakna dari HTML 5.0 itu <!DOCTYPE html>. Setiap versi HTML berbeda-beda seperti pada HTML 4.0 dideklrasikan dengan tag
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Setelah tag deklarasi, selanjutnya adalah tag html yang dibuka dengan <html> dan ditutup </html>
<html lang="en">
Tag ini adalah tag wajib karena menjadi ruang kita menuangkan tag-tag dan code-code dalam membuat document HTML.
Dalam tag ini terdapat atribut yang menunjukkan lang=”en” yang berarti tulisan dalam documen ini dalam bahasa inggris. Memang sih isi dari documennya tetpa bis adiisi dengan bahasa lain selain bahasa inggris, tapi atribute ini memudahkan browser untuk memberikan referensi bahasa kepada user jika diakses online.
Conothnya biasanya ketika kita mengakses artikel bahasa Inggris dari Indonesia maka akan ada informasi jika laman ini menggunakan bahasa Inggris, apakah anda ingin mengubahnya ke bahasa Indonesia?
2. Head
Bagian Head dimulai dengan tag <head> dan ditutup dengan </head>
Bagian yang di Bold adalah tag Head. Bagian ini berisi informasi yang tidak akan ditampilkan di laman pada saat document diterbitkan, namun tetap ikut diloading oleh browser.
Karena tidak muncul terkadang orang-orang menyebutnya sebagai meta data. Fungsi dari tag ini adalah :
Tempat menaruh meta tag yang membuat webiste lain bisa melacak situs kita. Biasanya untuk kebutuhan SEO
Menempaykan tah title untuk judul website
tempat menuliskan css, javascript, character set, script dan sejenisnya
dan lain-lain
Secara umum bagian Head ini dugunakan untuk mengatur style element secara umum seperti jenis huruf yang digunakan, ukuran, warna background, ukuran kotak box dan sejenisnya :
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
Contoh penggunaan sebagai berikut :
Head juga berisi metadata yang berisi elemen-elemnt meta yang mengatur penampilan documen secara umum. Adapun contoh-conoth meta element :
Pada bagian Body <body>…</body> adalah bagian yang ditampilkan di web browser atau sebut saja sisi sebagai bagian View. Baik code Head dan Body sebenarnya dua-duanya di loading dari sisi Client.
<body>
<p>Hello World!</p>
</body>
Di bagian body ini, web developer memiliki tugas menata posisi, style, ukuran, dan seluruh hal yang berkaitan dengan User Interface di daerah body. Tag-tag yang disarankan bisa dalam bentuk paragraf <p>…</p> atau tag divisi <div>…</div>
Matamu.NET – HTTP adalah singkatan dari HyperText Transfer Protocol. HTTP adalah salah satu jenis protocol transfer yang dirancang untuk penggunaan Hypermedia yang dilayani oleh HTML. HTTP ini merupakan bentuk komunikasi data protocol World Wide Web (WWW) pada dokumen HTML yang menyertakan hyperlink ke sumber daya lain. Tujuan agar komunikasi data lebih mudah diakses antara server dan client.
HTTP memiliki peran sebagai pengatur action yang dilakukan oleh user selama berada di website, seperti mengerakkan mouse, mengklik link, melakukan scroll, memasukkan informasi dan sejenisnya.
Saat ini ketika banyak berseliwerang orang-orang jahat di dunia maya, protocol HTTP dianggap masih terlalu “Naked”. Maksudnya adalah protocol tidak menyediakan keamaanan yang terenkripsi sehingga pengiriman data client ke server bisa dengan mudah diamati oleh orang lain.
Hal ini tentu saja bisa berbahaya jika kita melakukan transkasi data penting seperti login ke akun Paypal atau internet Banking. Data masukan akan dengan mudah diakses oleh pihak ketiga yang mungkin saja tidak bertanggung jawab.
Sebagai informasi, hampir semua website yang kita akses selalu melibatkan pihak ketiga dalam mendukung infrastruktur website. Jumlahnya lebih dari satu dan bisa jadi sampai puluhan tergantung dari seberapa banyak layanan yang digunakan dari website yang client kunjungi.
HTTPS
Agar informasi yang dikirim oleh client ke server, atau ke server pihak ketiga yang disetujui oleh server awal tetap terjaga selama proses browsing, maka dibuat sistem enkripsi untuk mejamin data yang dikirim lebih sulit ditranslate oleh pihak yang tidak dilibatkan dalam pertukaran data. Mudahnya hacker akan mendapatkan tambahan kesulitan dalam upaya mencuri data pribadi kalian.
Proses enskripsi selanjutnay dimasukkan ke dalam blok server baru sebagai layer dari enskripsi ke HTTP. Hal ini yang membuat HTTP lebih aman (secure) untuk dijadikan tempat perutakaran informasi. Sistemnya diadopsi dalam pemberian nama dalam bentuk HTTPS, dimana S adalah singkatan dari secured.
Proses peng-enkripsi-an ini dilakukan berdasarkan sistem Secure Socket Layer atau Transport Layer Security sebagai layanan. Code encrpisi ini dimasukkan sebagai sertifikat dari SSL sehingga sertificat ini yang nantinya akan ditunjukkan kepada Client sebagai informasi sistem enkrispi dari website yang sedang dikunjungi. Semakin panjang dan rumit proses enskripsi yang dilakukan maka semakin aman pula situsnya.
Jika pemilik website merasa kemampuan eknripsi mereka membuat SSL sulit dilakukan atau kurang trusthed, banyak penyedia jasa penyewaan Sertifikat SSL baik gratisan dan berbaya. Untuk yang berbayar, tentunya harganya mewakilik jumlah enksripsnya.
Contoh jasa pembuat Sertificat SSL yang ada di NameCheap.
Misalkan situs matamu.Net yang sedang anda baca ini, jika dilihat di slot URL terdapat lambang gembok yang menunjukkan bahwa Situs ini telah mengenkripsi informasi anda alias sudah aman.
Jadi anda tidak perlu lagu untuk berselancar di Situs Matamu.net ini karena semua aktifitas tidak bisa diterjemhakan langsung dan butuh enkripsi yang saya sebagi pemilik situs sendiri tidak bisa menerjemahkannya.
Matamu.NET – Bagaimana karya seorang fotografer dapat diakui atau ditunjukkan ke orang lain? Pada zaman dahulu tentu saja melalui sebuah pameran yang biayanya tidaklah sedikit dengan waktu pamer yang terbatas. Saat ini semuanya bisa dilakukan jauh lebih praktis dengan website fotografi. Dengan website tersebut, kamu bisa menunjukkan foto-foto terbaik kamu dalam bentuk portofolio yang menarik.
Lantas mengapa sih harus membuat website fotografi? Kan ada Instagram yang sudah jauh lebih stabil dan gratis pula. Selain itu memang platform-nya dirancang untuk display foto.
Yup Instagram memang sudah menjadi media yang wajib dimiliki seorang fotografer masa kini. Tanpa Instagram seorang fotografer itu ibarat sayur tanpa garam.
Tapi, sekalipun Instagram keren dijadikan sebagai media portofolio, Applikasi Sosial media ini memiliki banyak kekurangan untuk digunakan dalam jualan jasa fotografi. Kekurangannya adalah :
Sulit dalam navigasi foto sesaui dengan label.
Sulit menggiring pengunjung untuk melakukan transaksi karena hanya menyediakan kolom penjelasna di Deskripsi diri.
Calon penggunan jasa sulit menemukanmu karena algoritma Instagram mengharuskan kamu menggunakan jasa FB adsense untuk menjangkau lebih banyak pengunjung.
Jadi memang harus membuat Website sendiri deh kayaknya, biar terlihat lebih profesional.
Dalam artikel ini saya akan menjelaskan dua cara membuat website fotografi profesional yakni cara pertama dengan hosting gratisan dan self hosting berbayar. Namun sebelumnya mari kita mulai dengan memilih nama Website.
1. Memilih nama Website
Hampir sama dengan tata cara membuat webiste yang lain, nama website itu penting. Jangan pernah percaya pepatah “apalah arti dari sebuah nama”, karena arti dari sebuah nama Website bisa jadi segalanya.
Nama akan membawa kesan yang baik dan membuat website kamu jadi lebih mudah disebutkan. Misalnya saja nama website ini adalah matamu.NET, itu memiliki tujuan tertentu loh.
Misalnya kamu ingin berbagai artikel atau penjelasan dengan orang lain, kata Matamu akan jadi lebih cepat diingat oleh pengunjung.
“Kamua lihat dari mana sumbernya?” “dari matamu”
Gimana? asikkan? Coba bayankan kalau nama website kamu situsfotografiprofesional.com. Masak sih, kamu mau jawab dari situsfotografiprofesional.com. Boro-boro jawab, nama situsnya saja sudah lupa.
Jadi usahakan nama situs itu kamu itu enak disebut, mungkin terdiri dari 2 atau 3 suku kata, Seperti Facebook.com (dibaca: Fesbuk) atau tribun.
Jika tidak ketemu dengan ide namanya, mungkin ada baiknya kamu menggunakan nama kamu, jadi sekalian branding Image. Situs saya sendiri, selain matamu.NET ada juga Ahmaddahlan.NET.
2. Memilih Jenis Website
Karena kita akan membuat Website fotografi dengan tujuan media protofolio, maka kita tidak perlu lagi pusing memilih jenis website. Kita langsung saja memilih Jenis Webiste CMS, sisanya kita akan memilih Platform CMS yang digunakan.
Dalam artikel ini saya akan memberikan dua contoh pilihan, yang pertama adalah Platform Blogger.com untuk Website Gratisan dan yang kedua adalah WordPress Self Hosted untuk website berbayar.
3. Cara Membuat Webiste
Berikutnya adalah langkah mengembangkan website, kita mulai dari yang gratisan yah.
a. Membuat Website Fotografi dengan Blogger
Loh katanya Profesional, kok malah kasih saran Blogspot sih?
Jangan salah, sekalipun gratisan dan sangat mudah dibuat, Blogger itu bisa tampil profesional loh. Hal ini tergantung dari templete yang kamu pasang. Disisi lain kamu tidak perlu jago-jago amat dalam hal coding, cukup download templete gratisan dari penyedia jasa templete seperti Gooyabi atau Sora Templete, lalu pasang dan selesai.
Jadi idenya adalah hanyalah cara memilih templete.
Untuk membuat Website dengan CMS blog, berikut ini langkahnya
Loggin di Akun Gmail pada Browser yang sedang digunakan
Masuk ke Blogger.COM, pada laman awal anda akan diminta membuat akun, cukup klik buat akun.
Pilih menuh tambah blog baru
Masukkan nama Blog
Masukkan Domain URL dalam bentuk namadomainkamu.Blogspot.com
Selesai.
Memasang Templete Blogger
Setelah melakukan langkah lima, maka blog kamu sudah mengudara jika domain yang kamu pilih unik atau tidak ada kesamaan dengan subdomain blogspot orang lain. Selanjutnya agar terlihat lebih cantik, silahkan pasang templet yang sesuai dengan kebutuhan fotografi.
Adapun langkah memasang templete sebagai berikut :
Download templete yang akan dipasang, sebagai conoth silahkan masuk ke Sora Templete atau Goyabi.
Unzip templete dan perhatikan file text yang berkekstensi .xml.
Masuk ke blog anda, cari menu Tema >> Sesuaikan.
Setelh itu muncul pop up silahkan upload file .xml dari templete yang sudah diambil.
Jika file sudah berhasil di uplaod, seilahkan di simpan.
Mengalihkan ke Domain TLD
Pada saat membuat Blog di blogger.com kamu secara default akan mendapatkan subdomian dari Blogpsot.com seperti namadoaminkamu.blogspot.com.
Tentu saja hal ini terlihat kurang profesional bagi kebanyakan orang. Untungnya Blogger mengizinkan kamu untuk meredirect domain TLD kamu ke domian kamu, namun tentu kamu harus membeli domain dulu di penyedia jasa domain.
Jika kamu sudah memiliki Domain TLD, misalnya namadomainkamu.com, kamu bisa memasangnya di Blog dengan cara :
Masuk ke Dashboard blogger.com lalu menuju ke setelan
Cari menu domain costum lali klik menu tersebut.
ketikkan nama domain kamu dilengkapi dengan www.domainkamu.com
Pilih simpan, pada saat memilih simpan akan muncul informasi yang harus kamu masukkan ke dalam DNS setting di tempat kamu membeli domain.
Silahkan Logging ke penyedia jasa domain kamu lalu masuk ke settingan DNS.
Buat record CName baru dengan nama : WWW dan tujuan : ghs.google.com, setelah itu simpan
Buat Record CName baru lagu dengan nama : g3jv3hunc5pp dan Tujuan : gv-py6omh5lhcj4ip.dv.googlehosted.com, Setelah itu simpan. Untuk informasi yang bold itu bergantung dari BLog kamu dan ini unik atau berbeda antara satu blog dengan blog lainnya.
Silahkan kembali ke Settingan Blogger lalu simpan perintah redirect kamu
Jika sudah berhasil menyimpan informasi tersebut di settingan DNS kamu, maka tunggu sampai Domain tersebut dipropagasi ke Blog kamu. Rentang waktu tunggunya 2 x 24 jam, namun kalau penyedia domain kamu handal biasanya cukup menunggu 15 menit.
Setalah itu, blog kamu sudah diakses dengan domain www.namadomainkamu.com bukan lagi namadomainkamu.blogpsot.com. Jadi terlihat pebih profesional kan?
b. Membuat website fotografi dengan WordPress Self-hosting
Secara umum wordpress terbagi ke dalam dua jenis yakni WordPress.com yang layanan mirip blogger dimana pemilik webiste tetap menginduk di hostingan wordpress.com. Yang kedua adalah adalah wordpress.org dimana kamu akan menyimpan seluruh data website kamu server yang kamu sewa/miliki sendiri.
Tentu saja ini jauh lebih mahal karena dibebankan biaya jasa sewa Server. Jasa sewa server sendiri berbeda-beda satu dengan yang lainnya, tergatung dari jenisnya. Misalnya Shared Hosting itu biasanya bisa disewa dengan biaya 100 ribu sampai dengan 500 ribu pertahun sedangkan untuk VPS biasanya disewakan 5 $ sampai 20 $ sebulan.
Keuntungan dari WP self hosting ini tentu saja jauh lebih banyak dibandingkan dengan blogger, tapi butuh waktu dan uang yang besar untuk proses maintenance website kamu. Kalau penghasilan kamu dari fotografi sudah besar sih sepertinya tidak ada masalah.
Tidak perlu panjang mari kita mulai tutorial ini dengan asumsikan kita menginstall WP dengan aplikasi, jadi jauh lebih mudah. Adapun caranya sebagai berikut :
Logging di Akun Server kamu, pilih menu Instan Wordporess baik pada VPS maupun Shared Hosting
Tunggu sampai proses instal selesai.
Setelah proses instal selesai kamu akan diminta untuk mebuat akun administrastor dan membuat Sandi.
Website kamu sudah mengudara.
Memasang Templete WordPress
Untuk memasang Templete WordPress tidak jauh berbeda dengan blogger, kamu cukup milih templet bawaan dari WordPress atau memilih dari WordPress.org. Jika kamu merasa kurang suka dengan templet yang ada disana, kamu bisa mencoba membeli dri penyedia jasa templet seperti di ThemeForest atau envato.
Jika sudah membeli kamu akan diberi file Zip, file ini tidak usah dibongkar seperti pada blogger. Biarkan aplikasi WordPress yang mebongkarnya, kamu cukup melakukan langkah berikut :
Masuk ke WordPress kamu dengan cara IP/wp-admin (jika sidah ada domainnya, domainkamu.com/wp-admin
Pilih menu Templete, lalu pilih upload file.
Pilih file Zip yang sudah kamu beli, lalu tunggu sampai selesai.
Catatan : FIle Templete di WordPress itu sudah berada pada level PHP, sehingga jangan pernah mengupload file dari sumber tidak terpercaya seperti dari situs tidak dikenal. Hal ini bis amenjadi celah bagi hacker untuk memasukkan script inject untuk menghack situs kamu.
Redirect Domain
Untuk redirect doamin di WP Self Hosting kamu hanya perlu mengarahlan DNS kamu ke NS server tempat kamu memesan server. Sebagai contoh di VULTR kamu cukup mengarahkan NS1.vultr.com dan NS2.vultr.com
Akhir Kata
Jika sudah sudah selesai nah sekarang tugas kamu adalah mengelola konten dengan membuat postingan dari foto-foto yang ingin kamu jadikan portofolio.
Matamu.NET – HTML adalah singkatan dari HyperText Markup Language yang digunakan sebagai bahsa front en paling popular. Semua stus yang berjalan di browser ditampilakn dengan bahasa HTML, sekeren apapun websitenya.
A. Mengenal HTML
Seperti yang dijelaskan sebelumnya, HTML adalah singkat dari HyperText Markup Language, Prinsip kerjanya sederhana yakni Library HTML menyimpan sebuah script kemudian dipangil dengan code-code yang diberikan dari setiap script yang sudah ada.
Misalkan ketika kita menulis code & phi; dalam HTML maka Browser akan menayangkan simbol φ di tampilan.
Pada saat menyusun Halaman website, sebenarnya kita menyusun code-code HTML untuk menayankan informasi yang banyak kemudian ditampilkan dalam bentuk laman ke user.
1. Sejarah HTML
Konsep HyperText di dunia nyata dapat dianalagikan melalui layanan perpusatakan.
Misalkan sebuah perpustakaan yang memiliki ratusan ribu judul buku yang disimpan dalam gudang yang luas. Jika buku tersebut disimpan berdasarkan abjad saja maka akan membuat pustakawan kesulitan dalam mencari buku jika seseseirang ingin meminjam buku tersebut.
Agar lebih mudah menemukan buku tersebut maka buku disusun berdasarkan kelompok. Langkah awal dibuat berdasarkan kategori Buku, maka kategori ini disebut sebagai heading. Setelah kategori dikelompokkan berdasarkan abjad abjad awal penulisnya. Abjad ini disebut sub heading. Setelah abjad dibuat su heading yang setara dengan sub heading seperti nomor rak dan nomor loker.
Maka kita misalkan Buku Pemograman dubat oleh Tatang Sutarman dilettakkan di lemari 121 lorong c, di loker 13b. Pada bagian admini perpustakan cukup menulis PEM-TS-121C-13B, maka yang akan akan diambil adalah buku yang telah dimaksud. Petugas perpus akan dengan mudah mengambil buku tanpa harus menilaskan seluruh informasi mengenai buku.
Ide ini menjadi dasar pengembangan HTML yang dikembangkan oleh Tim Berners-Lee tahun 1980. Banyaknya dokumen ditempat Tim bekerja membuat pencarian dokumen membutuhkna waktu yang lama sehingga Berners pun memulai membuat code untuk mewakili setiap dokumen.
Code-code ini awalnya disusun berdasarkan tittle, heading, informasi deskrips dan nomor code. Barners akhinya menggunakan tag sebagai code tersebut seperti <tittle>, <h1>, <p> dan seterusnya. Ternyata penggunaan code ini memudahkan pemanggilan informasi. Hal ini yang menjadi dasar pengembangan HTML.
Tag dan code-code html ini kemudian berkembang sesuai dengan kebutuhan pencarian dan penampilan data yang lebih banyak. Akhirnya jumlah code semakin banyak dan agar satu penggunaan dengan pengguna yang lainnya memiliki jenis code yang sama sehingga tidak multi tafsir atau gagal ditafsirkan sebuat Standar Generalised Markup Language (SGML) sebagai patikan pengembangan code html.
[draft] HTML 1.0 dirilis pada Juni 1993, versi HTML pertama namun tidak dirilis secara umum
HTML 2.0 dirilis pada pada tahun 24 November 1995, Versi kedua yang menjadi versi pertama yang dirilis.
[draft] HTML 3.0 dirilis 28 Maret 1995, gagal bereda karena banyak menuai kontroversi.
HTML 3.2 dirilis 14 Januari 1997
HTML 4.0 dirilis 24 Paril 1998
HTML 4.01 dirilis 24 Desember 1999
XHTML 1.0 dirilis 26 Januari 2000
XHTML 2.0 dirilis Agustus 2002
HTML 5 dirilis 28 Oktober 2014
HTML 5.1 dirilis awal 2017
HTML 5.2 dirilis akhir 2017
B. Belajar HTML
Belajar HTML tidak dilakukan dengan menghafal tapi dengan praktik. Pada tingkat lanjut malah kita akan belajar HTML by Case yakni langusng ke masalah yang ingin diselesaikan.
Nah untuk belajar HTML yang pertama yang harus disiakan adalah :
1. Text Editor HTML
Text Editor adalah aplikasi sederhana yang digunakan untuk mengedit code HTML. TExt Editor ini offline seperti Note, Notepad, Notepad ++ dan sejenisnya.
Selain itu bisa juga dengan editor online seperti
w3school online Code Editor
OnlineGdb
Karena digunakan online maka wajib hukumnya memiliki broweser.
Kita cuman butuh dua alat tersebut untuk belajar HTML, ternyata mudah bukan karena pada umumnya Laptop sudah memiliki software tersebut.
C. Membuat Document HTML
Silahkan buka Text Editor lalu copy paste code di bawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar HTML</title>
</head>
<body>
<p>Hello World!</p>
<p>Ini Adalah dokumen HTML Pertama saya</p>
</body>
</html>
Setelah itu simpan dan beri nama Belajar.html, perhatikan ekstensi filenya adalah .html. Buka file yang kamu simpan dengan Browser maka akan tampil laman statis web seperti berikut :
Jika sudah terbuka, maka selamat ini adalah laman web statis pertama yang kamu buat sendiri, jika punya Server dan IP publik laman ini bisa kamu diakses oleh perangkat orang lain secara online.
