Templat halaman depan. Menggunakan templat dan wizard Microsoft FrontPage. Secara singkat tentang program Microsoft FrontPage

29.10.2019 USB Flash Drive

Sebelum kita mulai mempelajari CSS, mari kita ingat apa sebenarnya kegunaan HTML bahasa markup hypertext dan putuskan bagaimana kita akan menggunakannya di masa depan.

Bagaimana HTML digunakan sebelum CSS

Tujuan utama HTML (HyperText Markup Language) adalah untuk menyusun informasi pada halaman web. Awalnya, bahasa ini diciptakan khusus untuk tujuan ini. Namun seiring dengan meningkatnya popularitas Internet, keinginan pengguna untuk mendiversifikasi dan mendekorasi situs mereka juga meningkat.

Desainer web mulai mencari cara untuk menyajikan informasi dengan indah. Beberapa tag HTML digunakan untuk tujuan selain tujuan yang dimaksudkan, misalnya

. Metode tata letak dokumen web menggunakan tag ini menjadi sangat populer bahkan mendapat nama tersendiri - tata letak tabel. Sebelumnya, ini adalah satu-satunya cara untuk memposisikan elemen pada halaman secara akurat.

Dengan tata letak tabel, desain halaman web dibuat langsung di dalam dokumen HTML. Tag lain juga digunakan untuk penataan gaya dan pemformatan. Masalah apa yang timbul dari hal ini? Pertama, kode HTML menjadi sangat panjang, yang berdampak negatif pada bobot dokumen dan pengindeksannya oleh robot pencari. Kedua, untuk mengubah, misalnya, warna judul h1 di setiap halaman situs, saya harus mengerjakannya secara manual. Semua ini membutuhkan banyak waktu dan usaha.

Mengapa kita membutuhkan HTML sekarang?

Saat ini, berkat keberadaan CSS, desain halaman dapat dipisahkan dari kontennya, serta mempercepat proses kerja dan mengurangi ukuran dokumen HTML secara signifikan. Mereka yang telah lama membuat situs web harus membuang kebiasaan lama dan belajar memahami HTML hanya sebagai bahasa markup yang dimaksudkan untuk menyusun dan mengatur data. Pemula akan lebih mudah mempelajari prinsip-prinsip baru dalam membuat halaman web karena kurangnya pandangan terhadap HTML sebagai alat untuk membuat halaman terlihat menarik. CSS sekarang bertanggung jawab untuk ini.

Penting: Saat membuat dokumen HTML, pikirkan hanya cara mengatur konten, bukan cara menghiasnya. Lupakan tag yang tidak menyusun halaman dengan cara apa pun, tetapi hanya mengubah desain, karena menggunakan CSS Anda akan mendapatkan efek visual yang sama sekaligus menjaga HTML tetap bersih dan bebas dari hal-hal yang tidak diperlukan.

Berikut beberapa tag HTML yang dapat (dan harus) diganti dengan gaya CSS dengan aman:

  • “dekorasi”, penyelarasan atribut ke tag (warna, bgcolor, perataan, dll.);
  • menandai
(bila digunakan untuk tata letak halaman web);
  • menandai .
  • Tag HTML untuk penataan

    Gunakan tag berikut untuk menyusun halaman Anda:

    H1-H6 (heading) Tag h1-h6 dimaksudkan untuk menunjukkan judul. Tag ini membuatnya sangat mudah untuk memisahkan teks. Untuk lebih memahaminya, bayangkan sebuah buku yang memiliki bab dan subbab. Judul bab buku adalah h1, subbab adalah h2, bagian dari subbab adalah h3, dan seterusnya. Sebaiknya tag judul ditempatkan secara berurutan.

    Tag P (paragraf).

      ,
    untuk tata letak dokumen.

    Agar browser dapat menampilkan halaman web dengan benar, Anda harus menggunakan elemen tersebutdi baris kode pertama.

    Pada bab selanjutnya, kita akan mengenal sintaks CSS dan menghubungkan tabel ke HTML, serta menulis gaya pertama.

    Halo para webmaster pemula yang terhormat. Mari mulai belajar bahasa pemrograman.

    Dan kita akan mulai mempelajarinya dengan html.

    Saya akan segera mengatakan bahwa di akhir kursus Anda akan dapat menulis situs web sendiri dalam html murni dan mempostingnya di Internet. Tapi saya tetap menyarankan untuk meluangkan waktu Anda, dan setelah html, berkenalanlah dengan css.

    Kemudian Anda akan membuat situs menjadi lebih keren, dan Anda akan dapat memperbaiki tampilan situs yang dibuat pada CMS (sistem manajemen konten) yang sudah jadi.

    Belajar bahasa pemrograman, dan belajar bahasa asing- ini jauh dari hal yang sama, dan jauh lebih mudah. Apalagi tidak menakutkan, tapi sangat mengasyikkan.

    Hanya saja hal-hal yang tidak dapat dipahami selalu membuat Anda takut, tetapi saya berjanji kepada Anda bahwa setelah pelajaran pertama, semua ketakutan akan berlalu.

    Kami akan belajar menggunakan editor yang perlu Anda instal di komputer Anda.

    Di editor file ini, Anda dapat menulis kode dan langsung melihat bagaimana browser menampilkannya. Sangat nyaman.

    Yuk, pertama-tama saya akan ceritakan sedikit tentang apa itu HTML, dan ini akan menjadi bagian yang membosankan dari kursus kita, lalu kita akan masuk ke praktik yang paling menarik. Pastinya tidak akan membosankan disana.

    HTML (HyperText Markup Language) secara harfiah berarti bahasa markup hiperteks. Ini digunakan untuk membuat halaman web.

    Dan jika, dalam pemahaman kita, kumpulan halaman sederhana yang disatukan oleh satu topik adalah sebuah buku, atau bahkan, lebih baik dikatakan, majalah tebal, maka kumpulan halaman web yang disatukan oleh satu topik adalah sebuah buku. nama domain- ini situsnya.

    Setiap halaman web memiliki teks uniknya sendiri, ditulis oleh Anda, dan diapit dalam kode html.

    Kode adalah instruksi kepada browser tentang cara menampilkan elemen tertentu. Katakanlah Anda menulis sebuah kata, tetapi bentuk tampilannya di layar bergantung pada kode yang Anda masukkan.

    Kode html terdiri dari elemen-elemen berikut:

    2. Tandai atribut.

    3. Nilai atribut.

    Mari kita lihat secara berurutan.

    Tag html adalah elemen utama kode. Ada tertulis seperti ini:

    Seperti yang Anda lihat, ini terdiri dari dua bagian. Tanda kurung siku pertama adalah bagian pembuka, dan tanda kurung siku kedua yang diberi garis miring adalah bagian penutup.

    Di antara dua bagian ini, sisa kode halaman yang akan ditampilkan di layar ditulis.

    Menandai memberi tahu browser bahwa ini adalah dokumen HTML, dan merupakan tag utama (induk) untuk semua elemen lainnya.

    Pada tag yang tersisa, elemen kode, huruf atau kata ditulis dalam tanda kurung siku, yang akan menjadi nama tag dan menentukan elemen mana yang akan ditampilkan di layar oleh tag ini.

    Misalnya, jika Anda meletakkan huruf h1 dalam tanda kurung siku, teks akan ditampilkan di layar sebagai judul.

    Halo

    Artinya, font kata “Halo” akan lebih besar dan lebih tebal dibandingkan teks lainnya.

    Jika Anda meletakkan huruf p di dalam tanda kurung siku, maka teks yang diapit tag akan ditampilkan sebagai paragraf.

    Halo

    Artinya, fontnya akan normal, tetapi semua yang ditulis setelah tag ini akan dimulai pada baris baru.

    Ada beberapa lusin huruf seperti itu, dan bahkan kata-kata yang menentukan jenis perintah, dalam html, meskipun tidak lebih dari 10-15 tag yang sering digunakan.

    Kami akan melihat masing-masing secara lebih rinci di sepanjang jalan.

    Berikut ini adalah atribut tag. Sering dipakai, juga tidak lebih dari selusin. Dan baru-baru ini bahkan lebih sedikit lagi, karena semua fungsi atribut telah dipindahkan ke css.

    Namun akan dibahas lebih lanjut nanti, namun untuk saat ini kita masih akan mengetahui apa itu atribut, karena beberapa di antaranya tidak kehilangan relevansinya dan tidak akan pernah hilang.

    Atribut adalah perintah tambahan. Itu tertulis di bagian pembuka tag. Misalnya, jika Anda ingin membuat judul berwarna, maka Anda perlu memasukkan atribut color pada bagian pembuka tag h1

    Dan mari langsung ke nilai atribut. Intinya atribut itu harus mempunyai nilai. Artinya, jika Anda memberi perintah agar judulnya diwarnai, maka Anda perlu menunjukkan warna apa itu.

    Indikasi ini akan menjadi nilai atribut. Ini terlihat seperti ini:

    Ini merah.

    Dengan cara yang sama, tetapi menggunakan atribut lain, Anda dapat mengatur ukuran teks, indentasi, perataan, dan banyak lagi.

    Meskipun demikian, desain semakin beralih ke CSS, dan atribut desain secara bertahap menjadi ketinggalan jaman dan tidak lagi dipraktikkan.

    Dan sekarang kita menarik kesimpulan dari semua hal di atas:

    HTML adalah bahasa yang dipahami browser. Kita membutuhkannya untuk berkomunikasi dengan browser, atau, bisa dikatakan, untuk mengontrolnya, yaitu memberikan perintah tentang cara melihat dan menampilkan apa yang kita tulis di layar.

    Saya ingin menambahkan bahwa tag, atribut, dan artinya mudah diingat selama latihan praktis, yang pada dasarnya akan menjadi seperti semua artikel berikutnya.

    Di sana kalian langsung melihat tagnya, kalian mengetahui maknanya, dalam hal apa dan di tempat apa digunakan, tanda apa yang menyertainya, dan bagaimana penulisannya, jadi sekarang saya tidak akan menampilkan semua tag dan atributnya, kita akan melihat semuanya dalam praktik.

    Daftar lengkap tag dan atribut html, jika ada yang tertarik, Anda selalu dapat melihatnya. .

    Meskipun demikian, jika Anda tidak ingin memprogram secara profesional, mengetahui beberapa (sekitar selusin) tag dasar dan beberapa atribut saja sudah cukup.

    Yah, itu saja, menurutku. Sedikit? Dan untuk saat ini tidak perlu lagi. Kami akan mempelajari sisanya selama proses pembelajaran dengan menggunakan contoh-contoh spesifik.

    Saya pikir ini akan lebih mudah dipahami dengan contoh. Tujuan kami adalah membuat situs web dan memahami cara kerjanya, jadi silakan berlatih.

    Mengubah

    Segera setelah Anda duduk untuk belajar, beberapa bajingan pasti akan membangunkan Anda!!!

    Di sekolah, guru memberi tahu siswa:
    - Siapa di antara kalian yang akhirnya menganggap dirimu bodoh? Berdiri.
    Setelah jeda yang lama, salah satu siswa berdiri:
    - Jadi kamu pikir kamu bodoh?
    - Sebenarnya tidak juga, tapi rasanya canggung kalau kamu berdiri sendirian.