Komputer, Perangkat lunak

Cara membuat HTML halaman: petunjuk langkah demi langkah, dan rekomendasi teknologi

Anda berpikir bagaimana untuk membuat HTML halaman? Untuk melakukan ini, Anda perlu menghabiskan beberapa jam, dan Anda akan mengetahui dasar-dasar HTML. Dan Anda membuat halaman pertama Anda akan dapat 5 menit.

HTML adalah singkatan dari HyperText Markup Language. Diterjemahkan, itu berarti "Hypertext Markup Language". Hal ini penting untuk memahami HTML itu - itu bukan bahasa pemrograman, yaitu situs markup.

Semua browser modern dapat mengenalinya. Kemudian mereka menampilkan informasi dengan cara yang nyaman bagi pengguna, sebagai uang muka itu dimaksudkan oleh penulis.

Bahasa ini menggunakan tag khusus. Setiap tag memiliki fungsi. Banyak dari mereka. Idealnya, Anda perlu mempelajari segala sesuatu. Tapi untuk pengetahuan dasar pemula cukup.

Dasar-dasar HTML

Sebelum Anda dapat membuat HTML-halaman, Anda perlu tahu apa itu. Dalam bahasa ini, ada dua konsep: elemen dan tag.

Untuk menentukan di mana elemen dimulai dan menutup menggunakan membuka dan menutup tag. Ini terlihat seperti ini.

konten

Seperti yang Anda lihat, pembukaan dan tag penutup berbeda hanya dengan "/".

Semua dokumen HTML adalah seperangkat elemen-elemen ini. Ada persyaratan tertentu untuk struktur dokumen. Semua konten halaman harus antara dua tag dan . Ketika Anda menulis kode, bawa kebiasaan untuk segera meletakkan pembuka dan tag penutup.

Juga ingat bahwa struktur HTML dari bahasa memiliki hirarki sendiri. Jika tidak, hal itu disebut bersarang. tag HTML adalah yang paling penting, karena semua yang lain di dalamnya.

Dalam HTML, ada dua elemen anak:

... ;
.. .

Di bagian HEAD menentukan berbagai informasi layanan. Informasi ini ditampilkan dalam browser tidak. Misalnya, pedoman bagi pengembang, untuk semua program, robot dan banyak lagi.

Hal yang paling penting - tidak ada konten.

Bagian BODY menentukan isi dokumen, yang akan ditampilkan kepada pengguna.

Belajarlah untuk segera membuat tag publik dan swasta, karena dapat dan 10 sub-item. Selain itu, untuk kenyamanan tag bersarang melakukan indentasi. Sebagai contoh, seperti ini.

Jadi membuat tag sama pentingnya berada pada tingkat yang sama, dan anak - "dalam". Jauh lebih mudah untuk membaca dan mencari bagian tertentu dari kode. Jika tidak, Anda bisa mendapatkan bingung. Tapi untuk menghemat ruang adalah kepala dan tubuh tag dapat dilakukan tanpa padding. Jadi datang ke semua yang lain tidak ada indent. Segala sesuatu yang lain adalah diinginkan untuk memisahkan.

Cara membuat halaman HTML sederhana di

Untuk menulis kode Anda membutuhkan beberapa jenis editor. Banyak dari mereka. Populer adalah Notepad ++ dan Adobe Dreamweaver. Anda juga dapat menggunakan notebook.

Inilah yang Notepad ++ Editor.

Hal ini sangat Editor user-friendly dan bebas. Di atas Adobe Dreamweaver dibayar. Tidak seperti editor yang dirancang untuk menulis kode HTML dari pad - dalam tag khusus yang disorot. Jika tidak menerangi, itu berarti bahwa Anda telah menulis adalah salah.

Dalam rangka untuk mencocokkan bahasa cahaya, perlu untuk menentukan dalam pengaturan.

Mari kita lihat cara membuat halaman HTML di Notepad. Artinya, menyelesaikan bagian teknis dan kemudian hanya beralih ke studi tag.

Cara membuat halaman web dalam HTML notebook

Pertama, buka notebook.

Kemudian ketik di dalamnya yang ditentukan dalam screenshot berikut.

Biasakan untuk menulis tangan, bukan hanya salinan. Ketika Anda menulis tangan Anda, Anda lebih baik menghafal seluruh database tag.

Kemudian klik pada menu "Save File" dan tentukan nama file, tapi dengan html ekstensi.

file tersebut dapat dibuka di browser Anda, dan menikmati hasilnya. Sekarang Anda harus jelas cara membuat halaman web dalam HTML notebook.

Dunia Konsorsium W3C

Ada sebuah organisasi seperti W3C, yang mengembangkan dan menerapkan semua standar untuk Internet. Semua browser tunduk pada standar dan proses ini tata letak (s) untuk halaman sesuai dengan aturan-aturan ini.

Situs resmi pengembang HTML, Anda dapat menemukan meja dengan semua tag dan aturan penggunaannya. Pada artikel ini kita melihat yang paling dasar.

Anda dapat berpikir tentang apa yang mungkin benar? Semua tag ini memiliki rekomendasi. Beberapa dari mereka:

tag opsional.
Dilarang.
tag kosong.
usang
Hilang.

Tag di HTML

Sebelum Anda dapat membuat HTML-halaman, Anda perlu memahami bahwa untuk menjadi dalam pelayanan HEAD.

KEPALA Di daerah ada baik tag wajib dan opsional. tag wajib mengacu sundulan. Hal ini ditandai dengan Judul </ title>. Dia ditugaskan untuk seluruh dokumen. Dan apa yang Anda lihat dalam hasil mesin pencari Google - judul tag. </p> <p> Kita beralih ke bagian BODY. Ada unsur-unsur yang ditampilkan dalam browser, dan ada non-ditampilkan. Misalnya, komentar tidak ditampilkan kepada pengguna. Mereka dapat digunakan untuk catatan atau tips untuk karyawan lain jika Anda bekerja dalam sebuah tim. </p> <p> Mereka ditunjuk sebagai <em><! - komentar -></em> </p> <p> Semua itu adalah antara <! - dan ->, program dianggap cara ini. Harap dicatat bahwa Anda tidak dapat menempatkan tag komentar di tag komentar lain. Karena segera setelah Anda membuka <! -, semua yang terjadi, itu tidak akan ditampilkan. Informasi tidak akan terlihat selama pawang tidak akan melihat tag penutup ->. </p> <p> Sebuah contoh dari sebuah kandang seperti: </p> <p> <em><! - yang pertama mengomentari <! - komentar kedua -> kelanjutan dari komentar pertama -></em> </p> <p> browser akan menjadi hasil dari berikut </p> <p> <em>kelanjutan dari komentar pertama -></em> </p> <p> Tapi sepotong <em><! - yang pertama mengomentari <! - komentar kedua -></em> tidak akan terlihat. Tag pembuka kedua <! - diabaikan dan dipandang sebagai teks biasa. </p> <h2> Judul dalam teks </h2><p> Judul menentukan tidak hanya di bagian HEAD menggunakan tag judul. Dalam konteks header harus ditentukan tentu. Karena hanya pengguna melihat. </p> <p> Headline datang dalam berbagai tingkat. Dengan demikian hirarki dalam teks. volume setara, bab, paragraf dalam sebuah buku. </p> <p> Hal ini hanya 6 tingkat. Judul utama ditunjuk <h1> Judul </ h1>. Dalam hal mempromosikan teks halaman di tag h1, dan judul harus sama. Selain itu, h1 dari sudut pandang estetika, harus ada hanya satu. Tapi ini tidak berarti bahwa browser tidak akan menangani h1 berikutnya. Mereka dapat melakukan semua yang Anda inginkan, tapi ini tidak diinginkan. </p> <p> Untuk subpos menggunakan tag dari h2 ke h6. Mereka begitu - disebut judul yang pertama, kedua, ketiga tingkat, keempat, kelima dan keenam. Jadi membuat data yang bersarang dan pembagian ke dalam kategori. </p> <p> Ini terlihat seperti ini. </p> <p><amp-img src="https://i7.unansea.com/image/32c0ae3c7dd50ec7.jpg" alt="membuat link halaman html" width="371" height="256" layout="intrinsic"></amp-img></p> <h2> ayat </h2><p> Teks utama dalam kode Anda harus mendaftar tag <p> ... </ p>. Dia datang dari kata "ayat". Setiap paragraf harus mengisi tag <p>, dan tidak memahat semuanya dalam satu tumpukan. Yang normal baris istirahat tidak akan diproses. Semuanya akan menunjukkan dalam satu baris. Untuk transfer perlu menggunakan <a href="https://id.unansea.com/sebuah-garis-istirahat-dalam-html-menggunakan-tag-br/">tag <br>.</a> </p> <p> Harap dicatat bahwa transfer tag tidak tertutup. Dia adalah tunggal. </p> <p> Mempertimbangkan pada contoh ayat. </p> <p><amp-img src="https://i7.unansea.com/image/7560d4ec7dd00ec6.jpg" alt="puisi Pushkin" width="700" height="627" layout="intrinsic"></amp-img></p> <p> tag yang berbeda, selain "nama" nya, ada atribut a. Sebagai contoh, tag paragraf memiliki atribut "keselarasan", yang dilambangkan menyelaraskan. Hal ini dapat diatur ke kiri, kanan, tengah. Artinya, keselarasan dari kiri atau kanan atau pusat. </p> <h2> menggunakan link </h2><p> Anda mungkin sudah berpikir: cara membuat HTML-halaman dengan link? Rumit tentang hal itu tidak ada. Membuat link halaman HTML sangat sederhana. Untuk tujuan ini ada tag <a> khusus. Ini memiliki atributnya diperlukan. link yang tepat terlihat seperti ini: </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="membuat link halaman html" width="700" height="199" layout="intrinsic"></amp-img></em> </p> <p> Jika Anda tidak menentukan alamat dan teks, maka link ini akan berguna atau tidak terlihat oleh pengguna. </p> <h2> kesimpulan </h2><p> Ada banyak tag, dan masing-masing telah menetapkan sendiri atribut. Setelah membaca informasi ini, Anda harus memahami bagaimana untuk membuat halaman web HTML. </p> <p> Dalam rangka memperluas pengetahuan mereka di daerah ini, Anda perlu membaca lebih banyak buku dan menggunakan tag referensi resmi pada HTML, yang terletak di situs W3C. Jika Anda tidak menggunakan direktori periodik diperbaharui penulis bahasa, Anda akan sulit untuk menjadi seorang profesional di bidang ini. </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"> <a href="https://id.unansea.com/bagaimana-membangun-sebuah-histogram-di-excel-dan-word/"> <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://id.unansea.com/bagaimana-membangun-sebuah-histogram-di-excel-dan-word/"> <p>Bagaimana membangun sebuah histogram di Excel dan Word</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://id.unansea.com/bagaimana-cara-menghapus-semua-posting-openid-sekali/"> <p>Bagaimana cara menghapus semua posting "OpenID" sekali</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://id.unansea.com/cara-membuat-isi-firman-dari-berbagai-versi/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/a8ca370670030ea2-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/a8ca370670030ea2-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://id.unansea.com/cara-membuat-isi-firman-dari-berbagai-versi/"> <p>Cara membuat isi "Firman" dari berbagai versi</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://id.unansea.com/kesalahan-651-di-windows-7-apa-itu/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/340c7717701f0e99-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/340c7717701f0e99-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://id.unansea.com/kesalahan-651-di-windows-7-apa-itu/"> <p>Kesalahan 651 di Windows 7: Apa itu?</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://id.unansea.com/pelajari-cara-mengatur-mode-untuk-skyrim/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/9b16255f6fbf0e95-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/9b16255f6fbf0e95-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://id.unansea.com/pelajari-cara-mengatur-mode-untuk-skyrim/"> <p>Pelajari cara mengatur mode untuk "Skyrim"</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://id.unansea.com/bagaimana-untuk-menyimpan-uang-pada-pembelian-menggunakan-ekstensi-browser/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/a74d075c528c1184-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/a74d075c528c1184-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://id.unansea.com/bagaimana-untuk-menyimpan-uang-pada-pembelian-menggunakan-ekstensi-browser/"> <p>Bagaimana untuk menyimpan uang pada pembelian menggunakan ekstensi browser</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://id.unansea.com/mengapa-mimpi-bunga-di-karangan-bunga-memberitahu-buku-mimpi/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/9bcc7dbc70aa0eaa-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/9bcc7dbc70aa0eaa-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://id.unansea.com/mengapa-mimpi-bunga-di-karangan-bunga-memberitahu-buku-mimpi/"> <p>Mengapa mimpi bunga di karangan bunga? memberitahu buku mimpi</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Perkembangan intelektual</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://id.unansea.com/asam-urat-dalam-darah-berkurang-penyebab-dan-gejala/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/ab23f48f7e370ed2-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/ab23f48f7e370ed2-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://id.unansea.com/asam-urat-dalam-darah-berkurang-penyebab-dan-gejala/"> <p>Asam urat dalam darah berkurang: Penyebab dan Gejala</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://id.unansea.com/sakit-kepala-biasa-dan-mual-penyakit-itu/"> <p>Sakit kepala biasa dan mual - penyakit itu?</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://id.unansea.com/dtp/"> <p>DTP</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"> <a href="https://id.unansea.com/vladimir-kirillov-wakil-gubernur-st-petersburg-biografi/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/b70418be7e4e0ed4-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/b70418be7e4e0ed4-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://id.unansea.com/vladimir-kirillov-wakil-gubernur-st-petersburg-biografi/"> <p>Vladimir Kirillov, Wakil Gubernur St Petersburg: biografi</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Berita dan Masyarakat</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://id.unansea.com/mengapa-teka-teki-tentang-gigi/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/2da697e57e6a0ed5-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/2da697e57e6a0ed5-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://id.unansea.com/mengapa-teka-teki-tentang-gigi/"> <p>Mengapa teka-teki tentang gigi?</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Seni dan Hiburan</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"> </div>  <div class="mvp-post-more-text left relative"> <a href="https://id.unansea.com/ilmiah-revolusi-prestasi-dan-peluang/"> <p>Ilmiah Revolusi: prestasi dan peluang</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Formasi</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://id.unansea.com/bagaimana-menyingkirkan-pikiran-obsesif/"> <p>Bagaimana menyingkirkan pikiran obsesif</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"> <a href="https://id.unansea.com/charlz-ledbiter-buku-spiritualitas-sejarah-fiksi-ilmiah/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/ea86cb037dd90ec9-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/ea86cb037dd90ec9-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://id.unansea.com/charlz-ledbiter-buku-spiritualitas-sejarah-fiksi-ilmiah/"> <p>Charlz Ledbiter, buku: spiritualitas, sejarah, fiksi ilmiah</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Publikasi dan menulis artikel</span></h3> </a> </div>  </li> <li> <div class="mvp-post-more-img left relative"> <a href="https://id.unansea.com/ssd-toko-samsung-850-evo-ulasan-deskripsi-spesifikasi-dan-ulasan/"> <amp-img class="mvp-reg-img" src="https://i7.unansea.com/image/e507557f7e360ed1-560x315.jpg" width="560" height="315" layout="responsive"></amp-img> <amp-img class="mvp-mob-img" src="https://i7.unansea.com/image/e507557f7e360ed1-80x80.jpg" width="80" height="80" layout="responsive"></amp-img> </a> </div>  <div class="mvp-post-more-text left relative"> <a href="https://id.unansea.com/ssd-toko-samsung-850-evo-ulasan-deskripsi-spesifikasi-dan-ulasan/"> <p>SSD-toko Samsung 850 EVO: ulasan, deskripsi, spesifikasi dan ulasan</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://id.unansea.com/mengapa-bayi-bergerak-dan-ketika-anda-bisa-merasakan-gerakan-janin-pertama/"> <p>Mengapa bayi bergerak, dan ketika Anda bisa merasakan gerakan janin pertama</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Rumah dan Keluarga</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://id.unansea.com/kefir-diet-untuk-menurunkan-berat-badan-penggunaan-harus-hati-hati/"> <p>Kefir diet untuk menurunkan berat badan: penggunaan harus hati-hati</p> <h3 class="mvp-cat-bub"><span class="mvp-cat-bub">Kesehatan</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 id.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>