web tasarım dersi | Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı https://www.barisozcan.net Fri, 03 Dec 2010 18:23:05 +0000 tr hourly 1 https://wordpress.org/?v=6.9.4 Html Dersleri Resim Boyutlandırma ve Alt Parametresi https://www.barisozcan.net/html-dersleri-resim-boyutlandirma-ve-alt-parametresi https://www.barisozcan.net/html-dersleri-resim-boyutlandirma-ve-alt-parametresi#respond Fri, 03 Dec 2010 18:23:05 +0000 http://www.barisozcan.net/?p=729 Html Dersleri Resim Boyutlandırma ve Alt Parametresi

The post Html Dersleri Resim Boyutlandırma ve Alt Parametresi first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

]]>

Bu dersimizde yapacaklarımız ise resim boyutlarını ayarlama ve alt parametresi (Alternatif text) kullanımını göreceğiz

Width ve Height

Width parametresi arkadaşlar resmin sayfa içindeki genişliği ayarlamaya yararki sadece resimlerde değil tabloların boyutlandırmasındada width parametresini kullanacağız.

Height Parametresi ise width parametresi aksine yükseklik ayarını boyutunu belirlememizi sağlar

Resim Boyutlandırma Uygulaması

Tüm arkadaşlar olarak aynı işlemi görebilmek için aynı resmi kullanalım arkadaşlar aşağıdaki resmi farklı kaydet diyerek bilgisayarınızın masaüstüne gul.jpg olarak kaydedin arkadaşlar ve aşağıdaki kodları boş bir not defteri açarak başlıyoruz yazmaya ve yazınca farklı kaydet diyerek dosya adı resimboyu.html olarak masaüstüne kaydedin yani resimin olduğu yere kaydedin.

gülBu resmi farklı kaydet diyerek masaüstünüze gul.jpg olarak kaydedin

<html>
<head>
<title>Web Tasarım Dersleri Html resim Ekleme Ders8</title>
</head>

<body>
<img src=”gul.jpg” width=”300″ height=”250″ />
</body>
</html>

Yukardaki işlemi özetliyim arkadaşlar img src=”gul.jpg” resim ekleme kodu ile gul.jpg isminde bir resim eklemek istediği belirttim width=”300 diyerek genişlik 300 olsun height=”250″ yükseklik 250 olsun dedim ve hata yapmadığınız sürece aşağıdaki görüntüyü elde edersiniz.

Html Resim BoyutlandırmaHtml Resim Boyutlandırma

Resim Boyutlandırmada Dikkat Edilecekler


size verdiğim resim 300 px genişliğinde 250 px yüksekliğinde arkadaşlar bunu sayfanızda genişlik 500 600 derseni resim bulanık olur kalita bozulur onun için boyutları fazla aşmadan çalışmalısınız arkadaşlar.

Resimlere Alt Parametresi Ekleme

Alt parametresi (Alternatif metin demektir) arkadaşlar aslında zorunlu bir kod değildir kulanırsanız avantajlarınız olur nedir bu avantajlar Resimleriniz google resim aramada yer alır ayrıca bir iyaretçi kaynağı sayılır resimlerin üzerine maosla gelince alt parametresi görülür resim hakkında kısa bilgi verilmiş olur.

Alt parametresi işleyişini görmek için yukarda verdiğim resmin üzerine maosla gelin göreceksiniz şimdi birde uygulama yapalım aşağıdaki gibi resim ekliyoruz yine ve alt parametreimizi kullanıyoruz arkadaşlar alternatif metin ne isterseniz yazabilirsiniz.

Aşağıdaki kodları yazıyoruz ve dosya adı altparametre.html olarak masaüstüne kaydedin.

<html>
<head>
<title>Web Tasarım Dersleri Html Resim Alt Parametresi Ders8</title>
</head>

<body>
<img src=”gul.jpg” width=”300″ height=”250″ alt=”Webmasteryolcu İle Dersler” />
</body>
</html>

Html Alt Parametresi EklemeHtml Alt Parametresi Ekleme Resime Dikkat ediniz

Bugünkü dersimizde bu kadar değerli arkadaşlar bir sonraki dersimizde son olarak resimleri işleyecez ne görecez derseniz resimlerin farklı klasörde yayınlanması ve resimlerin hizalanmalarını görüp resimleri geçicez

The post Html Dersleri Resim Boyutlandırma ve Alt Parametresi first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

]]> https://www.barisozcan.net/html-dersleri-resim-boyutlandirma-ve-alt-parametresi/feed 0 web tasarım dersleri – html terimleri https://www.barisozcan.net/web-tasarim-dersleri-html https://www.barisozcan.net/web-tasarim-dersleri-html#respond Sat, 27 Nov 2010 21:58:02 +0000 http://www.barisozcan.net/?p=541 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 […]

The post web tasarım dersleri – html terimleri first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

]]>

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

  1. Html kodlama yaparken büyük küçük harf kullanmak serbesttir.
  2. Html kodlarda TÜRKÇE karakter kulalnılamaz arkadaşlar. Nedir Bunlar (ç, ğ, ı, ö, ş, ü) Şeklinde sıralayabiliriz.
  3. Html Komutlar mutlaka < ve > işaretleri arasına yazılmalıdır bunlara etiket denir?

Html Sayfalarda veriler (yazı, resim vs ) yukrda 3. numarada blirttiğim etiketler arasında yazılır. Bir kaç etiket dışında açılan etiketler mutlaka kapatılmalıdır.

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.

Gelen aramalar :

The post web tasarım dersleri – html terimleri first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

]]> https://www.barisozcan.net/web-tasarim-dersleri-html/feed 0