TEMEL Html ve Html Sayfa Bölümleri Ders 1
Bu ilk dersimiz arkadaşlar 2 günde bir yayınlayacağım dersleri takip öğrendiklerinizi mutlaka farklı örneklerle bol bol uygulama yapmalısınız.
Html nedir ne işe yarar konusuna yanıtımı bu sayfada kafanızı karıştırmamak için aşağıdaki linkte yer verdim.
Html Nedir?
Temel Html nedir html amacı nedir html ne için ve nerelerde kullanılır nasıl kullanılır onuda yine aşağıdaki linkten inceliyoruz.
Evet arkadaşlar Html Nedir ve Temel Html hakkında bilgi aldıktan sonra html ile ilgili çok önem arz eden mutlaka aklınızda tutmanız gereken bilgilere geçeceğim dediğim gibi mutlaka aklınızda bulunsun not alın.
HTML KOMUTLARI VE HTML KODLARI YAZIM KURALLARI
- Html kodlama yaparken büyük küçük harf kullanmak serbesttir.
- Html kodlarda TÜRKÇE karakter kulalnılamaz arkadaşlar. Nedir Bunlar (ç, ğ, ı, ö, ş, ü) Şeklinde sıralayabiliriz.
- Html Komutlar mutlaka < ve > işaretleri arasına yazılmalıdır bunlara etiket denir?
Etiket kapatmak için < işaretinden sonra / işaretinin konulması gereklidir diyoruz e buna bir örnekle devam ediyorum.
Örnek: <html> ilk etapta açtım İçerik Ekledim ve Şimdi Kapatıyorum </html> ve son olrak kapattım arkadaşlar.
Etiketlerin İç İçe Kullanılması:
Html Kodlar her zaman iç içe kullanılabilir arkadaşlar. Dikkat etmeniz gereken tek husus en içteki etikketten başlayarak açtığımız etiketi kapatmamız gerekir. Buna bir örnek vererek devam ediyorum arkadaşlar sizede uygulama yaptıracağım.
Örnek:
<head>
<title> Webmasteryolcu İle Web Tasarım dersleri </title>
</head>
Yukardaki örnekte arkadaşlar iç etiket <title> ……..</title> dir ve ilk önce o kapanıp sonra </head> kapatılmıştır.
Etiketleri Parametreler İle Kullanma
Html etiketlerimiz arkadaşlar parametreler ile zenginleştirerek işlevlerini özelliklerini daha artırmak mümkündür.
Dikkat etmeniz gereken parametreler etikketten sonra kullanılıyor olmsıdır.
Parametre yazıldıktan sonra = işareti yazılır ve parametre değerini eklemek için “ ” çift tırmaklar arasına kullanacağımız para metre değeri verilir. Parametrelere bir örnek vermek gerekirse örnekte sayfamızın arkaplanına resim ekleyecem.
Örnek: <body background= “resim.jpg”>
Yukarda yaptığım örneği size özetliyim arkadaşlar < etiketimi açtım ve body background ile sayfama arkpalan resmi ekleyeceğimi belirttim başka amaçla kullanılmaz o etiket not alın arkadaşlar. = işareti ile parametre kullanacağımı belirttim ve “resim.jpg” ilede değerini verdim.
Ben ne dedim arkaplan resmi kullanacam dedim değerim ne olacak resim uzantısı olacak resim.jpg dedim ben illede jpg uzantıli resim olması şart değil gif ve png uzantılı resimde kullanabilirsiniz resimin adı resim olmak zorunda değil hasanda olabilirdi.
HTML SAYFA BÖLÜMLERİ VE İLK SAYFAMIZI UYGULAMA
<html></html>
Html sayfalarında standart arkadaşlar sayfanın <html> ile başlayıp sayfanın sonunda </html> ile bitmesidir aslında koymasanız olurmu olabiliyor html hata kaldıran bir dildir ama istediğiniz gibi olmayabilir.
<html>
Tüm Kodlar
</html
Yukardada belirttiğim gibi tüm kodlar <html> ile </html> arasında olmalı
<head></head>
Bu etiketler arasına sayfa hakkında bilgiler eklenir arkadaşlar ilerleyen derslerde detayla anlatacağım.
Metalar ile ilgili konuları ilerleyen derslerde detaylı ele alacam arkadaşlar şimdi kafanız karışmasın.
<body></body>
Html sayfamızın gövde kısmıdır arkadaşlar yukarda anlattığım title ve head tarayıcı ve arama motorları içindi body ise artık ziyaretçizin göreceği içerik ve gövde kısmıdır.
İlk Web Sayfamızı Yapıyoruz
Ne demiştik Temel Html kısmında html kodlama için gerekli olan araçlarda en basitinden Notepad (Not defteri demiştik ) her bilgisayarda olan bizde ilk etapta kendimizi not defterinde geliştirecez.
Açıyoruz not defterimizi Notepad Kısayoldan Çalıştırma
Not Defteri açma ve Kısa Yoldan Açma.
Not Defterimizi açtıktan sonra arkadaşlar aşağıda benim yazdığımı aynen yazın sakın olaki kopyala yapıştır yapmayın yazın arkadaşlar eliniz alışsın hafızanızda kodlar yer etsin tüm derslerimde kopyala yapıştır yapmayn yazın.
<html>
<head>
<title>Webmasteryolcu Temel Html Dersi</title>
</head>
<body>
Web sitesi yapmak zor olmadıdığını tüm dünyaya göstereceğim Derslerime çalışarak.
</body>
</html>
Yazdıktan sonra arkadaşlar dosya menüsünden farklı kaydet tıklayın ve açılan kayıt sayfasında
Dosya adı: ders1.html yada htm olarak kaydedebilirsiniz masaüstüne kayt ediyoruz.
htm yada html aynıdır html sayfalarının 2 iki uzantısı vardır htm yada html
Masa üstünde internet explorer şeklinde sayfanızı göreceksiniz yaptıklarınızı görmek için ona çift tıklıyoruz ve aşağıdaki örneği elde etmelisiniz.
(alıntı)
Web Tasarım Dersleri Yazıları Ve Biçimlendirme Ders 2
Bir önceki dersimizde ne görmüştük arkadaşlar ve aynı zamanda ilk dersimizdi okuma fırsatı bulamayanlar bu derse başlamadan ona göz atarsa daha keyifli olur derslerin takibi arkadaşlar.
Bir Önceki Dersimiz: Temel Html ve Html Sayfa Bölümleri Ders1
Devamında bugünkü dersimiz ise html yazılar ve yazıalrı biçimlendirme ile başlıkları görecez nedir bu biçimlendirme derseniz
Bir Önceki Dersimiz: Temel Html ve Html Sayfa Bölümleri Ders1
Devamında bugünkü dersimiz ise html yazılar ve yazıalrı biçimlendirme ile başlıkları görecez nedir bu biçimlendirme derseniz
- farklı örneklerle bol bol uygulama yapmanızı tavsiye ederim.
Html kodlarda başlık etiketi arkadaşlar sayfa içerisinde kullanacağınız yazıların boyutlarını belirlemek için kulla
- Başlıklar
- Kalın Yazılar (Bold)
- İtalik (Yatık Yazılar)
- Altı Çizili Yazılar
Başlık Değerleri standart olarak 1 den 6ya kadar farklı değerle istediğimiz büyüklükte başlığı seçebiliriz yalnız ve yalnız dikkat etmeniz gereken yazı editörlerinde rakam büyüdükçe yazı karakteri her zamn büyür 12 olan bir karakteri 18 yaparsanız mutlaka karakter büyür html başlık değerlerinde ise aksine rakam büyüdükçe karakter küçülür arkadaşlar.
1 den 6 ya kadar başlık değerlerimizin olduğunu belirttik bu durumda 1 en büyük başlık 6 ise en küçük başlık olacağı muhtemeldir şimdi başlıkları html kodlamada kullanımını görelim arkadaşlar.
Html Başlık Kodlarının Kullanımı
<h1> Webmasteryolcu H1 Başlık</h1>
<h2> Webmasteryolcu H2 Başlık</h2>
<h3> Webmasteryolcu H3 Başlık</h3>
<h4> Webmasteryolcu H4 Başlık</h4>
<h5> Webmasteryolcu H5 Başlık</h5>
<h6> Webmasteryolcu H6 Başlık</h6>
Evet arkadaşlar şimdi uygulama zamanı açıyoruz not defrerimizi ve yukardaki başlık kodlarını kopyala yapıştır yapmadan yazıyoruz ve farklı kaydet diyerek dosya adına basliklar.html adını verip masaüstüne kaydediyoruz hata olmadığı sürece aşağıdaki görüntüyü almalısınız.
Html Başlıklar
Başlıklar Nerede Kullanılır?Bu tamamen size kalmış arkadaşlar bir ipucu vermek gerekirse yukarda kırmızı ile yer alan Başlıklar Nerede Kullanılır? yazısı aslında bir başlıktır bu şekilde istediğinizi yapabilirsiniz.
Html Kalın (Bold) Yazmak
Html tümüyle eylem bekleyen bir dildir arkadaşlar siz belirtmedikçe brşey yapmaz siz tek tek belirtmek zorundasınız yazınızın bir kısmı yada hepsini kalın (bold) yazmak isterseniz bunun için <br>Yazılar</b> etiketini kullanacağız arkadaşlar
Html İtalik (Yatık) Yazmak
Yazılarınıı yatık (italik) yazmak içinde arkadaşlar ihtiyacımız olan etiket <i>Yazılar</i> olarak kullanabiliriz.
Html Altı Çizili Yazılar Yazmak
Yazılarınızda altı çizili kısım yada tümünü yapmak isterseniz yukardaki kodlara benzer şekilde <u>Yazılar</u> kullanabiliriz.
Html Üzeri Çizili Yazılar
Pek kullanışlı olmasada bilmenizde fayda var bir yazının üzerini çizmek için <s>Yazılar</s> etiketini kullanabiliriz.
Html Satır Atlama
Normal yazı yazarken satır sonuna gelip entere basıp alt satıra insekte htmlde bu faydası olmaz onun için satır atlanacak yere <br> kullanacaz.
Paragraf Oluşturma
Paragraf oluşturmak için <p>Yazılar</p> kodları arasında kalan yazılar paragraf şeklinde görüntülenir </p> etiketi kapandıktan sonra yazılacak yazılar satır başından görüntülenmeye devam eder arkadaşlar.
Biçimlendirmelerin Uygulaması
Yukarda anlatmış olduğum etiketlerin html kodlarda uygulaması sizlerde boş bir not defteri açıp verdiğim kodları aynen farklı örneklerlede deneyerek bolca uygulayın.
<b>Webmasteryolcu Koyu Yazı</b> <br>
<u>Webmasteryolcu Altı Çizili</u> <br>
<i>Webmasteryolcu Yatık Yazı</i> <br>
<s>Webmasteryolcu Üstü Çizili</s> <br>
<b><u><i>Webmasteryolcu Koyu Altı Çizili ve Yatık Yazı</i></u></b>
Kodlarımızı yazdıktan sonra farklı kaydet diyerek bicimler.html olarak masaüstüne kaydedin arkadaşlar hata olmadığı sürece aşağıdaki resimdeki görüntüyü alırsınız.
Html Yazı Biçimlendirme
Bugünkü dersimiz bu kadar arkadaşlar diğer dersimizde daha keyifli hale gelecek kodlamalar emin olun Allaha emanet olunKaynak: http://www.webmasteryolcu.com/
