Bir web sayfası oluşturuyoruz ve onu yerel bir web sunucusunda barındırıyoruz. Not defterinde bir html sayfası oluşturma: aptallar için açıklama

Merhaba, sevgili arkadaşlar ve blogumun misafirleri! Ah. Dün 0 olmasına rağmen Yandex'in bana TIC 20 verdiğini yeni fark ettim. TIC'in artık gerçekten bir anlam ifade etmediğini anlıyorum ama yine de çok hoş ve eğlenceli. Genel olarak, site oluşturma hakkında yakın zamanda başlatılan makaleler dizisine devam etmek istedim. Ve başlamak istediğim ilk şey, köprü metni biçimlendirme dilinin (programlama değil!) HTML'sinin temelleridir.

HTML hala her şeyin temelidir ve harika bir web geliştiricisi olmasanız da sitelerinizi motorlarda oluştursanız bile, HTML dili bilgisi çok büyük ve büyük bir artı olacaktır. Bu nedenle bugünkü yazımda sizlere notepad kullanarak html web sitesi nasıl yapılır onu anlatmak istiyorum.

Tabii ki, bugün yapacağımız şeye site denilmeyecek, bu yüzden hemen söyleyeceğim, bugün harika bir site oluşturmayacağız, ancak bu kendi sitenizi oluşturma yöntemiyle her şeyin nasıl gerçekleştiğinin yapısını size anlatacağım. web kaynağı. Bence hiç zorluk çekmemelisin. Sonuç olarak, başlamak için en basit web sayfasını oluşturacağız. Ve eğer hazırsan, gidelim!

Başlamak için düz metin belgesi oluşturun veya not defterini açın. Not defterini açmak için "Çalıştır" satırını çağırıp oraya not defteri yazabilirsiniz. Açıldı? Tebrikler!

Herhangi bir html belgesi veya sitesi özel etiketlerle işaretlenmiştir. Etiket, siteye, içine alınmış bir veya daha fazla içeriğin nasıl düzgün şekilde görüntüleneceğini bildiren özel bir işarettir. Şimdi size .

Hemen belirteyim etiketlerin çoğu eşleştirilmiş yani ilk önce açılış etiketi konur ve bilgileri yazdıktan sonra etiketi kapatmamız gerekir. Açıldığı gibi kapanır, sadece kapatmadan önce “/” işareti koymanız yeterlidir.

Genel olarak, işleyişi için birkaç zorunlu etiket koymamız gerekir. Ne olduklarını görelim.

• - bu, siteye şimdi buraya HTML olarak yazacağımızı söylediğimiz ana etikettir, bu yüzden endişelenmeyin. Site onunla başlamalı ve onunla kapanmalıdır.
• - hizmet bilgileri buraya girilir, örneğin, belgenin adı, açıklama ve diğerleri. Açık etiketin hemen sonrasına yerleştirilir.
• - Bu değerler arasına sayfanın başlığını yazıyoruz yani bu başlık sitenin kendi içeriğinde değil tarayıcı sekmesinde görüntülenecektir. Bu tür ve arasında yer alır.
• - Bu etiket, sitedeki içeriğin görüntülenmesinden sorumludur. Yani bu taglar arasına yazdığınız her şey web sayfasında görüntülenecektir.

Herkesin her şeyi anlamadığını ve bazılarının kafalarının karıştığını hissediyorum, bu yüzden size canlı bir örnekle her şeyi göstereceğim.

Böylece bir metin belgesi oluşturup aşağıdaki içeriği buraya yazıyoruz:

Yazdın mı? Tebrikler! Burada size bilgileri yazı şeklinde değil resim şeklinde özel olarak verdim, kopyalamayın diye. Ben bir alçağım, değil mi?)) Etiketlerin iç içe geçmiş oyuncak bebekler gibi iç içe geçtiğini fark ettiniz mi? Olması gereken yol bu.

Tavsiye! Yine de içeriği kopyalamayı değil, kendi ellerinizle yeniden yazmayı deneyin. Böylece tüm materyalleri çok daha iyi ve hızlı öğreneceksiniz.

Ardından belgenizi html olarak kaydedin. Bunu yapmak için, kaydederken, belgenizi adlandırdıktan sonra, bir nokta koyun ve html yazın. Yani, index.html almalısınız. Ardından, belgeniz otomatik olarak bir metin belgesi olarak değil, bir web sayfası olarak kaydedilecektir. Ve belgeyi kaydettiğinizde, kodlamayı UTF-8 olarak değiştirin, bu dosyayı herhangi bir tarayıcıda açabilirsiniz. Hadi yapalım ve elimizde ne var görelim.

Bakın toplamda ne kadar yazdık ve son belgede sadece karşılama metnimiz kaldı. Neden? Evet, çünkü etiketlerin kendileri son sürümde görüntülenmez ve görüntülenen bilgiler yalnızca gövde etiketleri arasında görüntülenir. Demek her şey böyle oldu. Ama bakın kafaya, daha doğrusu başlığa yazdıklarımız artık tarayıcı sekmesinde görüntüleniyor.

Burada bir şeyi tekrar düzenlemek isterseniz, önceden kaydedilmiş olan bu belgeyi not defterinde tekrar açmanız yeterli olacaktır. Genel olarak bakın, yani bir not defteri yardımıyla ilk web sitemizi yaptık. Evet ... buna site demek zor ama aslında öyle. Temeli (çerçeveyi) oluşturduk ve eğer onu barındırmaya yüklersek, o zaman internette zaten gösterilecektir.

Ancak birkaç boşluk eklemeyi ve biraz daha metin yazmayı deneyin veya yalnızca birkaç satır metin yazıp aynı belgeye kaydedin.

Şimdi bir tarayıcı kullanarak bu belgeye erişin. Ne görüyoruz? Ve boşluklarınızın ve satır sonlarınızın belgeyi etkilememesi ve her şeyin tek satırda ilerlemesi. çirkin, değil mi? Ve hepsi, html'nin kendisinin boşluklarınızı (biri hariç) veya tireleri anlamaması nedeniyle. Satırları kaydırmak için her şeyin diğer makalelerde bahsedeceğimiz diğer etiketlerle işaretlenmesi gerekir.

Birçoğu muhtemelen şöyle bir şey düşünecektir: “Ve bu sizin siteniz mi? Evet, meşeden düştün. Evet canlarım. Bu ilkel web sayfasına web sitesi de denilebilir. Ve bir kez daha tekrar ediyorum, bu makalenin amacı harika bir site oluşturmak değil, size herhangi bir sitenin temelini, nasıl göründüğünü, her şeyin nasıl olduğunu göstermekti.

Ama endişelenme. Bunların hepsi giriş dersleridir. Ayrıca, html işaretlemesinin daha derinlerine ineceğiz ve her şeyi düzgün bir şekilde biçimlendirip düzenleyebileceğiz. Genel olarak, her şey harika olacak ve tam teşekküllü bir web kaynağı yapacağız. Sadece tüm bunlar tek bir makaleye sığmayacak ve onu da buruşturup kesmeyeceğim, aksi takdirde çöp olacak.

Ancak yine de, geliştiriciler için daha kullanışlı ve sofistike bir not defteri olduğu ve tamamen ücretsiz olduğu için bu tarih öncesi aracı artık kullanmayacağız. Buradan indirin ve her zamanki gibi kurun.

Gelecekte, Notepad ++ düzenleyicisi üzerinden çalışacağım. Kurun ve neden uygun olduğunu anlayacaksınız. Orada akıllıca bir ayar yok, ancak aniden İngilizce sürümünü yüklediyseniz, "Tercih" menüsüne gidin ve "Yerelleştirme" sütununda Rusça'yı seçin.

Oh, ayrıca "Kodlama" menüsüne gidin ve "UTF-8"i seçin. Peki, bu dosyayı hemen html formatında kaydedin. Bunu yapmak için, "Dosya" - "Farklı Kaydet" menüsünü seçin ve açılır listeden "html" biçimini seçerek belge dizinini adlandırın. Bu, programın ne yaptığımızı anlaması ve bizim için gerekli etiketleri ve komutları vurgulaması için yapılır.

Neden hiç sayfa dizini diyoruz? Gerçek şu ki, herhangi bir siteyi ziyaret ettiğinizde varsayılan olarak index.html veya index.php sayfasını arar. Genel olarak ana dosyalar olarak kabul edilen bu dosyalardır, ancak genel olarak bu, sunucuda değiştirilebilir.

Tabii ki, her şeyi hızlı bir şekilde öğrenmek istiyorsanız, o zaman son yayınlanan HTML5 ve CSS3 kursuna bir göz atmanızı tavsiye ederim. Orada her şey ayrıntılı olarak açıklanır ve canlı bir örnek üzerinde gösterilir, ayrıca birkaç türde site yapmayı öğreneceksiniz. Genel olarak, çok ilginç ve bilgilendirici dersler.

Pekala, sonraki dersleri ve diğer ilginç şeyleri kaçırmamak için blog güncellemelerime abone olmanızı tavsiye ederim. Ayrıca diğer blog yazılarıma da göz atmayı unutmayın. Birçoğunun işinize yarayacağına eminim. Genel olarak, size iyi şanslar dilerim. Diğer yazılarda görüşmek üzere. Güle güle!

Saygılarımla, Dmitry Kostin.

Bildiğiniz gibi, harika olan her şey her zaman küçük başlar. Bir not defteri aracılığıyla web sitesi nasıl oluşturulur sorusunun yanıtı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 bunun için özel programlar olduğundan, büyük olasılıkla şu anda hiç kimsenin bir not defteri aracılığıyla modern bir dinamik etkileşimli site oluşturmayacağını hemen belirtmekte fayda var. Ancak tam teşekküllü bir web sayfası oluşturmak oldukça mümkündür.

HTML, bilgisayar ekranlarında kullanıcı dostu bir biçimde görüntülenmek üzere tarayıcılar tarafından benzersiz bir şekilde yorumlanan belge işaretlemesini standartlaştırmanın bir yoludur. HTML dilinin ana aracı, yardımı ile belgenin hazırlandığı özel yapısal öğelerdir. Tanımlayıcılar veya etiketler olarak adlandırılırlar.

Genel olarak etiket, formun bir yapısıdır.

Ana etiket türlerini ve amaçlarını göz önünde bulundurun.

• eleman 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ı sorunlardan kaçınmak için sayfada çok arzu edilir.
  
• Etiket . Bu bir çift etikettir ve iki bölümden oluşur ve . Sitedeki her sayfa bu etiketle başlar ve onunla biter.
  
• Etiket . Aynı zamanda eşleştirilmiş bir etikettir ve iki bölümden oluşur ve . 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.
  
• Etiket . ve ve etiketin içinde bulunur. Bu etiket, tarayıcıda görüneceği sayfanın başlığını tanımlar.
  
• Etiket . Eşleştirilmiş bir etikettir, iki bölümden oluşur ve sayfada etiketi takip eder. Tarayıcıda sayfada görüntülenen tüm bilgileri içeren <body> etiketindedir.
  
• Etiket . Bekar. Bir belgede 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ı oluşturmak için kullanılır. HTML dilinin tüm konseptinin yanı sıra 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ı çizilir.
  

• Etiketler , , , , , . Bunlar, örneğin ve gibi iki etiketten oluştukları için eşleştirilmiş etiketlere aittirler. Bu etiketler, altı düzeyde alt başlık oluşturmaya hizmet eder ve aynı zamanda içlerinde yer alan metnin tüm belgeye göre önemini gösterir.
  
• Etiket . Aynı zamanda iki bölümden oluşan bir çift etiketidir ve yazı tipinin kalın stilini ayarlar.
  

Ya da daha iyisi dördü birden, çünkü birçok HTML öğesi farklı görüntüleyicilerde farklı şekilde işlenir ve bu farklılıkları kontrol altında tutmak en iyisidir.

Tarayıcıya ek olarak, herhangi bir metin düzenleyiciye ihtiyacımız olacak, örneğin Windows'tan Not Defteri veya Not Defteri, ancak Dreamweaver idealdir. HTML dosyalarını hazırlamak için programa, çıktıyı görüntülemek ve kontrol etmek için tarayıcıya ihtiyaç vardır. Bu araçlar yardımıyla kendi yerel bilgisayarımızda bir WEB sitesi yapacağız, ardından internetteki WWW sunucularından birine yerleştirerek WEB sayfalarınızı tüm dünyaya açık hale getireceğiz.

Örnek olarak belli bir firmanın WEB sayfalarını hazırlayalım. Adına "Şirket SD" diyelim, otomatik kontrol sistemleri alanında çalışıyor diyelim. WEB sitesinin amacı şirketi, faaliyet alanını dünyaya anlatmak, ortaklar ve müşteriler bulmaktır.

WEB sitemizin dosyaları ayrı bir klasöre ihtiyaç duyar.

Bilgisayarınızın herhangi bir sabit diskinde WEB adlı bir klasör oluşturun. Şimdi Notepad programını başlatalım ve işe koyulalım.

Görev Çubuğundaki Başlat düğmesine tıklayarak ve beliren menüden Programlar - Genel - Not Defteri'ni seçerek bir program açın, örneğin Not Defteri.

Başka herhangi bir metin editörünü kullanabilirsiniz. Ancak bu durumda, WEB belgesine üçüncü taraf biçimlendirme işaretleri eklemekten kaçınmak için dosyayı düz metin olarak kaydetmelisiniz.

İlk olarak, herhangi bir HTML belgesinin yapısını tanımlayan ana etiketleri tanıtalım. HTML kodunda, büyük veya küçük herhangi bir karakter durumu kullanmasına izin verildiğini hatırlayın.

Sonraki ana etiketleri klavyeyi kullanarak girin ve bitiş etiketi dışında herhangi birini en yeni satıra yerleştirin.

Eşleştirilmiş etiketleri girmek için, aşağıdaki eğik çizgi / / ekleyerek Windows panosu aracılığıyla kopyalama ve yapıştırma işlemlerini kullanabilirsiniz.

1. ve son etiketlerin sırasıyla belgenin başı ve sonu anlamına geldiğini hatırlayın, öğe ... WEB sayfasının başlığını, öğe ... - belgenin gövdesini ve şu anda belirttiğimiz öğeyi tanımlar WEB sayfasının başlığı.

Açılış ve kapanış etiketleri arasına, belgenin başlığını - Şirket SD'sini ekleyin. Bu eleman şöyle görünmelidir:

SD Şirketi

WEB sayfasının başlığının küçük olması ve içeriğini büyük ölçüde göstermesi gerektiğini hatırlayın.

Bir sonraki görevimiz, belgenin gövdesine etiketler arasına ... WEB sayfasının konuklarına küçük bir hoş geldiniz metni eklemektir.

ve etiketleri arasına boş bir satır ekleyin ve içine aşağıdaki metni girin:

SD şirket sayfasına hoş geldiniz! Burada faaliyetlerimiz, şirketimizin yazılım ürünleri ve ürettiğimiz ekipmanlar hakkında bilgi edineceksiniz.

Her WEB sayfası için arka plan rengini ve metin rengini bulabilirsiniz. Bu, açılış etiketinin bgcolor ve text nitelikleri kullanılarak yapılır. Bir rengi nitelik değeri olarak belirtmek için iki seçenek vardır:

• rengin adının sözlü gösterimi, örneğin beyaz (kar beyazı). HTML'de bu türden on altı ad vardır;
• onaltılık gösterimde bir sayı, örneğin, "#ffffff" - rengin ana renklerden - kırmızımsı, yeşilimsi ve mavi - nasıl oluştuğunu gösteren saf beyaz.

Doğal olarak, rengin sözlü olarak belirtilmesi daha rahat ve anlaşılırdır. Öte yandan, sayısal gösterimler daha güçlüdür çünkü 16.777.215 renkten herhangi birini fiilen belirtmenize izin verirken, sözel gösterimler yalnızca on altı renkle sınırlıdır.

Bazı renk isimlerini sıralayalım: siyah (koyu), gri (grimsi), kırmızı (kırmızımsı), yeşil (yeşilimsi), aqua (mavi).

Örnek olarak WEB sayfamızın arka planı için mavi (mavi) rengini ve metin için - sarımsı (sarı) rengi kullanalım.

Açılış etiketine bgcolor="blue" ve text="yellow" niteliklerini ekleyin. Bu etiket şöyle görünmelidir:

Renk belirlemeye ek olarak, WEB sayfasının arka planı için önceden hazırlanmış bir eskiz de kullanabilirsiniz. Ama gelecekte bunun hakkında konuşacağız.

Not Defteri program penceresinde, Dosya - Kaydet (Dosya - Kaydet) menü komutunu seçin. Farklı Kaydet iletişim kutusu ekranda belirecektir.

WEB sitesinin tüm dosyalarının kaydedilmesi gereken önceden oluşturulmuş WEB klasörünü açın.

Dosya adı giriş alanına other.html yazın - bu dosyayı bu şekilde adlandıracağız.

Lütfen dikkat: tarayıcının açabilmesi için HTML dosya adının uzantısını belirtmeniz gerekir. Ayrıca htm de yazabilirsiniz, ancak bu zaten eski bir biçimdir ve kullanılması kesinlikle önerilmez.

Artık çalışmalarımızın sonuçlarını görüntüleyebilirsiniz.

Not Defteri penceresini kapatmadan simge durumuna küçültün.

other.html dosyasını kaydettiğiniz WEB klasörünü Windows Explorer programını kullanarak açın ve ikonuna çift tıklayın. Varsayılan tarayıcı başlayacak ve other.html belgesi kendi penceresinde açılacaktır.

Görüyorsunuz, tarayıcı penceresinin başlığında, öğeye girdiğimiz belgenin başlığı gösteriliyor ve sayfanın arka plan ve metin renkleri etikette belirtildiği gibi. Metin bir paragrafta görüntülenir ve sola hizalanır.

Belki de tarayıcınızda metnin yazı tipi boyutu resimdekinden daha büyük veya daha küçük olacaktır. Bu durumda, ortalama yazı tipi boyutunu ayarlamak için Internet Explorer tarayıcısında Görünüm - Yazı Tipi Boyutu - Orta (Görünüm - Metin Boyutu - Orta) menü komutunu seçin.

Farklı tarayıcıların aynı HTML dosyasının içeriğini farklı gösterebileceği anlaşılmalıdır. Bu nedenle, WEB sayfalarını geliştirirken, sonucu her zaman daha popüler tarayıcılarda - Internet Explorer, Opera, Mozilla - görüntülemek daha iyidir. Bu durumda, WEB sitenizin konuğunun ona tam olarak ne göstermek istediğinizi göreceğine ikna olacaksınız.

Oluşturulan dosyayı başka bir tarayıcıda görüntüleyin. Çalışmanın bu aşamasında, farklılıklar fark edilmeyecektir.

Kapatmadan, tarayıcı pencerelerini simge durumuna küçültün.

Öğedeki metni paragraflara ayırmadan girdiğimiz için tarayıcıda 1. paragraf olarak ve sola hizalı olarak görüntülenir. Şimdi metne daha hoş bir görünüm vermemiz gerekiyor.

Start-Luck blog sayfalarına hoş geldiniz. Bugün size kodu nasıl kullanacağınızı göstermek istiyorum. Web siteleri yazmak, birçok kişiye bunaltıcı görünebilecek ilginç bir etkinliktir. Aslında, sadece 5 dakikada basit bir sayfa oluşturulabilir.

Bu yazımda sizlere html sayfası oluşturmaktan bahsedeceğim. Bu görevi 10 dakikadan daha kısa sürede tamamlayacağız ve ardından ana etiketleri daha ayrıntılı olarak ele alacağız. Böyle bir yayına ders demek yanlış olur. Size işin basitliğini göstermeyi amaçlayan ve size devam etme, daha fazlasını öğrenme ve daha iyisini yapma arzusunu veren bir başlangıçtır.

İlk sayfayı bir not defterinde yapmanızı öneririm. Başlat menüsünde bulunan en basiti, Donatılar klasörüdür. Henüz bir şey indirmenize gerek yok. Sahip olduklarınızdan yararlanmaya çalışın.

Bir belge açın.

İçine bu kodu yapıştırın.

ilk sayfam "https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg" > dibe ulaştık Artık etiketler hakkında biraz daha bilgi sahibisiniz ve bunları kullanabilirsiniz. Birkaç sayfayı birbirine bağlamak için bir bağlantı eklemeye çalışalım. Örneğin, blogumun bağlantısı - Start-Luck - sadece "zor" hakkında konuşuyor.

İlk Sayfam Sayfa Oluşturmak Sandığınızdan Daha Kolay Birçok kişi web sitesi oluşturmanın zor, hatta imkansız olduğunu düşünebilir. Bunu yapmak için çok şey öğrenmeniz, öğrenmeniz, yapmanız gerekir. Aslında, öğrenmenize bile gerek olmayan 100'e yakın etiket var. Sadece neyin ve nerede uygulandığını anlamak önemlidir. Bilgiler çeşitli hile sayfalarında gözetlenebilir ve zamanla makinedeki etiketleri hatırlamaya başlayacaksınız.



Metni kırmızı yapmak için basit kod

Kalın yazmak çok zor değil

dibe ulaştık

Artık etiketler hakkında biraz daha bilgi sahibisiniz ve bunları kullanabilirsiniz. Birkaç sayfayı birbirine bağlamak için bir bağlantı eklemeye çalışalım..

Tamam, şimdi her şey bitti. İlk sayfanız hazır

Dosyanın adı index.html olmalıdır. Bitirme ".html" dosya uzantısını gösterir. Yalnızca dizin adını girerseniz, belge bir metin dosyası olarak kaydedilir ve tarayıcı tarafından açılmaz.

Belgeyi masaüstüme kaydettim. Şimdi onu bulmanız, sağ fare düğmesine basmanız ve herhangi bir tarayıcıyla açmanız gerekiyor. Google Chrome'u seçeceğim.

Az önce oluşturduğum sayfa böyle görünüyor. Seninki de farklı olmayacak. Her şey tamamen aynı: resimler ve renkli yazı tipi ile.

Şimdi etiketler hakkında daha fazla ayrıntıya gireceğim, ancak şimdilik sadece " merkez" ve "Renk" kelimesini içeren bir satır ekleyin. Bu arada, zaten yazdım. Çok basit, okumanızı tavsiye ederim.

Belgeyi tekrar kaydedin, bu sefer Ctrl + S klavye kısayolunu kullanabilir ve ardından F5 düğmesini kullanarak tarayıcıda sayfayı yenileyebilirsiniz.

Unutmayın, hemen hemen her etiketin açılıp kapanması gerekir. Yani, eğik çizgili kod bir yere yerleştirilmelidir. Bu durumda, şöyle görünür:

Bakın, başlık kırmızıya döndü. Aynı şekilde metnin herhangi bir yerine istediğiniz gölgeyi verebilirsiniz.

Hepsi bu kadar, örnek hazır ve kendinle gurur duymalısın. Elbette henüz çevrimiçi değil, bunun için barındırma tarafından sağlanan web sayfasının düzenlenmesi gerekiyor. Diğer kişilerin eserinizi görebilmesi için etki alanınızı da bağlamanız gerekir.

Şimdilik sayfayı sadece siz görebilirsiniz. Ancak, böyle bir sitenin yalnızca Demir Çağı'ndan bir kişinin şaşırabileceğini kabul etmelisiniz. Ama bu ilk deneyim, kullandığımız etiketleri anlayarak daha da başarılı hale getirelim. Bu, projelerinizi kimsenin yardımı olmadan nasıl oluşturacağınızı öğrenmenize yardımcı olacaktır.

İzninizle, NotePad++'a geçeceğim. Normal bir not defteri ile karşılaştırıldığında bir takım avantajları vardır. Şimdi size bahsedeceğim unsurları göstermek için gerçekten vurgulama etiketlerine ihtiyacım olacak. Genel olarak, html öğrenecekseniz, bu ücretsiz programı kurmanızı şiddetle tavsiye ederim.

Tek değil ve alternatiflerle ilgilenen varsa size birkaç tane daha önerebilirim. Teorik kısma geçeceğiz.

Sayfa etiketlerle başlar ve biter . Tarayıcıya bunun html ile oluşturulmuş bir web belgesi olduğunu gösterirler.

Sıradaki gelir veya başlık. Bizim durumumuzda sayfayla ilgili en önemli bilgileri içerir - . Kodda bulunan "İlk sayfam" ifadesini henüz bulamadıysanız, arama satırının üzerindeki sekmeye dikkat edin.

Yani etiketler sayfa ile ilgili ana bilgilerin başlangıcından ve sonundan sorumludurlar.

Etiket ifadenin bir başlık olduğunu gösterir. Varsayılan olarak, gövde metninden biraz daha büyüktür ve kalındır. Siz ve ben artık sadece html ile yazmıyor, aynı zamanda dosyamızın ortak bir noktası olan bir CSS dosyası oluşturuyor olsaydık, sayfadaki tüm başlıkların boyutunu, yazı tipini ve hatta rengini yazmadan kontrol edebilirdik. yazı stiliörnekte yaptığımız gibi. Yine de bunun için çok erken.

Bu arada, sitenize arama sonuçlarında bir yer atarken Başlık ve H1'in etkisi vardır. Onlara büyük bir dikkatle davranmanız ve sadece buysa içinize yazmamanız gerekir. Onlar . h1'e ek olarak h2, h3, h4 de vardır.

Aynı satırda bir açılış ve kapanış var . Bu eleman sayesinde metni ortaya hizalayabilirsiniz. Bu etiket kaldırılırsa, metin sağ kenarda görünecektir.

- birkaç tek etiketten biri. Yani kendi kendine çalışır. Bu sayede öğeleri bir satırdan diğerine atlarsınız. Başka bir deyişle, bir adım geri atın. Bir kez yazdılar, yani benimki gibi bir, iki kez aşağı indiler ve girinti biraz daha fazla çıktı.

Sonra etiket geliyor img, yani resim, resim. Köşeli parantez açılır, görüntüyle ilgili tüm temel bilgiler içine sığar, ancak bundan sonra kapanır. bu not alınmalı img bir etikettir ve içine sığan diğer tüm kod öğeleri onun nitelikleridir.

Her şeyden önce gider alternatif, bu bir açıklamadır. Bu optimizasyon için de gereklidir. Bazen de eklenir başlık. Fareyle bir resmin üzerine geldiğinizde, sayfa zaten tarayıcıda açıkken imlecin yanında bir araç ipucu görünür.

Resmi site klasörüne yüklemek ve yolunu ayarlamak mümkündü ama ben kolay yoldan gittim. Pixabay arasında bir resim buldum, yeni bir pencerede açtım ve bağlantıyı yapıştırdım.

etikette kaynak görüntünün yolu yazılır. Tarayıcıya, istenen görüntüyü bulmak için daha fazla ilerlemeniz gerektiğini ve hangi yöne bakmanız gerektiğini söyleyen odur - kendiniz yazarsınız.

metnin bir kısmına, örneğin bizim durumumuzda olduğu gibi, farklı bir renk gibi özel bir stil vermekten sorumludur. stil="renk:kırmızı" rengin kırmızı olacağını gösterir. Sarı istiyorsanız sarı, yeşil - yeşil yazın. Photoshop'tan renk kodlarını kullanabilirsiniz.

metnin kalın olmasına yardımcı olur.

yatay bir çizgi çizer. Tek olup sadece kapalıyken kullanılmıştır. eğer yazarsan birkaç kez, sayfayı tarayıcıda açtığınızda tam olarak aynı sayıda yatay şerit elde edeceksiniz.

tarayıcıya bir bağlantının geleceğini söyler. Okuyucuyu farklı bir adrese yönlendirmek istiyorsunuz. Bu etiket, gerekli bir öznitelikle birlikte gelir href="adres". Tarayıcının ziyaretçiyi sayfaya aktarması gereken yol tırnak içine alınır. Bu etiket yazıldıktan sonra, üzerine tıklandığında okuyucunun daha fazla aktarılacağı bir veya birkaç kelimelik bir açıklama eklenir. Bu koşullar karşılandıktan sonra ikinci bir kapanış etiketi ekleyebilirsiniz. .

resim ekleme

Etiket tek bir etikettir, kapanış etiketi yoktur. Görüntü özniteliklerini belirleyebilirsiniz.

src niteliği görüntünün konumunu belirtir.

style özelliği, görüntünün piksel cinsinden genişliği ve yüksekliği dahil olmak üzere birçok seçeneğe sahiptir.

Alt niteliği, görüntünün kısa bir açıklamasını verir. Herhangi bir nedenle görüntü yüklenmezse kullanılır.

başlık ekleme

Etiket, HTML5'te yenidir ve bir web sayfasının en üstteki öğesini belirtir. Başlıklar genellikle bir şirket logosu, iletişim bilgileri, gezinme bağlantıları vb. içerir.Tek bir belgede birden çok öğe olabilir.

HTML'de Gelişmiş Kavramlar

HTML öğrenmesi kolay bir teknolojidir, pek çok tasarımcı sadece temel kavramlarla çalışır. HTML'den tam olarak yararlanmak istiyorsanız, gelişmiş kavramlara aşina olmanız gerekir. Bu, daha az çabayla çekici bir web sitesi oluşturmanıza yardımcı olacaktır.

Size daha fazla yardımcı olacak birkaç kavramdan bahsedeceğiz. Daha fazlasını öğrenmeye ve gelişmiş HTML ile özelliklerini kullanmaya devam edebilirsiniz.

HTML kodu doğrulama

HTML doğrulaması, HTML kodundaki hataları kontrol etmek için kullanılır. Web sayfanız yüklenmiyorsa, sorunun nedenini bulmak için bir kontrol kullanabilirsiniz.

Doğrulama ayrıca en son HTML standardına uymayan kodlar için önerilerde bulunur. Geçersiz HTML, siteyi kullanılamaz hale getirecektir. Bu, farklı tarayıcılarda yükleme sorunlarına veya tutarsız çıktılara neden olabilir. validator.w3.org gibi birçok doğrulama hizmeti ücretsizdir.

Ek etiketler ekleme

Burada tartıştığımızdan çok daha fazla HTML etiketi ve özelliği var. İki iyi öğrenme kaynağı, daha fazla eğitim ve tam bir etiket listesi içeren w3schools ve HTML Dog'dur.

İyi tasarlanmış web sitelerinin kodlarını incelemek ve yeni teknikleri görmek için tarayıcıdaki "Kaynak Sayfasını Görüntüle"yi de kullanabilirsiniz.

Bir web barındırma hizmetiyle, web etki alanınıza birden çok HTML sayfası ekleyebilirsiniz. HTML dosyalarınızı bir web sunucusuna aktarmak için FTP yükleme yazılımına ihtiyacınız olabilir. Bir FTP özelliği sağlayan birçok web barındırma hizmeti vardır.

CSS ve JavaScript ekleme

CSS, web sitenizin görünümünü ve hissini hızla iyileştirmek için kullanılabilir. Renkler, yazı tipleri eklemek ve öğelerin yerleşimini değiştirmek için CSS'yi kullanabilirsiniz. Bir CSS stil sayfasını bir HTML sayfasına bağlayarak tüm metnin stilini değiştirebilirsiniz.

JavaScript bir programlama dilidir ve HTML sayfalarına ekstra işlevsellik eklemek için kullanılabilir. Etiketler arasına JavaScript komutları eklenir. Etkileşimli düğmeler eklemek, matematiksel hesaplamalar yapmak ve daha fazlası için kullanılabilirler.

Web geliştirmenin harika dünyası önünüzde açılıyor. Cesaret etmek! Bu zirveyi fethetmek çok kolay, sadece başlamanız gerekiyor.