html nedir | Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı https://www.barisozcan.net Sun, 05 Dec 2010 16:43:51 +0000 tr hourly 1 https://wordpress.org/?v=6.9.4 Web Tasarım Dersleri Cellspacing ve CellPadding Kullanımı https://www.barisozcan.net/web-tasarim-dersleri-cellspacing-ve-cellpadding-kullanimi https://www.barisozcan.net/web-tasarim-dersleri-cellspacing-ve-cellpadding-kullanimi#respond Sun, 05 Dec 2010 16:43:51 +0000 http://www.barisozcan.net/?p=766 Bu dersimizde son olarak tabloları ele alacaz tablo Cellspacing ve CellPadding uygulamasını görüp bir sonraki dersimiz artık web tasarım uygulamaları olacak.

The post Web Tasarım Dersleri Cellspacing ve CellPadding Kullanımı first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

]]>

Bu dersimizde son olarak tabloları ele alacaz tablo Cellspacing ve CellPadding uygulamasını görüp bir sonraki dersimiz artık web tasarım uygulamaları olacak.

Cellspacing

Cellspacing etiketi arkadaşlar tablo içerisinde yer alan hücreler ve tablo kenarlığı arasındaki belirlemeye yarar Cellspacing değer olarak sadece pixel yönünden değer atanabilir.

Cellspacing Uygulaması

Aşağıdaki uygulamalarda ilk örnekteki tablo Cellspacing değeri 5 ve 2. örnek olarak Cellspacing 20 değeri verecem aradaki farkı anlamak için sizde aynı uygulamayı yapın arkadaşlar aşağıdaki kodları boş bir not defteri ile yazıp farklı kaydet diyerek dosya adı tabloyukseklik1.html olarak kaydedin.<html>
<head>
<title>Web Tasarım Dersleri Cellspacing Uygulaması Ders 16 </title>
</head>
<body>

<table border=”1″ cellspacing=”5″ bordercolor=”#FF0000″>
<tr align=”center”>
<td width=”100″>Ana Sayfa</td>
<td width=”100″>Hakkımızda</td>
<td width=”100″>Ürünler</td>
<td width=”100″>İletişim</td>
</tr>
</table>

</body>
</html>

Html Cellspacing Uygulaması 5 PikselHtml Cellspacing Uygulaması 5 Piksel

2. Cellspacing Örneği

<html>
<head>
<title>Web Tasarım Dersleri Cellspacing Uygulaması Ders 16 </title>
</head>
<body>

<table border=”1″ cellspacing=”20″ bordercolor=”#FF0000″>
<tr align=”center”>
<td width=”100″>Ana Sayfa</td>
<td width=”100″>Hakkımızda</td>
<td width=”100″>Ürünler</td>
<td width=”100″>İletişim</td>
</tr>
</table>

</body>
</html>

Evet arkadaşlar örneğimizde ilkinde cellspacing değeri 5 verdik ve 2. örnek 20 verdik 2. örnekte hücrelerin tablo kenarlıklarından nasıl uzaklaştığı net görünmektedir buradaki işlem hücre ile gerçekleşti aşağıda anlatacağım işlemse sadece hücre içindeki verileri etkileyecek.

Cellpadding

Cellpadding etiketi arkadaşlar tablo hücreleri içinde yer alan yazı, resim türü içeriğimizin hücre kenarlıkları ile içeriğin arasındaki mesafeyi Cellpadding ile ayarlanabilir piksel cinsinden değer verebiliriz.

Cellpadding Uygulaması

Yukardaki gibi yine 2 örnek yapacam arkadaşlar değer olarak ilk örnekte 5 diğer örnekte 20 piksel vereceğim sizlerde not defterinizde uygulayıp deneyin.

<html>
<head>
<title>Web Tasarım Dersleri Cellpadding Uygulaması Ders 16 </title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-9″></head>
<body>

<table border=”1″ cellpadding=”5″ bordercolor=”#FF0000″>
<tr align=”center”>
<td width=”100″>Ana Sayfa</td>
<td width=”100″>Hakkımızda</td>
<td width=”100″>Ürünler</td>
<td width=”100″>İletişim</td>
</tr>
</table>

</body>
</html>

Cellpadding UygulamasıCellpadding Uygulaması

2. Örnek yukardaki örnekten tek farkı değerin 5ten 20ye çekilmesi

Cellpadding UygulamasıCellpadding Uygulaması

Evet arkadaşlar Cellpadding uygulamamızda değer arttıkça hücre içnde yer alan yazı veya resimler hücre kenarlıklarından uzaklaştığı görülmektedir.

Bugünkü dersimiz bu kadar arkadaşlar bir sonraki dersimiz ise artık proje uygulamaları olacak çerçeveler ile başlayacaz Allahın izniyle.

Gelen aramalar :

The post Web Tasarım Dersleri Cellspacing ve CellPadding Kullanımı 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-cellspacing-ve-cellpadding-kullanimi/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 Html de temel terimler https://www.barisozcan.net/html-de-temel-terimler https://www.barisozcan.net/html-de-temel-terimler#respond Mon, 22 Nov 2010 22:06:51 +0000 http://www.barisozcan.net/?p=448 Html de temel terimler

The post Html de temel terimler first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

]]>

Bu derste html’in temel terimlerini öğreneceğiz; <html> <head>…

Bir kod, ters slash işareti (/) ile başlarsa kapatılıyor demektir.

Örneğin; </html>

Kodlara geçiyorum.

  • <html> İlk ve temel etikettir. Sayfanın bir web sayfası olduğunun ispatıdır. Kapatılması gerekir.
  • <title> Başlık. Her sitenin bir başlığı olmalıdır. Bu etikete yazacağımız kelime veya kelimeler, tarayıcının sol üst köşesinde görünür. </title> ile kapatılması gerekir.
  • <head> Sitede görünmeyen, fakat çok işe yarayan bir etikettir. “title”, “meta” ve bazı scriptlerin yazıldığı bölümü temsil eder. Sitenin arama motorları tarafından tanınması için anahtar kelimeler yazılır. Ayrıca siteyi hazırlayan, farklı dil kodları gibi bilgiler yazılır. <html>den sonra açılır, <body>den önce kapatılır.
  • <meta> “head” içine yazılır. Kapatılmaz.
  • <meta name= “Description” content= “Açıklama”>: Site hakkında açıklama yazılır.
  • <meta http-equiv=”Content-Type” content=”text/ html; charset=iso-8858-9″> : Türkçe dil karakterlerin doğru görüntülenmesini sağlar.
  • <meta name= “Keywords” content= “kelime1, kelime2, kelime3”>: Bazı arama motorları, sitelerin “meta” etiketlerine göre arama yaparlar. Bu sebeple sitemizi tanımlayan veya konular hakkında bilgi içeren anahtar kelimeler girebiliriz. Yüzlerce kelime girmemiz mümkün.
  • <meta name=”Author” content=”Mazhar Mustafaoglu”> : Siteyi hazırlayan kişinin ismi yazılır.
  • <meta name=”generator” content= “Program Adı”> : Sitenin hazırlandığı programı tanımlar. WYSIWYG (What You See Is What You Get) programları bu etiketi genellikle otomatik yazarlar.
  • <body> Gövde. Tüm belge, bu etiket içindedir. Kapatılmalıdır. Etiketin içine aşağıdaki kodlar eklenebilir.
  • bgcolor= “zeminrengi”: Sayfanın zemin rengini belirler.
  • leftmargin= “0” topmargin= “0”: Sayfanın sınırlarını sabitler.
  • style= “font-family: Tahoma; font-size: 2pt; color: yellow: Yazı karakterleri, büyüklüğü ve rengi seçilir.
  • Link= “red” alink = “blue” vling = “yellow” : Link, aktif link ve ziyaret edilmiş renklerin rengini ayarlar.

    • Bu kodların birkaçı bir arada yazılabilir:

    <body bgcolor= "black" link= "blue" style= "font-family: comic sans; font-size: "pt; color: gren">

    gibi. Yazılmayan bilgiler için varsayılan ayarlar kullanılır.

  • <b> Bold, alın harf. “body” içine yazılır. Arasına yazılan harfler kalın görünür.
  • <i> Harflerin italik yazılmasını sağlar. “body” içindedir. Kapatılmalıdır.
  • <u> Altı çizgili yazdırır. “body” içindedir. Kapatılmalıdır.
  • <strong> Arasındaki metni vurgulu gösterir.
  • <br> Bir alt satıra geçmeyi sağlar. Kapatılmaz.
  • <p> Paragraf yapar. Kapatılmaz.
  • <p align= “left (veya center, right)”> : Paragrafın yerini belirler.
  • <big>: Büyük metin. Kapatılmalıdır.
  • <small> Küçük metin. Kapatılmalıdır.
  • <center> Arasındaki metni veya resmi sayfanın ortasına hizalar. Kapatılmalıdır.
  • <sup> Üs olarak yazar. Kapatılmalıdır.
  • <sub> İndisi gösterir. Metin, biraz alttadır. Kapatılmalıdır.
  • <font> Yazı özellikleri. Kapatılmalıdır.
  • <font face = “verdana, tahoma” font color = “white” font size “3”>: Verdana yazı karakterinde beyaz ve 3 punto bir yazı. Verdana desteklemeyen bilgisayarlar için alternatif olarak tahoma görünür.
  • <h1> Yazının büyüklüğünü belirler. En büyük “1”, en küçük “6”dır. Kapatılmalıdır.
  • <pre> Bu etiketin arasına yazılan her şey, yazıldığı gibi görünür. Yani boşluklar, harflerin yerleri, satır başları gibi” Kapatılmalıdır.
  • <a href> Link oluşturma. </a> ile kapatılır.
  • <a href=”www.sanalkurs.net”> : Arasına yazılan metni, belirtilen siteye link yapar.
  • <a href=”#herhangi bir kelime””> : Metni aynı sayfa içinde bir yere bağlar. Sayfada gidilmesi gereken yerin başına ise <a name=”her hangi bir kelime”> yazılır ve kapatılır.
  • <a hred=”mailto:ornek@live.com”> belirtilen adrese gönderilmesini sağlar.
  • <img src> Resim kaynağı.
  • <img src=”C:/belgeler/resimler/resim.gif”> : Bir resmi tanımlar. “Dosyalar” klasöründeki “resim.gif” dosyasını gösterir. Sayfa ile resim aynı klasörde ise sadece resmin adı “uzantısı ile birlikte- yazılır. Kapatılmaz.
  • <img src=”resim.jpg” width=”50″ height=”100″ alt=”Buraya resmin alternatif metnini yaz”> : Boyutları 50-100 pixel olan resim. Alternatif metin ise, resim açılmadığında veya Mouse ile üzerine geldiğinde görülür. Etiketin başına <p align= “center”> eklenebilir.
  • <marquee> Kayan yazı. Kapatılmalıdır.
  • <ul> Listelemeyi başlatır. Kapatılmalıdır.
  • <li> Listedeki her maddenin başına yazılır. Kapatılmalıdır.
  • <ol> Sayı sıralı liste oluşturmak için “ul” yerine kullanılır. Kapatılmalıdır.
  • <button> Buton oluşturma.
  • <button>Düğme</button> : Üzerinde “Düğme” yazan bir buton oluşturabilir.
  • <table> Tablo oluşturma. Kapatılmalıdır.
  • <table border= “0”> : Tablonun çerçeve kalınlığı.
  • <td> Tabloda hücre oluşturma. Kapatılmalıdır.
  • <tr> Hücre satırı oluşturma. Kapatılmalıdır.
  • <textarea> Metin kutucuğu oluşturur. Kapatılmalıdır.
  • <div> Div tag’leri oluşturur.

    • The post Html de temel terimler 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-de-temel-terimler/feed 0