Artikel ini tidak dimaksudkan sebagai panduan komprehensif mengenai bahasa markup. dokumen HTML. Ini menjelaskan dasar-dasar HTML - prinsip dasar, konsep dan definisi teknologi ini, setelah menguasainya, Anda dapat dengan mudah melanjutkan studi pengkodean HTML.

Untuk mempelajari pelajaran ini, unduh arsip dengan file yang diperlukan.

HTML adalah bahasa markup dokumen. Pengucapan yang benar adalah HTT.

Anda mungkin pernah bekerja di editor dokumen Word atau sejenisnya. aplikasi kantor? Anda mungkin tahu itu tipe ini editor memiliki kemampuan yang kaya untuk mengedit teks, mengatur elemen, menyisipkan gambar, dll.

Mengapa, Anda mungkin bertanya, menulis tentang pengolah kata di artikel tentang HTML? Tapi kenapa. Jika Anda mengetahuinya, apa itu editor kantor? Ini adalah aplikasi untuk mengedit dan menampilkan dokumen.

Kata kuncinya di sini adalah dokumen. Artinya, kita membuat, mengedit, dan melihat dokumen di beberapa program, di dalam hal ini- di kantor editor. Jika kita membuka dokumen seperti itu di editor teks sederhana, misalnya Notepad, kita akan melihat banyak simbol dan tanda aneh. Kekacauan simbol ini tidak dapat dipahami oleh umat manusia, namun dapat dimengerti oleh komputer. Berkat bahasa batin ini, Dokumen kata memperoleh struktur dan tampilan tertentu di editor itu sendiri, dan dokumen tersebut muncul di hadapan kita dengan segala kemegahannya dengan teks dan gambar yang diformat sebagai gantinya.

HTML adalah bahasa markup dokumen untuk browser. Word adalah browsernya di sini, dan dokumennya adalah halaman HTML. Ini adalah dasarnya Teknologi HTML, pemahaman yang diperlukan agar tidak membingungkan bahasa markup dokumen web dengan bahasa pemrograman. Namanya berbicara sendiri - dengan menggunakan HTML Kami menandai, di halaman mana elemen, gambar, atau teks akan ditampilkan, dan dalam urutan apa elemen, gambar, atau teks tersebut akan muncul bersebelahan.

Ya, pengetikan dan pemformatan teks sederhana di aplikasi perkantoran tidak ada hubungannya dengan pemrograman. Namun pembaca yang jeli akan memperhatikannya detail penting- V pengolah kata Kita mengetik, mengedit, dan memformat teks dan gambar menggunakan tombol dan menu visual, namun mengapa kode HTML ditulis dengan tangan? Mengapa mempelajari begitu banyak detail teknis penulisan markup untuk sebuah dokumen?

Faktanya, ada banyak editor yang dapat Anda gunakan untuk membuat dan mengedit halaman HTML, mirip dengan Word. Artinya, kode HTML sumbernya disembunyikan untuk kita dan kita tidak bisa masuk ke dalamnya.

Semacam Word untuk HTML. Seperti editor visual disebut:

Saya menyebutnya "wuzivoogies". Meskipun secara fonetis hal ini salah, hal ini jelas menunjukkan ketidakbermaknaan penemuan ini. Pemula sangat sering menggunakan editor seperti itu untuk membuat situs web pertama mereka. Tentu saja, ini nyaman - Anda tidak perlu mendalami studi tentang tag, gaya desain, dan hal-hal lain yang, pada pandangan pertama, tidak menyenangkan dan rumit. Editornya sendiri secara otomatis mengubah tindakan kita menjadi kode HTML.

Tapi, seperti kata mereka, tidak terjadi apa-apa. Lebih khusus lagi, pendekatan ini mempunyai kelemahan yang sangat serius. Apa yang mencegah semua orang menggunakan editor visual desain HTML halaman? Faktanya adalah halaman yang dibentuk dengan cara ini biasanya memiliki banyak kode yang tidak perlu dan banyak kesalahan dari sudut pandang semantik. Sekarang, tentu saja, tidak ada masalah dengan koneksi Internet berkecepatan tinggi dan perbedaan ukuran halaman 400 kb dan 100 kb tidak signifikan untuk kecepatan, namun kode HTML yang dioptimalkan dan ditulis dengan benar menghilangkan banyak masalah dan memberikan banyak keuntungan, yaitu:

• Kode HTML yang kompeten memiliki efek positif optimasi mesin pencari, kecepatan perayapan oleh robot pencari suatu situs. Kilobyte kode yang dihasilkan oleh vuzivuga tidak dapat diterima dan bahkan berbahaya;
• Kode HTML yang dihasilkan oleh editor WYSIWYG memiliki banyak kesalahan semantik. Artinya, tag yang dihasilkan oleh editor tersebut digunakan untuk tujuan lain, di mana tag tersebut perlu digunakan, misalnya, daftar
  , editor akan membuat tag lain yang tidak kita perlukan. Tentu saja tergantung pada editornya, tetapi yang kami maksud di sini adalah solusi kompleks untuk membuat situs web, bukan pengeditan sederhana teks dalam area teks menggunakan WYSIWYG.
  • Banyak tag yang tidak perlu dihasilkan dan struktur dokumen menjadi membengkak. Katakanlah Anda memindahkan elemen dalam program seperti itu, pertama ke kanan, lalu ke kiri, lalu ke tengah - setiap tindakan meninggalkan jejak di kode HTML sumber. Editor adalah sebuah program dan ia tidak dapat mengetahui secara pasti apa yang ingin Anda dapatkan sebagai hasilnya; ia menghasilkan banyak kode dengan mempertimbangkan semuanya pilihan yang memungkinkan perilaku dokumen di browser.
  • Biasanya, editor untuk desain visual Kode HTML dengan cepat menjadi ketinggalan jaman. Dan karena kurangnya minat dari para profesional, mereka umumnya kehilangan dukungan dan berhenti berkembang. Dan HTML terus berkembang. Semuanya berkembang kecuali wuzivoogi. Oleh karena itu, mereka tidak dapat menghasilkan kode yang benar dan modern yang akan menggunakan fitur dan solusi baru.
  • Mendukung dan mengembangkan proyek-proyek seperti itu adalah hukuman surgawi. Tentang menggunakan pola dan digunakan kembali Tidak ada kode ucapan sama sekali.

  Jadi, kita akan menulis HTML hanya dengan pena. Alat yang memadai untuk visual Pengeditan HTML Mereka belum menemukannya, dan kemungkinan besar tidak akan muncul. Bahasa markup HTML mudah dipelajari dan dipahami, dan ada banyak alat untuk mengotomatisasi penulisan kode HTML, tetapi lebih dari itu di pelajaran lain.

  Setelah sedikit mengutak-atik editor WYSIWYG, pakar HTML muda meninggalkan tugas sia-sia ini dan melanjutkan.

  Struktur Dokumen HTML

  Untuk kelas, saya sarankan mengunduh dan menginstal editor Sublime Text. Saya sangat menyarankan untuk tidak menggunakan Notepad bawaan Windows untuk tata letak HTML jika Anda tidak ingin merusak jiwa Anda pada tahap awal mempelajari HTML.

  Kami memutuskan untuk menulis kode dokumen HTML secara manual, yaitu mengetiknya. Tata Letak HTML - proses pembuatan HTML dokumen. Bagi masyarakat awam dan kalangan terpelajar, itu hanyalah tata letak. Setiap dokumen memiliki struktur dan aturan konstruksi tertentu. Kodenya terdiri dari elemen apa, apa struktur HTMLnya?

  Mari buat template awal di komputer - file index.html, buka menggunakan editor dan tempel ke dalamnya kode berikut:

  Badan Dokumen Header Harap dicatat bahwa dokumen HTML memiliki ekstensi .html.

  Jadi, diurutkan dari contoh.

  - tipe dokumen (doctype)

  Konstruksi ini selalu ditunjukkan di awal dokumen sehingga browser “memahami” dengan benar versi HTML mana yang digunakan saat membuat dokumen.

  Karena kenyataan bahwa HTML terus berkembang, ia memiliki beberapa versi, seperti versi lainnya produk perangkat lunak. Versi saat ini HTML adalah yang kelima dan doctype yang diberikan dalam contoh adalah yang terbaru.

  Pada prinsipnya, tidak ada gunanya mempelajari lebih dalam tentang tipe dokumen, karena dengan dirilisnya HTML5 desain ini telah menjadi standar. Sisipkan saja di awal dokumen setiap kali Anda mulai membuat tata letak situs web.

  - awal dokumen

  Tag pertama yang kita lihat setelah doctype adalah .

  Tag HTML adalah unit struktural markup dokumen HTML. Kode HTML terdiri dari blok penyusun yang disebut tag. Setiap tag memiliki fungsinya masing-masing, dan mempelajari bahasa markup HTML pada akhirnya adalah tentang mempelajari tag dan propertinya dalam sebuah dokumen.

  Saya ingin mencatat bahwa mempelajari HTML tidak sesulit kelihatannya pada pandangan pertama. Mempelajari tag yang digunakan dalam markup dokumen tidaklah mudah. beban berat di otak.

  Jadi, markup dokumen dimulai dengan tag dan diakhiri dengan tag penutup. Setiap tag yang mengandung tag atau elemen lain harus ditutup dengan tag penutup. Misalnya, , , , dll.

  Tag bersifat wajib karena memuat seluruh struktur dokumen dan merupakan pembungkus elemen lainnya.

  Menandai

  Selanjutnya kita melihat tag yang mengandung elemen lain yang belum jelas bagi kita. Berisi elemen lain - ini berarti elemen atau tag tersebut berada di antara tag pembuka dan penutup konstruksi:

  konten atau tag lainnya

  Tujuan dari tag adalah untuk menyimpan informasi meta dari sebuah dokumen HTML, yaitu informasi yang tidak ditampilkan dalam dokumen itu sendiri, namun penting dan sangat menentukan bagaimana dokumen akan terlihat dan berperilaku.
  tanda ini diperlukan dalam dokumen.

  Menandai - judul dokumen Judul

  Judul adalah tag wajib yang berisi informasi meta tekstual yang muncul di judul browser atau tab. Tagnya harus ada di . Selain itu, isi tag ini digunakan oleh mesin pencari untuk menampilkan dokumen di hasil pencarian.

  Tag meta

  Tag meta adalah tag khusus yang dirancang untuk menyediakan data terstruktur tentang suatu halaman. Meta tag paling sering digunakan di . Tag meta tidak diperlukan dalam struktur dokumen HTML.

  favicon

  Melampirkan file dengan gambar favicon ke dokumen. Favicon adalah ikon mini yang ditampilkan di sebelah judul dokumen di tab browser. Favicon adalah file grafik, berukuran 16 x 16 (atau 32 x 32) piksel, yang dapat dimiliki berbagai format, seperti png, jpg, ico, gif. Format ico secara tradisional digunakan. Favicon animasi adalah file gif berisi animasi. Mengamati favicon animasi Anda dapat, misalnya, VKontakte ketika ada pesan baru yang masuk.

  Gaya dokumen CSS

  Terhubung ke dokumen CSS File gaya HTML.

  CSS- mengalir Gaya dokumen HTML. Setiap tag yang terletak di dalam tag memiliki sekumpulan properti seperti warna, lebar, tinggi, posisi relatif terhadap elemen lainnya. Semua properti ini adalah gaya CSS yang dapat dimasukkan ke dalamnya berkas eksternal. Desainnya menghubungkan file eksternal ke dokumen HTML, termasuk gaya CSS.

  Catatan: Properti href dari suatu konstruksi menentukan lokasi file eksternal. Dalam contoh kita, file gaya.css Dan favicon.ico, terletak di folder yang sama dengan file indeks.html.

  Menandai

  tidak memiliki tag penutup. Tag berisi kode atau tautan ke berkas JavaScript

  dan paling sering digunakan di dalam tag, meskipun alat pengoptimalan kecepatan pemuatan halaman Google merekomendasikan penggunaan tag ini di akhir dokumen, sebelum tag penutup. Dalam contoh kita, file eksternal terhubung skrip.js

  , yang terletak di folder yang sama dengan file index.html utama.

  Jadi sobat, kita telah melihat elemen utama yang paling sering digunakan dalam tag. Selain elemen-elemen tersebut, ada beberapa elemen lain yang lebih spesifik dan opsional.

  Tubuh alias tubuh Di sinilah semua hal yang paling menarik dan nyata secara visual dimulai. Tata letak HTML

  dokumen. indeks.html Mari beralih langsung ke tata letak bagian halaman yang terlihat. Segala sesuatu yang kita tulis dan tata letak di dalam tag akan ditampilkan di browser. Mari kita buka file kita

  di browser untuk melihat dengan jelas apa yang kita lakukan di editor.

  Tag dapat berisi tag HTML apa pun yang diperlukan untuk mendesain dokumen dan menyediakan fungsionalitasnya (bentuk). Saya akan memberikan tabel tag yang paling sering digunakan dan menjelaskan secara singkat masing-masing tag. Anda dapat langsung menjalankan contoh yang diberikan di editor.	Menandai
  	Keterangan Tag untuk membuat tautan dalam dokumen.
  ,	Contoh: teks link Atribut href menentukan dokumen yang akan dituju oleh link tersebut. Membuat teks huruf miring atau tebal (ditekankan).
  , , , , ,	Contoh: teks miring teks tebal (ditekankan). Judul dokumen. Total ada 6 level heading, namun pada praktiknya hanya digunakan h1 hingga h4. Seharusnya hanya ada satu judul dalam dokumen, disorot dengan tag h1, seperti Tata letak HTML judul utama
  ,	Contoh: Heading tingkat pertama Heading tingkat kedua Heading tingkat ketiga... dst. Daftar dokumen. Mewakili nomor atau daftar berpoin . Elemen dari daftar tersebut adalah tag Contoh: Butir daftar poin 1 Butir Peluru 2 Item daftar bernomor 1
  	Ayat. Tag ini mendefinisikan paragraf teks yang dipisahkan dari paragraf lainnya. Sangat disarankan untuk menutup tag ini. Contoh: Penampilan markup HTML sebagian besar ditentukan oleh gaya CSS. Namun, beberapa webmaster memilih untuk tidak menggunakan gaya pada tahap awal proyek.
  	Gambar. Dengan menggunakan tag ini, Anda dapat menyisipkan gambar ke dalam markup HTML. Pastikan untuk menyertakan teks alternatif untuk semua gambar - atribut "alt". Tag ini menutup sendiri. Contoh:
  + +	Bentuk dan elemen masukan. Formulir dirancang untuk memasukkan informasi ke dalam sistem di server. Semacam itu masukan pengguna dan situs. Misalnya, formulir digunakan ketika Anda perlu mengirim pesan ke server. Selain itu, formulir dapat menjalankan fungsi lain, tetapi tugas utamanya adalah mengirim data ke server. Contoh - bentuk sederhana mengirim pesan di mana pengguna situs menunjukkan namanya, E-mail dan beberapa teks: Teks pesan
  	Mendefinisikan substring dalam string. Digunakan untuk menata bagian garis menggunakan CSS. Salah satu tag yang paling sering digunakan. Tanpa desain, itu tidak akan muncul di browser dengan cara apa pun. Contoh: Belajar HTML, dalam banyak kasus, tidak menimbulkan kesulitan bagi pemula.
  ,	Tag dirancang untuk memasukkan video dan audio ke dalam dokumen. Tag penutup wajib diisi. Contoh: Parameter kontrol memberitahu kita bahwa halaman harus menampilkan kontrol konten media, seperti pemutar audio/video biasa.
  	Benar-benar tanda kerajaan. Tag yang paling banyak digunakan dan populer dalam markup halaman HTML. Ini elemen blok, dirancang untuk mengelola blok di situs. Konsep tata letak "luar biasa" sering digunakan - ini berarti bahwa semua blok di situs ditata menggunakan tag ini. Mungkin berisi tag lain. Contoh: Teks dalam blok bersarang Semua elemen, dalam banyak kasus, dihiasi dengan properti gaya CSS. Tag penutup wajib diisi.
  	Tag ini dimuat halaman eksternal ke dalam dokumen. Contoh:

  Kami belum mempertimbangkan semua tag, dan ini tidak perlu. pada tahap ini. Hal utama adalah memahami ide dasar HTML, mempelajari cara menggunakan tag yang disajikan di atas, dan kemudian melanjutkan.

  Perlu diketahui bahwa semua nama pada file yang disertakan harus ditulis dalam karakter latin, tanpa spasi.

  Misalnya, jangan:

  Ini diperlukan untuk kompatibilitas konten halaman yang lebih baik. Selain itu, standar penulisan kode HTML menentukan.

  Jadi, sekarang kita sudah mengetahui beberapa dasar HTML: struktur apa yang harus dimiliki oleh dokumen HTML pada umumnya, kita sudah mengetahui beberapa tag yang paling populer, saatnya beralih ke bagian yang paling menarik - yaitu, cookie.

  Tugas praktek tata letak HTML

  Jika Anda belum mengunduh arsip beserta contohnya, lakukanlah. Misalnya, Anda dapat melihat file example.html, yang juga ada di arsip.

• Buka paket arsip dan buat file index.html di folder dengan file yang belum dibongkar. Buka file yang dibuat dengan editor teks Teks Luhur;
• Buat struktur dokumen awal dengan doctype, tag yang berisi dan dan lanjutkan untuk mengedit konten tag;
• Buka file readme.txt dan selesaikan tugas yang sesuai di file index.html yang Anda buat. Untuk mengecek hasilnya, buka index.html di browser favorit Anda.

Demikianlah pelajaran dasar-dasar HTML berakhir, pada pelajaran berikutnya “Dasar-Dasar CSS” kita akan belajar bagaimana mengelola gaya elemen dokumen, mengenal cascading style sheet, belajar bagaimana menggunakan kelas gaya dan membuat tata letak kita indah dan penuh warna. .

Sampai jumpa lagi, teman-teman!

Selamat datang di tutorial CSS untuk pemula, yang akan membantu Anda menggunakan Cascading Style Sheets di situs web Anda dengan mudah. Sama seperti di tutorial HTML, semua informasi di sini ditulis dengan sangat baik dalam bahasa yang sederhana, dapat dimengerti oleh setiap pemula dan tidak memerlukan pengetahuan khusus.

Namun yang terpenting adalah CSS, seperti halnya HTML, tidak perlu dihafal untuk menggunakannya. Cukup memahami prinsip pengoperasian bahasa ini, yang, omong-omong, sangat banyak lebih sederhana dari itu HTML yang sama. Secara umum, meskipun Anda belum pernah mendengar tentang CSS, Anda dapat mulai menggunakannya besok.

Saya ingat ketika saya sendiri masih pemula dan baru belajar CSS, kegembiraan saya tidak ada batasnya, semuanya begitu mudah untuk dipahami dan disatukan menjadi satu gambar. Namun saya harus mengatakan bahwa tidak lama sebelumnya saya menguasai HTML dan halaman web yang dibuat dengan bantuannya masih tersimpan di komputer saya, halaman yang sama yang sangat saya banggakan kemarin. Jadi pada saat itu mereka tampak begitu tidak mencolok dan primitif bagi saya sehingga saya tidak mengerti bagaimana saya bisa menyukainya. Tapi saya mengerti mengapa situs-situs yang saya temukan di Internet jauh lebih indah, meskipun kode HTML halaman mereka praktis tidak berbeda dengan milik saya.

Ya, tentu saja, ada beberapa properti di CSS (properti adalah parameter yang mirip dengan atribut tag) yang mungkin tampak sedikit rumit bagi pemula, tetapi hanya ada beberapa saja. Dan bahkan Anda dapat dengan mudah mengetahuinya dengan meluangkan sedikit waktu untuk masing-masingnya. Hal utama adalah Anda sendiri (atau diri Anda sendiri) menginginkannya. Apakah kamu mau? Kemudian baca terus.

Baiklah, seperti biasa saya akan mengutarakan pendapat saya tentang cara menggunakan tutorial CSS ini. Saya menyarankan Anda mempelajari satu hingga tiga pelajaran sekaligus dan menghabiskan tidak lebih dari tiga jam sehari untuk itu, jika tidak, Anda mungkin tidak akan belajar apa pun. Jika masih ingin belajar lebih lama, jangan menambah jumlah pelajaran, tetapi lakukan latihan. Meskipun buku teks ini berisi “pekerjaan rumah”, Anda selalu dapat membuat sesuatu sendiri. Dan yang baik akan membantu Anda dalam hal ini dimana kamu berada sepenuhnya Anda akan dapat menggunakannya dari tengah buku teks.

Adapun beberapa pelajaran pertama, Anda hanya perlu membacanya, Anda dapat melakukannya sekaligus, karena, pertama, bersifat pengantar, dan kedua, sepanjang pelatihan kami akan kembali ke sana lebih dari satu kali. Omong-omong, saya yakin dengan membaca bagian teoretis ini, Anda sudah dapat memahami esensi dasar CSS, dan mungkin Anda akan segera mencoba sesuatu.

DI DALAM dunia modern terkadang memiliki situs web sendiri sama pentingnya dengan, misalnya, memiliki nomor telepon atau alamat e-mail. Sayangnya, tidak semua orang dapat membuat situs web profesional yang indah sendiri, dan terkadang hal tersebut tidak berhasil. Memesan dari programmer juga bukan solusi ideal, karena tidak semua orang mampu membelinya.

Yang gratis akan membantu Anda keluar dari situasi ini Templat HTML situs. Templat situs web HTML adalah satu set yang sudah jadi halaman statis untuk situs dengan topik tertentu. Dengan template ini, Anda dapat membuat situs web sederhana hanya dalam beberapa jam, jika punya pengetahuan dasar markup HTML. Di bagian HTML, Anda akan memperoleh pengetahuan ini jika Anda menghabiskan beberapa jam lagi untuk belajar, dan jika Anda meluangkan waktu untuk mempelajari bagian CSS, Anda akan dapat sepenuhnya mengontrol desain templat situs web HTML dan menyesuaikannya sepenuhnya agar sesuai. kebutuhan Anda.

Keuntungan lain yang tidak dapat disangkal dari templat situs web adalah bahwa dalam banyak kasus templat tersebut ditulis oleh para profesional. Di bawah templat profesional situs ini dipahami tidak hanya indah dan desain modern, tetapi juga cara penulisan kodenya. Mesin pencari Mereka melihat bagaimana situs web Anda ditulis, apakah kodenya dioptimalkan untuk SEO atau tidak, dan berdasarkan ini mereka menurunkan atau meningkatkan posisi Anda dalam hasil pencarian. Oleh karena itu, situs web yang baik tidak hanya harus cantik dan modern, yang penting, tetapi juga ditulis dengan benar dari segi kode.

Unduh HTML gratis templat situs web dan buat proyek Anda dalam waktu singkat.

HTML adalah bahasa markup hypertext yang menjadikan Internet seperti yang kita kenal dan sukai. Berkat alat luar biasa inilah situs terlihat cantik dan modern, serta memastikan kemudahan penggunaan. HTML hanya mengatur elemen halaman web ke dalam format yang mudah digunakan. Pekerjaannya sebanding dengan apa yang dilakukan orang-orang seperti MS Word atau OpenOffice. Mereka mengubah kumpulan surat tanpa wajah menjadi dokumen berisi paragraf, teks tebal, miring, tabel, dan bahkan gambar. Bahasa HTML melakukan hal yang kurang lebih sama, satu-satunya perbedaan adalah dokumennya ditampilkan di browser, dan kemampuan alat ini jauh lebih luas daripada editor teks. Tag digunakan untuk markup - tim khusus, menjelaskan struktur halaman web. Mereka diapit dalam tanda kurung sudut - sehingga browser dapat membedakannya dari sebagian besar teks. Selanjutnya, kita akan membahas dasar-dasar HTML untuk pemula.

Editor visual

Pemula yang baru mulai belajar HTML sering kali memulai pekerjaan mereka dengan program yang memungkinkan Anda membuat situs web tanpa sepengetahuan apa pun. Di dalamnya Anda cukup mengatur elemen di layar seperti yang akan ditampilkan di browser. Tampaknya ini adalah sumber rahmat abadi yang memungkinkan Anda menyingkirkan sebagian besar pengembang web. Namun tidak semuanya sesederhana itu, karena editor visual memiliki banyak kekurangan sehingga tidak mungkin digunakan dalam proyek serius.

Semua program ini membuat banyak tag yang tidak perlu sehingga membuat halaman akhir menjadi berat dan kurang optimal. Tentu saja, di zaman kita ini Internet berkecepatan tinggi Hal ini tidak terlalu penting dibandingkan sebelumnya, namun ada sejumlah alasan mengapa situs web yang ringkas dan ditulis dengan baik lebih praktis dibandingkan situs web yang dibuat dengan editor visual. Halaman web yang dibuat dengan program seperti itu tidak akan diproses dengan baik robot pencari, karena setiap kilobyte kode penting bagi mereka, dan kode yang rumit dan tidak logis dengan banyak kode sepertinya tidak sesuai dengan selera mereka. Selain itu, editor sering kali ketinggalan zaman, menjadi tidak relevan, dan menghabiskan sumber daya untuk pengembangannya tidak praktis, karena tidak ada profesional yang menggunakan produk ini. Oleh karena itu, siapa pun yang ingin bekerja di industri pengembangan website harus mengetahui dasar-dasar HTML.

Tag

Seperti disebutkan di atas, tag menggambarkan struktur halaman web pada browser. Kebanyakan dari mereka memiliki tag pembuka dan penutup, tapi tidak semua. Misalnya, ..., yang bukan titik, melainkan konten. Yang pertama menunjukkan di mana tag dimulai, dan yang kedua menutupnya. Mungkin ada elemen markup halaman lain di dalamnya; elemen tersebut dapat disarangkan satu sama lain seperti boneka bersarang. Penting untuk menutup tag tepat waktu agar halaman ditampilkan dengan benar.

Ada juga tag tunggal yang tidak perlu ditutup. Di dalamnya, konten terletak di dalam, seperti yang dapat ditulis untuk sebagian besar tag HTML, dan mengatur properti elemen. Hal ini ditunjukkan dalam tag pembuka dan terlihat seperti ini: atribut = "...", di mana alih-alih titik ada nilai atribut. Mengetahui tag adalah yang pertama dan terpenting langkah penting Untuk menguasai HTML. Dasar-dasar seni ini juga melibatkan pemahaman struktur halaman web.

Struktur dokumen

Setiap dokumen HTML memiliki ekstensi yang sesuai, misalnya Index.html. Dengan cara ini browser dapat memahami apa yang sedang dihadapinya dan menampilkan halaman dengan benar. Dianjurkan untuk menyimpan semua file yang digunakan untuk membuat situs web dalam satu direktori, yang akan membuat hidup Anda lebih mudah di masa depan. Dasar-dasar bahasa markup hypertext HTML memerlukan pemahaman yang jelas tentang struktur dokumen. Ini dimulai dengan tag yang memberitahu browser versi HTML yang digunakan dalam dokumen ini. Pada saat ini Versi kelima dari bahasa ini adalah versi terkini, jadi tidak perlu membuat apa pun di sini; Anda dapat dengan aman memasukkan tag di atas di awal halaman mana pun.



Lalu ada struktur berpasangan utama yang membentuk “kerangka” situs. Tag pertama, yang berisi semua tag lainnya, adalah .... Apa pun di luar tag tersebut tidak dikenali oleh browser sebagai halaman web, sehingga dokumen akan dibuka dan ditutup. Tag ini diperlukan untuk dokumen apa pun. Ini juga berisi beberapa tag wajib lainnya, yang akan dibahas di bawah.

Kepala

Di dalam tag ... terdapat informasi teknis yang tidak akan muncul di halaman, namun tetap merupakan bagian penting dari dokumen HTML. Fondasi situs diletakkan di tempat ini; di sini pengkodean dipilih dan nama halaman dimasukkan. Itu terdapat di dalam tag yang diperlukan.... Judul ditampilkan di bagian atas browser, di mana Anda juga dapat menempatkan ikon kecil yang menjadi ciri konten halaman. Dianjurkan untuk segera menunjukkan pengkodean dokumen untuk tampilan yang benar. Hal ini dapat dilakukan dengan menggunakan tag. Tag meta memberikan informasi tentang struktur halaman dan biasanya terletak di dalam kepala.

Link

Mengetahui dasar-dasar HTML juga melibatkan penggunaan gaya berjenjang desain, atau css. Mereka mengatur properti elemen yang akan ditampilkan pada halaman. Pendekatan modern Tugas ini melibatkan transfer karakteristik seperti warna, tinggi dan lokasi elemen ke file eksternal untuk kenyamanan lebih. Untuk memasukkan file css, gunakan tag. Dalam bentuk akhirnya, tampilannya seperti ini: di mana href menunjukkan lokasi file, dan type menunjukkan jenisnya.



Tubuh

Di bagian dokumen HTML inilah bagian yang terlihat halaman. Segala sesuatu yang dilakukan di dalam "tubuh" akan ditampilkan oleh browser. Di bekas jumlah yang sangat besar tag HTML. Dasar-dasarnya adalah pemformatan teks, bekerja dengan tautan, dan alat dasar untuk menyusun halaman web. Untuk mulai bekerja dalam HTML, Anda hanya perlu mengetahui tag dasar dan dapat menggunakannya. Di bawah ini adalah yang paling populer:

• - digunakan untuk menyorot substring yang akan tunduk pada gaya khusus yang dijelaskan dalam css;
• - membuat link pada halaman web; alamat transisi ditentukan oleh atribut href;
• - salah satu tag paling populer di zaman kita; siapa pun yang memutuskan untuk mempelajari dasar-dasar bahasa HTMLl harus memberikan perhatian khusus padanya, karena ini adalah elemen blok, yang menjadi dasar pembuatan sebagian besar situs modern (parameter untuk blok diatur dalam css, dan blok lainnya dapat ditemukan di dalam tag ini);

• Memilih paragraf dari teks; isi paragraf berada di antara tag pembuka dan penutup;

• - daftar bernomor yang elemennya diapit oleh tag berpasangan
• - daftar berpoin, di mana, seperti dalam daftar bernomor, elemen ditandai dengan tag
  • - - judul dokumen (angka menunjukkan tingkat judul, yaitu judul utama, dan opsi selanjutnya adalah subjudulnya; omong-omong, judul tingkat hampir tidak mungkin ditemukan di Internet), penting juga untuk diingat bahwa ada hanya boleh ada satu judul dalam satu halaman;
  • - teks tebal;
  • - miring;
  • - menyisipkan gambar ke situs web (ini adalah tag tunggal, tidak memerlukan tag penutup, tetapi harus berisi atribut alt, yang menentukan teks untuk gambar);
  • - memasukkan video ke halaman web;
  • - tag yang menyisipkan file audio ke dalam dokumen.

  Ini bukanlah semua tag yang Anda perlukan untuk membuat halaman web Anda sendiri, namun cukup untuk memberikan dasar-dasar HTML bagi pemula.

  CSS

  Perkembangan bahasa HTML telah menyebabkan fakta bahwa setiap tag memperoleh banyak atribut, dan persyaratan untuk tampilan halaman web telah meningkat secara signifikan. Kode menjadi rumit dan tidak nyaman, sulit untuk membacanya, apalagi mengadaptasi atau mengubahnya. Selain itu, jika situs Anda memiliki sepuluh halaman dengan banyak judul yang ditandai dengan warna hijau, dan Anda tiba-tiba ingin menjadikannya merah, Anda harus bekerja keras, mengubahnya secara manual. Dengan munculnya Cascading Style Sheets, proses ini menjadi sederhana dan logis, dan kode HTML menjadi lebih mudah dibaca.

  

  Menerapkan CSS

  Untuk membuat halaman web, Anda perlu mengetahui dasar-dasar HTML dan CSS, karena sekarang tidak ada yang bisa dilakukan di bidang ini tanpa pengetahuan tentang cascading style sheet. Mereka menetapkan atribut untuk elemen apa pun yang berlaku untuk keseluruhan dokumen. Dengan cara ini Anda bisa mengatur warna untuk semua elemen sekaligus

  Atau dengan menulis hanya satu aturan. Mengingat persyaratan modern untuk tampilan halaman web, penggunaan cascading style sheet adalah wajib.

  Untuk menghubungkan file css ke dokumen, ada tag link. Prinsip penggunaannya telah dijelaskan sedikit lebih tinggi, tetapi ini bukan satu-satunya pilihan untuk menggabungkan semua gaya di satu tempat. Ada juga tag yang terletak di "head" dokumen dan memungkinkan Anda menulis gaya tanpa menggunakan file CSS. Tidak perlu menggunakan salah satu metode atau metode lainnya. Mereka dapat berhasil digabungkan untuk mendapatkan hasil terbaik. Untuk membuat file dengan style sheet, Anda perlu membuat file dengan ekstensi .css, misalnya Styles.css.

  JavaScript

  Seringkali, seseorang yang memutuskan untuk mulai menyadari bahwa alat yang ditawarkan HTML tidak cukup untuk tugasnya. Dasar-dasarnya akan memungkinkan Anda membuat halaman yang indah, tetapi bagaimana jika Anda tiba-tiba perlu membuatnya interaktif? Untuk tujuan ini, ada pemrograman unik yang berinteraksi sempurna dengan HTML. Ini disebut JavaScript, karena dianggap sebagai adik dari bahasa Java yang populer. Saat ini, bahasa-bahasa ini telah memperoleh perbedaan yang signifikan, dan kesenjangan di antara mereka semakin besar.

  

  JavaScript dapat memperluas kemampuan HTML dengan memungkinkan Anda membuat dan mengedit tag. Selain itu, dengan menggunakan alat luar biasa ini, Anda dapat bekerja dengan Cokie, mengunduh data dari server tanpa memuat ulang halaman, dan menjadikan situs lebih interaktif daripada yang dimungkinkan oleh kemampuan HTML. Bahasa ini juga memiliki keterbatasan terkait keamanan. Jika JavaScript tidak digunakan di sisi server, JavaScript akan dieksekusi dalam kondisi yang membatasi kemampuannya, sehingga penyerang tidak dapat menggunakan kode berbahaya di komputer mana pun.

  Editor

  Dasar-dasar HTML untuk pemula memerlukan pengetahuan tentang program yang paling nyaman dan praktis untuk membuat halaman web. Seperti yang ditulis di atas, editor visual seperti Dreamweaver dan sejenisnya tidak cocok untuk tujuan ini. Jadi, haruskah Anda menulis tag di notepad biasa? Opsi ini juga dipertanyakan, karena notepad standar tidak memiliki alat tata letak khusus. Notepad++ dapat menangani tugas ini dengan baik. Keuntungan besar dari produk ini adalah bersifat open source dan didistribusikan secara gratis. Ini memiliki penyorotan sintaksis yang nyaman dan penutupan tag secara otomatis. Notepad++ juga menyediakan berbagai pilihan bahasa antarmuka, dan kemampuannya mudah diperluas dengan berbagai add-on.

  

  Sublime Text 3 adalah program yang mirip dengan Notepad++, tetapi tersedia dengan biaya tertentu. Dialah yang memenangkan hati sebagian besar pengembang. Sublime Text 3 sangat ideal untuk JavaScript, CSS dan HTML. Anda harus mempelajari sendiri dasar-dasar pengerjaannya, tetapi itu sepadan. Ini berisi kemungkinan penyesuaian yang benar-benar tak terbatas, yang memungkinkan Anda menyesuaikan program sebanyak mungkin dengan kebutuhan Anda.

  Dasar-dasar HTML dan CSS untuk Pemula

  Seperti yang Anda lihat, mempelajari seni membuat halaman web tidaklah sesulit yang terlihat pada pandangan pertama. Latihan beberapa bulan saja akan mengubah Anda dari pengguna yang pemalu menjadi pengembang pemula. Mempelajari layout jauh lebih mudah dibandingkan menguasai bahasa pemrograman atau Linux. Faktanya, tidak banyak tag HTML; penting untuk memahami aspek praktis penggunaannya.

  

  Keterampilan dalam bekerja di Adobe Photoshop tidak akan berlebihan dalam hal ini. Program ini memungkinkan Anda bekerja dengan foto, gambar, dan elemen grafis lainnya dari halaman web. Saat ini, Photoshop-lah yang paling mampu mengatasi tugas-tugas seperti itu; hanya ada sedikit pesaing. Bagi yang kurang menyukai produk Adobe ini, ada Lightroom, GIMP, Illustrator dan program lain dengan fungsi serupa.

  Apa yang diberikan pengetahuan tentang HTML?

  Keterampilan membuat halaman web sangat relevan saat ini, seiring dengan berkembangnya Internet dengan pesat. Setiap perusahaan, bahkan toko terkecil, bengkel, dan klub olahraga - semua orang ingin memiliki situs web sendiri. Dan tentunya untuk itu mereka membutuhkan developer yang paham CSS dan HTML. Dasar-dasarnya mudah dikuasai, setelah itu tinggal latihan. Karena teknologi tata letak terus berkembang, pengembang front-end akan selalu dibutuhkan. Siapapun yang memutuskan untuk mengabdikan dirinya pada industri yang menarik ini tidak akan pernah dibiarkan tanpa pekerjaan.

  Atau jika Anda sudah familiar dengan HTML dan telah memperoleh pengetahuan yang diperlukan dari sumber lain, maka inilah saatnya untuk mulai belajar CSS.

  CSS (Cascading Style Sheets) - Cascading style sheet adalah sekumpulan deskripsi gaya, tag HTML tertentu (selanjutnya disebut elemen HTML), yang dapat diterapkan baik ke satu tag - elemen, dan secara bersamaan ke semua elemen identik di semua halaman dari situs. CSS pada dasarnya adalah semacam tambahan pada HTML yang secara signifikan memperluas kemampuannya.

  Jadi apa? Anda bertanya... Mengapa saya memerlukan CSS terkenal ini? Saya rukun dengan HTML dalam bentuknya yang murni!

  Saya akan memberikan sejumlah alasan yang mendukung penggunaan CSS:

  HTML dalam bentuknya yang murni memiliki seperangkat alat yang sangat terbatas yang tidak memungkinkan penyelesaian ide desain dan fungsional tertentu dari webmaster. Setidaknya, misalnya, ambillah pertanyaan menyakitkan dari semua pengrajin web pemula, “Bagaimana cara menghilangkan garis bawah dari sebuah tautan?” atau “Bagaimana cara mengubah warna dan menyorotnya saat saya mengarahkan kursor ke tautan ini?” Tidak ada cara untuk melakukan ini hanya dengan HTML!! Berapa banyak lagi “pertanyaan sulit” yang ada? - kegelapan.. Di sinilah CSS datang untuk menyelamatkan, yang memecahkan sebagian besar masalah yang berkaitan dengan desain situs web.

  Misalkan Anda menulis situs web dengan 100 halaman... situs web yang bagus, informatif, orang-orang mengunjunginya... Dan tiba-tiba karena alasan tertentu Anda perlu mengubah desainnya, entahlah, mode telah berubah, Anda menemukannya solusi desain yang lebih baik, pelanggan terpaksa Saya tidak menyukainya... tetapi Anda tidak pernah tahu alasannya... Berapa banyak waktu dan upaya yang Anda perlukan untuk merombak seluruh 100 halaman situs? CSS menawarkan solusi cerdas untuk masalah ini. Bagaimana jika Anda mendeskripsikan keseluruhan desain situs secara lengkap sekaligus dalam file terpisah? Katakanlah: buat semua judul berwarna merah, paragraf

  tulis dalam huruf miring, tautan jangan digarisbawahi :) isi latar belakang semua halaman dengan warna hijau, dll... lalu buat 100 halaman HTML itu mengakses file CSS dan mendapatkan informasi yang mereka perlukan darinya? Sekarang, ketika Anda ingin, misalnya, mewarnai ulang semua judul dari merah menjadi hijau, Anda tidak perlu membuka seluruh 100 halaman, temukan tag di dalamnya dan tunjukkan di setiap halaman bahwa Anda sekarang bukan merah tetapi hijau! Anda hanya perlu membuka file deskripsi dan mengubah warna elemen di dalamnya menjadi hijau dan selesai!! Semua judul di semua halaman situs akan berubah menjadi hijau seolah-olah secara ajaib.

  Karena fakta bahwa CSS memungkinkan deskripsi gaya berulang dari elemen yang sama untuk ditempatkan dalam satu file, terjadi “pembongkaran” dokumen HTML secara signifikan, dan ini menghemat volume, lalu lintas, waktu, uang... Kode HTML menjadi ringan, mudah untuk membaca dan mengedit.

  Jadi bagaimana? Penasaran? Jika iya, saya sarankan untuk langsung belajar CSS. Dalam bab-bab buku teks ini, Anda akan mempelajari cara menerapkan cascading style sheet di halaman situs Anda, dan mengenal properti gaya dasar elemen menggunakan contoh membuat situs dengan menggunakan CSS, selidiki seluk-beluk dan trik masalahnya. Jika Anda sudah familiar dengan Cascading Style Sheets dan hanya tertarik pada informasi latar belakang, maka saya sarankan untuk melihat buku referensi CSS tempat mereka dikumpulkan dan dijelaskan secara singkat Properti CSS dan kemungkinan maknanya.