Köprü metni HTML sayfalarının düzeni için dil. Web geliştirme için film programlama ve teknolojiler Html yardımını kullanarak web sayfası oluşturma

sen eğitici program Bilişim ve BİT alanında her 12 yılda bir “İletişim Teknolojileri” konusu tanıtılıyor ve vikoristan şablonları içeren bir Web sayfası oluşturulması öneriliyor. “Multimedya teknolojileri” konusunda 8 yıl var ve bilgisayar bilimi esas olarak 5, 6 ve 7. sınıflarda hazırlık düzeyinde öğretildiğinden, multimedya teknolojileri eğitiminin tamamen eğitime aktarılması gerekiyor. hazırlık kursu Ve sonra çalışma saatini artırabilirsiniz iletişim teknolojileri Daha doğrusu “İngilizce Web Siteleri Oluşturma” konusunu 8. sınıfa ekleyebilirsiniz.

Web siteleri oluşturma teknolojisine hakim olduğunuz için, bunun birincil temeli olan Not Defteri programındaki işaretlemenizden HTML hiper metni yazdırmanız önerilir. Elbette 8 yılda HTML dilinin tamamını okumak imkansızdır ancak dilin ana etiketlerinin önemini ve içeriğini göstermek mümkündür. Web sitesi oluşturma teknolojisine aşina olmayı öğrendikten sonra, materyali kendi başınıza veya ileri düzey kurslarda, gruplarda veya seçmeli derslerde öğrenmeye devam edebilirsiniz.

Sunum, St. Petersburg'un Frunzensky bölgesindeki 441 numaralı spor salonunun 8. sınıfında tekrarlanan testlerden geçen yöntemsel bir ders kitabıdır ve başlangıçta bir projektör aracılığıyla gösterilen ve daha sonra öğrencilerin inşa ettiği teorik ve pratik etkinliklerin yürütülmesine yönelik materyaller içerir. dersten önce bağımsız olarak bir bilgisayarda, vikoristte veya dağıtıcı materyalde.

Ders için planladıkları çalışmaları bitiren öğrenciler için ek ödevlerin aktarılması.

Öğrencilerin öğretmenle birlikte, örneğin St. Petersburg'un tarihi “St. Petersburg Dramatik Tiyatroları” konulu bir projeyi tamamlamaları ve ardından robotik bir robot gibi güçlü bir küçük oluşturmaları durumunda materyal etkili bir şekilde öğrenilir. proje, vikory Bir web sitesi şablonu gibi, öğretmenle işbirliği içinde yaratımlar.

Bu çalışmanın sonucunda bilim insanları HTML etiketleri bilgisi testine yanıt veriyor ve kendi sitelerinin yaratımlarını sunuyorlar.

Çalışmanın ana hedefleri: Web teknolojilerini kullanan kişilerde bilişsel ilginin oluşması, entelektüel ve yaratıcı yeteneklerin geliştirilmesi.

Temel bilgiler:

  • Web siteleri oluşturma teknolojisi hakkında bir bilgi sistemi oluşturmak;
  • web siteleri oluşturmak için HTML hiper metninin düzenini öğrenin;
  • Proje faaliyetinin aşamalarına aşina olun.

Gelişen:

  • web sitelerinin oluşturulması yoluyla yaratıcılığın kendini ifade etmesini geliştirmek;
  • konsepti formüle etmek, analoglar oluşturmak ve Web teknolojilerinin yeni bir konu alanından aktarılabilir bilgi yaratmak;
  • Robotik becerilerinizi bilgisayarınızda geliştirin

Vikhovny:

  • vihovati sumlinna zabotaniya işten önce;
  • sitenin yaratımları için bir ortaklık duygusu ve özel sorumluluk elde etmek;
  • sanatsal ve estetik bir zevk yayıyor;
  • İnternet için yetkin ve doğru bir muhabir bulun.

Ders 1

1. Web siteleri ve HTML dili ile ilgili haberler

Yayınlar Dünya çapında pavutinnya(World Wide Web) Web siteleri şeklinde uygulanmaktadır. Web sitesi, yapısı itibari ile herhangi bir konuya veya soruna yönelik bilgilerin yer aldığı bir dergiyi andırmaktadır. Bir derginin diğer sayfalardan oluşması gibi, bir Web sitesi de hiper güce sahip bilgisayar Web sayfalarından oluşur. Web sayfaları metin, grafik, tablo, multimedya ve dinamik nesneler içerebilir. Web sitelerinin oluşturulması ek HTML dili kullanılarak yapılabilir.

HTML – Hiper Metin İşaretleme Dili - Köprü metni için dil düzeni. HTML her iki dünyada da programlama gerektirmez; yalnızca öğelerin (metin, küçük nesneler) tarayıcı penceresine yerleştirilmesine dayanır. HTML, World Wide Web'de web siteleri oluşturmak için kullandığım araçtır. Dil HTML'si basit komutlardan - etiketlerden oluşur. Etiketler, bir HTML belgesi görüntülendiğinde ekranda sağlanan bilgileri işaretler. Etiketler yayın köşesinde görünür<>... ve erkekler ve eşleşmeyenler var (yalnız<>).

HTML belgesi– bu, uzantıları olan bir metin dosyasıdır. HTML veya htm Yapılacak şey etiketleri çevirmek.

Tarayıcı – web sayfalarını görüntülemek için bir program. Microsoft Internet Explorer, Opera vb. tarayıcılar yaygın olarak kullanılmaktadır. Tarayıcı bir HTML belgesini aldığında, bunun analizini dönüştürür, belgenin nesne modelini oluşturur ve ardından bunu monitörde görüntüler.

2. HTML belge yapısı

3. Karakter biçimlendirmesi

Ayak etiketleri arasına yerleştirilen semboller şunları temsil eder:

Yazı tipi ayarları

Etiketler arasındaki metin …….. Boyutu, rengi ve yazı tipini ayarlayabilirsiniz. Nitelikler kimler için wikipedallanmıştır: BOYUT = 1'den 7'ye kadar değerler RENK= renk (aqua, siyah, mavi, fuşya, gri, yeşil, limon, kestane rengi, lacivert, zeytin, mor, kırmızı, gümüş, deniz mavisi, sarı, beyaz), ten rengi 000000 ile FFFFFF arasında değişen onaltılık kodla gösterilir.

Metin, kelimeler veya sekme karakterleri arasında çok sayıda boşluk içeriyorsa, tarayıcı ekranda yalnızca bir boşluk görüntüler. Ek boşluklar gerekli olduğundan, kelimeler arasında ek tedarik gereksinimi sembolik bir ilkeldir.

Tek etiket
metin akışını açar ve boş bir satır ekler. Bu tür etiketlerin bir kısmı bir dizi boş satır ekler. Sıra arası aralık tektir.

4. Pratik tesis No. 1.

İlk HTML belgesi olan "St. Petersburg Dramatik Tiyatroları"nın oluşturulması, yazı tipleriyle, yazı tipinin rengiyle ve boyutuyla çalışın. Robot teknolojisine hakim.

Ders 2

1. Metni paragraflar halinde biçimlendirmek

Etiket - paragrafı yeni bir satırda başlatır. Yeni paragraf önceki paragrafa satır arası aralıklarla eklenir.

Metnin paragraflara göre doğrulanması:

2. Belgenin tüm metninin ve arka planının rengini ayarlama

Belgenin orijinal gövde etiketinde açıklanmıştır

METİN= metin rengi >.

3. Farklı bölgelerden başlıklar

Etiketler …. metni tasarlarlar. N değerleri 1'den 6'ya değişir, böylece metin büyükten küçüğe doğru görüntülenir. Etiketler …. annenin özellikleri olabilir mi HİZALAMA = MERKEZ, SOL, SAĞ.

4. Basit listeler

5.Pratik tesis No. 2

Metnin paragraflara, arka plan renklerine, çeşitli bölgelerin başlıklarına, listelere göre biçimlendirilmesi.

Ders #3

1.Ekle grafik görseller

Tüm tarayıcılar formatları destekler .gif, .jpg. Bu formatlar rasterdir. GIF– küçük resimler için çok uygun olan netlik ve animasyon teşvik edilir. JPEG– taranan görüntülere ve fotoğraflara daha uygun olan çok renkli görüntüler için animasyon desteklenmez.

Tek etiket grafik görüntüleri herhangi bir konumdaki metin akışına ekler:

>

Dil dışı etiket özellikleri :

Minikler merkeze yakınsa etiketini kullanabilirsiniz

…….
/

2. Pratik tesis No. 3

Grafik görüntüleri ekleme ve biçimlendirme. Dramatik tiyatroların Web hikayelerinin bağımsız olarak yaratılması.

Ders #4

Diğer belgelere olan bağlantılar etiketlere göre düzenlenir<bir>….

> metin hiper güçlü .

>< IMG SRC ='grafik dosyasının adı' >

2. Pratik tesis No. 4

Tiyatroların listesinin, sinemaların ek Web sayfalarına köprü olarak glavn.htm ana sayfasına kaydedilmesi.

Ders #5

1. Tablolar

Vikorist yalnızca verileri ortada düzenlemek için değil, aynı zamanda metnin parçalarını birbiri ardına tasvir edecek şekilde konumlandırmak için de kullanılır.

Daha fazla yardım için site gezinme tablosunu manuel olarak oluşturabilirsiniz.

Tablonun iki satırı (satırları) vardır, dolayısıyla iki ortası vardır:

Tablonun ortasında metin veya görsellerin yanı sıra HTML etiketleri ve hiper zorlama içeren metinler bulunabilir. Masayı kesintisiz bir açıklığa yerleştirmek istiyorsanız ortasını boş bırakmanıza gerek yok.

Etiketlerin temel özellikleri

і
tablo parametrelerini, satırlarını veya düzenlerini ayarlayın:

HİZALAMA = sol, sağ, merkez - hizalama (

, ,
)

BGCOLOR='renk' – arka plan rengi (

, ,
)

HSPACE = değer – tabloda piksel cinsinden sol ve sağ taraftaki boşluk (

)

VSPACE = değer - tablonun altındaki piksel cinsinden boş alan (

)

WIDTH = değer – tablonun genişliği (oda) – piksel veya yüz cinsinden (

,
)

YÜKSEKLİK = değerler – tablo yükseklikleri (kompozisyonlar, satırlar) – piksel veya piksel cinsinden (

, )

KENAR= değer – varsayılan değer = 1'den sonra tablonun etrafındaki ve ortadaki kenarlıkların sayısı, değer = 0 ise kenarlık yoktur (

,
, ,

HTML ve CSS kullanarak web sitesi oluşturmaya ilişkin derslerimize geçmeden önce, iki dil arasındaki farkı, her dilin sözdizimini ve temel terminolojiyi anlamak önemlidir.

HTML ve CSS nedir?

HTML (HyperText Markup Language), metin yerine yapıyı, yani başlıklar, paragraflar ve resimler gibi içerikleri tanımlar. CSS (Basamaklı Stil Sayfaları) veya basamaklı stil sayfaları, yazı tipleri veya renkler gibi içeriğe yeni bir görünüm oluşturmak için oluşturulan bir sunumdur.

Bu iki dil - HTML ve CSS bağımsız değildir ve bu tür bir yoksunluğun sorumlusudur. CSS, bir HTML belgesinin veya başka herhangi bir şeyin ortasına yazmaktan suçlu değildir. Kural olarak, bunun yerine her zaman HTML sunulur ve CSS tasarımı için her zaman önemlidir.

HTML ve CSS arasında bu kadar önemli farklar varken, HTML raporuna bakalım.

Temel HTML terimleri

HTML ile çalışmaya başlamadan önce mutlaka yeni ve çoğu zaman şaşırtıcı terimlerle karşılaşacaksınız. Yıl boyunca bu raporda bunların hepsine aşina olacaksınız, ancak şimdi HTML'nin üç ana terimiyle (öğeler, etiketler ve nitelikler) başlamalısınız.

Elementler

Öğeler, sayfadaki nesnelerin yerine yapının nasıl gösterileceğini belirtir. Yaygın olarak kullanılan bazı öğeler, bir dizi eşit başlık içerir (öğeler olarak tanımlanır)

önce
) ve paragraflar (şu şekilde kastedilmiştir:

); Listeye öğeler ekleyebilirsiniz ,

, , і Ve bircok digerleri.

Elemanlar topuk kolları yardımıyla tanımlanır<>, böylece elementimi hissedebiliyorum. Böylece eleman şöyle görünür:

Etiketler

Topuk kollarının eklenmesi< и >Bir öğe oluşturduğunuzda etiket olarak bilinen şeyi oluşturursunuz. Etiketler çoğunlukla açılan ve kapanan etiket çiftlerinde bulunur.

Açılış etiketi, öğenin kökenini gösterir. Değer sembolden oluşur<, затем идёт имя элемента и завершается символом >; Örneğin,

.

Kapanış etiketi öğenin sonunu belirtir. Değer sembolden oluşur< с последующей косой чертой и именем элемента и завершается символом >; Örneğin,

.

Etiketlerin arasında ne açılır, ne kapanır ve bu öğe yerine. Posilannya, örneğin çarpık olan matime etiketi bu kapak etiketi. Göndermek yerine bu iki etiket arasında ne olacak?

Yani, etiketler şuna benzer:

...

Öznitellikler

Nitelikler ve yetkililer, öğe hakkında ek bilgi sağlamak için kullanılır. En kapsamlı nitelikler, öğeyi tanımlayan id niteliğini içerir; öğeyi sınıflandıran class niteliği; birlikte doğan kişinin bedeni anlamına gelen src niteliği; Kaynağın bağlantısını gösteren href özelliği.

Nitelikler, öğe adından sonra açılan başlığa atanır. Tanım gereği, nitelikler isimleri ve anlamları içerir. Bu niteliklerin formatı, niteliğin adından, ardından sembolden ve ardından niteliğin değerinden oluşur. Örneğin, öğe href özelliği şu şekilde görünecektir:

Shay Howe

Temel HTML terimlerinin gösterimi

Bu kod web sayfasında "Shay Howe" yazısını gösterecek ve bu yazıya tıkladığınızda http://shayhowe.com adresine yönlendirileceksiniz. Gönderilen öğe, görüntülenen ek etiket için seslendirilir ve etiketi kapatırçarpık olan metinde href = "http://shayhowe.com" üzerinden gönderilen adresin niteliği ve anlamının yanı sıra.

Pirinç. 1.01. HTML sözdizimiŞematik görünüm bir öğe, bir nitelik ve bir etiket içerir

Artık HTML öğelerinin, etiketlerinin ve niteliklerinin ne olduğunu biliyorsanız, ilk web sayfamıza bir göz atalım. Burada her şey yeni görünüyor, merak etmeyin, ilerledikçe her şeyin şifresini çözeceğiz.

HTML belgesinin yapısını ayarlama

HTML belgeleri - beni affet metin belgeleri, extensions.html ile tasarruf sağlar, .txt ile değil. HTML yazmaya başlamak için öncelikle Wikoristan'dan kullanabileceğiniz bir metin düzenleyiciye ihtiyacınız olacak. Maalesef buna Microsoft Word ve Pages ve diğer bazı katlama düzenleyicileri dahil değildir. HTML ve CSS yazmak için en popüler iki metin düzenleyici Dreamweaver ve Sublime Text'tir. Ücretsiz alternatifler ayrıca Windows için Notepad++ ve Mac için TextWrangler'dır.

Tüm HTML belgeleri aşağıdaki bildirimleri ve öğeleri içeren temel bir yapıya sahiptir: , , і .

Goloshennya belge türü veyaHTML belgesinin başında bulunur ve tarayıcılara HTML sürümünün güncellendiğini bildirir. Parçaları vikorize edeceğiz Versiyonu saklayacağım HTML, belge türümüz basitçe şöyle olacaktır:. Sıradaki eşya Bir belgenin başlangıcı ne anlama gelir?

Ortada eleman çeşitli meta verileri (taraf hakkında destekleyici bilgileri) içeren belgenin üst kısmı anlamına gelir. Öğenin ortası yerine web sayfasında görüntülenmiyor. Ayrıca herhangi bir harici dosyaya veya diğer ilgili meta verilere gönderilen belgenin başlığını da (tarayıcı penceresinin başlık çubuğunda görünür) ekleyebilirsiniz.

Web sitesinde görünen tüm içerik öğeye dahildir . Tipik bir HTML belgesinin yapısı şuna benzer:

Selam Dünya!

Selam Dünya!

Bu bir web sitesidir.

Bir HTML belgesinin yapısının gösterilmesi

Bu kod, belge türünden başlayarak belgeyi gösterir.o zaman element hemen gelecek . Ortada elementi git і . eleman etiketi kullanarak sayfayı kodlayın öğe aracılığıyla belgenin adı . eleman <body>öğe aracılığıyla bir başlık içerir <h1>metnin o paragrafı aracılığıyla<р>. Hem başlık hem de paragrafın kırpıntıları öğeye dahil edilmiştir <body>, koku web sayfasında görülebilir.</p><p>Bir öğe, ekler de dahil olmak üzere başka bir öğenin ortasındaysa, belgenin yapısını iyi organize edilmiş ve okunabilir tutmak için yeni bir giriş eklemek iyi bir fikirdir. Önceki kod rahatsız edici unsurlar içeriyor <head>і <body>elemanın ortasına yerleştirilmiş ve yerleştirilmiş <html>. Element girişlerinin yapısı ortadaki yeni eklenen elementlerle devam edecek <head>і <body> .</p><h3>Kendiliğinden kapanan elemanlar</h3><p>Ön popoda bir eleman var <meta>kapatan etiketi içermeyen tek bir etiket olmalıdır. Övünmeyin, her şey parçalara ayrılmış durumda. Tüm öğeler açılıp kapanan etiketlerden oluşmaz. Bu öğeler basitçe birlikte hareket eder veya tek bir etiket içindeki nitelikler aracılığıyla davranır. <meta>Bu unsurlardan biridir. Öğe yerine <meta>Uygulamada ek özellik karakter seti ve değer gereklidir. Diğer standart kendiliğinden kapanan elemanlar şunları içerir:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Belge türünün ek ayrıntılarına bölünmüş yapı oluşturulmuştur<!DOCTYPE html>ve elementler <html> , <head>і <body>є geniş doz. Yeni HTML belgeleri oluştururken sıklıkla takılıp kaldığı için belgenin bu yapısını manuel olarak korumak istiyoruz.</p><h3>Kod doğrulama</h3><p>Kodumuzu ne kadar dikkatli yazarsak yazalım hatalar kaçınılmazdır. Neyse ki HTML ve CSS yazdığımızda çalışmalarımızı kontrol edecek doğrulayıcılarımız var. W3C, kodu eşlik açısından tarayan HTML ve CSS doğrulayıcılarını sunar. Kodumuzun doğrulanması yalnızca tüm tarayıcılarda doğru görüntülendiğinden emin olmakla kalmaz, aynı zamanda kodun nasıl yazıldığına ilişkin ileri düzeyde bilgi edinmemize de yardımcı olur.</p><h2>Uygulamada</h2><p>Web tasarımcıları ve ön uç geliştiriciler olarak, zanaatımıza adanmış çok sayıda harika konferansa katılarak kendimizi şımartabiliriz. Ulusal bir konferans, Stiller Konferansı düzenleyeceğiz ve bunun için gelecek derslerin yer aldığı bir web sitesi oluşturacağız. Bu doğru!</p><br><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy loading=lazy><p>Biraz HTML'ye geçelim ve CSS'ye bir göz atalım. Unutmayın, HTML web sayfalarımızın yapısını belirlerken, CSS de görsel stillerini ve <a href="https://3ddroid.ru/tr/there-are-some-advice/oformlenie-spiskov-list-style-pravila-css-dlya-nastroiki-vneshnego-vida-spiska/">dış görünüm</a>.</p><h2>Temel CSS Terimleri</h2><p>HTML terimlerine ek olarak aşina olmanız gereken bir dizi temel CSS terimi de vardır. Bu terimler seçicileri, yetkileri ve anlamları içerir. HTML terminolojisinde olduğu gibi, CSS ile ne kadar çok çalışırsanız, terimler de o kadar sizin diğer doğanız haline gelir.</p><h3>Seçici</h3><p>Öğeler web sayfasına eklendiğinde ek CSS kullanılarak stillendirilebilirler. Seçici, hangi öğenin veya HTML öğelerinin hedeflendiğini ve bunlara uygulanan stilleri (renk, boyut ve konum gibi) belirler. Seçiciler, ne kadar spesifik olursa olsun, benzersiz unsurları seçmek için farklı göstergelerin bir kombinasyonunu içerebilir. Örneğin sayfadaki her paragrafı seçmek veya yalnızca belirli bir paragrafı seçmek istiyoruz.</p><p>Seçiciler genellikle kimlik veya sınıfın değeri veya öğenin adı gibi nitelik değerleriyle ilişkilendirilir; örneğin <h1>ya da başka<р> .</p><p>CSS'de seçiciler, stilleri seçen ve seçilen öğeye atanan kıvrımlı yaylara () bağlanır. Tüm öğeler için bu hedef seçici <span><p>P(...)</p><h3>Güçlü</h3><p>Bir seçim unsuru olarak güç, bir sonrakine korunacak tarzları ifade eder. Yetkililerin isimleri seçiciden sonra ortada gelir <a href="https://3ddroid.ru/tr/program/kak-napisat-posle-figurnoi-skobki-v-vorde-kvadratnye-i-figurnye-skobki/">figürlü tapınaklar</a>() ve çiftin önünde orta olmadan. Arka plan, renk, yazı tipi boyutu, yükseklik ve genişlik gibi değiştirebileceğimiz birçok otorite ve sıklıkla eklenen diğer otoriteler vardır. Mevcut kodda tüm elemanları etkileyen renk ve yazı tipi boyutunun gücü belirlenmektedir. <span><p>P (renk: ...; yazı tipi boyutu: ...; )</p><h3>Önem</h3><p>Şimdilik seçici aracılığıyla bir öğeyi seçtik ve hangi tarzın otoriteler aracılığıyla sabitlenmesini istediğimizi belirledik. Artık gücün değerinin davranışını değerler aracılığıyla ortaya koyabiliriz. Değerler noktalar ve noktalar arasındaki metin olarak belirtilebilir. Aşağıda tüm unsurları seçiyoruz <p >Renk değerini turuncuya, yazı tipi boyutu değerini ise 16 piksele ayarladım.</p><p>P ( renk: turuncu; yazı tipi boyutu: 16 piksel; )</p><p>Özetlemek gerekirse, CSS'de kural dizimiz seçiciyle başlar ve ardından doğrudan yay şekillerine gider. Bu figür şeklindeki yaylar, otorite ve anlam çiftlerinden gelen şokları içerir. Cilt tahrişi sarılık ile başlar, ardından çift nota, belirgin sarılık ve koma ile birlikte bir nokta gelir.</p><p>Yaygın uygulama, güç bahisinin anlamı ve kıvırcık yayların ortasının anlamıdır. HTML gibi girdiler de kodumuzun düzenli ve aklı başında kalmasına yardımcı olur.</p><p><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy loading=lazy></p><p>Pirinç. 1.03. CSS sözdiziminin yapısı seçiciyi, yetkiyi ve değeri içerir</p><p>Birkaç temel terimi ve temel CSS sözdizimini bilmek iyi bir başlangıçtır, ancak öncelikle derinlemesine inerek dikkate alınması gereken birkaç nokta daha vardır. Seçicilerin CSS'de nasıl çalıştığına daha yakından bakmamız gerekiyor.</p><h2>Seçicilerle çalışma</h2><p>Seçiciler, daha önce de belirtildiği gibi, hangi HTML öğelerinin stillendirileceğini belirtir. Seçicilerin nasıl kullanılacağını ve nasıl çalıştıklarını anlamak önemlidir. İlk adım, farklı seçici türlerine aşina olmaktır. Ana seçiciler hakkında konuşalım: tür seçiciler, sınıf seçiciler ve tanımlayıcı seçiciler.</p><h3>Seçici türü</h3><p>Tür seçiciler kendi türlerindeki öğeleri hedefler. Örneğin, tüm öğelere odaklanmak istediğimiz için <div>Div seçiciyi kullanmak bizim hatamız. Gelişmiş kod, öğeler için seçici türünü gösterir <div>, orijinal HTML'nin yanı sıra.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Klasi</h3><p>Sınıflar değere dayalı bir öğe seçmenize olanak tanır <a href="https://3ddroid.ru/tr/printers/poisk-elementa-na-stranice-javascript-javascript-i-jquery-vyborka-elementa-po-klassu/">sınıf özelliği</a>. Sınıf seçiciler biraz daha spesifiktir, tür seçiciler ise daha az spesifiktir ve bazen tek bir öğe grubunu seçer veya aynı türdeki tüm öğeleri seçmez.</p><p>Sınıflar, çeşitli öğeler için sınıf özelliğinin aynı değerlerine bağlı olarak, farklı öğelere aynı anda farklı stiller tanımlamanıza olanak tanır.</p><p>CSS'de sınıflar, önünde bir nokta ve ardından sınıf niteliğinin değeri ile gösterilir. Aşağıdaki sınıf seçici, harika sınıf özelliğinin değeriyle eşleşen tüm öğeleri seçer; buna öğeler de dahildir <div>і <span><p>Mükemmel (...)</p><p> <div class="awesome">...</div> </p><h3>Tanımlayıcılar</h3><p>Tanımlayıcılar daha da kesindir, daha düşük derecelidir ve koku parçaları her seferinde tek bir benzersiz öğeye odaklanır. Tıpkı vikory sınıfı seçicilerinin sınıf niteliğinin değerleriyle eşleşmesi gibi, vikory tanımlayıcıları da seçici olarak id niteliğinin değerleriyle eşleşir.</p><p>Yazılan öğenin türü ne olursa olsun, id niteliğinin değeri sayfada birden fazla kez değiştirilebilir. Kimlik mevcutsa ayrıntılar önemli unsurlara ayrılmıştır.</p><p>CSS'de tanımlayıcılar, önünde bir gram sembolü ve ardından id niteliğinin değeri ile gösterilir. Burada tanımlayıcı, id niteliğini shayhowe değerlerine yerleştirecek öğeyi seçer.</p><p>#shayhowe (...)</p><p> <div id="shayhowe">...</div> </p><h3>Ek seçiciler</h3><p>Seçiciler son derece zor bir şeydir ve açıklamaların ihtiyacımız olan en geniş seçici aralığını kapsaması daha muhtemeldir. Tsi seçici daha az koçanlıdır. Çok sayıda gelişmiş seçici vardır ve bunlara kolayca erişilebilir. Onlara alıştığınızda, ilerlemelerine hayran kalmaktan korkmayın.</p><p>Garazd, her şeyi bir anda toplamaya başlıyoruz. HTML'mizin orta kısmına öğeler ekliyoruz, ardından bu öğeleri seçip ek CSS ile stillendirebiliyoruz. Şimdi iki kelimenin birlikte çalışabilmesi için HTML ve CSS arasındaki noktaları birleştirelim.</p><h2>CSS bağlantıları</h2><p>CSS'mizi ve HTML'mizi anlamak için HTML'deki CSS dosyasına başvurmamız gerekir. Tüm stillerimizi, öğenin ortasındaki metin kutusu olan tek bir harici dosyaya dahil etmek iyi bir uygulamadır. <head>HTML belgemiz. Yeni bir CSS'nin kullanılması, site genelinde aynı stilleri birleştirmemize ve değişiklikleri hızla yapmamıza olanak tanır.</p><h3>CSS eklemek için diğer seçenekler</h3><p>Diğer CSS seçenekleri arasında dahili ve özel stillerin kullanılması yer alır. Gerçekte bu seçeneklerin farkında olabilirsiniz, ancak siteleri güncellemek hantal ve beceriksiz olduğundan, kural olarak övülmezler.</p><p>Yeni bir stil sayfası oluşturmak için, genişletilmiş .css'ye sahip yeni bir metin dosyası oluşturmak üzere yine metin düzenleyiciyi seçmek istiyoruz. CSS dosyamız, HTML dosyasının bulunduğu aynı klasör veya alt klasörde saklanır.</p><p>Elemanın ortasında <head>eleman durgunlaşır <link>, bu, HTML ve CSS dosyaları arasındaki çizgiler anlamına gelir. CSS ile bağlantılı olduğumuz için Vickory kullanıyoruz <a href="https://3ddroid.ru/tr/windows-7/atribut-rel-canonical-polnoe-rukovodstvo-po-ispolzovaniyu-kanonicheskih-ssylok/">rel özelliği</a> Bunlar, bu satırları eklemek için kullanılan stil değerleridir. Ayrıca href niteliği, CSS dosyasının uzantısını veya yolunu belirtmek için kullanılır.</p><p>HTML belge öğesinin geçerli uygulamasında <head>harici bir stil dosyasına işaret eder.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>CSS'nin doğru şekilde görüntülendiğinden emin olmak için href niteliğinin değeri, CSS dosyasında kayıtlı olana doğrudan karşılık gelebilir. İlk durumda, main.css dosyası, yine kök klasörde bulunan HTML dosyasıyla aynı yere kaydedilir.</p><p>CSS dosyası bir alt klasöre yerleştirilmişse href niteliğinin değeri bu yöntemle yakından ilişkili olabilir. Örneğin main.css dosyamız stylesheets adlı bir alt klasörde saklanıyorsa href niteliğinin değeri stylesheets/main.css olacaktır. Burada pirinç örgüsü (veya eğik çizgi) alt klasördeki hareketleri belirtmek için kullanılır.</p><p>Açık <a href="https://3ddroid.ru/tr/game/the-most-popular-game-at-the-moment-what-is-the-best-game-in-the-world/">narazi</a> Hikayelerimiz elbette canlanmaya başlıyor. Henüz CSS'yi çok derinlemesine incelemedik ancak bazı öğelerin CSS'mizde tanımlamadığımız stilleri olduğunu fark etmiş olabilirsiniz. Bu tarayıcı bu öğelere kendi stilini dayatır. Neyse ki bu stilleri kolayca yeniden yazabiliyoruz ve bunu CSS indirerek daha da ileri gidebiliriz.</p><h2>Wikoristannya CSS kazıyıcı</h2><p>Dış görünüm tarayıcısı, çeşitli öğeleri yıkamak için farklı stiller kullanır. Bu nasıl <a href="https://3ddroid.ru/tr/operating-systems/sohranyaem-veb-stranicu-v-pdf-v-brauzere-google-chrome-kak-sohranit-veb-stranicu/">Google Chrome</a> Internet Explorer'ın çalışma şeklinden farklı olabilecek başlıkları, paragrafları, listeleri vb. görüntüler. Farklı tarayıcılarla tutarlılığı sağlamak için CSS indirmeleri yaygın olarak kullanılmaya başlandı.</p><p>Bu CSS, belirli bir stildeki tüm temel HTML öğelerini alır ve tüm tarayıcılarda tutarlı bir stil sağlar. Bu indirimler, bu değerleri azaltmak için farklı boyutlar, açıklıklar, marjlar veya ek stiller eklemenizi gerektirir. CSS'nin basamaklı parçaları aşağı doğru iner (çok yakında öğreneceksiniz) - düşüşümüz stilimizin en üstünde bulunabilir. Bu, öncelikle bu stillerin okunacağını garanti eder <a href="https://3ddroid.ru/tr/operating-systems/kak-ustanovit-domashnyuyu-stranicu-yandeks-kak-yandeks-sdelat-startovoi-stranicei/">Farklı tarayıcılar</a> uzaktaki başlangıç ​​noktasından itibaren çalışın.</p><p>Kurutma için çok sayıda farklı CSS indirimi mevcuttur ve hepsinin kendine has güçlü yönleri vardır. Eric Meyer'in en popüler örneklerinden biri olan CSS düşüşü, yeni HTML5 öğelerini içerecek şekilde uyarlandı.</p><p>Nicholas Gallagher tarafından oluşturulan Normalize.css gibi kendinizi biraz maceracı hissediyorsunuz. Normalize.css, tüm ana öğeler için sert taramanın seçimine değil, bu öğeler için kurulu arka plan stillerine odaklanır. Bu, CSS'nin kapsamlı bir şekilde anlaşılmasının yanı sıra stile ne dahil etmek istediğinizi bilmenizi gerektirir.</p><h3>Tarayıcılar arası uyumluluk ve test</h3><p>Daha önce tahmin edebileceğiniz gibi, farklı tarayıcılar öğeleri farklı şekilde görüntüler. Tarayıcılar arası uyumluluk ve testin anlamını bilmek önemlidir. Sitelerin tüm tarayıcılarda çevrimdışı görüntülenmesi sizin hatanız değil, ancak benzer olabilir. Hangi tarayıcıları desteklemek istediğiniz ve hangi dünyayı seçerseniz seçin, siteniz için en iyi olana göre kararlar vermeniz gerekecektir.</p><p>CSS'nin yazıldığı zamana saygı duyulması temelinde bir takım konuşmalar var. İyi haber şu ki, her şey mümkün ve bunda ustalaşmak için sadece biraz sabra ihtiyacınız var.</p><h2>Uygulamada</h2><p>Geri dönüp konferans sitemize bakalım ve nasıl biraz CSS ekleyebileceğimizi merak edelim.</p><ol><li>Styles-conference klasörümüzün ortasında şunu oluşturalım: <a href="https://3ddroid.ru/tr/windows-7/sozdanie-novoi-papki-na-windows-kak-sozdat-novuyu-papku-v-windows-xp/">yeni dosya</a> varlıklarımla. Web sitemiz için stiller, resimler, videolar vb. gibi tüm kaynakları kaydedeceğiz. Stillerimiz için, varlıklar klasörünün ortasına başka bir stil sayfaları klasörü ekleyelim.</li><li>Vikoristovuchi metin editörü çözülebilir <a href="https://3ddroid.ru/tr/browsers/where-to-throw-plugins-how-to-install-the-plugin-in-photoshop-to-get-new-features/">yeni dosya</a> main.css adını verin ve dikkatlice oluşturduğumuz stil sayfaları klasörüne kaydedin.</li><p>Tarayıcınızdaki index.html dosyasına bakarak hangi öğelerin olduğunu görebiliriz. <h1>і <p>Zaten Promosyon insanları için tarzdan intikam alın. Zokrema, kokuların benzersiz bir yazı tipi boyutu ve etraflarında boşlukları vardır. Erik Meyer'e göre bu tarzları yumuşatarak her birinin yeni bir temelden başlamasını sağlayabiliriz. Bunu yapmak için sitenize bir göz atın, kodu kopyalayın ve main.css dosyamızın en üstüne yapıştırın.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2.v2.0 | 20110126 Lisans: yok (kamu malı) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blok alıntı, pre, a, kısaltma, kısaltma, adres, büyük, alıntı, kod, del, dfn, em, img, ins, kbd, q, s, samp, küçük, grev, güçlü, alt, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, etiket, gösterge, tablo, resim yazısı, tbody, tfoot, thead, tr, th, td, makale, bir kenara, tuval, ayrıntılar, yerleştirme, şekil, şekil başlığı, altbilgi, başlık, hgroup, menü, gezinme, çıktı, yakut, bölüm, özet, zaman, işaret, ses, video ( kenar boşluğu: 0; dolgu: 0; kenarlık: 0; yazı tipi boyutu: %100; yazı tipi: devral; dikey hizalama: taban çizgisi ; ) /* Eski tarayıcılar için HTML5 görüntüleme rolünün sıfırlanması */ makale, kenar, ayrıntılar, şekil başlığı, şekil, altbilgi, başlık, hgroup, menü, gezinme, bölüm ( ekran: blok; ) gövde ( satır yüksekliği: 1 ; ) ol, ul ( liste stili: yok; ) blok alıntı, q ( tırnak işaretleri: yok; ) blok alıntı: önce, blok alıntı: sonra, q: önce, q: sonra ( içerik: ""; içerik: yok; ) tablo ( border- çöküş: çöküş; kenar aralığı: 0; )</p><li>Main.css dosyamız şekillenmeye başlıyor bu yüzden onu index.html dosyasına bağlamamız gerekiyor. index.html'yi bir metin düzenleyicide açın ve öğeyi ekleyin <link>V <head>elemanın hemen ardından <title> .</li><li>Bazılarımız stilleri öğe aracılığıyla belirtir <link>Stil sayfası değerlerine bir rel niteliği ekleyin.</li><p>Ayrıca href niteliğini main.css dosyamıza gönderdiğimizi de belirtelim. Main.css dosyamızın, asset klasörünün ortasında bulunan stil sayfaları klasöründe saklandığını unutmayın. Böylece main.css dosyamızın yolu olan href niteliğinin anlamı asset/stylesheets/main.css olur.</p><p> <head> <meta charset="utf-8"> <title>Stiller Konferansı

Çalışmamızı gözden geçirmenin ve HTML ile CSS'nin nasıl bir araya geldiğini görmenin zamanı geldi. İndex.html dosyasını açarak (veya zaten açıksa sayfayı güncelleyerek), tarayıcı öncekinden biraz farklı bir sonuç gösterebilir.

Pirinç. 1.04. Web sitemiz CSS indirimleriyle Stiller Konferansı

Gösteri ve çıktı kodu

Aşağıda bir sonraki şehrinizdeki Styles Conference web sitesine bakabilir ve keyfini çıkarabilirsiniz. çıkış koduşimdi site

Özet

Aman Tanrım, her şey harika! Bu dersten pek çok harika hazineler elde ettik.

Bir düşünün, artık HTML ve CSS'nin temellerini biliyorsunuz. HTML ve CSS yazmaya bir saatten fazla zaman ayırmaya devam ettikçe bu iki dille daha rahat çalışacaksınız.

Tahmin edin neye baktık:

  • HTML ve CSS arasındaki fark.
  • Birbirlerini tanımak HTML öğeleri, etiketler ve özellikler.
  • İlk web sitesinin yapısının ayarlanması.
  • CSS seçicileri, kontrolleri ve değerlerine aşinalık.
  • CSS seçicilerle çalışma.
  • HTML ile CSS'de Vkazivnik.
  • CSS önemi düştü.

Şimdi HTML'ye daha yakından bakalım ve anlambilim hakkında biraz bilgi edelim.

Kaynaklar ve güç

  • Scripting Master aracılığıyla yaygın HTML terimleri
  • Etkileyici Webler Aracılığıyla CSS Terimleri ve Tanımları
  • CSS Araçları: Eric Meyer aracılığıyla CSS'yi sıfırlayın

Girmek

1. Temel bilgiler

1.1 HTML dili hakkında

1.2 Yaratılış ağıİnternet sitesi

1.3 Genel hükümler

1.4 Belge yapısı

1.5 Belge gövdesi etiketleri

1.6 Temel HTML etiketlerinin listesi

2. Ek bilgi

2.1 Etiketleri listeleme

2.3 Belgenin ortasındaki grafikler

2.4 Belgeye stiller ekleme

2.5 Özel html etiketleri

2.6 HTML formu

2.7 Html çerçevesi

2.8 HTML tabloları

2.9 Grafikleri web için optimize etme

2.10 CSS'nin temelleri

3. Sitenin açıklaması

3.1 Hazırlık

3.2 Baş tarafının açılması

3.3 Başka bir tarafın oluşturulması

3.4 Yerin açıklamasını içeren sayfanın oluşturulması

3.5 Fotoğraf sayfası

3.6 Programların bulunduğu taraf

3.7 Podyak'lı taraf

Visnovok

Wikilistlerin Listesi

Girmek

Bu tez HTML diline ayrılmıştır. Ek amaçlar için Web sayfaları olan *.htm ve *.html uzantılı dosyalar oluşturulur. Bunlardan internet siteleri oluşturulur.

Önce diploma çalışması Ekler sitesi, ek HTML dili kullanarak neler oluşturabileceğinize bir örnektir.

Robotun tamamı 3 bölüme ayrılmıştır. İlk bölüm ana HTML etiketlerinin açıklamasına ayrılmıştır. Burada basit web sayfalarının nasıl oluşturulacağı hakkında gerekli tüm bilgileri bulacaksınız. Başka bir bölümde, bir belgenin mevcut görünümünün nasıl değiştirileceği ve yenisine nasıl ekleneceği hakkında bilgiler bulunur. ek olanaklar. Üçüncü bölümde ise sitenin nasıl oluşturulduğuna dair açıklamalar ve bu tezin ekleri yer almaktadır. Bu raporda, sitenin oluşturulması konusunda geçen ay yapılan zorlu çalışmalar anlatılmış, bunları oluştururken ve düzeltirken elde edilen çeşitli faydalar, bunların kaldırılmasının zorlukları ve yöntemleri anlatılmıştır.

Bunu okuduktan sonra programlamaya tamamen yeni olan kişiler HTML'de programlamanın temellerini anlayabilirler. Ve bilenler kendileri için yeni bir şeyler bulabilirler.

1.1 Dil hakkında HTML

Hyper Text Markup Language (HTML), WEB ortamında hiper metin belgeleri oluşturmak için kullanılan standart bir dildir. HTML belgeleri farklı türdeki WEB tarayıcıları tarafından görüntülenebilir. Oluşturulan belge HTML içeriyorsa, WEB tarayıcısı belgenin çeşitli öğelerini ve bunların orijinal işlemlerini görmek için HTML'yi yorumlayabilir. HTML eklentisi, belgeleri hangi sistemin görüntülediğine göre çeşitli yazı tipleri, çizgiler ve diğer grafik öğeleriyle sunum için biçimlendirmenize olanak tanır.

Çoğu belge başlıklar, paragraflar veya listeler gibi standart öğeler içerir. HTML etiketlerini kullanarak, bu öğeleri işaretleyebilir, WEB tarayıcılarına bu öğeleri görüntülemek için minimum bilgi sağlayarak, belgelerin genel yapısını ve bilgi içeriğini koruyabilirsiniz. Bir HTML belgesini okumak için yapmanız gereken tek şey, HTML etiketlerini yorumlayan ve belgeyi yazarın amaçladığı şekilde ekranda görüntüleyen bir WEB tarayıcısıdır.

Çoğu zaman belgenin yazarı, belgenin mevcut görünümünü belirler. WEB tarayıcısının yeteneklerine dayanan HTML okuyucuyla, belge için kolayca yeni bir görünüm oluşturabilirsiniz (ya da onun yerinde değil). HTML, bir belgenin ek bir HTML etiketinin arkasında nerede bir başlık veya paragraf içereceğini belirtmenize olanak tanır ve ardından WEB tarayıcısına bu etiketleri yorumlaması talimatını verir. Örneğin bir WEB tarayıcısı bir paragrafın etiketini tanıyıp belgeyi istenilen görünümde sunabilirken, bir diğeri böyle bir yeteneğe sahip değildir ve belgeyi tek satırda sunabilir. Bazı WEB tarayıcıları ayrıca yazı tipinin boyutunu ve türünü, rengini ve belgenin görüntülenmesini etkileyen diğer parametreleri özelleştirme olanağına da sahiptir.

HTML etiketleri akıllıca iki kategoriye ayrılabilir:

1. Belgenin gövdesinin bir bütün olarak WEB tarayıcısı tarafından nasıl görüntülendiğini belirten etiketler.

2. Belgenin başlığı ve yazarı gibi belgenin gizli güçlerini açıklayan etiketler.

HTML'nin temel avantajının belgenizin WEB tarayıcılarında görüntülenebilmesi olduğunu unutmayın. farklı şekiller ve farklı platformlarda.

1.2 geçit İnternet sitesi

HTML belgeleri herhangi bir nedenle oluşturulabilir Metin düzeltici veya özel HTML editörleri ve dönüştürücüleri. Editörün HTML belgelerinin oluşturulmasına uygun olan seçimi, özellikle yazarın güvenilirliğinin ve özel benzerliğinin anlaşılmasına bağlıdır.

Örneğin, Netscape'in Netscape Navigator Gold gibi HTML düzenleyicileri, WYSIWYG (Ne Görürsen Onu Alırsın) teknolojisini kullanarak grafiksel olarak belgeler oluşturmanıza olanak tanır. Öte yandan, geleneksel belge oluşturma yöntemlerinin çoğu, belgeleri HTML biçimine dönüştürmenize olanak tanıyan dönüştürücüler kullanır.

Tüm HTML etiketleri " ile başlar<" (левой угловой скобки) и заканчиваются символом ">(sağ kemer). Tipik olarak bir başlangıç ​​etiketi ve bir bitiş etiketi bulunur. Örneğin, başlangıç ​​ve bitiş etiketlerinin ortasında görünen metni temsil eden ve belgenin başlığını açıklayan başlık etiketlerini ekleyeceğiz:

Belge başlığı

Bitiş etiketi başlangıç ​​etiketiyle aynı görünür ve ortadaki metnin önünde doğrudan eğik çizgi bulunur topuk tapınakları. Kimin etiketi uygulanır? WEB tarayıcısına Wikoristanny başlık formatı ve etiketi hakkında bilgi verin- başlık metninin tamamlanması hakkında.

Etiket eylemleri, örneğin

(paragraf anlamına gelen bir etiket), son etiketi içermez, ancak bu wiki, belgenin çıktı metnine gelişmiş okunabilirlik ve yapı kazandıracaktır.

HTML, etiketi tanımlayan karakterlerin büyük/küçük harf durumuna yanıt vermez ve örneğin üzerine gelindiğinde şu şekilde görünebilir:

Belge başlığı

Saygı! Maksimum okunabilirlik için HTML belgesinin çıktı metnine eklenen ek boşluklar, sekmeler ve satır dönüşleri, belge yorumlanırken WEB tarayıcısı tarafından dikkate alınmayacaktır. Bir HTML belgesi, yalnızca etiketlerin ortasına yerleştirildiklerinde açıklayıcı öğeler içerebilir 

І
. Etiketler hakkında daha fazla ayrıntı 
Aşağıda yazılacaktır.
 
WEB tarayıcısı bir belgeyi tuttuğunda belgenin nasıl yoruma tabi olduğunu belirtir.  Bir belgede görünen ilk etiket etikettir .  Bu etiket WEB tarayıcısına belgenizin HTML ile yazıldığını bildirir.  Minimal HTML belgesi şuna benzer:
 
Belgenin gövdesi...
 
Belge başlığı .  Belge başlığı etiketi, etiketten hemen sonra görünecektir Ve daha fazlası belgenin gövdesinin herhangi bir yerinde.  Bu etiket Zagalny açıklaması belge.  Herhangi bir metni etiketin ortasına yerleştirdiğinizden emin olun. .  Etiketi başlat doğrudan etiketin önüne yerleştirilir belgeyi tanımlayan diğer etiketler ve bitiş etiketi</HEAD> belge açıklaması tamamlandıktan hemen sonra yayınlanır.  Örneğin:</p> <p><TITLE>Sporcuların listesi
 
Saygı!  Teknik olarak başlangıç ​​ve bitiş etiketleri birbirine benzer , і  Neobov'yazkovi.  Ancak, bu etiketlerin kullanılması WEB tarayıcısının belgenin baş kısmı ile anlamsal kısmını etkili bir şekilde ayırmasına olanak tanıdığından, bunların kullanılması şiddetle tavsiye edilir.
 
Belge başlığı .  Çoğu WEB tarayıcısı bunun yerine etiketi görüntüler <TITLE>belgeyi yerleştireceğiniz pencerenin başlığına ve WEB tarayıcısı tarafından desteklenen yer imi dosyasına.  Başlık, etiketler <TITLE>і, ortada yer alan -etiketler, yukarıda uygulamada gösterildiği gibi Belge pencerede görüntülendiğinde belgenin başlığı görünmüyor.


Web siteleri oluşturmak, birçok aşamaya bölünmüş karmaşık bir süreçtir.  İlk aşamada sitenin tasarımını grafiksel bir biçimde oluşturuyoruz: buna site için eskizler ve prototipler diyoruz.  Aslına bakılırsa, vekilin onay almayı umduğu, yaklaşmakta olan sitenin bir grup renkli görüntüsüne benziyor.
Eskizler veya web sitesi prototipleri genellikle grafik tasarım programları kullanılarak oluşturulur.  Z profesyonel programlar Görünüşe göre en geniş üç genişlik ce, Adobe İllüstratör, і  Corel çizgisi.  Ve elbette, henüz yatırım yapmadığımız daha az profesyonel, ancak daha az profesyonel olmayan birçok program daha var.
Saldırı aşaması-Düşük sayısal düzeltmeler yapılarak bu eskizlerin bir vekil tarafından bizzat sağlamlaştırılması gerekmektedir.
Peki, sitenin yaratımlarının tasarımı, yönetici tarafından yapılan düzeltmeler ve onaylar, şimdi yakılması gerekiyor, peki ya düzen?
Bir aşama daha oluşturulan sitede: düzen. 
Düzen- sitenin taslağına veya prototipine dayalı bir Web sitesinin oluşturulması.  Ve bu, tasarımcının yazılım programlarından birinde "yarattığı" her şeyin yanı sıra, metin dosyaları biçiminde bir metin yazarı yazmış olmasının yanı sıra, mizanpaj programcısının dikkatlice ve bir anlamda kesip yazması gerektiği anlamına gelir. ten tarafının kodu, o metnin koduna resim yerleştirmek, çapraz mesaj ve geçişlerle tarafları birbirine bağlamak, formlar eklemek ve bir tane daha, bir tane daha, bir tane daha... Monoton, robotik bir rutin.  Web sitesi oluşturma aşamaları hakkında daha fazla bilgi edinebilirsiniz
Ve geri kalan aşamanın, bitmiş sitenin kalıcı dağıtım sunucusuna "yüklenmesi", ayarlanması ve ayarlanması olduğuna karar verdik, böylece her şey aksaklıklar ve hatalar olmadan ihtiyacımız olan şekilde çalışır.
Yani bir web sitesi yazmak için aşağıdaki dil programlamayı bilmeniz gerekir: HTML, CSS, JavaScript, PHP, MYSQL.  Günümüzde en popüler olan başka diller de var.  Ve size cilt dilini daha detaylı anlatacağım.
HTML(HyperText Markup Language), bilgi görüntüleme biçimini tanımlayan bir işaretlemedir.  Qiu movu vikorist, sitenin temelini oluşturmak, ardından sitenin çerçevesini oluşturmak için.
CSS(Basamaklı Stil Sayfaları) - Web sayfanızın dış görünümünü kontrol etmenizi sağlayan bir şey.  Ek CSS kullanarak web sayfasının hemen hemen tüm öğelerinin kesin özelliklerini belirleyebilirsiniz.
JavaScript- Bu sayede Web sayfasından “keyif almak” için bunu kullanabilir, ek bir ücret karşılığında Web sayfasını etkileşimli, yani müşteriyle etkileşimli hale getirebilirsiniz.  Bu yardımla açılır pencereler veya ipuçları ve çok daha fazlasını oluşturabilirsiniz.  Bu dil yalnızca Web geliştirmedeki durgunluk amacına hizmet etmez.
PHP- bu, komut dosyası sunucuları yazmak için bir yöntemdir.  Şarap en popüler olanıdır şu anki saat ve usta olanlar arasında önemsizdir.  Z lütfen PHP'ye yardım edin Sunucudaki verileri işleyebilir, dosyaları işleyebilir, listeleri indirebilir, bir sohbete, foruma ev sahipliği yapabilir ve çok daha fazlasını yapabilirsiniz.
MYSQL- Bu bir veritabanı.  Ek bir ücret karşılığında, istek üzerine veri ekleyebilir, değiştirebilir veya silebilir ya da bilgileri iptal edebilirsiniz.  MYSQL'i öğrendikten sonra diğer veritabanlarını da kolaylıkla okuyabilirsiniz.
Uygulama © 2022 Mobil ve bilgisayar aygıtları

)

BORDECOLOR='renk' – çerçeve rengi ( >)

VALIGH=alt, orta, üst - Dikey olarak birlikte doğrulama (

)

2. Pratik tesis No. 5

Tek satırdan tablo formunda site navigasyonu oluşturma

6 ve 7 Numaralı Dersler

1. Başlık bölümü , meta etiketleri

Alt sayfadaki başlık bölümü, görüntüleme sırasında incelenmekte olan belgeyle ilgili bilgileri görüntüler. Etiketler arasındaki metin </b>... <b>, Tarayıcı penceresinin başlığında görünür.

Başlık bölümünde çok sayıda etiket bulunmalıdır web sitesi hakkında ek bilgi (meta bilgi) sağlayan çeşitli özelliklere sahip:

St. Petersburg'un drama tiyatroları <b>

> - - (kod tablosunun türünü belirtin ( Windows-1251, Koi8-R ve diğerleri), belgenin metin kısmını hazırlamak için koristana'yı kullanma.

- hakkında bilgi

( yakındaki arama motorları tarafından aranabilecek anahtar kelime kümesinin kimin aracılığıyla olduğunu belirtirsiniz)

2. Projeniz üzerinde bağımsız çalışma

Projeye yaklaşımlar:"Мости через Неву", "Ріки та канали Санкт-Петербурга", "Мости через канали Санкт-Петербурга", "Незвичайні музеї Санкт-Петербурга", "Музичні театри", "Філармонії та капела", "Технічні ВНЗ -и Санкт-Петербурга”, “Дитячі театри Санкт-Петербурга”, “Гуманітарні ВНЗ-и Санкт-Петербурга”, “Передмісти Санкт-Петербурга”, “Музеї Санкт-Петербурга”, “Військові навчальні заклади у Санкт-Петербурзі” та інших. .!}

Sitenin ana sayfasının glavn.htm dosyasına göre, bir tablo veya liste seçilerek tasarlanması ve sitenin gezinme bölümünde siteyi açacak ve başlığın yerleştirileceği 2 - 3 sayfanın tasarlanması gerekmektedir, metin ve sayfalar.

Ders #8

1. HTML etiketlerinin bilgisine ilişkin kontrol testi – 15 dakika.

2. Yansıma. Projenin öğrenciler ve öğretmen tarafından sunulması ve sınıfının değerlendirilmesi - 30 havil.

Kontrol testi için beslenme – Ek 2.

Öğretmen için edebiyat

  1. Thomas A. Powell “Web tasarımı. En büyük dış bakım. Orijinalinde”, 2. baskı, BHV-SPB, 2005.
  2. Brown M. “HTML 3.2. En büyük dış bakım. Orijinalinde”, BHV-SPb, 1999
  3. Zakharkina V.V. "Web hikayeleri oluşturmanın temelleri", metodik el kitabı, St. Petersburg, 2000
  4. K. Akhmetov, “Microsoft İnternet Explorer 4.0 her şey”, Komp'yuter yayınevi, Moskova, 1997.

Çalışmak için edebiyat

  1. Usenkov D. "Web Master'ın Dersleri", Moskova, BINOM, 2004 r.
  2. Smirnova İ. “Web tasarımına başlandı, St. Petersburg, BHV, 2004.

İnternet kaynaklarının listesi

  1. http://htmlbook.ru - Merzhevich Vlad. Web sitesi oluşturma teknolojisi, HTML, CSS, tasarım, grafikler vb. hakkında kısa, bilgi açısından zengin bir kılavuz.
  2. http://html.manual.ru - Gorodulin Volodymyr. HTML editörü.
  3. http://winchanger.narod.ru - A. Klimov. HTML film etiketlerinin kısa bir özeti.

Yerel dil işaretlemesinden HTML hiper metnine kadar Web sitelerinin geliştirilmesi

Web hikayeleri ve web siteleri

Web hikayeleri. Web sayfaları, HTML (Köprü Metni İşaretleme Dili) hiper metin belgelerinin ek işaretlemesi kullanılarak oluşturulur. Orijinal metin belgesine, bir tarayıcıda görüntülendiğinde Web sayfasının görünümünü belirten HTML sembolleri - HTML etiketleri eklenir.

Web sayfalarının başlıca avantajları şunlardır:
- Asgari bilgi yükümlülüğü;
- farklı işletim sistemlerini görüntüleme yeteneği.

Web sayfaları oluşturmak için en basit metin düzenleyicileri kullanılır, ancak oluşturulan belge, düzenleyicinin metninde herhangi bir biçimlendirme sembolü içermez. Windows'ta böyle bir düzenleyici olarak standart Not Defteri programını kullanabilirsiniz.

Web sayfalarının oluşturulması Vikipedi HTML- Etiketler, genellikle dilin sözdizimini bilerek ve Web siteleri oluşturma işini basit ve etkili hale getirmek için özel yazılım araçlarını (Web editörleri) kullanarak büyük bir çaba gösterir. Web editörlerinde sayfa oluşturma ve düzenleme süreci çok basittir, bu nedenle WYSIWYG modunda gerçekleştirilir (İngilizce, "Ne Görüyorsan Onu Alırsın" - "Ne Görüyorsan Onu Alırsın").

İnternet sitesi. World Wide Web'deki yayınlar Web siteleri şeklinde gerçekleştirilmektedir, bu da materyalin belirli konu ve sorunlara konu olacağı anlamına gelmektedir. Hükümet yapılarının ve kuruluşlarının (bölge, duma, okul vb.), faaliyetleri hakkında bilgi yayınlayacakları kuruluşlarının resmi Web sitelerini oluşturmaları gerekmektedir. Ticari şirketler, ürün ve hizmetlerinin reklamını web sitelerinde yapmakta ve çevrimiçi mağazalarda bunların faydalarını tanıtmaktadır. İnterneti kullanan herkes, kendi keşifleri, istiflemeleri vb. hakkında bilgi yayınlayabilecekleri kendi tematik sitesini oluşturabilir.

Nasıl ki bir dergi diğer sayfalardan oluşuyorsa, bir Web sitesi de bilgisayar Web sayfalarından oluşur. Site, kullanıcının Web sayfalarında gezinmesine olanak tanıyan hiper güç sistemini ihlal etmekten suçludur.

Öncelikle Web sitenizi İnternet'teki bir sunucuya yerleştirmelisiniz, ancak sitenize potansiyel katkıda bulunan on milyonlarca İnternet kullanıcısı olacağından şiddetle protesto etmelisiniz.

Bir web sitesinin yayınlamak için İnternet sunucularından birinde uygun bir konum bulması gerekir. Birçok sağlayıcı, müşterilerine web sitelerini sunucularında ücretsiz olarak barındırma fırsatı sunar (ücretsiz barındırma).

Yiyecekleri kontrol edin

1. Web sayfalarının birincil metin belgelerine göre avantajı nedir?

2. Web hikayeleri Web siteleriyle nasıl birleşir?

Web sitesi yapısı

Yan sayfanın HTML kodu kabın ortasına yerleştirilir . Bu etiketler olmadan tarayıcı belge formatını tanıyamaz ve doğru şekilde yorumlayamaz. Bir web sayfası iki mantıksal bölüme ayrılmıştır: tarayıcıda görüntülenen bir başlık ve bir yer.

Web sayfasının başlığı kapsayıcıda görünür Ve tarayıcı tarafından doğru görüntülenip görüntülenmediği kontrol edilen belgenin adını ve sayfa hakkında ek bilgileri (örneğin, kodlama türü) ekleyin.

Etiketler boynun pruvasında bulunur ve tek veya çift olabilir. Eşleştirilmiş etiketler, açılıp kapanan bir etiket içerir (bu etiket çiftine denir) konteyner).

Bitiş etiketinin önüne eğik çizgi (/) koyun. Etiketler hem büyük hem de küçük harflerle yazılabilir.

Sayfanın adı kapsayıcının yanında bulunur Ve inceleme saatinde tarayıcı penceresinin üst satırında görüntülenir.

Tarayıcıda görüntülenen site bir kapsayıcıya yerleştirilir (Şekil 6.26):


<ТITLE>Bilgisayar


Bilgisayar ve PZ


Pirinç. 6.26. "Bilgisayar" Web Hikayesinin Hazırlanması

Oluşturulan Web sayfasının index.htm adlı bir dosya olarak kaydedilmesi gerekir. Web hikayesi dosyasının bir uzantısı olarak HTML'yi de düzenleyebilirsiniz. Site için özel bir klasör oluşturulması ve siteye ait dağıtılan tüm dosyaların bu klasöre kaydedilmesi önerilir.

Web sayfasının kaydedildiği index.htm dosyasının adlarını ayırmak gerekir. dosya sistemi, tarayıcı penceresinin üst satırında görünen Web sayfasının adı (örneğin, “Bilgisayar”). Web sayfalarının isimleri öncelikle ses sistemleri tarafından analiz edildiğinden değiştirilmelidir.

Yiyecekleri kontrol edin

1. Bir HTML belgesinde mutlaka hangi etiketler (kapsayıcılar) bulunur? Bir Web sayfasının mantıksal yapısı nedir?

6.10. Daha pratik. Bir “Bilgisayar” Web sayfası oluşturun ve tarayıcınızda görüntüleyin.

Web sitesindeki metni biçimlendirme

Şu ana kadar sayfamız pek çekici görünmüyor: beyaz zemin üzerine küçük siyah renkli bir yazı tipi. Ek etiketleri kullanarak metin biçimlendirmesi için çeşitli parametreler ayarlayabilirsiniz.

Başlıklar. Başlık yazı tipi boyutları etiket çiftleri halinde belirtilir<Н1>(en büyük) kadar<Н6>(En yakın).

Yazı tipi. Bu etiketler otoritelerin isimleri gibi nitelikleri içerir ve şarkı anlamları kazanabilir. FONT etiketini ve bu nitelikleri kullanarak yazı tipini biçimlendirmeye ilişkin parametreleri ayarlayabilirsiniz. FACE özelliği yazı tipinin yazı tipini ayarlamanıza olanak sağlar (örneğin, FACE="Arial"), SIZE özelliği yazı tipi boyutunu ayarlamanıza olanak tanır (örneğin, SIZE=4).

COLOR özelliği, yazı tipinin rengini ayarlamanıza olanak tanır (örneğin, C0L0R='mavi'). COLOR özelliğinin değerleri, rengin adına (örneğin, "kırmızı", "yeşil", "mavi" vb.) veya on altıncı değere ayarlanabilir.

On altıncı rakam, renkçi RGB formatı "#RRGGBB" ile temsil edilir; burada ilk iki on altıncı rakam kırmızının (kırmızı), iki rakam yeşilin (yeşil) yoğunluğunu ve geri kalan iki rakam da kırmızının yoğunluğunu ayarlar. mavi (mavi) renk. Rengin minimum yoğunluğu onaltılık sayı 00 ve maksimum - FF ile gösterilir. Örneğin mavi renk "#0000FF" değerine atanmıştır.

Metnin doğrulanması. ALIGN özelliği metin hizalama yöntemini ayarlamanıza olanak tanır. Sola hizalama şu şekilde gösterilir: ALLGN="sol", sağa hizalama: ALIGN="sağ", orta hizalama: ALIGN=merkez".

Böylece, ortaya hizalanmış başlığın mavi rengi şu şekilde ayarlanabilir:


<Н1 ALIGN="center">Bilgisayar ve PZ

Yatay çizgiler. Sayfa tek bir etiketin arkasında yatay çizgilerle değiştirilerek başlıklar tamamen güçlendirilmelidir.

.

Paragraflar Metni kabın arkasında paragraflara bölün<Р>. Tarayıcıya her saat baktığımda, paragraflar aralıklarla birer birer ekleniyor. Her paragraf için metin türünü ve yazı tipi biçimlendirme parametrelerini ayarlayabilirsiniz.

Sitenin ana sayfası Sitenin ana sayfasında konumunuzu kısaca anlatan bir yazı bulunmaktadır. Metni “Bilgisayar” web sitesinin ana sayfasına, farklı versiyonlara sahip paragraflara bölünmüş olarak yerleştirelim:

<Р ALIGN="left">Bu sitede bilgisayar, yazılımı ve bilgisayar bileşenleri fiyatları hakkında çeşitli bilgiler bulabilirsiniz.
<Р ALIGN= "right">Terminolojik sözlük, bilgisayar terimlerini tanımanıza yardımcı olacak ve ayrıca formu doldurabileceksiniz.

Böyle bir şekilde Ana sayfa“Bilgisayar” sitesi için başlık mavi renkte ortalanmalı ve iki farklı hizalanmış paragrafta yatay bir çizgiyle desteklenmelidir (Şekil 6.27):


<Н1 ALIGN="center">
Bilgisayar ve PZ



<Р ALIGN="left">Hangi sitede...
<Р ALIGN ="right">Terminolojik sözlük
...
Pirinç. 6.27. Biçimlendirilmiş metin içeren "Bilgisayar" web sayfası

Yiyecekleri kontrol edin

1. Başlıklar için hangi etiketler (kapsayıcılar) kullanılıyor? Yazı tipi biçimlendirmesi? Paragrafların tanıtımı?

Bağımsız bir galip için salon

6.11. Daha pratik. Biçimlendirilmiş metin içeren bir “Bilgisayar” Web sayfası oluşturun ve bunu tarayıcınızda görüntüleyin.

Web sayfasına resim ekleme

Web sayfasına üç formatta (GIF, JPEG ve PNG) grafik dosyalarına kaydedilen görüntüleri yerleştirebilirsiniz.

Resim eklendi. Resim eklemek için vikory etiketini kullanın dosyanın nereye kaydedildiğini gösteren SRC özelliğiyle yerel bilgisayar veya internette. Grafik dosyası yerel bilgisayarda Web sayfası dosyasıyla aynı klasörde bulunuyorsa, SRC niteliğinin değeri yalnızca dosya adını belirtmek için yeterlidir. Örneğin:

Dosya yerel bilgisayarınızda farklı bir klasörde bulunuyorsa, öznitelik değeri, hiyerarşik dosya sistemindeki bir sonraki dosyanın yolları da dahil olmak üzere, dosya adının dışında olabilir. Örneğin:

Dosya internetteki uzak bir sunucuda bulunuyorsa dosyanın web adresi girilebilir. Örneğin:

Küçük çocuğun metne göre konumu. Beş farklı değer alabilen ALIGN özelliği: TOP (üst), MIDDLE (orta), BOTTOM (alt), LEFT (sol el) ve RIGHT (sağ el), metnin içine küçük nesneleri yerleştirmenize olanak tanır. Farklı yollar.

Bir bilgisayarın görüntüsünü “Bilgisayar” web sitesinin ana sayfasına yerleştirmek mantıklıdır. Küçüklerin metnin sağ kenarında görünmesi için resim ekleme etiketi görünümün çirkinliğinden kaynaklanmaktadır (Şekil 6.28):
Pirinç. 6.28. "Bilgisayar" Web sayfasına resim ekleme

Alternatif metin ekleme. Bazı bilgisayarlar, zamandan tasarruf etmek için tarayıcının grafik görseller tercihini açar ve bunun yerine metin okur. Duyularınızı boşa harcamamak için küçük metin yerine alternatif metin görüntülenebilir.

Ek ALT özelliğinin arkasında alternatif metin görüntülenir; bunun değeri, işi tamamlamak için neler yapabileceğinizi açıklayan metindir:

Yiyecekleri kontrol edin

1. Web sayfalarına resim eklemek için hangi etiket ve özellikler kullanılır?

Bağımsız bir galip için salon

6.12. Daha pratik. Resmi “Bilgisayar” Web sayfasına ekleyin ve tarayıcınızda görüntüleyin.

Web sitelerinde hiper güç

Tarayıcıya aktarılan web sitesi yerel bilgisayarda aynı klasörde bulunuyorsa, adres yerine dosyanın adını girmeniz yeterlidir, örneğin:

Tarayıcı tarafından erişilen web sitesi internette bulunuyorsa, adres bölümünde İnternet adresleri belirtilir, örneğin:

<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Pokazhchik posilannya

İstek tarafımızdan gönderildi ve bir saat boyunca tarayıcıdaki Web sayfasına bakacağız. Yazarın gönderdiği mesaj bir metin olabilir, vizyonları mavi renkle ve koltukların altında veya küçükleri çerçeveli vizyonlarla adlandırabilir. Yeni bir fareye tıkladığınızda imleç "el" simgesine dönüşür. İstekte bulunanın arkasındaki fareye tıklamak sizi köprüde listelenen Web sayfasına götürecektir.

  • Tarayıcınızda resme bakmadan önce:
    <А HREF="picture.jpg">Resim
  • programlayıcıyı başlatmadan, tarayıcıya yüklemeden ve bir ses dosyası oluşturmadan önce:
    <А HREF="sound.wav">Ses
  • Tarayıcınızda yüklü olan dosya depolama yöneticisini kullanarak bir dosyayı yerel bilgisayarınıza kaydetmek için:
    <А HREF="Apxив.ziр">Dosyayı büyüle

Sitedeki gezinme paneli.“Bilgisayar” sitesi için bir klasör oluşturun ve “Programlar”, “Kelime Bilgisi”, “Tamamlama” ve “Anket” sitesine boş sayfalar ekleyin. Bunları sitemizde Software.htm, glossary.htm, hardware.htm ve anketa.htm isimli dosyalara kaydediyoruz. Başlıkların sorumlusu bu tür “boş” sayfalardır, ancak şimdilik değiştirilmeyebilir:



<ТITLЕ>sayfa başlığı


Sitenin ana tarafında, sitenin kişisel tarafına hiper siparişler verilmektedir. Sonuç olarak geçişin gerçekleştiği sayfaların adlarını seçmek en iyisidir.

Abartı göstergelerini sayfanın altına tek satırda yeni bir paragrafta boşluklarla ( ) ayırarak yerleştirebiliriz. Bu hiper konuma genellikle gezinme paneli adı verilir.

Gezinme çubuğunu oluşturan HTML kodunu sitenin ana sayfasına ekleyin:

<Р ALIGN="center">
[<А HREF="software . htm">programı] 
[Kelimeler]  
[Tamamlanıyor] 
[Profil]

Hipergüç adreste elektronik posta yoluyla. Sitenin ana sayfasında e-posta adresine acentelerin site yönetimiyle iletişime geçebileceği bir mesaj yazılması önemlidir. Bu amaçla e-posta adresine HREF mesaj niteliğini atamak ve onu kapsayıcıya eklemek gerekir.

paragrafın stilini, adresin nasıl ekleneceğini gösteren:


<А HREF="mailto:[e-posta korumalı]"E-posta:
[e-posta korumalı]

Şimdi gönderdiğiniz e-posta adresine tıklayın ve sizden istenecektir. posta programı Sırayla Outlook Express (veya iletişim için kullanılabilecek başka bir e-posta programı) Kime Gönderilen adreslere eklenecektir.

Artık “Bilgisayar” web sitesi için bir başlık, bir bilgisayar görüntüsü, iki paragraflık metin, bir gezinme çubuğu ve bir e-posta içeren bir ana sayfa oluşturuldu (Şekil 6.29).
Pirinç. 6.29. "Bilgisayar" web sitesinin ana sayfası hazır

Yiyecekleri kontrol edin

1. Hipergüç yaratmak için hangi etiket ve özellikler kullanılıyor?

Bağımsız bir galip için salon

6.13. Daha pratik. Bir “Bilgisayar” Web sayfası oluşturun ve hiper güç panelini sitenin diğer sayfalarına yerleştirin ve bunları tarayıcıda görüntüleyin.

Web sitelerindeki listeler

Genellikle Web sayfalarına metin gönderirken farklı seçenekler arasından listeleri manuel olarak seçin:

  • listenin öğeleri sayılarla tanımlandığında numaralı listeler;

  • Listenin öğeleri yardım amacıyla tanımlanmışsa işaretli listeler özel karakterler(Markeriv);

  • Sözde sözlük formuna anlamlar eklemenizi sağlayan anlam listeleri.

İç içe geçmiş listeler oluşturmak mümkündür ve iç içe geçmiş liste, türüne göre ana listeden alt bölümlere ayrılabilir.

Numaralandırılmış listeler. Numaralandırma listesi kabın ortasında görüntülenir

    • Numaralandırma türünü ayarlayabilirsiniz: Arap rakamları(zamovchuvannyam için), "I" (Roma rakamları), "a" (mali harfleri) ve içinde:


        < LI >Sistem programları
        < LI >Uygulama programları
        < LI >Programlama sistemleri

      İşaretli listeler.İşaretleme listesi kabın ortasında görüntülenir ve listedeki her öğe bir etiketle gösterilir.< LI >. TYPE etiketi özelliğiyle ilgili ek yardım için

        Liste için işaretleyicinin türünü ayarlayabilirsiniz: "disk" (disk), "kare" (kare) veya "daire" (daire):

        Ana türleri vurgulamak için "Programlar" Web sayfasında numaralandırılmış bir liste mevcuttur. yazılım güvenliği bilgisayar.

        Ana numaralandırılmış listenin başka bir öğesine bir işaretleme listesi ekleyin (Şek. 6.30).

        Randevu listesi. Değerlerin listesi kabın ortasında görüntülenir

        /
        . Ortada metin, tek etiketler olarak görünen terimler olarak biçimlendirilmiştir
        tek etiketleri takip etmenin anlamı
        .

        “Sözlük” web sayfasını bilgisayar terimleri sözlüğü biçiminde sunuyoruz (Şekil 6.31):


        İşlemci
        Bilgiyi çift kodla işleyen bir bilgisayarın merkezi cihazı.
        Veri deposu
        Programların ve verilerin kaydedildiği bir cihaz.

        Yiyecekleri kontrol edin

        1. Numaralandırılmış listeler oluşturmak için hangi işaretler kullanılır? İşaretli listeler mi?

        Bağımsız bir galip için salon

        6.14. Daha pratik. Numaralandırılmış bir liste içeren bir "Programlar" Web sayfası oluşturun ve madde işaretli bir liste ekleyin.

        6.15. Daha pratik. Terimlerin listesini içeren bir “Sözlük” web sayfası oluşturun.

    		•