Allenova Natalia'nın ilk adımları çevrimiçi olarak okundu. Kodlamada ilk adımlar. Veya HTML öğrenmeye nereden başlayacağınızı. Nasıl ve nerede çalışılmalı

Yeni Başlayanlar için HTML Eğitimi. Yazar - Allenova Natalia

Yazardan:

"Bu kılavuzu yeni başlayanları düşünerek yazdım ve bir zamanlar kendim de nasıl başladığımı hatırladım. Bu, her şeyin kuru bir sunumu değil, bu, her şeyin hatırlanmasını daha kolay hale getirmek için çağrışımlar üzerinde çalışma girişimidir. Bir yerlerde sıkıcı anlardan kaçınmayı başaramadım ama zaman zaman yazılan her şeyi tamamlamak ve düzeltmek için çabaladım ve çabalamaya devam edeceğim."

Protozoa.
4 - "Kendiniz renklendirin. Metnin rengini değiştirin."
5 - "Sayfanın arka plan rengi nasıl değiştirilir. Renk etiği hakkında biraz."
6 - "Paragraflar ve DIV. Metni hizalamayı öğrenme."
7 - "Başlıklar nedir ve harflerin boyutu nasıl ayarlanır?"
8 - "İtalik, kalın metin, altı çizili ve diğerleri."
9 - "Standart yazı tipleri. Yazı tipinizi nasıl reçete edersiniz?"
10 - "Yol nedir? Resim nasıl eklenir."
11 - "Resimle neler yapılabilir? Belgenin arka planı olarak resim vb."
12 - "Sosis aşığı ve resmin etrafındaki metin akışının zorla kesintiye uğratılması hakkında."
13 - "Bağlantı ve bununla nasıl başa çıkılacağı."
14 - "E-postaya bağlantı. Metin bağlantısına ipucu".
15 - "Resim bağlantı olabilir mi?"
16 - "Nereye gitmeli, neye başvurmalı. Bağlantıya tıkladığınızda yeni pencere."
17 - "Haritalar. Resmin bir bağlantısı nasıl yapılır?"
18 - "Kartlar. Resmin bir parçası olarak 2 numaralı bağlantıyı yapın".
19 - "Kartlar. Resmin bir kısmı nasıl bağlantı haline getirilir 3".
20 - "Yer imi. Belgenin içinde bağlantı nasıl oluşturulur?"

Tablolar.
21 - "Tablo oluşturmayı öğrenme."
22 - "Tablo oluşturmayı öğrenme" devam etti.
23 - "Tablolar, dikey hizalama (valign)".
24 - "Tablolar, hücreleri germeyi öğrenme (satır aralığı, kolspan)".
24-2 - "Ek bölüm. Ödevlerin cevapları."
25 - "Tablolar, hücre aralığı ve hücre dolgusu nedir? Boşlukla ne yapılır?"
26 - "İç içe tablolar ve bazı nüanslar".
27 - "Tabloların çerçevesi hakkında ve sonunda tablolar hakkında homurdanma."
28 - "Tablolarla basit bir site oluşturma."

Ek olarak.
29 - "Özel karakterler veya baş ağrısı."
30 - "Çizgiler hakkında. Basit ve kullanışlı."
31 - "Belgenin girintileri (kenar boşlukları), üst kenar boşluğu, sol kenar boşluğu, kenar boşluğu genişliği, kenar yüksekliği nasıl kaldırılır".
32 - "Listeler hakkında. Sırasız listeler".
33 - "Sıralı listeler. Açıklama: spesifikasyon ve konsorsiyum nedir".
34 - "Belirli etiketler, çalışan metin satırı".

Çerçeveler.
35 - "Giriş. Bunlara (çerçevelere) neden ihtiyaç var?"
36 - "Çerçeve oluşturmayı öğrenme."
37 - "Çerçeve oluşturmayı öğrenme" devam etti.
38 - "Çerçeve oluşturmayı öğrenme" devam etti.
39 - "Kaydırma çubuğunu kaldırın, çerçevelerden kurtulun, çerçeve alanlarının genişliğini ayarlayın."
40 - "Bir bağlantıya tıkladığınızda belge başka bir çerçevede, tam pencerede açılır."
41 - "Çerçeveler ile ilgili son bölüm. IFrame Nedir".

Bugün ele alacağız bir HTML sayfasına grafik eklemenin ana yolu olarak - sırasıyla, doğrudan "img" etiketini kullanma, Ve diğer ek yollar Web sayfalarını geliştirirken çeşitli durumlarda gerekli olabilecek.

Çeşitli ayarlara ve özelliklere bir göz atalım, grafiklere uygulanabilecek şeyler: boyutu (genişlik, yükseklik), hizalamayı, girintileri, fareyle görüntünün üzerine gelindiğinde çeşitli efektleri belirleme vb.

Makale yazma kazancı, forumlarda yorum

Hizmet, metin yazarlarının para kazanmasına olanak tanır - siteler için makale yazmak, forumlarda yeni konular oluşturmak, bunlara yorum yazmak için ödeme yaparlar. Ayrıca metnin yeniden yazılması, kopyala-yapıştır ve çevirilerinden de kazanabilirsiniz. Mükemmel terfi hizmeti, çok iş...

Drupal 8 için barındırma

Yeni bir site geliştirirken her zamanki gibi "Drupal"ı seçtim (Bu yazının yazıldığı sırada en yeni kararlı sürüm 8'dir).

Genel olarak bu "motorun" en iyisi olduğunu düşünüyorum. Ancak bildiğiniz gibi, Rusça'da istediğimiz kadar fazla belge yok ve Drupal'in geniş olanakları göz önüne alındığında, eksikliği bazen bu sistemle yeni çalışmaya başlayan web yöneticileri için zorluklar yaratabiliyor. yeni başlayanlar... Örneğin 8 yıldan fazla bir süredir bu CMS ile çalışıyorum ancak karmaşık sorunları çözerken bazen zorluklar oluyor çünkü uygun seviyede İngilizce konuşamıyorum. Sorun çözülebildiğinde, Drupal'ın yetenekleri açısından ne kadar iyi ve kullanışlı olduğuna bir kez daha ikna oldunuz.

"Mootools" üzerinde kayar panel

Bu dersimizde site için açılır paneller oluşturmaya odaklanacağız.

İhtiyacımız olacak"Mootools" hakkında en ufak bir fikir ve elbette tasarımını oluşturmak için gereken CSS stilleri hakkında bilgi.

Başlamadan önce kaynak arşiv dosyasını indirin. Burada ayrıca ortaya çıkan panelin bir örneğini de bulacaksınız (index.html).

Haydi uygulamaya başlayalım...

İnternette nasıl çok para kazanılır - neler yapabileceğinizle

Arama motorları için sitelerin dahili optimizasyonunun temelleri

Web sitelerini arama motorları için optimize etme süreci 2 aşamaya ayrılmıştır:

1. Dahili optimizasyon- dahili site faktörlerinin optimizasyonu (kod, site yapısı, içerik). İlerledikçe üzerinize düşen iş miktarını arttırmamak için başlangıçta sitenizi arama motorları için çekici hale getirmek gerekir.
2. Harici optimizasyon- dış faktörlerden dolayı sitenin konumunun iyileştirilmesi (bağlantı satın alma, takas vb.).

Bugün ayrı ayrı konuşmak istiyorum dahili optimizasyon hakkında ve ana noktaları vurgulayın.

Windows 7, 8, 10 veya XP'de Ekran Görüntüsü Nasıl Alınır

Ekran görüntüsü (ekran görüntüsü) Ekran, monitörünüzde o anda görüntülenen her şeyi hızlı bir şekilde kopyalamanıza olanak tanıyan bir özelliktir. Aslında bu, monitörünüzün otomatik olarak kaydedilen (çoğunlukla .png formatında) anlık fotoğrafıdır.

Çeşitli durumlarda hızlı bir ekran görüntüsü gerekebilir. Örneğin, onarımı yapacak ustaya büyük ölçüde yardımcı olabilecek hata mesajları alıyorsanız, herhangi bir programda veya belirli bir sitede nasıl çalışacağınızı açıklayan talimatlar yazmanız gerekiyorsa veya bir programda belirli sonuçlara ulaştıysanız. Bilgisayar oyunu oynuyorum ve ekranımı hafızaya kaydetmek istiyorum.

Windows 7, 8, 10 veya XP'de sistem geri yüklemesi nasıl yapılır

Yazılımın bir PC'ye kendi kendine kurulması, tüm sistemin doğru çalışmasına zarar verilmesi veya kullanıcı için uygun olan bazı yararlı işlevlerin ve ayarların kaldırılmasıyla ifade edilebilecek belirli bir riskle ilişkilidir.

Bu yüzden çok orijinal durumuna hızlı bir şekilde geri dönme olasılığını sağlamak önemlidirönemli ayarları ve dosyaları kaybetmeden.

Bu amaçla Windows, sistem kurtarma için Windows durumu kontrol noktaları oluşturmanıza olanak tanıyan özel bir işlev sağlar. İkincisi, PC yazılımının önceki bir duruma geri yüklenmesini mümkün kılar.

/ Html Eğitimi. Adım 8.

Aptallar için HTML eğitimi. Protozoa.

Font boyutunun nasıl ayarlanacağını öğrendikten sonra sıra font stilini nasıl tanımlayacağımızdan bahsetmeye geldi. Bu bölümde metni italikleştirmeyi, altını çizmeyi, üzerini çizmeyi, kalın yapmayı, metni tek aralıklı hale getirmeyi, üst simge ve alt simge yapmayı öğreneceğiz - bu etiketlerin tümü genellikle birlikte değerlendirilir ve gelenekten sapmayacağız.

Önce italik ve kalın metne bakalım:

Kalın yazı
İtalik metin (italik)

Gördüğünüz gibi her şey basit. Test etmek için bunları metinde istediğiniz yere kendiniz dürtebilirsiniz ve örnekte sanal arkadaşıma tekrar eziyet edeceğim:

Şimdi Mossyrinny yazı tipi hakkında birkaç satır. Bu yazı tipi nedir? Daktilo yazı tipi gibi aynı sabit genişliğe sahip karakterlere sahip bir yazı tipidir. Ve bunun etiketi:

tek aralıklı yazı tipi

Örneğimizde buna girmeyeceğim (kendiniz yapın).

Ayrıca etiketin içine alınan metin tek aralıklı yazı tipinde görüntülenir.

 
metin (bol miktarda boşluk) metin 
metin (bol miktarda boşluk) metin 
metin (bol miktarda boşluk) metin 

Dikkat çekici bir özelliği var: İçerisindeki metin, tam olarak not defterine yazdığınız gibi bir boşluğa kadar görüntüleniyor.  Bu etiket örneğin şiirleri biçimlendirmek için işinize yarayabilir.
Tek bir metin parçasına aynı anda birden fazla etiket uygulanabilir:

 metin

 
Örneğimizde metin tek aralıklı, kalın ve italiktir (bunun gibi :)).  Farklı etiket kombinasyonlarını kullanmaktan korkmayın, deneyin, ancak akıllıca :)
Yani, devam etmeden önce bu adımda ustalaşmamız gereken birkaç etiketimiz kaldı.
Altı çizili metin etiketi kullanılarak girilir :

  Altı çizili metin
 
Etiketler Ve metni üstü çizili bir yazı tipiyle temsil edin, hangisini isterseniz kullanabilirsiniz, aralarında temel bir fark yoktur:

 üstü çizildi 

üstü çizildi 
Etiket büyük harflerle görünür ve ana metne göre küçük harflerle:

 Küçük
normal metin 

Büyük 
Sup ve Sub etiketleri üst simgeyi ve alt simgeyi tanımlar.  Destek - üst, Alt - alt.  Nerede faydalı olabilirler?  Örneğin, bir formül yazarken - H 2 O (okuldan aldığımız her şey :).
Üst simge akşam yemeği
alt simge alt 
Aslında hepsi bu.  Bir sonraki adıma geçebiliriz.
 1 oy 
Selamlar sevgili okuyucular!  Bugün "Köprü Metni İşaretleme Dili" hakkında konuşacağız.  Neden herkes bunu bilmeli ve HTML'de ilk adımları nasıl atmalı?  Tasarımcı yabancı dil bilmiyorsa bu en kötü şey değildir.  En kötüsü, temel html bilgisine bile sahip olmamasıdır.  Bu durumda, web endüstrisinde sonsuza kadar "yabancı" kalma riskiyle karşı karşıya kalır.
 
Dil önemlidir
 
Konuşuyor musun?  Sizinkini de hayal edin!
 
 
Sitenin tasarımının en küçük ayrıntıya kadar düşünüldüğü, ancak sonuçta arzulanan çok şey bıraktığı gerçeğiyle sık sık karşılaştınız mı?  Bu, sizin ve tarayıcınızın farklı diller konuştuğunuz anlamına gelir.  Bir tasarımcı böyle bir şeyle karşılaştığında şunu açıkça anlamaya başlar: Bir site bir dizi güzel, zar ve resimden ibaret değildir.
 
Kaliteli bir kaynak, her şeyden önce yetkin bir koddur.  Ve bunu anlamak için onu incelemeniz gerekir.  Yeni başlayan birinin html'yi sıfırdan anlamasına yardımcı olacak pek çok mantıklı eğitim var.
 
Yeni bir şey öğrenmenin pratik yaparak daha kolay olduğunu hepimiz biliyoruz.  Özellikle yeni başlayanlar için ücretsiz çevrimiçi kurs " Temel HTML ve CSS

".  Kaynak, düzenin temellerini, yasalarını, özelliklerini ve kodun özelliklerini anlamanıza yardımcı olacaktır.
 

 
Programcılar için tonlarca sıkıcı literatür okumanıza veya bir profilde yüksek öğrenim görmeye gitmenize gerek yok.  Kursun etkileşimli olması, becerilerinizi anında pekiştirmenize, sonucu görmenize olanak tanır ve zorluklar ortaya çıkarsa bir mentor size yardımcı olacaktır.
 
Sorunlardan bahsetmişken.  Yeni başlayanlar genellikle kod yazarken hatalar yapar.  Her şeyin dikkate alındığını hatırlamak önemlidir: boşluklar, noktalar ve virgüller.  Fazladan bir işaret veya onun yokluğu, bilgilerin yanlış görüntülenmesine yol açacaktır.  Bu yüzden onu çok dikkatli izlemeniz gerekiyor.
 
Önemli olan pratiktir
 
En iyi yanı, bir web sitesi oluşturmak için karmaşık bir yapıya ihtiyacınız olmamasıdır.  Sadece geçebilirsiniz.  Not defterini açın ve içine şunu yazın:
 <HTML >
<kafa >
<başlık >İlk sayfam</başlık>
</kafa>
<vücut > Selam Dünya!<br ></gövde>
</html>





Selam Dünya! 
Benim adım (isim), bu benim ilk sayfam!

 
Daha sonra yazılan her şeyi html belgesi olarak kaydedin, uzantının html olması önemli.  Nasıl yapılır?  Belgede, belirlediğimiz "dosya adı" alanında "dosya" yı ve ardından "farklı kaydet" i tıklayın: indeks.html.  Tüm bu işlemlerden sonra geriye en ilginç olanı yapmak kalıyor!  Belgemize sağ tıklayın, herhangi bir tarayıcıyla açın.
 
İşte!  Bir sayfa yazdınız ve bu sadece başlangıç!
 
 
Gördüğünüz gibi sayfanın içeriğinden kod sorumludur.  Başka bir deyişle, için.  Kural olarak, kaynağın tasarımından bir kişi, yerleşim düzeninden ise başka bir kişi sorumludur.  Ancak altın ortalama, bir kişinin bir resmin nasıl dizileceğini ve çizileceğini bilmesidir.
 
Bu, iki kişi arasındaki yanlış anlamaları önlemeye ve sonuçta tasarımcının amaçladığı ürünü elde etmeye yardımcı olur.
 
Nasıl ve nerede çalışılmalı
 
Çoğu kişi için etiketlerin sayısı ve sadece isimleri dehşete neden oluyor.  Sanki yabancı bir dilin konuşulduğu bir ülkedeymişsiniz gibi.  Sözlük olmadan, daha doğrusu aptallar için ders kitabı olmadan yapamazsınız.  Kurslar kesinlikle iyidir, ancak her şeyin yazılı olduğu ve istediğiniz zaman bakabileceğiniz bir kitap olmadan bunu yapamazsınız.  Ders kitabı çevrimiçi olarak indirilebilir veya çalışılabilir.
 
Uygulama, çevrimiçi sürümün bir takım artıları ve eksileri olduğunu göstermektedir.  Dezavantajı ise materyale erişmenin internet olmadan yapamamasıdır.  Avantajı ise çevrimiçi yayınların sıklıkla güncellenmesidir.  Onlarda bugün için gerekli tüm bilgileri bulabilirsiniz.
 
 
Allenova Natalya Vyacheslavovna, html üzerine zekice ve ayrıntılı bir kitap yazdı ( Bakmak).  Yayının yapısı, basit öğelere dayalı daha karmaşık algoritmalarda uzmanlaşarak kademeli olarak hareket etmenize olanak tanır.  Teori ve pratik el ele gider ve birbirini tamamlar.
 
Burada belirli soruların yanıtlarını bulacaksınız: nasıl oluşturulur?  Nasıl inşa edilir?  Resim nasıl eklenir?  Konuyla ilgili soyut bir akıl yürütme yok oraya, nereye gittiğini bilmiyorum.  Pek çok ders kitabı bu konuda kaybediyor; onlarla ya bir teorisyen ya da hiçbir şeyin işe yaramadığı bir uygulayıcısınız.  Katılıyorum, bunlar en umut verici beklentiler değil.
 
 
Elbette bir site oluşturmak için etiketleri daha detaylı incelemeniz gerekecek.  Bununla ilgili sorunlar ortaya çıkmamalı, dünya çapındaki web çok sayıda html dizini kaynağı sunmaktadır.  Bu tür dizinlerin avantajları sitenin arama satırına bir etiket girebilmeniz, anlamını, nasıl ve nerede uygulandığını öğrenebilmenizdir.  Başka bir deyişle bir nevi etkileşimli sözlüktür.
 
Kendi başına bir web sitesi yapmak isteyen hiç kimse, biraz html bilgisi olmadan yapamaz.  Olacak, ama bu tamamen başka bir hikaye.  İlk sayfayı oluşturduktan sonra tam teşekküllü bir web sitesi oluşturmak istiyorsanız güncellemelerime abone olmanızı öneririm.  Burada web endüstrisini anlamanıza yardımcı olacak birçok yararlı bilgi bulabilirsiniz.
Ders kitabının ilk sayfaları:
Aptallar için HTML eğitimi.  Aletler.
1. adım.
Sıra her şeyden önce bu nedenle çalışmaya başlamadan önce bilgisayarımızda gelecek sayfa için ayrı bir klasör oluşturacağız.
D:\ilk adımlar\
Bilgisayarımda D sürücüsünde böyle bir klasör oluşturdum ve buna İlk Adımlar adını verdim.  Elbette klasörünüzü istediğiniz yerde oluşturabilir ve ona istediğiniz adı verebilirsiniz.  Şimdi not defteri - not defterini açın (başlat - programlar - aksesuarlar - not defteri veya başlat - programlar - standart - not defteri) ve aşağıdaki metni buraya kopyalayın:

 








Merhaba bu benim ilk sayfam. 
 
Hoş geldin!  :) 



 ()


Bu belgeye *.html adını vererek kaydedelim.
D:\ilk adımlar\index.html
Pek çok okuyucu şu ifadeye rastlıyor: " Şimdi bu belgeyi *.html adını vererek kaydedelim.", *.html olarak değil, yalnızca *.txt metin belgesi olarak kaydetmeyi başardıkları şeyler hakkında mektuplar yazıyorlar. Gelecekte bu aptalca yanlış anlaşılmayı önlemek için bu notu yazıyorum.
Adım 8.
Font boyutunun nasıl ayarlanacağını öğrendikten sonra sıra font stilini nasıl tanımlayacağımızdan bahsetmeye geldi.  Bu bölümde metni nasıl italik hale getireceğimizi, altı çizili, üstü çizili, kalın olarak yazacağımızı, metni tek aralıklı hale nasıl getireceğimizi, üst simge ve alt simgeyi nasıl oluşturacağımızı öğreneceğiz - bu etiketlerin tümü genellikle birlikte değerlendirilir ve gelenekten sapmayacağız.
Önce italik ve kalın metne bakalım:

 Kalın yazı 

 İtalik metin (italik) 
Gördüğünüz gibi her şey basit.  Test etmek için bunları metinde istediğiniz yere kendiniz dürtebilirsiniz ve örnekte sanal arkadaşıma tekrar eziyet edeceğim:







 











Merhaba bu benim ilk sayfam.



Hoş geldin! :)


Son zamanlarda sanal hayatla tanışmaya başladım ama uzun bir geleneğe göre, yeni sanal arkadaşlarım ve tanıdıklarım için de kendi ana sayfamı oluşturmak istedim ki fotoğraflarımı görsünler, hakkımda okuyabilsinler, birkaç satır yazsınlar ziyaretçi defterimde.  Ya da belki rastgele bir ziyaretçi aniden beni tanımak ister ve ben debaşka bir sanal arkadaş mı?  :)



 

 ()


Şimdi Mossyrinny yazı tipi hakkında birkaç satır.  Bu yazı tipi nedir?  Daktilo yazı tipi gibi aynı sabit genişliğe sahip karakterlere sahip bir yazı tipidir.  Ve bunun etiketi:

 tek aralıklı yazı tipi
Örneğimizde buna girmeyeceğim (kendiniz yapın).
Ayrıca etiketin içine alınan metin tek aralıklı yazı tipinde görüntülenir. 
:
 
metin (bir sürü boşluk) metin metin (bir sürü boşluk) metin metin (bir sürü boşluk) metin
 Etikette 
Dikkat çekici bir özelliği var: İçerisindeki metin, tam olarak not defterine yazdığınız gibi bir boşluğa kadar görüntüleniyor.  Bu etiket örneğin şiirleri biçimlendirmek için işinize yarayabilir.
Tek bir metin parçasına aynı anda birden fazla etiket uygulanabilir:

 metin

Örneğimizde metin tek aralıklı, kalın ve italiktir (bunun gibi :)).  Farklı etiket kombinasyonlarını kullanmaktan korkmayın, deneyin, ancak akıllıca :)
Yani, devam etmeden önce bu adımda ustalaşmamız gereken birkaç etiketimiz kaldı.
Altı çizili metin etiketi kullanılarak girilir :

  Altı çizili metin  
Etiketler Ve metni üstü çizili bir yazı tipiyle temsil edin, hangisini isterseniz kullanabilirsiniz, aralarında temel bir fark yoktur:

 üstü çizildi 

üstü çizildi 
Etiket büyük harflerle görünür ve ana metne göre küçük harflerle:

 Küçük
normal metin 

Büyük 
Sup ve Sub etiketleri üst simgeyi ve alt simgeyi tanımlar.  Destek - üst, Alt - alt.  Nerede faydalı olabilirler?  Örneğin, bir formül yazarken - H 2 O (okuldan aldığımız her şey :).
Üst simge akşam yemeği
alt simge alt