site stats
Sep 21, 2017
237 Views

Dasar HTML yang Harus Diketahui Setiap Orang

Written by

Bagi sebagian dari Anda, HTML (bahasa markup hiper-teks) sama asingnya dengan bahasa saat Anda pertama kali belajar membaca dan menulis. Artikel ini untukmu Bagi kita yang telah bekerja dengan HTML selama lebih dari 10 tahun, artikel ini tidak akan berlaku. Namun, ada semakin banyak penulis dan kontributor situs konten yang tidak pernah menghabiskan waktu dengan HTML, karena keahlian mereka dalam menulis dan mengedit, dan belum tentu memformat artikel untuk publikasi online.
Namun sekarang, jika Anda seorang penulis lepas, Anda mungkin diminta mengirimkan artikel Anda melalui beberapa jenis CMS (sistem manajemen konten), apakah itu WordPress, Joomla! atau sistem manajemen konten berpemilik. Apapun, mereka semua memperlakukan HTML yang sama dan belajar sedikit HTML sekarang dapat membantu penulis jauh di jalan.
Beberapa isu utama ikut berperan saat penulis memulai karir di Word atau jenis alat pengolah kata lainnya. Ketika seorang penulis menyalin teks dari Word dan kemudian memasukkannya ke dalam CMS, satu ton kode MS miliknya disalin bersamaan dengannya. Ini bisa mengacaukan CSS default (cascading style sheet) dan format untuk sebuah situs. Obatnya adalah menyalin dari Word, menempelkan ke Notepad atau jenis editor teks biasa lainnya, lalu salin dan tempelkan ke CMS. Namun, itu tetap tidak selalu melakukan triknya.
Menurut pengalaman saya, saya telah melihat berbagai macam kode aneh yang muncul saat seorang penulis mengirimkan artikel ke dalam Joomla! CMS yang saya gunakan untuk situs saya. Semuanya dari tag <div> ekstra ke tag <p> muncul setelah setiap baris dan bukan setiap paragraf dan tag <span> yang tidak memiliki tujuan dalam kode selain membodohi format CSS default. Tag ekstra <div> bisa sangat berbahaya karena bisa mengubah tampilan kolom dan tiba-tiba footer bawah muncul di kolom sebelah kanan.

Mudah-mudahan artikel ini akan membantu Anda melewati kesalahan Rookie dan Anda bisa mencapai pangkat pakar HTML Awal. Itu niscaya akan terlihat bagus di resume Anda dan itu adalah sesuatu yang dapat Anda sebutkan saat Anda mencari pekerjaan freelance baru.
Di sebagian besar CMS ‘, kemungkinan besar ada ikon editor teks WYSIWYG (apa yang Anda lihat adalah apa yang Anda dapatkan). Anda dapat mengidentifikasi ikon HTML karena mungkin ada beberapa wortel (<>) di atasnya. Jika Anda mengklik ikon editor HTML dari editor teks, Anda dapat melihat seperti apa artikel Anda di HTML. Dari sini, Anda bisa mencari kode tambahan yang dibawa dari Word atau perangkat lunak apa pun yang Anda gunakan untuk menulis artikel Anda. Dengan menghapus kode tambahan, dan memastikan kode bersih hanya ada, Anda akan menyimpan editor dan penerbit Anda sejumlah besar pekerjaan.

Tag Paragraf

Mari kita mulai dengan dasar absolut. Dalam HTML, Anda bekerja dengan tag, yang diidentifikasi dengan wortel. Setiap tag memiliki pembuka dan lebih dekat. Untuk memformat sebuah paragraf, Anda menggunakan tag <p> pada awal paragraf baru. Kemungkinan besar Anda tidak perlu khawatir dengan font, ukuran, warna dan sisanya karena CSS di CMS menangani hal itu untuk Anda. Anda juga perlu menutup paragraf dengan tag </ p> penutup. Anda akan melihat perbedaan antara tag pembuka dan tag penutup adalah slashmark. Berikut adalah paragraf contoh menggunakan tag <p>:
<p> Ini adalah kalimat yang diformat dengan tag paragraf HTML. </ p>
<p> Ini akan menjadi awal paragraf baru. </ p>
Tag Header

Sekarang, mari masuk ke sedikit SEO (search engine optimization) untuk membantu pengunjung menemukan artikel Anda melalui hasil pencarian di Google, Bing dan sebagainya. Tag judul diperlakukan sebagai teks penting dalam sebuah artikel dan mesin pencari membaca ini untuk membantu menentukan konten pada halaman dan hasil pencarian. Biasanya, judul artikel Anda akan disertakan dalam tag <h1>, yang merupakan level tertinggi untuk header. Lalu datang tag <h2>, <h3> dan kadang-kadang bahkan <h4>. Kemungkinan besar, subhead di artikel Anda akan menjadi tag <h2> dan <h3>, namun periksa editor dan penerbit Anda untuk melihat apa yang mereka gunakan untuk subfolder. Berikut adalah beberapa contoh yang menunjukkan bagaimana menggunakan tag header bersamaan dengan tag <p>.

<h1> Judul Artikel </ h1>
<p> Pendahuluan ayat pergi ke sini. </ p>
<h2> Subheader </ h2>
<p> Satu paragraf teks. </ p>
<h3> Subpos lain </ h3>
<p> Satu paragraf teks. </ p>
Tag gambar

Ini adalah taruhan yang bagus bahwa CMS yang Anda gunakan untuk mengirimkan artikel memiliki semacam ikon gambar yang dapat Anda klik untuk diunggah dan menyisipkan gambar. Namun, begitu gambar itu ada di artikel Anda, Anda harus tahu bagaimana memformatnya sehingga gambar mengalir dengan teks. Di dalam tag <img> Anda dapat mengatur semua jenis parameter untuk memformat gambar Anda dan membantu SEO. Tag <img> adalah salah satu tag langka yang tidak memerlukan tag penutup. Berikut adalah beberapa contoh kode:
<img style = “margin: 10px; float: left;” alt = “kata kunci” src = “gambar / path / image-name.jpg” width = “400” height = “350” />
Atribut margin memungkinkan untuk 10px (piksel) ruang di sekitar gambar sehingga teks tidak bertemu dengannya. Atribut float membuat gambar memerah sejajar dengan kiri atau kanan. Atribut alt adalah untuk SEO, jadi gunakan kata kunci yang bagus disini. Src adalah tempat gambar disimpan. Dan lebar dan tinggi sudah cukup jelas. Untuk informasi lebih lanjut tentang gambar

Tag Href

Apa yang akan internet tanpa link? Ini adalah link yang membuat World Wide Web berjalan lancar sehingga pengunjung bisa melompat dari satu situs ke situs lainnya. Tanpa link, kita mungkin juga memiliki buku cetak. Tautan dalam HTML dibuat melalui tag <href>. Mengapa mereka tidak disebut tag <link>, saya tidak tahu. Berikut adalah contoh cara mengode tautan:
<a href=”http://www.URL.com”> Teks Tertaut Disini </a>
Anda harus memulai tag <href> dengan huruf ‘a.’ URL dalam tanda kutip adalah kemana Anda ingin pengunjung pergi. Teks, “Linked Text Here” bisa menjadi apapun yang Anda inginkan tapi harus cukup sederhana sehingga orang-orang mengerti dimana link tersebut akan membawa mereka. Anda harus menutup tag ini dengan </a>, jika tidak, seluruh bagian halaman akan muncul sebagai link. Anda bisa menambahkan satu kode lagi ke <href> sehingga ketika pengunjung mengklik klik, halaman baru akan terbuka di jendela, yang bagus jika link tersebut membawa pengunjung keluar dari situs Anda. Jika link ke halaman lain dalam situs Anda, maka kode tambahan ini tidak disarankan.
<a href=”http://www.URL.com” target=”_blank”> Teks Tertaut Disini </a>
Tebal dan miring

Terkadang penulis ingin memberi penekanan pada kata-kata tertentu. Menggunakan bold atau italics bisa mencapai trik ini. Kemungkinannya adalah, saat Anda menyalin artikel Anda dari perangkat lunak pengolah kata ke CMS, Anda akan kehilangan jenis pemformatan ini. Untuk menambahkannya kembali, cara mudahnya adalah dengan menemukan ikon tebal dan / atau miring pada editor teks CMS. Tapi jika Anda ingin mempelajari kode HTML untuk itu, Anda cukup menggunakan tag <b> untuk huruf tebal dan <em> untuk huruf miring. Jangan lupa tutup tag ini dengan </ b> dan </ em>.
Sekarang setelah Anda mempelajari beberapa tag lagi, mari kita lihat bagaimana penampilan mereka semua

<h1> Judul Artikel </ h1>
<img style = “margin: 10px; float: left;” alt = “kata kunci” src = “gambar / path / image-name.jpg” width = “400” height = “350” />
<p> Artikel ini dibuat berdasarkan <a href=”http://www.URL.com”> artikel lain </a> yang sebelumnya diterbitkan. </ p>
<h2> Subheader </ h2>
<p> Saya sangat menginginkan teks ini <b> bold </ b>. </ p>
<h3> Subpos lain </ h3>
<p> Saya sangat ingin teks ini <it> dicetak miring </ em>. </ p>
Dengan mempelajari tag <p>, tag header, bagaimana gambar diformat, bagaimana link bekerja dan bagaimana melakukan pemformatan dasar seperti huruf tebal dan huruf miring, Anda memperbaiki keahlian Anda sebagai penulis dan editor. Lain kali Anda ditanya tentang pengetahuan HTML Anda, Anda dapat dengan yakin mengatakan bahwa Anda memahami dasar-dasarnya.

Article Tags:
· ·
Article Categories:
HTML

Leave a Comment

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