 |
| MDN - Mozzila |
Bagi sebagian dari Anda, HTML (bahasa markup hiper-teks) sama asingnya dengan bahasa ketika Anda pertama kali mencar ilmu 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, sebab keahlian mereka dalam menulis dan mengedit, dan belum tentu memformat artikel untuk publikasi online.
Namun sekarang, jikalau Anda seorang penulis lepas, Anda mungkin diminta mengirimkan artikel Anda melalui beberapa jenis CMS (sistem administrasi konten), apakah itu WordPress, Joomla! atau sistem administrasi konten berpemilik. Apapun, mereka semua memperlakukan HTML yang sama dan mencar ilmu sedikit HTML kini sanggup membantu penulis jauh di jalan.
Beberapa informasi utama ikut berperan ketika 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 isyarat MS miliknya disalin bersamaan dengannya. Ini sanggup mengacaukan CSS default (cascading style sheet) dan format untuk sebuah situs. Obatnya ialah menyalin dari Word, menempelkan ke Notepad atau jenis editor teks biasa lainnya, kemudian salin dan tempelkan ke CMS. Namun, itu tetap tidak selalu melaksanakan triknya.
Menurut pengalaman saya, saya telah melihat aneka macam macam isyarat gila yang muncul ketika seorang penulis mengirimkan artikel ke dalam Joomla! CMS yang saya gunakan untuk situs saya. Semuanya dari tag <div> ekstra ke tag <p> muncul sesudah setiap baris dan bukan setiap paragraf dan tag <span> yang tidak mempunyai tujuan dalam isyarat selain membodohi format CSS default. Tag ekstra <div> sanggup sangat berbahaya sebab sanggup 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 sanggup mencapai pangkat pakar HTML Awal. Itu pasti akan terlihat anggun di resume Anda dan itu ialah sesuatu yang sanggup Anda sebutkan ketika Anda mencari pekerjaan freelance baru.
Di sebagian besar CMS ', kemungkinan besar ada ikon editor teks WYSIWYG (apa yang Anda lihat ialah apa yang Anda dapatkan). Anda sanggup mengidentifikasi ikon HTML sebab mungkin ada beberapa wortel (<>) di atasnya. Jika Anda mengklik ikon editor HTML dari editor teks, Anda sanggup melihat menyerupai apa artikel Anda di HTML. Dari sini, Anda sanggup mencari isyarat embel-embel yang dibawa dari Word atau perangkat lunak apa pun yang Anda gunakan untuk menulis artikel Anda. Dengan menghapus isyarat tambahan, dan memastikan isyarat higienis 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 mempunyai pembuka dan lebih dekat. Untuk memformat sebuah paragraf, Anda memakai tag <p> pada awal paragraf baru. Kemungkinan besar Anda tidak perlu khawatir dengan font, ukuran, warna dan sisanya sebab 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 epilog ialah slashmark. Berikut ialah paragraf pola memakai tag <p>:
<p> Ini ialah 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 memilih konten pada halaman dan hasil pencarian. Biasanya, judul artikel Anda akan disertakan dalam tag <h1>, yang merupakan level tertinggi untuk header. Lalu tiba tag <h2>, <h3> dan adakala 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 ialah beberapa pola yang menunjukkan bagaimana memakai 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 ialah taruhan yang anggun bahwa CMS yang Anda gunakan untuk mengirimkan artikel mempunyai semacam ikon gambar yang sanggup 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 sanggup mengatur semua jenis parameter untuk memformat gambar Anda dan membantu SEO. Tag <img> ialah salah satu tag langka yang tidak memerlukan tag penutup. Berikut ialah beberapa pola 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 menciptakan gambar memerah sejajar dengan kiri atau kanan. Atribut alt ialah untuk SEO, jadi gunakan kata kunci yang anggun disini. Src ialah kawasan gambar disimpan. Dan lebar dan tinggi sudah cukup jelas. Untuk informasi lebih lanjut perihal gambar
Tag Href
Apa yang akan internet tanpa link? Ini ialah link yang menciptakan World Wide Web berjalan lancar sehingga pengunjung sanggup melompat dari satu situs ke situs lainnya. Tanpa link, kita mungkin juga mempunyai buku cetak. Tautan dalam HTML dibentuk melalui tag <href>. Mengapa mereka tidak disebut tag <link>, saya tidak tahu. Berikut ialah pola cara mengode tautan:
<a href="http://www.URL.com"> Teks Tertaut Disini </a>
Anda harus memulai tag <href> dengan karakter 'a.' URL dalam tanda kutip ialah kemana Anda ingin pengunjung pergi. Teks, "Linked Text Here" sanggup 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>, jikalau tidak, seluruh adegan halaman akan muncul sebagai link. Anda sanggup menambahkan satu isyarat lagi ke <href> sehingga ketika pengunjung mengklik klik, halaman gres akan terbuka di jendela, yang anggun jikalau link tersebut membawa pengunjung keluar dari situs Anda. Jika link ke halaman lain dalam situs Anda, maka isyarat embel-embel ini tidak disarankan.
<a href="http://www.URL.com" target="_blank"> Teks Tertaut Disini </a>
Tebal dan miring
Terkadang penulis ingin memberi pemfokusan pada kata-kata tertentu. Menggunakan bold atau italics sanggup mencapai trik ini. Kemungkinannya adalah, ketika Anda menyalin artikel Anda dari perangkat lunak pengolah kata ke CMS, Anda akan kehilangan jenis pemformatan ini. Untuk menambahkannya kembali, cara mudahnya ialah dengan menemukan ikon tebal dan / atau miring pada editor teks CMS. Tapi jikalau Anda ingin mempelajari isyarat HTML untuk itu, Anda cukup memakai tag <b> untuk karakter tebal dan <em> untuk karakter miring. Jangan lupa tutup tag ini dengan </ b> dan </ em>.
Sekarang sesudah 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 dibentuk menurut <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 melaksanakan pemformatan dasar menyerupai karakter tebal dan karakter miring, Anda memperbaiki keahlian Anda sebagai penulis dan editor. Lain kali Anda ditanya perihal pengetahuan HTML Anda, Anda sanggup dengan yakin menyampaikan bahwa Anda memahami dasar-dasarnya.
Komentar
Posting Komentar