web tasarım dersi öğrendiklerim ve uygulamalar by Mitat Savas https://padlet.com/mitatsavas9/bykrp6jkb2e6 en-us 2017-10-16 18:00:00 UTC 2024-11-23 22:29:06 UTC hello@padlet.com Site Şablonu mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/189089023 Seçtiğim Sitenin Şablonu]]> 2017-09-19 20:07:16 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/189089023 Seçtiğim Sitenin Renkleri mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/189510953 Arka Plan Beyaz Yazılar Siyah kullandım]]> 2017-09-20 19:19:35 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/189510953 Seçtiğim Sitenin Görünümü mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/189511434 orta menü büyük ve karışık bütünlük yok göze hitap yok]]> 2017-09-20 19:20:52 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/189511434 maliyet mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/189512306 2017-09-20 19:23:03 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/189512306 KENDİ TASARIMIM mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/189514612 BİR TEKNOLOJİ SİTESİ 

]]> 2017-09-20 19:29:36 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/189514612 web tasarım mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/191670554 ilk web uygulamam]]> 2017-09-27 13:59:38 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/191670554 öğrendiklerim mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197505413 burda şablon çıkarmayı öğrendik excel üzerinden bir yeri seçip içini boşalt dedikten sonra şablonumuzu sıralı oluşturup ekran görüntüsü aldık....

]]> 2017-10-16 18:12:36 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197505413 araştırma ödevim mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197508718 Bankacılık işlemleri, vergi ödeme, trafik cezası ödeme, alışveriş yapmak, iş başvurusunda bulunma, sosyal ağlara kaydolmak, okul ve ders kaydı, ders notları ve bunun gibi bir çok işlem internetten yapılabiliyor. Doğal olarak bazı kişisel bilgileri de bu aşamada kullanmak durumundayız.

 uyulması gereken birkaç kural!

  • İyi bilinen, güvenilir sitelerden işlem yapın.
  • Başka bir internet sayfası üzerindeki ya da e-posta ile gelen bağlantılardan değil de doğrudan internet adresi yazılarak alışveriş sitesine bağlanın.
  • Her türlü sahte site tehdidine karşı dikkatli olmalısınız. Örneğin bankalardan geldiğini iddia eden şüpheli e-postalar aldığınızda hemen bankanızın çağrı merkezini arayıp durumu bildirmelisiniz.

Alışveriş, interaktif bankacılık gibi işlemlerde

  • İnternet cafe gibi internetin ortak kullanıldığı alanlar yerine kendi bilgisayarınızı kullanın.
  • Ödeme sayfasının güvenli (https’li) site olduğu mutlaka kontrol edin.
  • Ödeme yaparken kişisel bilgilerinizi (Kullanıcı adı, hesap numarası veya şifre gibi) veya kredi kartı bilgilerini girerken sanal klavye kullanın.
  • Internetten yaptığınız ödemeleri mutlaka kredi kartı ekstrenizden kontrol edin.
  • Alışverişlerinizde sanal kredi kartı kullanmaya çalışın ve bu kartın limitini kontrol edin.
  • İnternet bankacılığı için kullandığınız parolanızı banka çalışanları dahil kimseyle paylaşmayın.
]]> 2017-10-16 18:18:00 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197508718 Web sitesi gerekli bilgiler mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197513195 İsmail hocamızın da anlattığı gibi 
 Web sitesi taslağı oluşturulurken dikkat edilmesi gereken bazı özellikler vardır.  Bütünlük Web sitemiz, ana sayfasından iç sayfasına, kullanılan yazı tiplerinden renklere ve resim boyutlarına kadar birbirine benzeyen bir şekilde olmalıdır. Site içerisinde kullanılan dil aynı olmalıdır.  Güvenirlik Hazırlayacağımız web sitesi kullanıcılarda güven hissi uyandırmalıdır. Her açtıkları sayfayla beraber yeni reklam sayfaları açılıyorsa, her sayfa farklı renklerden ve farklı yazı tiplerinden oluşuyorsa, iletişim bölümü yok ya da iletişim bilgileri (adres, telefon, e-posta) eksik ise internet kullanıcıları bu site hakkında şüphe duyarlar. Sitemizde yayınladığımız metinler bize ait olmayıp başka internet sitelerinden alınmış ise kullanıcı için bizim sitemiz güvenilir olmayacaktır. Kendimize ait olmayan bütün yazılarda kaynak belirtmemiz sitemizi daha güvenilir yapacaktır. Güncellik Hazırladığımız web sitesindeki bilgileri güncel olmalıdır. Eski kullanılmayan bilgileri gerekirse sitemizde bir bölümü hazırlayarak orada tutmalıyız. Bağlantı verdiğimiz sayfaların çalıştığından emin olmalıyız. ]]> 2017-10-16 18:25:10 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197513195 kodları mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197984603 not defteri üzerinden ilk html kodlarını yazmaya başladık not defterini açıp şu kodları yazdığımızda...
<html>
<head> ilk web sayfam mitat savaş</title>
</head>
<body>
</body>
</html>
reimdeki içerik çıkıyor kaydederkende farklı kaydet ilkwebsayfam.html yazdığımız zaman explorer tarayıcısı üzerinden sitemiz açılıyor...
<body bgcolor="blue">....</body>siteye arka plan rengi verir <body background="resim.jpg">...</body>arkapaln resmi verir....]]> 2017-10-17 19:04:57 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197984603 html temel etiketlerini öğrendik mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197987070 öncelikle html etiketi nedir...
Bir siteye girildiği zaman bir sitenin temelleri html üzerine kurulur
  Browser:chrome,firefox,opera,gibi web sayfası görüntüleyici programların genel adıdır.
 web sayfalarında görsel düzenlemeler içn kullanılan ve tasarımın temelini oluştıran bir dildir.dillere ihtiyaç duyar yorumlayıcı program bu kodları işleyerek karışı kod yapısından uzak anlayabileceğimiz bir şekilde sunar....]]> 2017-10-17 19:10:04 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197987070 html iskeleti mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197990886 <html>
<head>
<title></title>
</head>
<body>
      .
      .
  içerik
      .
       .
</body>
</html>

]]> 2017-10-17 19:18:08 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197990886 **ÖNEMLİ NOT** mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197992203 İLK AÇILAN ETİKET SON KAPATILIR
SON AÇILAN ETİKET İLK KAPATILIR]]> 2017-10-17 19:20:38 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197992203 META ETİKETLERİ mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197993172 bu etiketler türkçe karakter sonunu ortadan kaldırmak ve türkçe karakter desteği sağlamak için kullanılır...
sıklıkla kullandığımız etiketler şunlardır....

<meta> etiketi veri hakkında bilgiler verir.

Bu etiket HTML belgesi hakkında meta verileri sağlar. Meta verileri tarayıcıda gözükmezler.

Meta etiketleri genellikle sayfanın description(açıklama), keywords(anahtar kelimeler), author(sayfa yazarı), last modified(son değiştirilme tarihi) ve diğer meta verilerini tanımlamak için kullanılır.

Meta verileri tarayıcılar (sayfa yüklenirken nasıl görüntüleneceği), arama motorları (indexleme ve anahtar kelimeler) veya diğer web servisleri tarafından kullanılırlar.
özetlersek aşağıdaki gibidir

]]> 2017-10-17 19:22:50 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/197993172 haftasonu yaptığım örnek uygulamalar mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/198392061 2017-10-18 18:02:04 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/198392061 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/198398439 2017-10-18 18:13:50 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/198398439 uygulamam mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199667667 2017-10-23 16:33:45 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199667667 listeleme etiketleri mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199669789 <ol> :Ordered (sıralı) liste oluşturmak için kullanılır. Alt alta başında 1,2,3 olacak şeklinde.

<ul> :Unordered (sırasız) liste oluşturmak için kullanılır. Alt alta başında madde işaretleri olacak şekilde.

<li> :Listenin her bir öğesini oluşturmak için kullanılır.

Konunun daha iyi anlaşılması için örnekler üzerinden ilerleyelim.
1-Sıralı liste örneği:


12345678 | <p>Meyveler</p> <ol><li>Armut</li><li>Elma</li><li>Portakal</li><li>Muz</li></ol>

2-Madde işaretli liste örneği:


| <p>Sebzeler</p> <ul><li>Kabak</li><li>Marul</li><li>Lahana</li><li>Domates</li></ul>
]]> 2017-10-23 16:37:49 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199669789 örnek uygulamam mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199672475 2017-10-23 16:42:31 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199672475 uygulama görüntüsü mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199672914 2017-10-23 16:43:20 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199672914 metin görünüm düzenleme etiketleri mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199677563 bugün derste yazıların büyük küçük paragraf verme alta kaydırma eğik italik yazma altı çizili yazmaları ve<FONT>ETİKETİNİ ÖĞRENDİK aşağıda uygulamalarımı notepad üzerinden göstereceğim

]]> 2017-10-23 16:51:13 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199677563 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199677668 derste alt alta düzenli düzensiz listelemeyi öğrendik <ul>ile açılır </ul>ile kapatılır

]]> 2017-10-23 16:51:23 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199677668 uygulamam mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199681154 2017-10-23 16:57:34 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199681154 html olarak mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199681517 burda ise font demek kelimeyi metini sadece bir kısmının rengini değiştirmektir #FF0000 yazan ise fireworks programından aldığım resim kodudur.yazdığımız zaman istedeğimiz renklere uygun fontumuzu yazabiliriz

]]> 2017-10-23 16:58:12 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/199681517 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208269556 bugün derste köprü oluşturma bi diğer adıyla bağlantı oluşturabilemyi öğrendim.
HTML kodlarını sayfa içi bağlantıda kullanırız.

Bağlantı eklerken açılacak olan sayfanın veya dosyanın osyanın açılacağı pencereyi belirlemek için target kullanılır. 

E-posta adresine de bağlantı oluşturulabilir.
E-posta adresine bağlantı oluşturmak için;
<a href="mailto: e-posta adresi"></a> kullanılır.

]]> 2017-11-17 19:23:52 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208269556 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208282819 bugün derste tablo oluşturma ve tabloları ögredim.
bir tablo oluşturuken <table> etiketi ile başlayıp  </table>
etiketi ile biter.
sablolar satır ve sütunlardan oluşur.satır ve sütunların kesiştiği kutuya ise hücre adı verilmektedir.

<table>,etiketinde;
border,bordercolor,bgcolor,background,width,height,colspan,rowspan,cellspacing ve cellpadding adlarına sahip parametreler bulunmakta ve kullanılmaktadır.

]]> 2017-11-17 19:53:00 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208282819 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208284092  bugün derste form oluturmayı ve formları ögrendim.
Formlar sayesinde kullanıcının da aktif olacağı dinamik web sayfaları hazırlayabilmeyi öğrendim.
action,formdan girilen bilginin nereye gideceğini belirler.

method,formdan girilen bilginin hangi yöntem ile göndereceğini belirler.

<imput> etiketi form içerisinde bilgi almak için kullanılır.kullanılacak bazı parametreler vardır bu parametreler şunlardır;

type,girilecek olan elemanın türünü belirlemek için kullanılır.

src,bir resim dosyası kullanılmış ise görüntülenmesi istenen resim dosyasının adresini belirlemek için kullanılır.

size,metin kutusunun boyutunu (genişliğini)belirlemek için kullanılır.

disabled,veri girişini engellemek için kullanılır.]]> 2017-11-17 19:56:17 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208284092 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208286153 bugün derste form nesnelerini ögrendim.bir form içerisinde metin kutuları,radyo düğmeleri,onay kutuları,metin alanları,açılır menüler gibi elemandan istenilir.
checkbox,hazırlamakta olduğunuz formun onay kutuları eklemek için kullanılır.

radio,bu düğmeler,kullanıcının verilen seçeneklerden sadece bir tanesini seçebileceği durumlar için kullanılmaktadır.

text,formda tek satırlık yazı yazılabilecek alan eklemek için kullanılır.]]> 2017-11-17 20:02:11 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208286153 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208287337  bugün derste <iframe> etiketini ögrendim.
<iframe> etiketi hazırlamakta olduğumuz sayfanın sayfanın herhangi bir yerinde başka bir sayfa veya döküman görüntülemek istediğimiz zaman kullanılabilen bir iç çerçeve oluşturmaya yarayan etikettir.]]> 2017-11-17 20:05:23 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208287337 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208288999 bugün derste çoklu ortam araçları ve stil şablonlarını ögrendim.
resim eklemek için <img src>etiketi kullanılır.
width,eklenilecek olan resmin pixel cinsinden genişliğini gösterir.

height,eklenilecek olan resmin pixel cinsinden yüksekliğini gösterir.

border,klenilecek olan resme bir çerçeve çizilip kalınlığını belirmek için kullanılır.

sayfalara ses araçları ekleyerek sayfanın daha çarpıcı olması sağlanılabilir.
sesi arka plan olarak ekleyebiliriz sayfa yüklendiği anda ses dosyası arka planda  çalmaya başlayacaktır.

bir web sayfasında istediğiniz herhangi bir video dosyasını görüntüleme işlemi ses dosyası ekleme işlemi ile aynıdır.]]> 2017-11-17 20:09:50 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208288999 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208341496 bugün derste css temellerini ögrendim.css,açılımı 'cascading style sheet' olan ve dilimizede stil şablonları olarak yerleşmiştir.

css'nin söz dizimi iki bölümden oluşur.Bu bölümler;seçici ve bildirimdir.
bildirim blogu süslü parantez ile açılır ve kapanır.

class,irden fazla ögeye uygulanır ve birden fazla kullanılabilir.
class olarak belirlediğimiz ismin önüne . nokta koymamız gerekir.

ID,yalnızca bir ögeye atanır ve bir kez kullanılırlar.
ID olarak belirlediğimiz isimin önüne # koymamız gerekir

stil şablonlarını nasıl uygulayacağımızı,nereye yerleştirmemiz gerektiğini belirleyen üç adet yöntem vardır.
yerel ,global ve bağlantılı kullanım alanıdır.]]> 2017-11-18 06:35:47 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208341496 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208342399  bugün derste css birimlerini öğrendim.bu birimler göreceli ve kesin olabilirler.

göreceli uzunluk birimi,em,ex,px ve % birimleri  göreceli ölçü birimleridir.

kesin uzunluk birimleri,bağlılık göstermeyen birimin tam olarak belirtildiği uzunluk birimidir.
in;inç'i ifade etmektedir,1 inç=2,54 cm'dir.]]> 2017-11-18 07:01:55 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/208342399 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/213378925 2017-12-05 16:34:18 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/213378925 ünivertsite sitem mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/217092852 2017-12-18 20:17:53 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/217092852 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/217093315 2017-12-18 20:19:42 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/217093315 sitemizi dreamwiever üzerinden tablo halinde yaptık harici css de çalıştım mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/217093425 2017-12-18 20:20:06 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/217093425 mitatsavas9 https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/229784654 2018-02-08 19:35:39 UTC https://padlet.com/mitatsavas9/bykrp6jkb2e6/wish/229784654