Tutorial HTML5 Lengkap (Part 3)

Saya memilikinya di sebelah kiri di situs ini meskipun itu sering ditempatkan secara horizontal di atas atau di bawah header. Secara teknis Anda dapat menempatkan itu (atau mereka – bisa ada lebih dari satu) di mana pun Anda inginkan, tetapi ingat pernah membuat sulit bagi pengunjung. Salah satu kesalahan paling umum pemula – dan dalam hal ini, banyak profesional – membuat nya untuk tidak membuat navigasi sederhana, lurus ke depan dan intuitif.html5 logo tutorial pemula

Unsur <nav> adalah untuk “blok navigasi utama” *. Hal ini dapat dilakukan dalam tag header atau artikel (yang kita akan melihat berikutnya), atau bisa sendiri. Di sebelah kiri saya memilikinya sendiri dan dalam elemen artikel link “sebelumnya” dan “berikutnya” adalah dalam tag nav.

Sudah waktunya untuk mendapatkan editor HTML nyata. Ada beberapa dari mereka. Google “free html editor” dan melihat apa yang tampil. Untuk Windows saya suka versi gratis CoffeeCup yang terkenal editor HTML nya. Saya sarankan Anda men-download dan menginstalnya.

Untuk Mac saya menemukan TextWrangler. Saya tidak punya Mac jadi saya belum mencoba sendiri. Jika seseorang mencobanya silahkan email saya dan katakan apa yang Anda pikirkan.

Jika Anda google “HTML editor gratis” Anda akan menemukan apa yang dikenal sebagai editor WYSIWYG – “WYSIWYG” menjadi akronim untuk “Apa yang Anda Lihat adalah Apa yang Anda Dapatkan”. Saya sangat merekomendasikan terhadap mereka. Ada banyak masalah dengan editor WYSIWYG, tapi kesalahan utama mereka adalah bahwa mereka tidak membuat halaman SEO friendly. Mereka menulis kode berantakan. Ini mungkin terlihat baik pada monitor, tetapi bot kedua Anda (dan sama pentingnya) bagi audien, mengalami kesulitan membedakannya.

http://css-weaver.com/wysiwyg-dan-wysiwym-keuntungan-dan-kerugian-dari-editor-teks/

Tidak ada editor WYSIWYG mampu mengidentifikasi apa yang menjadi milik header, atau footer nav – yaitu sesuatu yang hanya manusia dapat lakukan, karena itu mereka tidak dapat memanfaatkan elemen HTML5 baru struktural – seperti tag <nav>. Bahkan sampai sekarang CoffeeCup telah menjadi editor WYSIWYG, tetapi dengan HTML5 menjadi standar baru mereka meninggalkan mereka pilihan desain WYSIWYG sama sekali.

Dengan asumsi Anda berada di PC **, CoffeeCup terbuka dan melihat pada layar Anda mungkin menemukan diri Anda menghabiskan beberapa jam menatap menggelikan – dan bersumpah – di. Tak perlu dikatakan, Anda dapat menggunakan editor tolong; CoffeeCup mungkin tidak untuk Anda *** Pilih hati-hati karena web designer mendapatkan aneh melekat pada editor mereka.. Apapun Editor Anda memilih mungkin dengan Anda untuk tahun mendatang.
  1. <DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title> </ title>
  6. <meta name="description" content="">
  7. <meta name="keywords" content="">
  8. <- [If lt IE 9]>
  9. <script src="//html5shim.googlecode.com/sin/trunk/html5.js"> </ script>
  10. <[Endif] ->
  11. </ Head>
  12. <body>
  13. </ Body>
  14. </ Html>

Bandingkan di atas untuk apa CoffeeCup memiliki sebagai template default dan Anda akan melihat beberapa perbedaan:

tag <title> </ title> harus dilakukan di bawah <meta charset=”utf-8″> dan di atas segalanya di head. Ini tidak penting, tapi itu penempatan yang lazim :
  1. <meta name="generator" content="CoffeeCup (www.coffeecup.com)">
  2. HTML Editor tidak diperlukan.

Ini adalah plug CoffeeCup itu. Saya kira kita tidak bisa iri kepada mereka bahwa, mereka memberikan kita perangkat lunak setelah semua.
Anda juga tidak perlu <meta name=”created” content=”(date)”>Ini mencatat saat pertama kali membuat halaman. Tidak apa-apa untuk SEO, ditambah itu informasi yang saya pribadi tidak pernah diperlukan, tapi itu terserah Anda.

Beberapa hal yang saya anggap penting yang lainnya tidak. HTML memiliki beberapa absolut. Anda dapat dan harus mengembangkan cara Anda sendiri dalam melakukan sesuatu.

Jika Anda bertanya-tanya, sebagai berikut:
  1. <- [If lt IE 9]>
  2. <script src="//html5shim.googlecode.com/sin/trunk/html5.js"> </ script>
  3. <[Endif] ->

Mengatakan … browser IE lebih tua dari IE9 ([if lt IE 9] berarti “jika kurang dari IE 9″) untuk memuat javascript yang membuat HTML5 fungsi struktural baru tag. Microsoft IE tidak mendukung mereka sampai IE9.

Ini adalah contoh dari apa yang disebut browser sniffing. Dengan diperkenalkannya IE9 Microsoft akhirnya sesuai dengan standar HTML5 dasar. Dengan browser, keberuntungan mengendus akhirnya akan menjadi sesuatu dari masa lalu. Setidaknya itu terlihat seperti browser masalah kompatibilitas mungkin menjadi kurang rasa sakit di leher dari itu telah sampai saat ini. Saya berharap demikian.
  1. <nav>
  2. <ul>
  3. <a href="index.htm"> rumah </ a> </ li>
  4. </ Ul>
  5. </ Nav>

Saya telah menciptakan sebuah halaman, Template Baru saya, berdasarkan apa yang baru saja Anda lakukan. Ada juga beberapa CSS untuk tata letak halaman. Lihatlah dan melihat apakah isi dari tag tubuh terlihat sama sekali seperti milik Anda. Aku bernama template saya “baru-template.htm”. Anda harus menamainya dengan “index.htm” (atau index.html) dan menyimpannya dalam sebuah folder bernama “website” di desktop Anda, atau suatu tempat Anda dapat menemukannya nanti.

Saya membuat template ini cara ini harus sederhana dan mudah dimengerti, namun saya akan menjadi yang pertama untuk mengakui itu membosankan. Jadilah lebih kreatif.

Jauhkan layout dan navigasi yang sederhana, lurus ke depan dan intuitif … tapi menjadi kreatif.

Dalam desain web ada beberapa hal yang tidak dapat Anda lakukan dan teman lain yang mungkin tidak seharusnya. Ketika Anda mendapatkan pengalaman Anda akan melakukan kesalahan – dan Anda akan menempatkan banyak waktu dan usaha dalam mengoreksi mereka … tapi kemudian ada ide-ide gila yang pop di kepala Anda yang melanggar segala macam “aturan”, tapi itu membuat dan menyenangkan untuk membuat – unik.

Sementara isi dari elemen <header> dan <nav> cenderung bervariasi sedikit dari page elemen <article> yang berisi konten unik untuk setiap halaman Ini.. Apa yang Anda baca sekarang adalah dalam <article> yang elemen … mungkin dalam hal ini tidak ada banyak action, tetapi Anda mungkin mengerti.

Saya telah  melihat ke dalam apa yang dilakukan para ahli mengatakan elemen <article> adalah ada dan tidak banyak dijelaskan tentang subjek tersebut. hanya relatif konsisten, saya dapat memungut dari semua pembicaraan esoteris adalah bahwa hal itu harus berisi konten. yang berdiri sendiri tersebut sebuah artikel.

Coba File lama kita yang sebelumnya telah kita buat, yang berisi header dan nav

sekarang kita coba, copy css berikut :
  • article { width: 950px; display: table; } dan paste pada tag <style>
kemudian mark HTML berikut :
  1. <article>
  2.  <h1>ini Judul artikel</h1>
  3.  <p>dan disini artikel element</p>
  4.  </article>

script berikut dapat anda pastekan dibawah tag <nav>. beginilah script artikel dibuat. anda dapat menambahkannya di website atau blog anda sehingga optimasi html5 akan lebih sempurna.

Dalam desain web hal pertama yang Anda ingin lakukan adalah mengundang orang-orang di situs Anda Kemudian setelah ada. Anda ingin mereka tinggal di sana, dengan kata lain Anda ingin situs Anda untuk menjadi “lengket”. Melakukan hal hampir selalu ada hubungannya dengan memiliki bersangkutan dan konten yang menarik konten yang baik adalah apa yang pengunjung inginkan.. Berikan kepada mereka.

Menulis konten untuk web sangat sulit karena, tidak seperti buku atau Kindle, membaca di monitor sulit untuk melacak di mana Anda berada ketika bergulir ke atas dan ke bawah halaman.. Anda akan melihat bahwa di situs ini saya sering istirahat, optimasikan halaman dengan:
  •     lists
bold atau  italic fonts dan beberapa contoh  <code> HTML5
Ini memberikan pengunjung petunjuk visual untuk melacak di mana mereka ditempatkan foto
ujuan dari sebuah situs web yang diwujudkan dalam isinya – .. Baik itu tujuan Anda dalam menciptakan situs atau tujuan pengunjung pergi ke sana Sebagian besar konten yang masuk dalam elemen <article> sinilah akan mendapatkan hits dari audien.

W3C.org menulis: 
“Elemen selain merupakan konten yang menyinggung hubungan dengan konten yang membentuk aliran tekstual utama dari dokumen.”

Siapapun yang berbicara bahasa Inggris tahu apa kata “selain” berarti Setiap orang harus bisa lebih atau kurang memahami apa unsur selain melakukan tanpa harus membaca satu kata pada subjek.. Setelah mencoba untuk menembus definisi W3C aku tidak begitu yakin. Ini lebih membingungkan dan begitu bertele-tele.

W3C terus mengatakan: * “elemen ini dapat digunakan untuk efek tipografi seperti tarik tanda kutip atau sidebar, untuk iklan, untuk kelompok elemen nav, dan untuk konten lain yang dianggap terpisah dari konten utama halaman.”

Itu sedikit lebih baik, saya tidak ingat pernah menggunakan “kutipan menarik”, “sidebars” atau “kelompok elemen nav” dan saya ragu apakah saya benar. Tahu, tapi aku ragu.. Di sisi lain di mana harus menempatkan iklan adalah masalah nyata setiap hari saya dan puluhan ribu desainer web lain miliki.

Untuk SEO yang lebih baik saya ingin bisa untuk iklan terpisah dari konten – ..   jika Anda akan, “menempatkan mereka ke samping” Mesin pencari harus tahu apa yang saya pikir dan elemen tidak signifikan. Elemen selain memberi saya sarana untuk memasukkan . sesuatu di halaman yang tidak penting bagi makna iklan halaman tidak berhubungan – tangensial atau -. untuk sesuatu yang lebih dari saya perlu gunakan  di samping tag. 

Unsur <footer> :
Unsur <footer> adalah yang terakhir dari apa yang diajarkan unsur-unsur bagian penting dalam dasar HTML5.
Sebagian besar halaman harus memiliki <header>, <nav>, <article> dan tag <footer> Meskipun tidak diperlukan lagi dari rumah wajib memiliki kamar tidur atau dapur,. Tetapi tidak akan jauh dari rumah tanpa mereka. Demikian juga keempat unsur ini melayani fungsi yang berbeda sebagian besar halaman web perlu diisi.
Header, dan footer nav cenderung tetap sama pada setiap halaman. Setelah mereka membuat Anda dapat menyalin dan menyisipkannya ke dalam halaman baru kemudian menambahkan artikel. Menjaga tampilan yang konsisten di seluruh situs berarti pengunjung dapat fokus pada apa yang membawa mereka ada di tempat pertama.
Footer dapat digunakan untuk melakukan banyak hal yang mencakup (namun tidak terbatas pada) berikut ini:
.Gunakan untuk menyelesaikan apa yang tersisa dibatalkan di header dan nav.   Sebuah header dibuat dengan baik dan bagian nav harus sederhana dan mudah, tetapi kesederhanaan bisa datang pada rincian – .. Sering rincian penting “Hotel X” mungkin cukup untuk sebuah header selama footer memiliki “Liburan di Hotel X Rumah Anda jauh dari rumah di jantung kota mu “.
.Seringkali situs yang lebih besar memiliki link di footer yang tidak sesuai di nav atau jika mereka melakukan fit akan mengalihkan perhatian pengunjung dari halaman yang lebih penting. Tidak seperti buku, website jarang membaca dari awal sampai akhir.
.Pengunjung sering kali mendarat di halaman lain selain halaman rumah dan melanjutkan melalui situs tanpa urutan tertentu. Ini berarti bahwa selain teks (yang pada halaman web akan pergi pada tag artikel) setiap halaman harus memiliki setara dengan buku judul halaman (header), daftar isi (bagian nav), dan footer yang melakukan segala sesuatu cukup banyak yang lain. Pengunjung ingin tahu bukan hanya apa yang situs adalah tentang tetapi yang di belakangnya. Ini pertanyaan kepercayaan.
.Web, seperti media, adalah cara komunikasi Sebuah website tidak lebih dari Anda (atau siapa pun mempekerjakan Anda) mengatakan sesuatu kepada siapa saja yang ingin membaca footer harus mencakup informasi tentang siapa “Anda” adalah -. Terutama ketika uang mungkin berpindah tangan. Orang ingin tahu semua yang mereka bisa tentang siapa mereka memberikan uang mereka ke. Sertakan informasi yang cukup di footer sehingga pengunjung memiliki setidaknya gambaran umum tentang apa yang terjadi.
.Banyak pengunjung ke sebuah situs tak tahu-menahu tentang subjek di tangan Saya pernah melihat sebuah page yang tidak memiliki lokasi mereka di footer.. Tidak ada yang akan membuang waktu mereka mencari informasi yang seharusnya jelas dari awal. Apa yang ada di SEO merupakan efek footer.
.Informasi yang tidak tersedia untuk orang, tidak tersedia untuk bot. Googlebot tidak dapat benar indeks situs Bed & Breakfast disebutkan di atas tanpa lokasi.
.Menulis judul yang baik adalah hal yang paling penting yang dapat Anda lakukan untuk SEO tapi judul yang baik saja tidak cukup. Isi dari halaman, termasuk konten di footer, harus memiliki informasi yang berkaitan dengan apa yang ada di judul dan deskripsi meta tag.
Orang memilih untuk pergi ke situs tertentu untuk suatu alasan dan jika situs yang tidak menyelesaikan masalah mereka – tidak, jika Anda mau, “menggaruk gatal mereka” – Mereka dapat dengan mudah pergi ke tempat lain Sebuah footer yang baik dapat melakukan banyak hal. terhadap menjaga pengunjung dari mencari padang rumput hijau.
Sebelum kita melanjutkan ke halaman Selanjutnya mari kita mengupdate template Buka salinan baru-article.htm template dan mencoba untuk menambahkan footer.. footer saya miliki dalam pikiran adalah hanya nama saya dan email. kecuali bahwa itu terjadi di bagian bawah dari halaman. Cobalah untuk menambahkan CSS juga.
Anda dapat melihat apa yang saya lakukan pada file yang kita buat. Tidak ada yang mengatakan Anda harus melakukan hal yang sama.. Bahkan jika Anda meminta sepuluh web designer berpengalaman untuk menulis new-template-footer.htm dari awal, kemungkinan besar bahwa .. Anda akan melihat sepuluh Sourcecode  yang berbeda Secara khusus CSS akan berbeda Tidak ada “benar” – yang saya pribadi berpikir bahwa adalah salah satu kekuatan besar dari HTML dan CSS. anda dapat menambahkan elemen footer di barisan paling bawah.

Unsur <section> :
Unsur <section> dan unsur-unsur kita telah membahas dalam lima halaman terakhir adalah contoh dari apa yang dikenal sebagai HTML semantik. Unsur-unsur tambahan arti pada isi mesin pencari yang dapat digunakan untuk lebih memahami sebuah halaman.. Halaman ini telah lebih lanjut tentang semantik web .
W3C mengatakan: “Unsur <section> merupakan bagian umum dari sebuah dokumen atau aplikasi.”
Hal selanjutnya mengatakan: “. Unsur <section> bukan unsur wadah generik”
Aku juga bingung, namun ada perbedaan.
Jika semua yang Anda ingin lakukan adalah memiliki sesuatu terlihat penggunaan yang berbeda tag div (sebuah wadah generik) dan style CSS.   Jika Anda ingin bagian tertentu dari sebuah halaman terpisah dari sisa dari halaman karena informasi di dalamnya -. “Isi” nya, menggunakan elemen bagian (bagian umum) Gunakan elemen bagian jika ada apa W3C disebut perbedaan.”semantik “
Saya masih tidak jelas mengapa satu adalah “wadah” dan yang lain sebuah “bagian” -. Tapi apa pun kita adalah untuk tidak bertanya-tanya mengapa … Yang penting adalah bahwa Anda tahu kapan harus menggunakan satu atau yang lainnya.
Anda dapat menerapkan CSS untuk elemen bagian seperti yang akan Anda div, namun mesin pencari mengabaikan tag div – mereka semantik netral.
Unsur bagian tidak boleh digunakan menyimpan sebagai pilihan terakhir dan kemudian biasanya harus memiliki header (h1 sampai h6). Ini seperti bahwa ruang ekstra di rumah Anda tidak pernah menggunakan kecuali bila Anda tidak bisa memikirkan tempat lebih baik. Beberapa yang bekerja dengan W3C dalam pengembangan HTML5 pikir, elemen bagian itu tidak perlu – mereka pikir lebih baik untuk hanya menggunakan tag artikel dan pada awalnya saya cenderung setuju Lalu aku menemukan penggunaan sempurna untuk itu..
Pada bagian bawah halaman ini saya memiliki definisi “Semantic HTML” Saya tidak ingin menurunkan berat badan SEO dengan elemen selain itu, tapi aku juga tidak ingin mengurangi apa yang ada di tag artikel utama. Elemen bagian sesuai tagihan sempurna.
Semua tag baru:. Header, nav, artikel, footer, aside dan section adalah sebagai kelompok yang disebut elemen Bagian ini tidak berarti elemen bagian sesuatu yang lebih dari sekedar salah satu dari mereka, meskipun Anda dapat dimaafkan untuk asumsi sebaliknya.
Sepanjang tutorial ini saya telah berulang kali menyebutkan bahwa Anda harus selalu merancang untuk dua audien, satu manusia dan yang lain bot. Header, nav, artikel, footer, samping dan bagian unsur yang untuk itu penonton yang terakhir.
Unsur-unsur ini memberi makna pada isi mesin pencari tidak bisa memastikan tanpa mereka Pada titik ini (April 2012) web designer sedikit menggunakannya,.  Mereka memiliki dukungan browser yang luas dan mereka masuk akal. Semakin baik mesin pencari dapat “melihat lihat “dan menganalisis sebuah situs semakin baik.

Unsur <img> :
Unsur <img>, seperti elemen yang paling berguna, adalah sebuah wadah. Ini bukan tentang image itu sendiri, tapi wadah untuk satu itu.

Sama seperti elemen p memegang sebuah paragraf, elemen img memegang image Namun, ia melakukannya dengan cara yang sama sekali berbeda. Terutama, image adalah file terpisah yang banyak ke dalam ruang yang diciptakan oleh elemen img..

… Ada tiga jenis file gambar yang digunakan dalam HTML, ditandai dengan ekstensi nama file yang berbeda: jpg, gif dan png (juga dikenal sebagai file JPEG, GIF dan Ping); yang kita akan melihat berikutnya.

Mari kita pertama kita lihat apa yang saya digunakan untuk menampilkan gambar di bawah ini. Perhatikan bahwa tidak ada tag penutup. Ini salah satu dari beberapa elemen yang tidak menggunakannya.
  • <Img src = "http://www.css-weaever.com/images/gambar.jpg" alt="suatu gambar" width="200" height="300">

Elemen img memiliki sejumlah apa yang disebut atribut: **

.atribut “src” atau atribut sumber memberitahu browser apa gambar (file gambar mis.) berjalan di tag dan di mana menemukannya. Hal ini diperlukan. Browser mengirimkan instruksi ke server untuk pergi ke folder bernama images, mendapatkan gambar.jpg dan mengirimkannya kembali ke klien (mis. komputer Anda) dan menunjukkannya di tempat yang disediakan oleh tag gambar.
Elemen img dapat memiliki “class” atribut seperti kebanyakan unsur.

.Anda dapat memposisikan gambar, tambahkan perbatasan, margin dan banyak lagi dengan CSS.
The “alt” atribut mengacu pada teks alternatif atau teks yang W3C panggilan “konten fallback”. Hal ini juga diperlukan.

.Jika karena alasan tertentu pengunjung tidak dapat melihat gambar atribut alt menjelaskangambar apa. Para pengunjung utama yang tidak bisa “melihat” adalah gambar web crawler yang dikirim oleh mesin pencari. Sebagaimana telah saya katakan berulang kali di seluruh tutorial , situs memiliki dua penonton -. crawler menjadi kedua atribut alt memainkan peran dalam SEO. Sementara “tinggi” dan “lebar” yang tidak diperlukan, mereka sangat direkomendasikan.

.Halaman tidak memuat sekaligus Ketika sebuah halaman baru akan terbuka browser akan mulai memuat apa yang bisa, kalau itu bisa dan sering gambar selesai download lalu.. Dengan tinggi dan atribut width set browser dapat memodif posisi (dengan CSS) dan ukuran tag img sebelum memberatkan beban file gambar.

Dalam atribut sumber ada dua cara untuk menunjukkan apa yang dikenal sebagai “jalan” ke file gambar:

“path absolut”:
  • <Img src = "http://www.css-weaever.com/images/gambar.jpg" ...

“path relatif”:
  • <Img src = "images/gambar.jpg" ...

Kemudian menjadi “relatif” dalam arti bahwa lokasinya di server relatif terhadap lokasi file html meminta itu, yang dalam hal ini adalah: gambar-element.htm – dengan kata lain, halaman ini.
Relatif dan absolut path untuk gambar.jpg

Pada server saya adalah folder (juga disebut “direktori”) bernama “css-weaver.com” -. “Root direktori” Dalam direktori root adalah file gambar-element.htm dan gambar folder bernama, yang pada gilirannya memegang gambar.jpg.

Sistem file di server bekerja seperti sistem file pada komputer Anda untuk menyimpan fakta bahwa hal itu dapat diakses dari internet. Komputer Anda memiliki firewall (atau setidaknya seharusnya) bahwa apa pun blok dari luar  dapat masuk

Adalah penting bahwa Anda memahami bagaimana jalan bekerja yang berlaku untuk semua file yang digunakan pada situs CSS, javascript, PHP -. Apa yang telah Anda – semuanya disimpan dalam file dan untuk mengakses file dari setiap jenis Anda harus mengikuti jalan. Bahkan URL dari halaman ini:. http://www.css-weaver.com/index.htm (atau halaman lain di situs apapun) hanya jalan Kami akan bekerja lebih dengan jalan seperti yang kita dapatkan lebih lanjut bersama di tutorial Jika Anda bingung semua bisa saya katakan adalah untuk tidak khawatir. Ini juga mungkin akan lebih buruk sebelum menjadi lebih baik, tetapi akan menjadi lebih baik … akhirnya..

“src” atau atribut sumber memberitahu browser apa gambar (file image mis.) berjalan di tag dan di mana menemukannya. Hal ini diperlukan. Browser mengirimkan instruksi ke server untuk pergi ke folder bernama images, mendapatkan gambar.jpg dan mengirimkannya kembali ke klien (mis. komputer Anda) dan menunjukkannya di tempat yang disediakan oleh tag image.
Diposkan oleh di
Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)