HTML teknolojisiyle çalışmaya başlamak ve bu dilin ana unsurlarını çıkarmak için içinde işlem yapacağımız özel bir dosyaya ihtiyacımız var.

Hemen pratik adımlara geçelim ve ilk HTML dosyanızı oluşturalım.

Burası birlikte inşa edeceğimiz, genişleteceğimiz ve deneyeceğimiz bir “test alanı” olacak.

Videoyu sevenler için:

Bakacağımız ilk yöntem bir HTML dosyası oluşturmaktır; basit bir metin düzenleyicide dosya oluşturmanın yolu budur.

Yöntem 1. Notepad programında bir html dosyası oluşturun.

Ameliyathanede bulunan Not Defteri düzenleyicisi gibi herhangi bir metin düzenleyiciyi açın Windows sistemleri. Bu programı Başlat -\u003e Tüm programlar -\u003e Standart -\u003e Not Defteri ana menüsü aracılığıyla bulabilirsiniz.

*.txt uzantılı bir metin dosyası kaydediyorum.

Şimdi dosya uzantısını *.txt'den *.html'ye değiştirmeniz gerekiyor.

Dosya uzantıları sizin için görüntülenmiyorsa lütfen şunu unutmayın:

Bu nota ilişkin talimatları tamamladıktan sonra dosya adı uzantısını görüntüleyecektir.

Artık siz ve ben ilk HTML dosyamızı oluşturduğumuza göre, artık onu kaydedebiliriz.

Benzer şekilde, html dosyası ek Notepad ++ programı kullanılarak oluşturulur.

Ale, bu yöntemi kullanmak her zaman kolay olmuyor ve bildiğin gibi aynı şey değil İsveç yolu html dosyaları oluşturarak. Ve bu sorunu daha hızlı çözmenizi sağlayan programlar.

Bu programlardan biri evrensel kod editörü Dreamweaver'dır (bu program hakkında yazmıştım).

Yöntem 2. Evrensel Dreamweaver kod düzenleyicisinde bir HTML dosyası oluşturma.

Programa dalıldıktan sonra bir pencere görüntülenir:

Oluşturmanız gereken her şeyi bu penceredeki “Oluştur” bölümündeki HTML dosyasını seçerek yapabilirsiniz.

Ortaya çıkan dosya başarıyla oluşturulacaktır. Üstelik programın bu kodu otomatik olarak eklemesi şaşırtıcı.

Bu, web sitesinde bulunmayı sağlayan dil kodudur, buna daha sonra değineceğiz. Dreamweaver bu kodu otomatik olarak ekleyerek bize bir saat kazandırıyor.

Şimdi bu dosyanın sabit sürücünüzde görünmesi için onu kaydetmeniz gerekiyor. Bunu “Dosya - Paradan tasarruf edin...” menüsünden yapabilirsiniz.

Kaydederken dosyaya atanan html uzantısını kaldırmamaya dikkat edin.

Benzer şekilde diğer programlarda da HTML dosyası oluşturabilirsiniz ancak bunun nasıl yapılacağını size göstermek istemiyorum.

Ev geliştirme

Açıklamalara uygun herhangi bir şekilde hemen bir HTML dosyası oluşturun. Nasıl çalışılacağını hemen öğrenmek çok önemlidir, çünkü gelecekteki tüm dersler bu dosyaya zaten sahip olduğunuz gerçeğine dayanacaktır.

HTML belgesi- bu, HTML kodunu içeren .html uzantılı temel bir metin dosyasıdır. Bir HTML belgesine HTML dosyası da denir.

Orijinal metin dosyasından (.txt uzantılı) bir HTML belgesi oluşturmak için, onu .txt'den .html'ye değiştirmeniz gerekir.

Bir tarayıcıda görüntülemek için dosyayı açmanın, yani extension.html uzantısıyla kaydetmenin iki yolu vardır:

1. HTML belgesinin işlenmek üzere seçilen tarayıcıda açılacağı sol fare düğmesiyle iki kez tıklayın.
2. Yeni RMB'ye tıklayın → yardım için açmak üzere imleci hareket ettirin... → gerekli tarayıcıyı seçin.

Bir HTML belgesi aldığınızda, tarayıcı bunu web sayfası görünümünde gösterecektir (web sayfası, tarayıcı penceresinde görüntülenen sayfanın aynısıdır). Popodaki fiyata bakalım. Bir HTML belgesi oluşturabilir ve onu yeni HTML koduna genişletebiliriz:

İlk başlığım

İlk paragrafım

Artık HTML dosyasını bir tarayıcıyla açabiliriz. Tarayıcı penceresinde HTML kodunun kendisini görüntüleyemiyoruz, bu nedenle istenen görünümde sayfa yerine görüntülenmek üzere yorumlanması gerekecektir. Bu kodun tarayıcı penceresindeki sonucu:

HTML belgesinin kodunu düzenlemek için yeni bir RMB'ye tıklayın → imleci Daha fazlası için aç... üzerine getirin → ve gerekli düzenleyiciyi seçin, listede gerekli düzenleyici yoksa Program seç ...'e basın ve gerekli editör. Vekil editörler (örneğin, not defteri++) Doğrudan içine titreşebilirsiniz içerik menüsü, Belgeye sağ tıklayın ve Notepad ++ ile Düzenle'yi seçin (yardım için Notepad ++'ı düzenleyin).

Dosya uzantısını değiştirme

Pencereler:

1. İÇİNDE özel bir editöre(Veya orijinal metin belgesinde) dosyaya basın → dosya adının metin alanına aşağıda farklı kaydet'i seçin: örneğin şunu yazın: mypage.html → kaydet'e basın. İşte bu, HTML belgesi oluşturuldu.
2. Farenin sağ tuşuyla basın ( RMB) Metin dosyasında → yeniden adlandır'ı seçin ve uzantıyı .txt'den .html'ye değiştirin. İşleri bu şekilde hızlandırmak için, tüm dosyaların uzantılarının mevcut olduğundan emin olmamız gerekir; bunu şu şekilde yapın: Denetim Masası'nı açın → Klasör Seçenekleri'ni seçin (Windows 10'da öğenin adı Windows Seçenekleri Idnik'tir) → Görünüm sekmesi → en aşağıya kaydırın ve Dosya türlerini kaydetmek için uzantıları kabul et kutusunu işaretleyin.

HTML sayfaları yerine yalnızca metin görüntüleniyorsa ne yapmalısınız?

Bu sorunlar çoğunlukla kullanıcının kendisinden değil, bilgisayarda çalışan işletim sisteminden kaynaklanmaktadır. İşletim sisteminin bununla ne alakası var? Sağdaki her şey perde arkasındadır işletim sistemleri Windows, Windows XP ve 7, dosya uzantılarını kullanır. Dosyaların oluşturulması ve doğru formatta olması durumunda sorunlar ortaya çıkabilir.

Windows XP ve Windows 7 örneği üzerinden anlatacağım, çünkü diğerleri galip gelmiyor ve orada ne olduğunu da bilmiyorum.

Ayrıca ilk defa dosya uzantılarının görüntülenmesini etkinleştireceğiz.

Windows XP nasıl vikorize edilir:

Windows 7 nasıl vikorize edilir:

Artık her şey doğru yapılırsa dosya adlarının sonuna dosya uzantısı eklenecektir: .txt, .html vb. Bu, biçimlendirilmiş dosyalarda gezinmeyi kolaylaştıracaktır. Son yiyecek tedarikine geçelim.

Html dosyası nasıl oluşturulur?

Burada her şey doğru, inanılmaz derecede basit. Hangi aracı kullandığımıza bağlı olarak çeşitli seçenekler vardır.

NotePad++ nasıl vikorize edilir:

Her şey için teşekkür ederim, bunun en uygunu olduğuna saygı duymak istiyorum ve manuel seçenek, Html, css ve php yazmak için.

Bu şekilde NotePad metin düzenleyicisini kullanarak bir html dosyası oluşturabilirsiniz. Not defteri nasıl vikoriated:

Bunun şu anda en uygun seçenek olmadığını hemen söyleyeceğim. Yine de bu yöntemi kaçıramam.

Bu şekilde not defteri kullanarak html formatında bir dosya oluşturduk.

Seçeneklerden birinin seçileceği alan açılır ve dosya çift tıklanarak web tarayıcısında açılır. Başardıklarımıza hayret ediyorum.

Bu durumda, her şey doğru şekilde derlendiyse, dosyanın Not Defteri'nde değil, bir web tarayıcısında açılması gerekir.

HTML sayfası yerine metin görüntülenirse ne yapmalısınız?

Sebebi ne olursa olsun, dosya tarayıcıda açmak yerine, yazdığımız koddaki gibi görünen metinle Not Defteri'nde açılır. Bu durumda sayfanın en üstüne giderek dosya uzantılarının eklenmesini açmanız gerekir.

Mesela NotePad'de kodu yazıp HTML formatında kaydettiğimiz bir durum olabilir ama bunu yapmak kolaydır. Metin belgesi. Sağ tarafta kutucuğun işaretini kaldırmazsanız dosya uzantımızın (name.html) değil (name.html.txt) olması bizi ilgilendirmiyor. Yani aslında sorun, daha önce düz metin belgesi olan dosyada yatıyor.

Yani, zaten tahmin ettiğiniz gibi, bunu çözmek için dosyayı (file.html.txt) yerine (file.html) olarak yeniden adlandırmanız gerekir.

Bu manipülasyondan sonra dosyanın metin olarak bir metin düzenleyicide değil, bir tarayıcıda açılması gerekir.

Sizi Start-Luck bloguna davet ediyorum. Bugün size kodu nasıl vikorize edeceğinizi göstermek istiyorum. Bir web sitesi yazmak kendinizi meşgul etmenin harika bir yoludur çünkü pek çok şeyden kurtulabilirsiniz. Aslında 5 jeton kadar küçük bir ücret karşılığında basit bir taraf oluşturulabilir.

Bu yazımda sizlere html sayfalarının oluşturulmasını anlatacağım. Bu görevi 10 dakikadan daha kısa bir sürede bitirelim, ardından ana etiketlere daha detaylı bakacağız. Böyle bir yayına ders demek yanlış olur. Size işin basitliğini göstermek ve içinizde daha fazla parçalanma, daha fazla öğrenme, daha verimli çalışma arzusunu aşılamak için çağrıldığım için bu daha çabuk sigortalanıyor.

Yan sayfa nasıl oluşturulur

Öncelikle bir defterde çalışmanızı tavsiye ederim. En basit şekilde “Başlat” menüsünde bulunan “Donatılar” klasörü. Henüz hiçbir şeyi baştan çıkarmaya gerek yok. Yaptığınız işi hızlandırmaya çalışın.

Belgeyi açın.

Bu kodu yeni eksene yapıştırın.

Dosya adlandırılmalıdır indeks.html. tamamlama ".Html" Dosya uzantısını belirtir. Yalnızca dizin adını girerseniz belge metin dosyası olarak kaydedilecek ve tarayıcı tarafından açılmayacaktır.

Belgeyi masaüstüme kaydettim. Artık bunu bilmeniz gerekiyor, farenin sağ tuşuna basın ve herhangi bir tarayıcıyı açın. Google Chrome'u seçiyorum.

Aks şuna benziyor, oluşturduğum taraf düzgündü. Sizinki hiçbir şeyden rahatsız olmayacak. Her şey aynı: resimler ve renkli yazı tipiyle.

Size etiketler hakkında daha detaylı bilgi vereceğim ama şimdilik sadece “ merkez “Kelimenin geçtiği bir satır ekleyelim” Renk" Konuşmadan önce zaten yazıyordum. Çok basit, okumadan önce tavsiye ederim.

Belgeyi tekrar kaydetmek için bu sefer aşağıdaki tuşlara basmanız yeterlidir: Ctrl + S ve ardından ek F5 düğmesini kullanarak sayfayı tarayıcıda yenileyin

Unutmayın, hemen hemen her etiket açılış ve kapanış suçlusudur. Eğik çizgi içeren kodun suçlanacağı yer burasıdır. Bu durumda şöyle görünür: .

Bachite, başlık kırmızıya dönüştü. Aynı şekilde metnin herhangi bir yerine istediğiniz rengi ekleyebilirsiniz.

Hepsi bu, popo hazır ve kendin için suçlanacaksın. Elbette henüz web sitesinin barındırma sağlayıcısına yerleştirilmesini gerektiren bir çevrimiçi varlık yok. Başkalarının sitenizden keyif alabilmesi için alan adınızı da bağlamanız gerekir.

Bunu yaparken sadece ona bakın. Ancak bekleyin, böyle bir site geçmişten gelen çoğu insan tarafından kullanılabiliyor. Ama ilk gerçek bu, vikoristleştirdiğimiz etiketlere bakarak onu daha da başarılı kılalım. Bu, herhangi bir yardım almadan kendi projelerinizi nasıl yaratacağınızı öğrenmenize yardımcı olacaktır.

Etiketler

İzninizle NotePad++ programına geçeceğim. Vaughn'un aynı defterde tamamen düşük bir avantajı var. Artık size bahsedeceğim unsurları göstermek için etiketleri kullanabileceğim. Html yüklemeyi planlıyorsanız, yüklemenizi şiddetle tavsiye ederim. ücretsiz program.

Öyle biri yok, sana birkaç alternatif daha sunabilirim. Teorik kısma geçelim.

Ana

Etiketlerin bulunduğu sayfa başlar ve biter . Tarayıcıya web belgesinin ne yaptığını gösterin yardım et.

Hadi gidelim veya başlık. Kendisi büyüyor önemli bilgi bizce taraf hakkında -. Kodda yer alan “İlk sayfam” ifadesini henüz bulamadıkları için arama satırının üzerindeki sekmeyi vurgulayın.

Aynı etiketler siteyle ilgili ana bilgilerin başlangıcını ve sonunu temsil eder.

etiket

ifadenin başlık olduğunu belirtir. Aslına bakılırsa ana metinden biraz daha fazlası var ve kalın görünüyor. Sadece HTML yazmakla kalmayıp, dosyamızın oluşturulduğu bir CSS dosyası da oluştursaydık, sayfadaki tüm başlıkların boyutunu, yazı tipini kontrol edebilir ve rengini belirleyebilirdik, ki bunu biz belirlemedik. yazı stili , Yak mi tse robili kıçından. Bunu önceden konuşmak istiyorum.

Konuşmadan önce, siteniz ziyaret edildiğinde Title ve H1 ses tabanlı biçimde görünecektir. Onlara büyük bir saygıyla yaklaşmak ve ortasına hiçbir şey yazmamak gerekir. Koku, ta ki... Krem h1, h2, h3, h4.

Bu benzerlik aynı zamanda açılır ve kapanır

. Bu öğenin ortasında her zaman metin bulunabilir. Bu etiket görünürse metin sağa hizalanır.

- birkaç tek etiketten biri. Daha sonra kendi kendine çalışır. Hangi öğeyi bir satırdan diğerine yeniden düzenlerseniz düzenleyin. Görünüşe göre daha basit, erişmeyi deneyin. Bunu bir kez yazdılar, bu da benimki gibi bir, iki kez aşağı indikleri anlamına geliyor ve giriş üç tane daha.

resim

Sonraki etiket img , Tobto resmi, resmi. Kare yay açılır, görüntüye ilişkin tüm temel bilgiler içine yazılır ve ardından kapanır. Bunu demek gerekli img - bu etikettir ve kodun ortaya sığan diğer tüm öğeleri onun nitelikleridir.

Önümüze geçelim alternatif Tobto'yu anlattı. Bu aynı zamanda optimizasyon için de gereklidir. Bazen daha fazlası mevcut başlık . İmleçle fareyi görüntünün üzerine getirdiğinizde, sayfa tarayıcıda zaten açıksa bir araç ipucu görünür.

Küçükleri sitedeki bir klasöre koyup yolunu yazabilirsin, yoksa sadece yolu yazarım. Pixabay'a girdiğimde bir resim buldum, onu yeni bir pencerede açtım ve mesajı ekledim.

U tezi kaynak resmin yolu kaydedilir. Tarayıcıya, ihtiyacınız olan görüntüyü bulmak için ne yapması gerektiğini ve hangi yönde şaka yapmanız gerektiğini söylersiniz - kendiniz yazarsınız.

Metin formatı

Metnin bir kısmına özel bir stil verildiğini, örneğin bizim durumumuzda olduğu gibi farklı bir renk verildiğini belirtir. stil \u003d "renk: kırmızı" rengin kırmızı olacağını gösterir. Sarı istiyorsanız sarı, yeşil - yeşil yazın. Photoshop'taki renk kodlarını kullanabilirsiniz.

Metni kalın harflerle görmenize yardımcı olur.

---

yatay bir çizgi çizer. Yalnız ve vikoristovuetsya'da yalnızca kapalı bir görünümde. Ne yazarsın?

---

Birkaç kez, sayfa tarayıcıda açıldığında tam olarak aynı miktarda yatay çizgi göreceksiniz.

Posilannya

tarayıcıya bundan sonra ne gönderileceğini söyler. Okuyucuyu farklı bir adrese yönlendirmek istiyorsunuz. Bu etiket dil özelliğiyle birlikte gelir href \u003d "adresler" . Tarayıcının kenar çubuğunu taşıması gereken yere bir yol eklenir. Bu açıklama etiketinden sonra bir açıklama, kelime veya kelime öbeği eklenir, okuyucuya basıldığında daha ileri aktarılır. Daha sonra siz düşündükçe bir tane daha ekleyebilirsiniz, etiket kapanır .

Hikayenin ana kısmı yazıldıktan sonra etiketi kapatırsınız vücut , Böylece vücut bitti. Bugünün vikorlarında kullandıklarınızı işaret ediyorum HTML .

Html etiketleri hakkında daha fazla bilgi edinmek ve yalnızca resim değil, video eklemeyi, düğmeler, farklı formlar, listeler, paragraflar oluşturmayı öğrenmek istiyorsanız, size Evgeniy Popov'un ücretsiz kursunu verebilirim " temel HTML " Toplamda 33 ders yeni bir seviyeye ulaşmanıza yardımcı olacaktır.

Ayrıca size web sitelerinin nasıl oluşturulduğunu gösteren bir video kursu da önermek isterim. Gerçek hisse senetleri üzerine yapılan okumaların tamamı özellikle iyi. Kurs, hem henüz HTML bilmeyen yeni başlayanlara hem de HTML, CSS, prototip oluşturma, web sitesi düzenini zaten bilen ve çok iyi bilmeyenlere yöneliktir. Talimatları izleyerek daha fazla bilgi bulabilirsiniz: www.srs.myrusakov.ru/makeup

Hangisini almalıyım? Web sitesi oluşturma konusunda ücretsiz kitap ! Bu kitap ilk kez sigortalanıyor ve orada bir web sitesi oluşturuluyor. Önce tasarım hazırlanır, sonra sayfalar yazılır, program kısmı yazılır ve ardından site internette yayınlanır. Yazar her şeyi dikkatlice yorumluyor ve kitapta çok sayıda ekran görüntüsü ve illüstrasyon var. Üstelik kitabın özelliği soyut bir site yaratması değil, internette tamamen gerçek ve mevcut bir site yaratmasıdır.

Bugün, ilk defa en çok kazandığınız zamanda bile çok şey kazandınız.

Bültene abone olun i VKontakte grubu , Ayrıca şunu da öğrenin: Bir web sitesinin bir motora nasıl ihtiyacı vardır, blok düzeninin ve modüler ızgaranın ne olduğu, web sitelerinin nasıl doğru şekilde yazılacağı ve çok daha fazlası.

Yeni zorluklara ve iyi şanslara kadar!