Not defterinde bir html sayfası oluşturma: aptallar için açıklama. Ortaya Hizalama Başlığı

Görev 1: Temel HTML Dosyaları Oluşturma

HTML dosyanızı oluşturmak için aşağıdakileri yapın:

    Klasör oluştur HTML, oluşturulan Web sayfalarını kaydedeceğimiz.

    Standart Not Defteri programını başlatın.

    Düzenleyici penceresine HTML dosyasının en basit metnini yazın:

Eğitim HTML dosyası

Salı ders programı

    Dosyayı RASP.HTM olarak kaydedin.

    Oluşturulan Web sayfasını görüntülemek için Microsoft Internet Explorer tarayıcısını indirin.

    Tarayıcı menüsünde aç Dosya(Dosya), Açık(açık), Görüş(genel bakış- Araştır) ve KURS klasöründeki RASP.HTM dosyasını bulun ve yükleyin. Web sayfasının adının (HTML Eğitimi) tarayıcının üst durum çubuğunda görüntülendiğinden emin olun.

Görev 2.Ekrandaki metnin düzenini kontrol etme

Bilgi.

HTML belgelerini görüntülerken, tarayıcılar metni otomatik olarak ekrana yerleştirir, almadan dosyada oluşan satır sonlarını ve ardışık boşlukları dikkate alın.

    Gerekirse, p.p.'yi takip edin. 5-6 görev 1.

    Web sayfasının orijinal kaynağını açın - tarayıcı menüsünde görüş(Görüş), Kaynak (olarakHTML) Web sayfanızın HTML komutlarında sunulduğu standart Not Defteri programı ile bir pencere açılacaktır.

    "Schedule", "classes", "Tuesday" sözcüklerini farklı satırlara yerleştirerek HTML dosyasındaki metni değiştirin:

Eğitim HTML dosyası

Takvim

sınıflar

Salı günü

    Komutları kullanarak değişikliklerinizi RASP.HTM dosyasına kaydedin. Dosya(Dosya), Kayıt etmek(Kayıt etmek). Not Defteri'ni kapatın.

    F5 tuşunu veya komutları kullanarak yeni alınan Web sayfasını görüntülemek için Microsoft Internet Explorer'ı kullanın. görüş(Görüş), Yenile (yenileyin). Ekrandaki metnin görüntüsü değişti mi?

Not

Gelecekte, Web sayfasında değişiklik yaptıktan sonra her zaman 4-5 arasındaki adımları izleyin.

Görev 3. Satır ve paragraf sonu etiketleri

Bilgi.

Satır kesme işlemini gerçekleştiren ve yeni bir paragrafın başlangıcını belirleyen özel komutlar vardır. Ek olarak, tarayıcı programının herhangi bir şekilde metin biçimlendirmesini değiştirmesini engelleyen ve bir metin dosyasının belirtilen parçasını ekranda doğru bir şekilde yeniden oluşturmanıza izin veren bir komut vardır.

Satır besleme etiketi
bir satırı sonraki metin veya grafiklerden ayırır. paragraf etiketi

Ayrıca satırı ayırır, ancak paragrafı görsel olarak vurgulayan boş bir satır da ekler. Her iki etiket de singleton'dur.

    HTML dosyasının metninde değişiklik yapın:

Eğitim HTML dosyası

Takvim

sınıflar

Salı günü

    4. Değişikliklerinizi RASP.HTM dosyasına kaydedin.

    Yeni alınan Web sayfasını görüntülemek için Microsoft Internet Explorer'ı kullanın.Ekrandaki metin nasıl değişti?

Görev 4. Metin parçalarını seçme

Bilgi.

Metin seçim etiketleri, tek tek karakterlerin ve sözcüklerin görüntülenmesini kontrol etmenize olanak tanır. Üç metin seçim etiketi vardır:

… vurgulamak gözü pek,

… vurgulamak italik olarak

… vurgulamak altını çizmek.

Eğitim HTML dosyası

Takvim sınıflar Salı günü

2. Yeni alınan Web sayfasını görüntüleyin.

Birleşik yazı tiplerini kullanmak mümkündür:

Takvim sınıflar Salı günü

Ancak aynı zamanda, birleşik etiketler yazmak için aşağıdaki kuralı da hatırlamanız gerekir:

<Тэг-1> <Тэг-2> … Etiket-2>

hatalı giriş

Görev 5: Başlık stillerini kullanma

Bilgi.

Tarayıcı tarafından görüntülenen metnin boyutunu kontrol etmenin iki yolu vardır:

    başlık stillerini kullanma,

    ana belgenin boyutunu veya mevcut yazı tipinin boyutunu ayarlama.

Altı başlık etiketi vardır (H1 - H6). Her etiketin tarayıcı ayarlarında belirtilen belirli bir stili vardır. Stil H1 en büyüğüdür.

    RASP.HTM dosyasında değişiklik yapın:

Eğitim HTML dosyası

Takvim

sınıflar Salı günü

    Yeni alınan Web sayfasını görüntüleyin.

Görev 5. Geçerli yazı tipinin boyutunu ayarlama.

Bilgi.

yazı tipi etiketi metnin tek tek yerlerinde geçerli yazı tipinin boyutunu ayarlamanıza olanak tanır. Geçerli yazı tipi ayar aralığı 1 ila 7 arasındadır.

    RASP.HTM dosyasında değişiklik yapın:

Eğitim HTML dosyası

Takvim

salı için dersler

    Etiketi kullanarak "Salı günü dersi" metninin yazı tipi boyutunu kendiniz değiştirin .

    Metin seçim etiketlerini ve satır ve paragraf sonu etiketlerini kullanarak bir HTML belgesinin metnini değiştirin.

Görev 6. Yazı tipi ve yazı tipi rengi

Bilgi.

Etiket Metin boyutu, stili ve rengi üzerinde kontrol sağlar. Yazı tipini değiştirmek, sadece etikete ekleyerek yapılır. YÜZ özelliği. Örneğin, metni Arial yazı tipinde görüntülemek için şunu yazarsınız: .

Bir etiketin yazı tipi rengini değiştirmek için nitelik kullanılabilir RENK = "X".

X yerine, rengin adını (tırnak içinde) veya onaltılık değerini değiştirmelisiniz. Onaltılık sayı ile bir renk belirtirken, bu rengi üç bileşene ayrılmış olarak gösterebilirsiniz:

kırmızı (R), yeşil (G), mavi (B), her biri 0 ile FF arasında bir değere sahiptir.

RGB formatında renk kaydı örnekleri tabloda gösterilmektedir:

tablo 1

Renk

Renk

Menekşe

kahverengi

Portakal

turkuaz

    RASP.HTM dosyasında değişiklik yapın:

Eğitim HTML dosyası

Takvim >

salı için dersler

    Belgenin boyutunu, rengini, yazı tipini, metin stilini kendiniz değiştirin.

Görev 7. Metni yatay olarak hizalama

Bilgi.

HTML etiketleri, metnin yatay hizalamasını kontrol eder. Bir hizalama yöntemi belirtmezseniz, belgedeki tüm öğeler sola hizalanır ve tırtıklı bir sağ kenar boşluğuna sahip olur (bkz. Şekil 2).

Modern tarayıcılar metin hizalama özelliğini kullanır HİZALAMA=, paragraf veya başlık etiketlerine gömülüdür.

    RASP.HTM dosyasında değişiklik yapın:

Eğitim HTML dosyası

Takvim>

salı için dersler

Görev 8. Arka plan ve metin renklerini ayarlama

Bilgi.

Arka planı, metni görüntülerken, tarayıcılar varsayılan olarak ayarlanan renkleri kullanır - bunlar tarayıcı ayarları tarafından belirlenir. Bu renkler, etiketteki HTML dosyasının başında ayarlanır. . Renk girişi, yazı tipinin rengine benzer (bkz. Tablo 1, paragraf 12). BGCOLOR= özelliği sayfanın arka plan rengini belirtir, TEXT= tüm sayfa için metin rengini belirtir, LINK= ve VLINK= sırasıyla ziyaret edilmemiş ve görüntülenen bağlantıların renklerini tanımlar (son iki parametre daha sonra tartışılacaktır).

    RASP.HTM dosyasında değişiklik yapın:

Eğitim HTML dosyası

BGCOLOR="#FFFFCC" METİN="#330066">

Takvim>

salı için dersler

Görev 9.

    Oluşturulan belgeyle denemeler yapın. Pencereyi yeniden boyutlandırırken, tarayıcının metni zorunlu satır sonlarıyla nasıl oluşturduğuna bakın. Pencere, içine tek bir kelime bile sığmayacak kadar küçülürse ne olur?

    Kendi HTML belgenizi kendiniz oluşturun. Kendiniz ve hobileriniz hakkında kısa bir hikaye olsun.

Merhaba sevgili blog okuyucuları! "Sıfırdan bir site oluşturma" bölümüne ve özellikle etiketler konusuna devam ediyoruz ... Ve bugün herhangi bir web sayfasında bulunan etiketleri ele alacağız - , ve . Her HTML belgesinde olması gereken ve önceki makalelerden birinde zaten yazdığım bir etiket daha var - bu yüzden ona dokunmayacağız.

Sütunun önceki makalelerinde html formatında boş bir dosya oluşturma hakkında yazmıştım. Aslında, profesyonel makalede kullanıldı (başlık etiketlerinin uygulandığı yer burası). Şimdi bu dosyayı tam açıklamalarla doğrudan düzenleyeceğiz.

Ve oluşturulan dosyayı düzenleyerek yazımıza başlayalım. Şahsen, buna index.html adını verdim, ancak isim herhangi bir şey olabilir. Herhangi bir metin düzenleyiciyle açın (kod vurgulama ve diğer kullanışlı araçlara sahip olduğundan Notepad++ kullanmak daha iyidir). Ve hemen etiketler ekleyin , ve tam olarak yazıldığı sırayla. Ekran görüntüsünde gösterildiği gibi bunları kapatmayı unutmayın. Belge şöyle görünecek:

Şimdi her etiketin anlamını ayrı ayrı düşünün. Herkesin içinde olmalarına şaşmamalı. HTML belgesi.

Etiket Fonksiyonları

yani etiket bir konteyner(). İçinde web sayfasının tüm görünür ve görünmez içeriği bulunur (etiketler dahil ve ). Açılış etiketi Doctype bildiriminden hemen sonra gelir ve kapanış belgenin sonundadır. Böylece, tarayıcıya belgeyi nerede işlemeye başlayacağını ve nerede sonlandıracağını açıkça gösterir.

Teorik olarak, kendisi neyin ve nasıl olduğunu anlayabilir. Nihayet ? Bu bir HTML dili tercümanıdır ve belgenin ortasından işlemeye başlaması ve sonuna ulaşmadan bitirmesi olası değildir. Soru elbette tartışılabilir, ancak her zaman bu etiketi yazmanın zorunlu olduğunu düşündüm (ve şimdi fikrimden vazgeçmiyorum).

Bu etiketin işlevinin yalnızca içeriği sınırlama, kendi özelliklerine sahiptir (şu anda ya hiç kullanılmıyor ya da çok nadiren kullanılıyor). Farklı kaynaklar birbirinden farklı nitelikler gösterir, bu yüzden doğru versiyonu ortaya koymaya cesaret edemiyorum.

Kesin olarak söyleyebileceğim tek şey, çoğu özelliğin HTML 4.01 tarafından desteklenmediği veya istenmeyen olduğudur. Yine de sana bir örnek vereceğim. - belgenin herhangi bir yerinde araç ipucu. Örneğin, farenizi bir görüntünün üzerine getirdiğinizde açılır metin görebilirsiniz. Ayrıca bu etiket durumunda:

Ve işte bu içeriğe sahip bir belgenin üzerine geldiğinizde göreceğiniz şey:

Etikette olmayan başlık özelliğinin kullanılması tercih edilir. , ancak sayfanın diğer belirli alanlarında. Birincisi, kullanışlıdır ve ikincisi, arama motorları sitenize daha iyi davranacaktır. Bu etiket, kaynak optimizasyonunu doğrudan etkilemez. Daha ileri gidiyoruz.

Etiket işlevi

Ve sıradaki etiket . Tarayıcı ve arama motorlarına yardımcı olmaya hizmet eden sayfa ile ilgili tüm teknik bilgileri içerir. Etiket bir kapsayıcı etikettir ve hemen ardından gelir , yalnızca sonuncunun aksine, kapanış etiketi belgenin sonunda değil, açılış etiketinden önce görünür .

Hangi bilgiler bulunabilir? ? Ama hiçbiri. Bu etiketteki her şeye yalnızca sayfanın kaynak kodunu görüntüleyerek insan gözüyle erişilebilir. Bu etiketteki tüm içerik arama motorları ve tarayıcılar. Bir şekilde görebildiğin tek şey etiket , web sayfası penceresinin başlığından sorumludur. İşte bir örnek:</p> <p><img src='https://i1.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Simgeden sonraki metin, etiketin içeriğidir. <title>. Şimdi içeriğine bakalım. <head>göremediğimiz, ancak çok önemli bir parçası olan <b>sitenin oluşturulması ve tanıtımı.</b> Her şeyden önce, bu çizgi</p><p> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </p><p>Bu meta etiket için <b>sayfa içerik türü</b>(İçerik türü). Bu durumda, bu UTF-8 kodlamasındaki html kodudur (content="text/html; charset=UTF-8"). Ardından, yukarıda açıklanan başlık etiketi gelir. Sonra etiketiyle başlayan satırlar gelsin <link>. Harici bir belgeye bağlantıyı gösterir. Örneğin, çizgi</p><p> <link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" /> </p><p>(rel="stylesheet") dosyasının (type="text/css") ile bağlı olduğunu, şu adreste bulunduğunu gösterir (satırın uzunluğunu azaltmak için adresin yarısını noktalarla değiştirdim) . Bu dize tarayıcı tarafından işlendikten sonra, nereden alınacağını belirleyecektir. <b>Basamaklı Stil Şablonu</b>.</p> <p>Genel olarak, başlık etiketinde süresiz olarak konuşulabilecek birçok bilgi vardır. Kayda değer son şey (özellikle durumunda), açıklama etiketlerinin, anahtar kelimelerin ve kurallı öğelerin varlığıdır. kullanırım <b>eklenti Hepsi Bir Arada SEO Paketi</b>, bu yüzden içinde mevcutlar <head>.</p> <p>Bildiğiniz gibi, harika olan her şey her zaman küçük başlar. Not defteri aracılığıyla web sitesi nasıl oluşturulur sorusunun cevabıyla ilgileniyorsanız, bu olasılığı bir yerlerde duymuş olmalısınız. Bu gerçekten mümkün. Ancak, geliştirme sürecini büyük ölçüde hızlandıran ve basitleştiren özel programlar olduğundan, şu anda büyük olasılıkla hiç kimsenin bir not defteri aracılığıyla modern bir dinamik etkileşimli site oluşturamayacağını hemen belirtmekte fayda var. Ancak tam teşekküllü bir web sayfası oluşturmak oldukça mümkündür.</p><b>Not defterinde bir web sitesi nasıl oluşturulur</b><br>Başlangıç ​​olarak, teoriye ve genel terimlere biraz aşinalık gereklidir. Web sitesi sayfalarının büyük çoğunluğu, HTML olarak kısaltılan hiper metin işaretleme dili olan özel bir şekilde tasarlanmış sıradan metin belgeleridir. Bazıları HTML işaretlemesini bir programlama dili olarak sınıflandırır, ancak bu doğru değildir. <p>HTML, tarayıcılar tarafından bilgisayar ekranlarında kullanıcı dostu bir biçimde görüntülenmek üzere benzersiz bir şekilde yorumlanan belge biçimlendirmesini standartlaştırmanın bir yoludur. HTML dilinin ana aracı, belgenin hazırlandığı özel yapısal öğelerdir. Bunlara tanımlayıcılar veya etiketler denir.</p><p>Genel olarak etiket, formun bir yapısıdır. <table>Yani etiket ile başlar< после которого следует название тега table и вся конструкция завершается знаком >. Etiketler, metni kalın yapmak gibi çiftler halinde gelir <b>ve</b> ve yeni satır olarak eşleştirilmemiş <br>. Eşleştirilmiş etiketlerin kullanılması durumunda, açılış etiketi olarak kullanılmalıdır. <b>, ve kapanış</b>. Kapanış etiketi, eğik çizgi / içeren bir tanımlayıcıdır.</p><p>Ana etiket türlerini ve amaçlarını düşünün.</p><ul><li><span><i>eleman <b><!DOCTYPE html> </b>. </i> Sayfanın en başına ayarlayın ve tarayıcıya bu belgeyi nasıl yorumlayacağını söylemeye yarar. İsteğe bağlıdır, ancak görüntülenmesiyle ilgili olası sorunları önlemek için sayfada oldukça arzu edilir. <br></span></li><li><span><i>Etiket <b><html> </b>. </i> Bir çift etikettir ve iki bölümden oluşur <html>ve</html>. Sitedeki her sayfa bu etiketle başlar ve onunla biter. <br></span></li><li><span><i>Etiket <b><head> </b>. </i> Aynı zamanda bir çift etikettir ve iki parçadan oluşur. <head>ve</head>. Bu etiket, sayfa hakkında çeşitli önemli bilgiler içerir: başlığı, kullanılan tasarım stillerine bağlantılar, dahil edilen komut dosyaları, özel meta veriler. <br></span></li><li><span><i>Etiket <b><title> </b>. </i> <title>ve ve etiketin içinde bulunur . Bu etiket, tarayıcıda görüneceği sayfanın başlığını tanımlar.

  • Etiket . Bir çift etikettir, iki bölümden oluşur ve ve etiketi takip eder Sayfada. Tarayıcıda sayfada görüntülenen tüm bilgileri içeren <body> etiketindedir.
  • Etiket . Bekar. Belgedeki satır sonunu belirtmek için kullanılır.
  • Etiket . Eşleştirilmiş etiketleri ifade eder, diğer etiketlerden biraz farklı bir biçimde yazılır ve bağlantılar oluşturmak için kullanılır. Tüm HTML dili kavramının ve bir bütün olarak İnternet'in temel bir unsurudur.
  • Etiket

    . Eşleştirilmiş etiketleri ifade eder ve iki bölümden oluşur. Yardımı ile bir metin paragrafı hazırlanır.

  • etiketler

    ,

    ,

    ,

    ,
    ,
    . İki etiketten oluştukları için eşleştirilmiş etiketlere aittirler, örneğin

    ve

    . Bu etiketler, altı alt başlık düzeyi oluşturmaya hizmet eder ve aynı zamanda bunların içerdiği metnin tüm belgeyle ilgili önemini gösterir.

  • Etiket . Aynı zamanda iki parçadan oluşan eşleştirilmiş bir etikettir. ve ve yazı tipi stilini kalın olarak ayarlar.
    • Toplamda, yaklaşık yüz etiket var, ancak düşünülen on etiket, sitenin en basit sayfasını bir not defterinde tasarlamak için zaten yeterli. Temel belge etiketleri , , , <body>kesin bir sırayla dağıtılır. etiketin içinde <body>tanımlayıcıların geri kalanı, HTML dilinin standartları içinde farklı sıralarda olabilir. Bunu anlamanın en kolay yolu basit bir web sayfası oluşturmaktır. <ol><li><span>Not Defteri'ni başlatın ve ilk satırında öğeyi ayarlayın<!DOCTYPE html>, tarayıcıya belgenizi nasıl yorumlayacağını söyler. <p> <!DOCTYPE html></p></span></li><li><span>Yeni bir satır oluşturun ve bir çift etiketi ekleyin <html>. Kapanış etiketini çevir</html> iki satır aşağı. <p> <!DOCTYPE html><br><html></p></span></li><li><span>Bir çift etiketi ekleyin <head>etiketler arasındaki satırda <html>ve kapanış etiketini çevir</head> iki satır aşağı. <p> <!DOCTYPE html><br><html><br><head></p><p></head><br></html></p></span></li><li><span>Etiketler arasındaki satırda <head>ve</head> bir çift etiketi yaz <title> bir satırda.






  • Etiketlerin arasına web sayfanızın başlığını girin ve. Örneğin, bunun gibi.




    ilk web sayfam

  • İmleci kapanış etiketinden sonraki satıra getirin ve bir satır besleme yapın. Görüntülenen boş satıra bir çift etiketi girin .




    ilk web sayfam


  • İç etiketler arasında çift çeviri yapın ve. Görünen satıra eşleştirilmiş başlık etiketini girin

    . etiketin içine yazın

    sayfa alt başlığı.




    ilk web sayfam


    Benim hakkımda



  • Kapanış başlık etiketinden sonrabir satır sonu yapın ve yeni satırda eşleştirilmiş paragraf etiketlerini ayarlayın. Aralarına metin ekleyin. Örneğin, evet.




    ilk web sayfam


    Benim hakkımda


    Benim adım İvanov İvan. Web sitemi oluşturuyorum.



  • Adını ve soyadını bir çift etiketi içine alın onları cesur kılmak için.




    ilk web sayfam


    Benim hakkımda


    Benim ismim İvanov İvan. Web sitemi oluşturuyorum.



  • Paragraf etiketini kapattıktan sonra

    bir satır besleme gerçekleştirin ve çift etiketini yeni satıra girin

    . Etiketlerin arasına bir metin girin.




    ilk web sayfam


    Benim hakkımda


    Benim ismim İvanov İvan. Web sitemi oluşturuyorum.


    ilerlemem



  • Kapanış altyazı etiketinden sonratekrar bir satır sonu yapın, eşleştirilmiş paragraf etiketini girin ve bu etiketler arasına isteğe bağlı metin yazın.




    ilk web sayfam


    Benim hakkımda


    Benim ismim İvanov İvan. Web sitemi oluşturuyorum.


    ilerlemem




  • Makalede listelenen etiketlerden ikisi keşfedilmemiş kaldı - satır besleme
    ve en önemli bağlantı kurma etiketi     . Onları uygulayalım. Son kapanış etiketinden önce bir tanımlayıcı girin
    , ve arasında
    ve

    tip inşaat. Aşağıdakileri almalısınız.




    ilk web sayfam


    Benim hakkımda


    Benim ismim İvanov İvan. Web sitemi oluşturuyorum.


    ilerlemem


    HTML'nin temel sözdizimine hakim olundu ve gelecekteki sitenin ilk sayfası oluşturuldu.
    Eğitim sürecinde site sitesinin materyalleri kullanılmıştır.



  • Bir etiketteki tırnak işaretleri arasında link vereceğiniz sayfanın adresini giriniz. etiketten önce Link kelimesini ve etiketlerin arasına girebilirsiniz. ve sayfada görüntülenecek metni girin.




    ilk web sayfam


    Benim hakkımda


    Benim ismim İvanov İvan. Web sitemi oluşturuyorum.


    ilerlemem


    HTML'nin temel sözdizimine hakim olundu ve gelecekteki sitenin ilk sayfası oluşturuldu.
    Eğitim sürecinde site sitesinin materyalleri kullanılmıştır.

    Bağlantı: alan



  • Bunun üzerine site için en basit sayfanın oluşturulması tamamlanabilir. Prensip olarak, 9. adımda da tamamlanabilirdi, ancak HTML dilini öğrenme konusunda ciddiyseniz, ek alıştırma gereksiz olmayacaktır. Sayfayı *.html uzantılı kaydedin ve çalışmanızın sonuçlarını görüntülemek için herhangi bir tarayıcıda açabilirsiniz. Her şey doğru yapılırsa, aşağıdaki gibi bir şey görmelisiniz.
    • Bu makaleyi okuduktan sonra, bir web sitesi oluşturma kararlılığınız tükenmediyse, HTML dilinin tam sözdizimine aşina olduğunuzdan ve ayrıca sayfa tasarımı için CSS basamaklı stillerini nasıl kullanacağınızı öğrendiğinizden emin olun.

    HTML Köprü Metni Biçimlendirme Dilini Kullanarak Web Siteleri Geliştirme

    8. sınıf

    Ders 1 Web sayfası yapısı.

    Web sitesi konsepti

    World Wide Web ile ilgili bilgiler
    web siteleri şeklinde saklanır.
    Web sitesinin yapısı şuna benzer:
    bir konuyla ilgili bir dergi veya
    sorun. dergi nasıl oluşur
    yazdırılan sayfalar ve Web sitesi
    bilgisayar web sayfalarından.
    Web sayfaları köprülerle birbirine bağlanır.

    Web sitesi türleri

    resmi (hükümet,
    Duma, okul ...)
    Reklam
    Kişiye özel

    Web sayfalarının avantajları:

    Küçük bilgi hacmi
    ("akciğerler")
    Farklı görüntüleme için uygun
    İŞLETİM SİSTEMİ.
    Dinamik.
    Etkileşimli.

    Web sitesi oluşturma adımları:

    1.
    2.
    3.
    Yerel olarak web sitesi oluşturun
    bilgisayar.
    test (kontrol
    doğru işlem).
    Çevrimiçi yayınla -
    bir barındırma sunucusu seçin
    (ücretli veya ücretsiz).

    Site oluşturma programları:

    1) en basit metin düzenleyici (olmadan
    Metin biçimlendirme):
    Not defteri
    2) sayfaları görüntülemek için tarayıcı:
    Internet Explorer
    3) Görüntü işleme programı:
    photoshop

    Görsel web editörleri

    HTML'de bir web sitesi oluşturmak çok
    zahmetli, özel
    bilgi.
    Görsel web editörleri var
    (programlar) web siteleri oluşturmak için.
    WYSIWYG prensibi üzerinde çalışın
    (ne görürsen onu alırsın).

    Web sayfası yapısı

    10. Etiketler

    Web sayfasının görünümü yöneticiler tarafından belirlenir
    komutlar - etiketler
    köşeli parantez< >
    Etiketler tek (tekrarlanmayan) veya
    eşleştirilmiş (konteynerler): kapanmadan önce
    kapsayıcı etiketi eğik çizgi (/) ile yazılır

    Etiketler İngilizce harflerle yazılmıştır (büyük,
    küçük harf).

    11. Web sayfası yapısı

    Sayfanın tüm HTML kodu
    ana içine yerleştirilmiş
    konteyner:
    .
    Web sayfası ayrılmıştır
    2 mantıksal kısım:
    başlık (KAFA)
    içerik (GÖVDE).

    12. Web sayfası başlığı

    Web sayfasının başlığı bir kapsayıcıya sarılır.
    Belgenin başlığını ve sayfayla ilgili yardım bilgilerini içerir
    (örneğin, kodlamanın türü) tarayıcının kendisi için kullandığı
    doğru gösterim.
    Web sayfasının başlığı kapsayıcıda bulunur<ТITLE> ve
    görüntülendiğinde tarayıcı penceresinin üst satırında görüntülenir
    sayfalar.

    <ТITLЕ>Bilgisayar

    13. Web Sayfası Şablonu Yazma



    <ТITLЕ>Bilgisayar

    14. Web sayfasının ana içeriği

    Sayfanın ana içeriği şurada yer almaktadır:
    konteyner .
    Şunları içerebilir: metin, tablolar, koşu
    dizeler, resimler, bağlantılar, ses dosyaları...
    Sayfaya "Bilgisayar hakkında her şey" metnini koyalım:
    bilgisayar hakkında her şey

    15. Web Sayfası Şablonu



    <ТITLЕ>Bilgisayar


    bilgisayar hakkında her şey

    16.

    17. Bir web sayfası nasıl kaydedilir

    1. Site için özel bir klasör oluşturun ve
    tüm site dosyalarını bu klasöre kaydedin.
    2. Web sayfasını bir dosya olarak kaydedin.
    adlı index.html başlık sayfasıdır
    site (tarayıcıya ilk yüklendi)
    Web sayfası dosya uzantıları - .htm
    or.html

    18. Web sitemizi oluşturuyoruz….

    index.html dosya adını - altında ayırt etmek gerekir.
    hangi bir Web sayfasının bir dosyada saklandığı
    sistem ve Web sayfasının gerçek adı
    "Bilgisayar" - en üst satırda görüntülenir
    tarayıcı pencereleri ve önce ayrıştırıldı
    arama motorları.
    Web sayfasının adı maksimumda olmalıdır
    içeriğiyle alaka düzeyi.
    1. Web sayfasının HTML kodunu Not Defteri'ne girin.
    2. Dosyayı bir klasöre index.html olarak kaydedin
    alan. Dosya türünü seçin - "Tüm dosyalar".
    3. Bu dosyayı görüntülemek için bir tarayıcıda açın.

    19.

    20. DERS #2

    21. Ders 2: Bir Web Sayfasında Metni Biçimlendirme

    22. Metin Biçimlendirme

    Sayfa çok çekici olmasa da: küçük baskı ve siyah metin
    Beyaz arkaplan. Ancak etiketlerin yardımıyla metni süsleyebilirsiniz.
    1. Başlıklar: gelen etiketler<Н1>(en büyük) için<Н6>(en küçük).
    <Н1>bilgisayar hakkında her şey
    2. Yazı tipi (FONT). Bazı etiketlerin öznitelikleri vardır - özellik adları,
    belirli değerler alır.
    FONT face="Arial" - yazı tipi yüzü
    boyut=4
    - boyut
    renk = "kırmızı" - renk
    3. Hizalama (ALIGN). Metin genellikle sola hizalıdır
    Ancak, sayfa başlığının ortaya yerleştirilmesi adettendir.
    ALIGN="sol",
    ALIGN="sağ",
    <Н1 ALIGN="center">bilgisayarla ilgili herşey
    ALIGN="merkez"

    23. Yazı tipi rengi

    COLOR özniteliğinin değeri 2 şekilde ayarlanabilir:
    a) rengin adı (örneğin, "kırmızı", "yeşil", "mavi" vb.),
    b) RGB onaltılık değeri "#RRGGBB", burada
    ilk iki onaltılık basamak yoğunluğu ayarlar
    kırmızı (kırmızı), sonraki ikisi yeşilin (yeşil) yoğunluğu ve
    son ikisi mavi (mavi) renklerin yoğunluğudur.
    Minimum renk yoğunluğu onaltılık olarak belirtilir
    numara 00 ve maksimum FF'dir. Mavi renk = "#0000FF".
    Böylece başlığın mavi rengini FONT etiketi ile ayarlayabilirsiniz.
    RENK özelliği:
    <Н1 ALIGN="center">bilgisayarla ilgili herşey

    24.

    25. Metin Biçimlendirme

    4. Yatay çizgi ayrılacak
    içeriğin geri kalanından başlık
    tek etiketli sayfalar
    .
    5. Paragraflar:<Р>. içinde görüntülendiğinde
    paragraflar tarayıcıda birbirinden ayrılır
    diğer aralıklar. Her paragraf için
    belirli bir tür ayarlayabilirsiniz
    hizalama.

    26. Pratik çalışma 3.8 Eğitim sitesi "Bilgisayar"

    İlk metni biçimlendir
    sayfalar:
    1) 2 paragraf oluşturun ve hizalayın (3. görev)
    2) Sayfanın başlığını renkle vurgulayın ve
    yatay bir çubukla ayırın
    (görev 4)

    27.

    28. DERS 3

    29. Ders 3: Web Sayfalarına Görüntü Ekleme

    30. Resim ekle

    Web sayfaları 3 formatta grafik dosyaları içerebilir -
    GIF, JPG ve PNG. Resim farklı bir biçimde kaydedilmişse, o zaman
    önce bunlardan birine dönüştürülmelidir
    biçimler.
    Etiket, resim eklemek için kullanılır. nitelik ile
    Dosyanın nerede depolandığını gösteren SRC
    yerel bilgisayar veya internette.
    1) yerel bilgisayardaki sitenin bulunduğu klasördeki resim:

    2) resim yerel bilgisayardaki başka bir klasörde:

    3) resim, İnternet'teki uzak bir sunucuda bulunur:

    31. Açıklayıcı metin. Şeklin metindeki yeri.

    Web sayfalarındaki çizimler önemli hale geldi
    tasarım öğesi. Ancak, kullanıcılar için
    zaman kazanın bazen tarayıcı indirmelerini devre dışı bırakın
    grafik görüntüler ve salt okunur metinler.
    Bu nedenle sayfanın anlamını kaybetmemek için çizim yapmak yerine
    ALT özniteliği ile açıklayıcı metin görüntülenmelidir

    Şeklin metindeki konumu - ALIGN niteliğini tanımlar
    etiket : THOR, ORTA, ALT, SOL, SAĞ.
    ALIGN="sağ">

    32. Bitmiş sitenin görünümü

    33. Web sitesi sayfası kodu


    Bilgisayar


    bilgisayar hakkında her şey




    Bu sitede hakkında çeşitli bilgiler edinebilirsiniz.
    bilgisayar, yazılımı ve bilgisayar fiyatları
    Aksesuarlar.


    Terminolojik sözlük sizi bilgisayarla tanıştıracak
    ve ayrıca bir anket doldurabilirsiniz.



    34. Ders 4

    35. 3 No'lu Test Çalışması

    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    Web sitesi nedir?
    Site türleri.
    Web sayfaları web sitelerinde nasıl birleştirilir?
    Etiketler nedir? etiket kapsayıcı? Ana kapsayıcıyı yaz
    internet sayfaları.
    Bir web sayfasının mantıksal yapısı nedir?
    5 sayfa biçimlendirme etiketini listeleyin.
    Etiket özelliği nedir?
    Bir web sayfasında renkleri ayarlamanın yolları nelerdir?
    Başlık girmek için hangi etiketler kullanılır? biçimlendirme
    yazı tipi? Paragraf mı giriyorsunuz?
    Resim eklemek için hangi etiket ve özellikleri kullanılır?

    36. Ders 4. Web sayfalarındaki köprüler

    37.

    Köprüler indirmenize izin verir
    tarayıcı ile ilgili diğer web sayfaları
    öncekinden.
    Bir köprü 2 bölümden oluşur: adres
    ve bir referans işaretçisi.
    Köprü evrensel olarak ayarlandı
    etiket HREF özniteliği ile (o
    hangi dosyanın saklandığını belirtir
    istenen web sayfası):
    bağlantı işaretçisi

    38. Köprü türleri

    1) dahili:
    Işaretçi
    bağlantılar
    2) harici:
    filename.html"> Bağlantı İşaretçisi

    39. Köprü İşaretçileri

    İşaretçi - görünür kısım
    köprüler: metin veya resim

    40. Köprülerin adres kısmı

    Diğer web sayfalarına gidin:
    bağlantı işaretçisi
    Resmi tarayıcıda aç:
    Resim
    Sesi dinleyin (yerleşik tarayıcıyı başlatma
    oyuncu):
    Ses
    Dosyayı kaydet (yerleşik tarayıcıyı başlatır
    dosya indirme yöneticisi):
    Dosyayı indir

    41. E-posta köprüsü

    Bu tür bir köprü
    özel konteyner


    ”>E-postamız

    42. Bitmiş site sayfasının görünümü

    43. Web sitesi sayfası kodu


    Bilgisayar


    bilgisayar hakkında her şey




    Bu sitede bilgisayar, yazılımı hakkında çeşitli bilgiler edinebilirsiniz.
    bilgisayar bileşenleri için tedarik ve fiyatlar.


    Terminolojik sözlük sizi bilgisayar terimleriyle tanıştıracak,
    formu doldurabilirsiniz.


    [Programlar]  
    [Sözlük]  
    [Aksesuarlar] 
    [Anket]



    ">E-posta:


    44. Ders 5

    45. Ders 5: Web sayfalarındaki listeler

    46. ​​​​Liste türleri

    Sayılı
    Etiketli
    Terim listeleri (sözlükte olduğu gibi)
    İç İçe Listeler

    47. Numaralandırılmış Liste

    Liste - bir kapta
    Liste öğesi - etiket

  • TYPE niteliği, numaralandırma türüdür (Arapça
    sayılar; ben - Roma; a - latince
    küçük harf)

    1. Sistem programları
    2. Uygulama programları
    3. Programlama sistemleri

    48. Madde İşaretli Liste

    Liste - bir kapta
    Liste öğesi - etiket

  • TYPE niteliği, işaretçilerin türüdür (“disk” bir disktir,
    "kare" - kare, "daire" - daire)

    • Metin editörleri
    • Grafik düzenleyici
    • E-tablolar
    • Veritabanı Yönetim Sistemleri

    49. Terimler listesi

    Liste - bir kapta

    Liste öğesi - etiket

    Terim önce yazılır, sonra
    tanımı (sözlükte olduğu gibi)

    50. Ders 6

    51. Ders 6: Web Sayfalarında Etkileşimli Formlar

    52. Etkileşimli bir form kavramı

    Web sitesi ziyaretçileriyle iletişim kurmak için
    web sayfasındaki içerik oluşturucular
    etkileşimli formlar.
    Formlar çeşitli öğeler içerir
    kontroller:
    metin alanları
    açılır listeler
    bayraklar
    anahtarlar...

    53. Metin alanı

    ana konteyner

    Metin alanı - klavyeden metin girmek için: etiketi
    niteliklerle:
    TYPE="metin" – içerik türü (metin)
    NAME="____" – alan adı
    SIZE="40" – giriş alanı uzunluğu (karakter olarak)

    - satır ayırıcı (imleci yeni bir
    sicim)

    54. Anahtarlar (radyo düğmeleri)

    Birkaç tanesinden birini seçmek için yuvarlak düğme
    cevap seçenekleri:
    TYPE="radyo"
    Bu grubun tüm üyelerinin sahip olması gerekir
    aynı ad: NAME="grup"
    VALUE öznitelik seçenekleri içerir
    yanıtlar: VALUE="öğrenci"

    55. Bayraklar

    Birden çok yanıt seçmek için kare kutu
    önerilen seçenekler:
    TYPE="onay kutusu"
    Bu grubun her elemanının kendi adı olmalıdır:
    NAME="kutu1", NAME="kutu2",
    …..
    VALUE öznitelikleri, yanıtları seçmek için seçenekler içerir:
    DEĞER=“WWW”, DEĞER=“e-posta”, ….
    Her DEĞER'in kendi cevabı vardır.
    www

    56. Liste kutuları

    Bir açılır liste oluşturmak için
    kapsayıcı kullan

    İçinde, listenin her bir öğesi
    etiket tarafından verilen

    • İLGİLİ MAKALELER