web tasarım html dersleri | Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı https://www.barisozcan.net Mon, 13 Dec 2010 20:13:59 +0000 tr hourly 1 https://wordpress.org/?v=6.9.4 Html de sağ tık engelleme nasıl yapılır https://www.barisozcan.net/html-de-sag-tik-engelleme-nasil-yapilir Mon, 13 Dec 2010 20:13:59 +0000 http://www.barisozcan.net/?p=1019 Ziyaretçilerin sitenizde seçim yapmasını engellemek son derece kolaydır. Yapmanız gereken şey ondragstart ve onselectstart durumlarını false yapmanızdır.

The post Html de sağ tık engelleme nasıl yapılır first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

]]>

Ziyaretçilerin sitenizde seçim yapmasını engellemek son derece kolaydır. Yapmanız gereken şey ondragstart ve onselectstart durumlarını false yapmanızdır.

Bunu aşağıdaki şekilde yapabilirisiniz…
ondragstart = “return false”
onselectstart = “return false”

Önemli olan nokta bu işlemi nerede yapacağımızdır.
Bu kodları sayfamızda <body… tagının içerisine eklememiz gerekmektedir.

<body ondragstart="return false" onselectstart="return false">

The post Html de sağ tık engelleme nasıl yapılır first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

]]> 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 html dersleri -3 hizalama https://www.barisozcan.net/web-tasarim-html-dersleri-3-hizalama https://www.barisozcan.net/web-tasarim-html-dersleri-3-hizalama#respond Sun, 28 Nov 2010 19:12:39 +0000 http://www.barisozcan.net/?p=548 htmlde yazdığınız bir yazı, resim, yada tablolar aksini belirtmedikçe ekranın soluna ve üstüne yaslanmış olarak karşımıza çıkar bizde bunu ekranda düzgün görüntü alabilmek için hizalama komutlarını kullanacağız.

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

]]>

Merhaba değerli arkadaşlar geçenki dersimizdi yazıların biçimlendirmeyi ele almıştık neydi bunlar bold, italik , altı çizili, üstü çizili yazmak ve satır ve parağraf komutlarını görmüştük inceleme imkanı bulamayan arkadaşlar aşağadaki linkten bakabilir.

Web Tasarım Dersleri Yazılar ve Biçimlendirme Ders2

Bugünkü dersimizde ise hizalamaları ele alacağız arkadaşlar her tasarımda mutlaka kullanmanız gereken bir özelilik.

Hizalama arkadaşlar htmlde yazdığınız bir yazı, resim, yada tablolar aksini belirtmedikçe ekranın soluna ve üstüne yaslanmış olarak karşımıza çıkar bizde bunu ekranda düzgün görüntü alabilmek için hizalama komutlarını kullanacağız.

Geçen Derste paragraf etiketinden bahsederken <p></p> etiketini görmştük şimdi bu etiketin ayrıca farklı amaçlar içinde kullanabileceğini göreceğiz.

P etiketi ile align parametresi ortak kullanılabilir. Align parametresi sayfa içerisinde yazımızın konumunu ayarlamak için kullanıcaz nedir bu konum sağa yasla sola yasla yada ortala şeklinde bir parametredir arkadaşlar.

<p align=”left”> Yazıyı Sola Hizalamak için Kullanılır.

<p align=”center”> Yazıyı Ortalamak İçin Kullanılır (Ortalama sadece ekran sağ soluna göre ortalamadır)

<p align=”right”> Yazıyı Sağa Yaslamak İçin Kullanılır

Hemen Bir Uygulama Yapalım Arkadaşlar

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title> Webmasteryolcu İle <a title="Web Tasarım Dersleri" href="http://www.webmasteryolcu.com/web-tasarim-dersleri.html" rel="nofollow">Web Tasarım Dersleri</a></title>
</head>
<body>
<p align="left"> Webasteryolcu.com Yazımız Sola Yaslanmış</p>
<p align="center"> Webasteryolcu.com Yazımız Ortalanmış Durumda</p>
<p align="right"> Webasteryolcu.com Yazımız Sağa Yaslanmış</p>
</body>
</html>

Yukardaki kodları not defterimizle yazıp farklı kaydet diyerek dosya adı: hizalama.html olarak masaüstüne kaydediyoruz arkadaşlar.

Hata yapmadığınız sürece aşağıdaki göründeki tasarımı elde etmelisiniz şimdi bu örnekle bolca uygulmalar yapınız arkadaşlar.

Html Yazıları Hizalama KoduHtml Yazıları Hizalama Kodu

Bugünkü dersimizde bu kadar arkadaşlar bir sonraki dersimiz yatay çizgiler ve çizgilerin boyutlandırılması renklendirilmesi ile ilgili olacaktır.

Gelen aramalar :

The post web tasarım html dersleri -3 hizalama 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-html-dersleri-3-hizalama/feed 0 web tasarım html dersleri -2 başlıklar https://www.barisozcan.net/web-tasarim-html-dersleri-2 https://www.barisozcan.net/web-tasarim-html-dersleri-2#respond Sun, 28 Nov 2010 19:02:34 +0000 http://www.barisozcan.net/?p=545 html yazılar ve yazıalrı biçimlendirme ile başlıkları görecez nedir bu biçimlendirme

The post web tasarım html dersleri -2 başlıklar first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

]]>

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

  • Başlıklar
  • Kalın Yazılar (Bold)
  • İtalik (Yatık Yazılar)
  • Altı Çizili Yazılar

Bu dersimizde yukardaki örnekleri ele alıp uygulama yapacağız arkadaşlar sizlerde farklı örneklerle bol bol uygulama yapmanızı tavsiye ederim.

Başlıklar

Html kodlarda başlık etiketi arkadaşlar sayfa içerisinde kullanacağınız yazıların boyutlarını belirlemek için kullanabileceğimiz kodlar.

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> barış özcan H1 Başlık</h1>
<h2> barış özcan H2 Başlık</h2>
<h3> barış özcan H3 Başlık</h3>
<h4> barış özcan H4 Başlık</h4>
<h5> barış özcan H5 Başlık</h5>
<h6> barış özcan 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>barış özcan Koyu Yazı</b>    <br>
<u>barış özcanAltı Çizili</u>  <br>
<i>barış özcanYatık Yazı</i>   <br>
<s>barış özcanÜstü Çizili</s>  <br>
<b><u><i>barış özcanKoyu 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.

The post web tasarım html dersleri -2 başlıklar 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-html-dersleri-2/feed 0