Bu döngü ile bir dizi ders açmak istiyorum. HTML. Bu kararı, kullanıcılara sıfırdan web siteleri oluşturmayı öğretmeyi denemek istediğim için verdim. Bu düşünce bir süredir kafamda. Yalnızca nereden başlayacağınız, HTML ile veya doğrudan motorun kurulumuna ve daha fazla yapılandırmasına devam edeceği sorusu ortaya çıktı.
Ancak motoru öğrenerek başlarsanız, HTML bilmeyen bazı kullanıcılar dışarıda kalacaktır. Bu nedenle, temel bilgilerle başlamaya ve yeni başlayanların bile neyin ve nasıl olduğunu anlayabilmesi için yapmaya karar verdim.
Peki HTML nedir?
Kısaltmanın kendisi şu anlama gelir: H idrar T harici M arkip L uygulama ( hiper metin biçimlendirme dili).
Ve basitçe söylemek gerekirse, HTML tarayıcıya belirli bir görüntünün nasıl görüntüleneceğini söyleyen özel bir biçimlendirme dilidir. internet sayfası. Yani, metnin hangi yazı tipinde gösterileceği, öğelerin hangi sırayla oluşturulacağı, hangi öğelerin altı çizili olarak gösterileceği vb. Ve tarayıcının kendisinde belirtilen kurallara göre tarayıcı tarafından hangi öğeyle karşılaşılacağına bağlı olarak , bu öğe görüntülenecektir. Ancak, bu kurallar daha sonra değiştirilebilir, ancak bundan sonraki derslerimde bundan bahsedeceğim. css.
Bir örneğe bakarak başlayayım basit web sayfası, hangisi olabilir. Şimdi dikkatinizi bunların veya bunların ne olduğuna odaklamamalısınız. etiketler. Her şeyin bir zamanı vardır, yeni başlayanlar için, kodda her şeyin nerede olduğuna ve bunların tarayıcıda görüntülenenlerle nasıl ilişkili olduğuna dikkat edin. Örnek bir HTML belgesi düşünün:
hayatımın bir günü
Konser hazırlığı
Bugün zor bir gün olduğu için erken uyandım. Ne de olsa bugün yüz seyirci önünde bir konserde performans sergilemek zorundayım. Ve her şeyin yolunda gittiğinden emin olmak için prova programını tekrar etmem gerekiyor.
Tekrarlamak
Her şey aksamadan gitti. Ekibimizden hiç kimse ritmi kaybetmedi ve ortaya çıktığı gibi herkes boşuna endişelendi.
Konser
Davulcumuzun temposunu kaybettiği bir an olduğunu düşünmeme rağmen, herkes harika performans sergiledi. Ama ustalıkla durumdan çıktık.
Başlangıç olarak, bu metni bir metin düzenleyicide yazmanız gerekecek (bence en uygunu not defteri++) ve dosyayı diskinizde bir yere index .html olarak kaydedin. Kaydedilen dosyaya çift tıklamak, buna benzer bir sayfa açacaktır.
Lütfen etiketlerin kendilerinin görüntülenmediğini, ancak aralarında bulunan içeriğin görüntülendiğini unutmayın. Ve buradan, etiketlerin HTML'de bir tasarım öğesi görevi gördüğü sonucuna varabilirsiniz.
Kaynak koduna bakın. Fark etmiş olabileceğiniz gibi, "Bir" kelimesinden önce küçük bir girinti var. Ancak tarayıcı bunu dikkate almadı, sanki hiç var olmamış gibi sessizce yuttu. Ayrıca, kelimelerin arasına çok fazla boşluk koymaya çalışırsanız, tarayıcı tarafından hepsi tek bir boşluk olarak algılanacaktır - HTML'nin böyle bir özelliği vardır.
Ve işte başka bir ipucu - HTML kodu yazarken, diğerlerinde iç içe olan etiketleri girintilemeye alışın. Örneğin, başlık ve gövde etiketleri html etiketi içinde iç içedir. Bu yüzden bu etiketleri yazarken buna göre girinti yapmayı unutmayınız. Genellikle iki boşluk veya sekme ile yapılırlar - bu zaten bir zevk meselesidir. Bu neden gerekli? Şimdi, belgenin yukarıda örnek olarak verdiğim o küçük parçasında çok fazla bilgi yok, bu yüzden orada kafa karıştırmak oldukça sorunlu. Ancak, sayfada çok sayıda iç içe öğe varsa, bu büyük kodda kaybolmaktan ve belgenin şu anda hangi bölümünde bulunduğunuzu anlamaktan daha kolay olmayacaktır. O yüzden hemen iyi bir üsluba alıştırmak daha iyidir, o zaman bunu kendin anlayacaksın ve gelecekte sana iyi bir hizmet sunacaktır.
Bir HTML belgesinde olması gereken en gerekli minimum etiketi belirtmeye de değer. Bu kısımdan bahsediyorum:
Ancak bu kısım orada olmasa bile, çoğu tarayıcı tüm bunlara parmaklarıyla bakacak ve yine de sayfanızı gösterecektir. Ancak, bir kişinin çok fazla etiketi atladığı böyle anlamsız bir kodlama stili, kötü bir yazma stilidir, bu nedenle tüm bu öğelerin yine de sayfanızda olması önerilir. Aksi takdirde, bu diğer tarayıcılarla uyumluluk sorununa yol açabilir ve bunun sonucunda sitenizin görünümünü ve bunun sonucunda da trafiği etkileyebilir.
Ayrıca, bir HTML belgesine yorum yazabilirsiniz - bu yalnızca size yönelik hizmet bilgisidir. Bunlar genellikle sizin için bir hatırlatma görevi gören veya dikkat etmeniz gereken bazı önemli notlardır. Yorumlar tarayıcı tarafından işlenmez ve bu, kullanıcının onları görmeyeceği anlamına gelir. Genellikle şu şekilde yazılırlar:
Şimdi yukarıdaki örneğimizin hangi etiketinin neyden sorumlu olduğunu kendimiz bulmaya çalışalım.
Etiket html html kodunun çıktısının başladığı anlamına gelir.
kafa– servis bilgileri bölümü. Diğer şeylerin yanı sıra, burada Başlık, tarayıcı penceresinin başlık çubuğundaki metinden sorumludur. Bu bölüm, tarayıcıya bu sayfa hakkında anlatmak istediğimiz bilgiler olarak da değerlendirilebilir.
gövde- belgenin ana kısmı başlar.
h1- Başlık.
h2- alt yazı.
p- paragraf.
Muhtemelen hepsi bu! Bu sizin ilk HTML belgenizse, tebrikler! Evet, istediğimiz kadar harika görünmüyor. Ama yine de, üzerinde çalışabileceğimiz malzememiz var. Ve sonraki derslerde her şey daha da ilginç olacak ve yavaş yavaş çalışmaya değineceğiz. Basamaklı Stil Şablonu (css).
- < Назад
Yorum yapmak için kayıt olmanız gerekmektedir.
Merhaba!!! HTML'nin temellerinin zirvesini fethetmeye karar verdiğiniz için çok mutluyum ve bu doğru seçim. Sonuçta, ilk web sitenizi oluşturmadan önce HTML'nin temellerini bilmeniz gerekir. Ayrıca, bir web sitesinde birden fazla HTML kodlaması ile uğraşmak zorunda kalacaksınız. Derslere bir göz atmanızı şiddetle tavsiye ederim. Yeni başlayanlar için HTML blogumda ve bu kursu tamamladıktan sonra kolaylıkla bir web sayfası, hatta bir web sitesi oluşturabileceğinizi garanti ediyorum.
Başlayalım! Başlamak için, öğrenelim
HTML- (İngilizceden. H ypert harici İşaretleme Dili) bir hiper metin biçimlendirme dilidir. İlk olarak 1991-1992 yıllarında İngiliz bilim adamı Tim Berners-Lee tarafından geliştirilmiştir. HTML, yalnızca web sayfalarındaki metin, resim ve tabloları işaretlemek içindir. Artık JavaScript, VBScript gibi ek programlama dilleri HTML belgesine eklenebiliyor.
HTML bir programlama dili değildir, yalnızca metin belgelerini işaretlemek için tasarlanmıştır.
HTML öğrenmek için sadece bir Tarayıcınız ve Standart Not Defteriniz olması gerekir veya .
Standart Not Defteri'ni açmak için bilgisayarınızda aşağıdakileri yapın: Başlat => Programlar => Donatılar => Not Defteri
.
HTML kodu yazmayı kolaylaştıran programlar duyduysanız (Microsoft FrontPage, Adobe Dreamweaver), öğrenmenin bu aşamasında bunları kullanmanızı önermem. Elinizi standart bir not defterine veya Notepad++ metin düzenleyicisine doldurun ve bu kursu tamamladığınızda hızlandırma programlarını kullanabileceksiniz. Blog güncellemelerime abone olun ve Microsoft FrontPage, Adobe Dreamweaver'ın nasıl kullanılacağını okuyun.
Daha iyi anlaşılması için bir örnek hazırladım. Çizimi dikkatlice düşünün:
Açıklama.
1). Her HTML belgesi şu satırla başlar:
"https://www.w3.org/TR/html4/loose.dtd">
Bu satır ile tarayıcıya HTML belgemizin 4.01 uluslararası spesifikasyonuna uygun olduğunu söyleriz. Bu satır sayesinde sayfanız aynı görünecek.
Bu satırı ezberlemek gerekli değildir, HTML belgesi onsuz çalışacaktır. Bu sadece ne olduğunu bilmeniz için.
2). ve belgenin başı ve sonudur.
3).
ve- belgenin başı. Ek servis etiketleri genellikle buraya eklenir, bu etiketlerden biri4).
Bu başlık tarayıcıda görüntülenecektir:
arama dizininde veya Google'da.
5).
ve- belgenin gövdesi.
Belgenin içeriği, örneğin metin, resimler, tablolar, müzik, filmler vb. burada bulunur. Sonraki derslerde bir belgenin gövdesine müzik, metin, resim ekleme hakkında daha fazla bilgi edineceksiniz.
Not:
Sık sık "etiket" kelimesini okumak ve duymak zorunda kalacaksınız.
Etiket parantezler arasındaki her şeydir.< >. Örneğin:
,
,
Sayfa bir tarayıcıda görüntülendiğinde etiketler görünmez, ancak görüntülendiğinde tarayıcıda parantez içinde olmayan her şey görüntülenecektir.
Birçok etiket vardır ve bunların farklı amaçları vardır.
Kapatılması gereken etiketler var. Örneğin,
açık etiket
ve etiketi kapattığınızdan emin olun
Ve singleton etiketleri var, örneğin, bu
.
Etiket, metin, resim ve diğer etiketleri içerebilen bir tür kapsayıcıdır...
○ Doğru açılış ve kapanış etiketlerine dikkat edin:
<тэг1> <тэг2> <тэг3> ... тэг3> тэг2> тэг1>
İlk açtığımız etiket en son kapatılır, ikincisi sondan bir önceki vb.
○ İşte yanlış bir açılış ve kapanış etiketleri dizisi örneği. Bu siparişte web sayfasında hatalar olabilir:
<тэг1> <тэг2> <тэг3> ... тэг3> тэг1> тэг2>
hata oldu<тэг1>ve<тэг2>
.
Kod yazarken dikkatli olun.
Hazır kod.
Bir web sayfasının bitmiş standart gerekli HTML kodu bu şekilde görünür.
Yukarıdakilerin hepsinden çok az veya neredeyse hiçbir şey anlamadıysanız cesaretiniz kırılmasın. İkinci derste daha fazla pratik olacak ve her şeyi elle yazabilecek ve HTML'nin nasıl çalıştığını görebileceksiniz.
Bir sonraki derse git
Bu makale, HTML biçimlendirme dili için kapsamlı bir kılavuz olduğunu iddia etmemektedir. HTML'nin temellerini açıklar - bu teknolojinin temel ilkeleri, kavramları ve tanımları, hangisinde ustalaşarak HTML kodlamasını öğrenmeye kolayca geçebilirsiniz.
Dersi çalışmak için arşivi gerekli dosyalarla birlikte indirin.
HTML bir işaretleme dilidir belgeler. Doğru telaffuz - HTMEL.
Hiç Word belge düzenleyicide veya benzeri ofis uygulamalarında çalıştınız mı? Muhtemelen bu tür düzenleyicinin metin düzenleme, öğeleri düzenleme, resim ekleme vb. için zengin özelliklere sahip olduğunu biliyorsunuzdur.
Neden, kelime işlemciler hakkında HTML hakkında bir makale yazıyorsunuz? Ama neden. Bir ofis editörünün ne olduğunu anlarsanız? Bu, belgeleri düzenlemek ve görüntülemek için bir uygulamadır.
Buradaki anahtar kelime belge . Yani, bazı programlarda, bu durumda bir ofis düzenleyicide bir belge oluşturur, düzenler ve görüntüleriz. Böyle bir belgeyi Notepad gibi basit bir metin düzenleyicide açarsak, birçok garip sembol ve işaret göreceğiz. Bu semboller karmaşası insanlık için anlaşılmaz ama bilgisayarlar için anlaşılabilir. Bu iç dil sayesinde, Word belgesi düzenleyicinin kendisinde belirli bir yapı ve görünüm kazanır ve belge, yerinde biçimlendirilmiş metin ve resimlerle tüm ihtişamıyla karşımıza çıkar.
HTML bir işaretleme dilidir tarayıcı için. Word "burası tarayıcı ve belge HTML sayfasıdır. Bu, web belgelerinin biçimlendirme dilini programlama dilleriyle karıştırmamak için anlaşılması gereken HTML teknolojisinin temelidir. Adı kendisi için konuşur. - HTML yardımıyla biz işaretlemek, öğenin, görüntünün veya metnin sayfada nerede gösterileceği ve hangi sırayla yan yana görüneceği.
Evet, ofis uygulamalarında basit yazma ve metin biçimlendirmenin programlama ile hiçbir ilgisi yoktur. Ancak dikkatli okuyucu önemli bir ayrıntıyı fark edecektir - bir kelime işlemcide görsel düğmeler ve menüler kullanarak metin ve resimleri yazıyoruz, düzenliyoruz ve biçimlendiriyoruz, ancak HTML kodu neden elle yazılıyor? Neden bir belge için işaretleme yazmanın bu kadar çok teknik detayını inceleyelim?
Aslında, Word'e benzer şekilde HTML sayfaları oluşturabileceğiniz ve düzenleyebileceğiniz birçok düzenleyici vardır. Yani kaynak HTML kodu bizim için gizlidir ve içine girmeyiz.
HTML için bir tür Word. Bu görsel editörlerin adı:
WYSIWYG editörler - Wşapka Y sen S ee İ s Wşapka Y sen G et. Yani, Rusçaya çevrilirse: gördüğümüz şey, elde ettiğimiz şeydir.
Ben onlara "serseriler" diyorum. Bu, fonetik olarak doğru olmasa da, bu buluşun yararsızlığını açıkça göstermektedir. Yeni başlayanlar, ilk sitelerini oluşturmak için genellikle bu tür editörleri kullanır. Tabii ki, bu uygundur - ilk bakışta, nahoş ve karmaşık şeylerin etiketleri, tasarım stilleri ve diğerlerini incelemenize gerek yoktur. Editörün kendisi, eylemlerimizi otomatik olarak HTML koduna dönüştürecektir.
Ama dedikleri gibi, hiçbir şey olmuyor. Daha spesifik olarak, bu yaklaşımın çok ciddi dezavantajları vardır. Arka arkaya herkesin HTML sayfaları tasarlamak için görsel düzenleyicileri kullanmasını engelleyen nedir? Gerçek şu ki, bu şekilde oluşturulan sayfalar genellikle çok fazla ek koda, anlamsal açıdan çok fazla hataya sahiptir. Şimdi, elbette, yüksek hızlı İnternet bağlantısı ile ilgili hiçbir sorun yok ve 400 kb ile 100 kb arasındaki sayfa boyutundaki fark hız için önemli değil, ancak optimize edilmiş ve doğru yazılmış bir HTML kodu birçok sorunu ortadan kaldırıyor ve çok şey sağlıyor. avantajlar, yani:
- Yetkili HTML kodunun, arama motoru optimizasyonu, bir siteyi bir arama robotu tarafından tarama hızı üzerinde olumlu bir etkisi vardır. Burada üretilen kilobaytlarca kod kabul edilemez ve hatta zararlıdır;
- WYSIWYG düzenleyicisi tarafından oluşturulan HTML kodunda birçok anlamsal hata vardır. Yani, böyle bir düzenleyici tarafından oluşturulan etiketler, örneğin listeleri kullanmanın gerekli olduğu yerlerde başka amaçlar için kullanılır.
- , düzenleyici ihtiyacımız olmayan başka bir etiket oluşturacaktır. Elbette editöre bağlıdır, ancak burada WYSIWYG araçlarını kullanarak bir metin alanında basit metin düzenlemeyi değil, site oluşturmak için karmaşık çözümleri kastediyoruz.
- Çok sayıda gereksiz etiket oluşturulur ve belgenin yapısı şişirilir. Diyelim ki böyle bir programda bir öğeyi önce sağa, sonra sola, sonra merkeze taşıdınız - her eylem kaynak HTML kodunda bir iz bırakır. Editör bir programdır ve sonuç olarak tam olarak ne elde etmek istediğinizi bilemez, belgenin tarayıcıdaki tüm olası davranışlarını dikkate alarak tonlarca kod üretir.
- Kural olarak, HTML kodunun görsel tasarımı için editörler hızla eski hale gelir. Ve profesyonellerin ilgisizliği nedeniyle, genellikle desteklerini kaybederler ve geliştirmede dururlar. Ve HTML gelişiyor. Vuzivugi dışında her şey gelişir. Buna göre yeni özelliklerin ve çözümlerin dahil olacağı doğru ve güncel kod üretemezler.
- Bu tür projeleri desteklemek ve geliştirmek ilahi bir cezadır. Kalıpları kullanmaktan ve kodu yeniden kullanmaktan hiç söz edilemez.
Yani HTML'yi sadece kalemlerle yazacağız. HTML'nin görsel olarak düzenlenmesi için yeterli araçlar henüz icat edilmedi ve ortaya çıkmaları pek mümkün değil. HTML biçimlendirme dilini öğrenmesi ve anlaması kolaydır ve HTML kodu yazmak için birçok otomasyon aracı vardır, ancak diğer derslerde bununla ilgili daha fazla bilgi vardır.
WYSIWYG editörüyle biraz uğraştıktan sonra, genç HTML guruları bu nafile görevi bırakıp yoluna devam ediyor.
HTML belge yapısı
Sınıflar için Sublime Text düzenleyicisini indirip kurmanızı tavsiye ederim. HTML öğrenmenin ilk aşamalarında ruh halinizi bozmak istemiyorsanız, Windows'ta yerleşik HTML düzeni için Not Defteri'ni kullanmanızı şiddetle tavsiye etmiyorum.
HTML belge kodunu manuel olarak yazmaya karar verdik, yani dizgi. HTML düzeni- bir HTML belgesi oluşturma süreci. Sıradan insanlarda ve bilgili çevrelerde - sadece düzen. Herhangi bir belgenin bir yapısı ve belirli yapım kuralları vardır. Kod hangi öğelerden oluşur, HTML'nin yapısı nedir?
Bilgisayarda bir başlangıç şablonu oluşturalım - dosya index.html, bir düzenleyici ile açın ve aşağıdaki kodu içine yapıştırın:
HTML belgelerinin uzantısına sahip olduğunu unutmayın. .html.
Yani, örnekten sırayla.
- belge türü (doküman türü)
Bu yapı her zaman belgenin başında belirtilir, böylece tarayıcı belgeyi oluştururken hangi HTML sürümünün kullanıldığını doğru bir şekilde "anlar".
HTML'nin sürekli gelişmesi nedeniyle, herhangi bir yazılım ürünü gibi birkaç sürümü vardır. Geçerli HTML sürümü beşincidir ve örnekte verilmiştir. doktip güncel.
Prensipte, belge türlerini incelemenin bir anlamı yoktur, çünkü HTML5'in piyasaya sürülmesiyle bu tasarım standart hale geldi. Sitenin düzenini oluşturmaya her başladığınızda belgenin başına yapıştırmanız yeterlidir.
- belgenin başlangıcı
Doctype'dan sonra gördüğümüz ilk etiket .
HTML etiketi- bir HTML belgesinin yapısal biçimlendirme birimi. HTML kodu, etiket adı verilen yapı taşlarından oluşur. Her etiketin kendi işlevi vardır ve sonuçta HTML biçimlendirme dilinin incelenmesi, tam olarak etiketlerin ve belgedeki özelliklerinin incelenmesidir.
HTML öğrenmenin ilk bakışta göründüğü kadar zor bir iş olmadığını belirtmek isterim. Belge işaretlemede kullanılan etiketleri öğrenmek beyne çok fazla yük bindirmiyor.
Böylece, belge işaretlemesi etiketiyle başlar. ve bir kapanış etiketi ile biter. Diğer etiketleri veya öğeleri içeren her etiket kapatılmalıdır kapanış etiketi. Örneğin, , ,
, vb.Etiket belgenin tüm yapısını içerdiği ve geri kalan öğeleri sardığı için gereklidir.
Etiket
Sonraki, görüyoruz etiket henüz bizim için net olmayan diğer unsurları içeren . Diğer öğeleri içerir - bu, öğelerin veya etiketlerin yapının açılış ve kapanış etiketleri arasında olduğu anlamına gelir:
<тег>içerik veya diğer etiketlerтег>
Etiket
bir HTML belgesinin meta bilgilerini, yani belgenin kendisinde görüntülenmeyen, ancak önemli olan ve belgenin nasıl görüneceğini ve davranacağını büyük ölçüde belirleyen bilgileri depolamak için tasarlanmıştır.Bu etiket belgede gereklidir.
Etiket - belgenin başlığı
başlık
meta etiket
meta etiket- bir sayfa hakkında yapılandırılmış veri sağlamak için tasarlanmış özel bir etiket. Meta etiketler en çok bir etikette kullanılır
. Meta etiketler yapı olarak isteğe bağlıdır HTML belge.Favicon (favicon)
Belgeye favicon görüntüsü içeren bir dosya ekler. Favicon (favicon)- tarayıcı sekmesinde belge adının yanında görüntülenen minyatür bir simge. Favicon, png, jpg, ico, gif gibi çeşitli biçimlerde olabilen 16 x 16 (veya 32 x 32) piksellik bir grafik dosyasıdır. ico formatı geleneksel olarak kullanılır. Animasyonlu favoriler, animasyon içeren gif dosyalarıdır. Örneğin, yeni bir mesaj geldiğinde VKontakte'de animasyonlu bir favicon izleyebilirsiniz.
CSS belge stilleri
Bir CSS belgesine bir HTML stil dosyası ekler.
css - basamaklı HTML belgesinin stili. Etikette bulunan her etiket
Not: mülk href tasarımlar harici dosyanın konumunu belirtir. Örneğimizde, dosya stil.css ve favicon.ico, dosyayla aynı klasörde bulunur index.html. kapanış etiketi yoktur.
Etiket
Etiket
.
В нашем примере подключается внешний файл script.js , который находится в той-же папке, что и основной файл index.html.
Итак, друзья, мы рассмотрели основные элементы, которые используются в теге
чаще всего. Кроме этих элементов, для есть ряд других, более специфичных и не обязательных.Тело aka body
Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.
Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега
будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.Тег
может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное - понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.
Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.
Например, не:
Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.
Итак, теперь мы знаем некоторые основы HTML : какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному - а именно, печенькам.
Практическое задание по HTML верстке
Если вы еще не скачали архив с примерами, сделайте это . Для примера, можете подглядывать в файл example.html, который также находился в архиве.
- Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
- Создайте первоначальную структуру документа с доктайпом, тегом , содержащим
и и перейдите к редактированию содержимого тега ; - Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.
На этом урок по основам HTML окончен, в следующем уроке "Основы CSS " мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.
До новых встреч, друзья!
Приветствую вас на страницах моего блога. HTML – это простой язык разметки, с помощью которого создаются веб-страницы. Я сказал что он простой, чтобы вы не пугались его изучения. Язык html для начинающих подходит просто идеально – намного сложнее с нуля сразу освоить какой-нибудь язык программирования, а вот html реально намного проще.
В этой статье я хочу подсказать вам, как наиболее быстро и эффективно изучить этот язык, чтобы уже через месяц-два вы отлично его знали. Думаете, невозможно? Я начал изучение html в конце марта. В конце мая я уже без проблем знал 90% нужных для работы тегов.
Как выучить язык бесплатно?
Конечно, для наиболее быстрого изучения вы должны найти несколько полезных сайтов. Во-первых, вам пригодится справочник html. Им пользуются даже матерые программисты, потому что удержать в голове десятки тегов и их атрибутов просто невозможно.
Из справочников я могу посоветовать вам – htmlbook . Это реально крутой сайт, на котором собраны все теги, показан результат их работы с подробным описанием. Но справочник это лишь дополнительный инструмент, наибольшего эффекта можно добиться при реальной практике.
Интерактивные курсы
И тут я говорю об интерактивных курсах. Это возможность писать код и сразу видеть, как он отображается. На курсах вам будут давать задания. Сначала простые, например, превратить текст в заголовок или сделать таблицу. Потом – сложнее. В конце концов вы обретете понимание того, что можно делать с помощью HTML. Если вы думаете, что за это нужно платить, то ошибаетесь.
– это замечательный сайт с курсами по html и css. Первые 16-18 курсов бесплатно! Если вы захотите продолжить обучение и получить доступ к платным, то придется платить 300 рублей в месяц или 1800 в год. Лично я отдал 300 рублей, прошел за месяц все платные курсы и получил от этого много пользы.
Важность записей
Еще один совет от меня – записывайте! Записывайте всю новую и важную для вас инормацию. Не записав вы рискуете так и не закрепить в памяти нужные знания. Лично у меня на полке лежит три общих тетради, практически полностью исписанных и время от времени я заглядываю в них, когда забываю то или иное свойство.
Параллельное изучение html и css
HTML – это всего лишь одна веб-технология, с помощью которой формируется структура и разметка веб-страницы. За оформление в сайтостроении полностью отвечает CSS. Эти языки нужно изучать одновременно, потому что они взаимодействуют друг с другом.
Самостоятельная практика
Набравшись кое-каких знаний вы можете практиковаться самостоятельно. Как это делать? Попробуйте сверстать статью с картинками, таблицу, вложенный список, простой двухколоночный макет страницы или что-то еще. Вы должны практиковаться, потому что это единственный способ быстро заложить в мозг понимание того, как все работает. Лучше всего, конечно, в этом вопросе найти себе учителя, но за это, скорее всего, вам придется заплатить.
Уроки от команды webformyself
Webformyself – замечательный интернет-портал, который предоставляет кучу информации по сайтостроению. На их сайте вы можете найти много бесплатных статей по HTML, CSS и верстке сайтов, но также ими выпущены платные видеоуроки, цель которых максимально быстро донести до вас полезные знания.
В конце концов, у вас должна быть цель, по которой вы изучаете эти веб-технологии. Обычно это делают для того, чтобы научиться самостоятельно верстать макеты сайтов. Если у вас тоже есть такая цель, то отличным вариантом для вас будет приобретение доступа к премиум-урокам на сайте webformyself.com . В итоге вы можете получить не только доступ к урокам по HTML и CSS, но и много других. Например, по JavaScript и WordPress.
Там есть полезные уроки, в том числе хотел бы отметить возможность сверстать свой первый макет по урокам. Это очень важно, потому что вы получите хорошую практику, после чего сможете набивать руку уже самостоятельно, пытаясь верстать другие макеты для сайтов, которые находите в сети.
За сколько можно выучить языки?
В среднем, HTML и CSS можно выучить очень быстро, при правильном подходе. Например, у меня на это ушло несколько месяцев. Если знать, где брать знания, то процесс изучения можно ускорить в несколько раз.
Хорошие сайты с полезными материалами я вам дал – дальше ваше дело. В принципе, вышеперечисленные ресурсы являются наилучшими в интернете. Например, курсы от Htmlacademy прошли более ста тысяч человек, а на обновления Webformyself подписаны больше 87 тысяч людей.
Я решил уделить больше внимания новичкам, желающим приобрести знания в области сайтостроения. На это меня подтолкнула моя преподавательница, которая допускала уж очень много ошибок в методичках к лабораторным работам. Я бы с удовольствием бы глянул на тот ресурс, с которого была взята учебная инфа, и оставил бы там пару строк своего мнения. Но сейчас не об этом. В своей первой лекции я расскажу о том
Из чего состоит структура HTML-документа
Тег
сообщает о том, что начинается структура html-документа,
— что заканчивается. Между тегами
хранится в большей части информация для браузера и поисковых систем. В тегах
же естесственно говорит о том, что информация для пользователя заканчивается.
Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:
— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
А это мой первый сайт.
Результат можно посмотреть .
— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
- align — Определяет выравнивание линии. Может принимать значение left, center, right.
- color — Задаёт цвет линии.
- noshade — Рисует линию без трехмерных эффектов.
- size — Задаёт толщину линии.
- width — Задаёт ширину линии.
Код с использованием тега
:
А это мой первый сайт.
Визуальный пример находится .
Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:
Cуществуют и другие одиночные теги (,
,
Altın Numaralar Güzel bir telefon numarası nasıl satılır
Kripto para madenciliği: basit kelimelerle nedir
En iyi dizüstü bilgisayar işletim sistemi: Eksiksiz inceleme
Sınıf arkadaşlarından müzik indirmek için programlar Sosyal ağ sınıf arkadaşlarından üzücü bir şarkı indirin
Yandex tarayıcısının mobil versiyonu