Komputer, Lunak

Carane nggawe HTML-kaca: langkah dening langkah, lan Rekomendasi teknologi

Emange carane nggawe HTML-kaca? Kanggo nindakake iki, sampeyan perlu kanggo nglampahi sawetara jam, lan sampeyan bakal ngerti kerja HTML. Lan nggawe kaca pisanan bakal bisa kanggo 5 menit.

HTML stands for Hypertext Markup Language. Translated, iku tegese "Hypertext Markup Language". Iku penting kanggo ngerti HTML sing - iku ora basa pamrograman, yaiku situs markup.

Kabeh browser modern bisa konek. Banjur padha nuduhake informasi ing cara trep kanggo pangguna, minangka advance iki dimaksudaké dening penulis.

Basa iki migunakake tags khusus. Saben tag wis fungsi. A akèh wong. Saenipun, sampeyan kudu mangerteni kabeh. Nanging kanggo kawruh dhasar pamula cukup.

Dasar HTML

Sadurunge bisa nggawe HTML-kaca, sampeyan kudu ngerti apa iku. Ing basa iki, ana rong konsep: ing unsur lan tag.

Kanggo nemtokake ngendi unsur wiwit lan nutup nganggo mbukak lan nutup tag. Nanging katon kaya iki.

isi

Nalika sampeyan bisa ndeleng, bukaan lan tag nutup beda-beda mung dening "/".

Kabeh HTML-document pesawat saka unsur iki. Ana syarat tartamtu kanggo struktur dokumen. Kabeh isi kaca kudu antarane loro tags lan . Nalika nulis kode, njupuk iku pakulinan kanggo langsung sijine mudhun opening lan tag nutup.

Uga elinga struktur HTML saka basa wis hirarki dhewe. Yen ora, iku diarani nyarang. tag HTML sing paling penting, amarga kabeh wong sing nang iku.

Ing HTML, ana loro unsur anak:

... ;
.. .

Ing bagean HEAD nemtokaken macem-macem informasi layanan. Informasi iki ditampilake ing browser ora. Contone, pedoman kanggo gawe, kanggo kabeh program, robot lan liyane.

Wangsulan: Bab ingkang paling penting - ana isi.

Ing bagean BODY nemtokaken isi document, kang bakal katampil kanggo pangguna.

Sinau kanggo langsung gawe tags umum lan pribadi, kang bisa dadi lan 10 sub-item. Kajaba iku, kanggo penak tags ketik teks utawa apa mlebu. Contone, kaya iki.

Supaya sing tags witjaksono wigati padha ing tingkat sing padha, lan anak - ing "nang". Dadi luwih gampang kanggo maca lan nelusuri Piece tartamtu saka kode. Yen ora, sampeyan bisa njaluk bingung. Nanging kanggo papan nyimpen punika kepala awak tags bisa rampung tanpa lapis. Supaya teka marang liya-liyané wis boten indent. Kabèh liya iku seng di pengeni kanggo misahake.

Carane nggawe kaca HTML prasaja ing

Kanggo nulis kode sampeyan perlu sawetara jenis editor. A akèh wong. Popular sing Notepad ++ lan Adobe Dreamweaver. Sampeyan uga bisa nggunakake notebook.

Punika apa Notepad ++ editor.

Iku banget editor pangguna-loropaken lan iku free. Ing ndhuwur Adobe Dreamweaver mbayar. Boten kados editor dirancang kanggo nulis kode HTML saka dialpad - ing label khusus sing disorot. Yen ora madhangi, iku ateges sing wis ditulis iku salah.

Supaya cocog basa cahya, iku perlu kanggo nemtokake ing setelan.

Ayo kang katon ing carane nggawe kaca HTML ing Notepad. Sing, ngrampungaké bagéan technical lan banjur mung nerusake kanggo nyinaoni tag.

Carane nggawe kaca web ing HTML notebook

First, mbukak notebook.

Banjur ngetik ing sing kasebut ing gambar ngisor iki.

Njaluk digunakake kanggo nulis tangan kang, ora mung salinan. Nalika nulis tangan, sing luwih apik apal kabeh database tag.

Banjur klik ing menu "Simpen berkas" lan nemtokake jeneng file, nanging karo .html extension.

file bisa dibukak ing browser Panjenengan, lan seneng asil. Saiki sampeyan kudu cetha carane nggawe kaca web ing HTML notebook.

World Consortium W3C

Ana organisasi kayata W3C, kang develops lan nindakake kabeh sing standar kanggo Internet. Kabeh browser sing tundhuk standar lan proses iki tata letak (s) kaca-kaca ing sesuai karo aturan iki.

Website resmi pangembang saka HTML, sampeyan bisa nemokake meja karo label lan aturan babagan nggunakake. Ing artikel iki kita katon ing paling dhasar.

Sampeyan bisa mikir bab apa bisa dadi tengen? Kabeh iki tags duwe rujukan. Sawetara wong:

tag pilihan.
Pareng.
tag Blank.
outdated
Ilang.

Tags ing HTML

Sadurunge bisa nggawe HTML-kaca, sampeyan kudu ngerti sing kanggo ing layanan saka HEAD ing.

Lowongan Ing wilayah ana loro tags prentah lan opsional. tag wajib nuduhake header. Punika ditulis Title </ title>. Dheweke diutus kanggo kabeh document. Lan apa sing ndeleng ing asil search engine Google - judhul tag. </p> <p> Kita nguripake kanggo bagean BODY. Ana unsur sing ditampilake ing browser, lan ana non-katampil. Contone, komentar sing ora ditampilake pangguna. Padha bisa digunakake kanggo cathetan utawa tips for karyawan liyane yen bisa ing tim. </p> <p> Padha ditetepake minangka <em><! - komentar -></em> </p> <p> Kabeh sing antarane <! - lan ->, program dianggep ing cara iki. Wigati dimangerteni sing ora bisa sijine tag komentar ing tag komentar liyane. Amarga sanalika sampeyan mbukak <! -, kabeh sing dadi, iku bakal ora dituduhake. Informasi ora bakal katon anggere pawang ora bakal weruh tag nutup ->. </p> <p> Conto saka pager kuwi: </p> <p> <em><! - pisanan kanggo komentar <! - komentar liya -> tutugan pangalembana kapisan -></em> </p> <p> browser bakal asil ing ngisor iki </p> <p> <em>tutugan pangalembana kapisan -></em> </p> <p> Nanging Piece saka <em><! - pisanan kanggo komentar <! - komentar liya -></em> ora bakal katon. Tag opening kapindho <! - dilirwakaké lan dideleng minangka teks kosong. </p> <h2> Heading ing teks </h2><p> Title nemtokaken ora mung ing bagean HEAD nggunakake tag judhul. Ing babak saka header kudu kasebut kudu. Wiwit mung pangguna sumerep. </p> <p> Headlines teka ing macem-macem tingkat. Mangkono hirarki ing teks. volume padha, bab, paragraf ing buku. </p> <p> Iku mung 6 tingkat. Judhul utama ditetepake <h1> Title </ h1>. Ing istilah mromosiaken teks kaca ing tags h1, lan judhul sing arep padha. Menapa malih, h1 saka estetis titik tampilan, ana sing arep mung siji. Nanging iki ora ateges sing browser ora nangani h1 sakteruse. Padha bisa nindakake kabeh pengin, nanging iki ora seng di pengeni. </p> <p> Kanggo subheadings nggunakake tags saka h2 kanggo H6. Padha supaya - disebut judhul pisanan, kapindho, katelu tingkat, papat, lima lan enem. Dadi nggawe data ketik teks utawa lan divisi menyang kategori. </p> <p> Nanging katon kaya iki. </p> <p><amp-img src="https://i7.unansea.com/image/32c0ae3c7dd50ec7.jpg" alt="nggawe pranala kaca html" width="371" height="256" layout="intrinsic"></amp-img></p> <h2> paragraf </h2><p> Tèks utama ing kode sampeyan perlu kanggo ndhaftar tag <p> ... </ p>. Dheweke teka saka tembung "paragraf". Saben paragraf kudu isi tag <p>, lan ora sculpt kabeh disimpen ing sak tumpukan. Normal line break ora bakal diproses. Kabèh bakal nuduhake ing baris siji. Kanggo pindhah kudu nggunakake <a href="https://jw.unansea.com/baris-break-ing-html-ing-nggunakake-tag-br/">tag <br>.</a> </p> <p> Wigati dimangerteni menawa transfer tag ora ditutup. Iku siji. </p> <p> Coba ing conto ayat. </p> <p><amp-img src="https://i7.unansea.com/image/7560d4ec7dd00ec6.jpg" alt="puisi Pushkin kang" width="700" height="627" layout="intrinsic"></amp-img></p> <p> tags beda, saliyane kanggo "jeneng" sawijining, ana ngubungake a. Contone, tag paragraf duwe ngubungake "Alignment", kang wis ditulis align. Sampeyan bisa ngeset kanggo kiwa, tengen, tengah. Sing, Alignment saka kiwa utawa tengen utawa tengah. </p> <h2> nggunakake pranala </h2><p> Sampeyan mbokmenawa wis panginten: carane nggawe HTML-kaca kanthi pranala? Rumit bab iku ana apa-apa. Gawe Kaca HTML banget prasaja. Iki waé ana tag <a> khusus. Wis sawijining kawicaksanan dibutuhake. link tepat katon kaya iki: </p> <p> <em>link teks <a situs href="http:// /article/255842/%D0%B0%D0%B4%D1%80%D0%B5%D1%81 stranitsy"> </a></em> </p> <p> <em><amp-img src="https://i7.unansea.com/image/8008f29b7e1b0ed1.jpg" alt="nggawe pranala kaca html" width="700" height="199" layout="intrinsic"></amp-img></em> </p> <p> Yen sampeyan ora nemtokake alamat lan teks, banjur link iki bakal ora ana guna utawa ora katon kanggo pangguna. </p> <h2> kesimpulan </h2><p> Ana akèh tags, lan duwe pesawat dhewe saka kawicaksanan. Sawise maca informasi iki, sampeyan kudu ngerti carane nggawe kaca web HTML. </p> <p> Supaya kanggo nggedhekake kawruh ing wilayah iki, sampeyan perlu kanggo maca liyane buku lan nggunakake tags referensi resmi ing HTML, kang dumunung ing situs W3C. Yen sampeyan ora bisa nggunakake direktori periodik dianyari penulis basa, sampeyan bakal hard kanggo dadi profesional ing lapangan iki. </p> </div>  </div>  </div>  </div>  </div>  </div>  <div id="mvp-post-more-wrap" class="left relative"> <h4 class="mvp-post-header"> <span class="mvp-post-header">Similar articles</span> </h4> <ul class="mvp-post-more-list left relative"> <li> <div class="mvp-post-more-img left relative"> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/carane-mbusak-cookie-ing-sawetara-browser-populer/"> <p>Carane mbusak cookie ing sawetara browser populer</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Komputer</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://jw.unansea.com/carane-mbangun-histogram-ing-excel-lan-sabda/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/90c3f49a7eac0edb-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/90c3f49a7eac0edb-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/carane-mbangun-histogram-ing-excel-lan-sabda/"> <p>Carane mbangun histogram ing Excel lan Sabda</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Komputer</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://jw.unansea.com/editors-grafis-ing-rong-versi-dhasar/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/4c20715b61fd0e69-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/4c20715b61fd0e69-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/editors-grafis-ing-rong-versi-dhasar/"> <p>Editors grafis ing rong versi dhasar</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Komputer</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/program-ngawasi-suhu-komputer-thermometer/"> <p>Program ngawasi suhu: komputer thermometer</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Komputer</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/carane-nggawe-gambar-layar/"> <p>Carane nggawe gambar layar</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Komputer</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/carane-mbusak-dr-web-saka-desktop-utawa-laptop/"> <p>Carane mbusak Dr. Web saka desktop utawa laptop.</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Komputer</span></h3> </a> </div>  </li> </ul> </div>  <p> </p><p> </p><p> </p><p> </p> <div id="mvp-post-more-wrap" class="left relative"> <h4 class="mvp-post-header"> <span class="mvp-post-header">Trending Now</span> </h4> <ul class="mvp-post-more-list left relative"> <li> <div class="mvp-post-more-img left relative"> <a href="https://jw.unansea.com/gauss-conto-solusi-lan-kasus-khusus/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/9e3eff3461900e5e-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/9e3eff3461900e5e-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/gauss-conto-solusi-lan-kasus-khusus/"> <p>Gauss: conto solusi lan kasus khusus</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Tatanan</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://jw.unansea.com/moscow-larnaca-gambaran-rute-wektu-pesawat/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/90231f0d7e650ed5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/90231f0d7e650ed5-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/moscow-larnaca-gambaran-rute-wektu-pesawat/"> <p>Moscow - Larnaca gambaran rute, wektu pesawat</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Traveling</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/aksi-karo-rambute/"> <p>Aksi karo rambute</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Kaendahan</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/jinis-kepemilikan/"> <p>Jinis kepemilikan</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Duit</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/aja-aku-kudu-bandage-kanggo-wanita-ngandhut-carane-milih/"> <p>Aja aku kudu bandage kanggo wanita ngandhut carane milih?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Home lan Family</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://jw.unansea.com/burner-kanggo-kompor-listrik-jinis-lan-ciri/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/685ebdb26ff90e9d-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/685ebdb26ff90e9d-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/burner-kanggo-kompor-listrik-jinis-lan-ciri/"> <p>Burner kanggo kompor listrik: jinis lan ciri</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Homeliness</span></h3> </a> </div>  </li> </ul> </div>  <p> </p><p> </p><p> </p><p> </p> <div id="mvp-post-more-wrap" class="left relative"> <h4 class="mvp-post-header" style="margin-top:40px;"> <span class="mvp-post-header">Newest</span> </h4> <ul class="mvp-post-more-list left relative"> <li> <div class="mvp-post-more-img left relative"> <a href="https://jw.unansea.com/range-rover-sport-svr-spesifikasi-foto-lan-ulasan/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/f0ea856e7e790edb-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/f0ea856e7e790edb-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/range-rover-sport-svr-spesifikasi-foto-lan-ulasan/"> <p>Range Rover Sport SVR: spesifikasi, foto lan ulasan</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Automobiles</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://jw.unansea.com/apa-pijet-thai-pripun-thai-pijet/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/d74d78c47d680ebf-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/d74d78c47d680ebf-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/apa-pijet-thai-pripun-thai-pijet/"> <p>Apa pijet Thai? Pripun Thai pijet?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Kesehatan</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/nggulung-cute-saka-cuyu-tabuh/"> <p>Nggulung Cute saka cuyu tabuh</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Pangan lan omben-omben</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://jw.unansea.com/vaksin-hiv-bakal-bantuan-kanggo-nggawe-antibodi-ing-sapi/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/067449acd4cd0fa3-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/067449acd4cd0fa3-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/vaksin-hiv-bakal-bantuan-kanggo-nggawe-antibodi-ing-sapi/"> <p>Vaksin HIV bakal bantuan kanggo nggawe antibodi ing sapi</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">News lan Masyarakat</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://jw.unansea.com/saus-multifaceted-calvet-kaleidoscope-of-flavors/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/5c0bd5707e7e0ed5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/5c0bd5707e7e0ed5-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/saus-multifaceted-calvet-kaleidoscope-of-flavors/"> <p>Saus multifaceted "Calvet": kaleidoscope of flavors</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Pangan lan ombenan</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://jw.unansea.com/kembang-apa-sing-arep-ing-omah-the-houseplants-paling-migunani/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/cac8b4156f200e86-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/cac8b4156f200e86-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://jw.unansea.com/kembang-apa-sing-arep-ing-omah-the-houseplants-paling-migunani/"> <p>Kembang apa sing arep ing omah? The houseplants paling migunani</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Homeliness</span></h3> </a> </div>  </li> </ul> </div>  </div>  </div>  </article>  </div>  <footer id="mvp-foot-wrap" class="left relative"> <div id="mvp-foot-bot" class="left relative"> <div class="mvp-main-box"> <div id="mvp-foot-copy" class="left relative"> <p>Copyright © 2018 jw.unansea.com. Theme powered by WordPress.</p> </div>  </div>  </div>  </footer> </div>  </div>  </div>  <div id="statcounter"> <amp-pixel src="https://c.statcounter.com/11999983/0/a97b263e/1/"> </amp-pixel> </div> </body> </html>