Ara

Akademik Bilisim 2016

Asena Çavusoglu
4 Şub 2016
4 dakikada okunur

Merhaba arkadaşlar;

Bu yazımda sizlere 30 Ocak- 2 Şubat tarihleri arasında Adnan Menderes Üniversitesinde düzenlenen bu yıl ki Akademik Bilişim konferansı öncesinde verilen benim de katılıp eğitim aldığım Front-End Geliştirme Temelleri ( Web Önyüzü ) kursunda öğrendiklerimi aktaracağım. Front-End HTML, CSS ve JAVASRIPT teknolojilerinin biraraya gelmesiyle oluşur. Front-End Developer ise bu teknolojileri kullanaraK web önyüz geliştiricisi tanımını alır. Front-End Developer yazılım dili olarak Html, Css, Css Pre ( Less-Sass) , Javascript , Ajax, Haml, kullanırken frameworks olarak Boostrap, 960 Grid, AngularJS, EmberJS, JQery ve Django kullanır. Versiyon Kontrol Sistemi olarak en çok bilinen Git/Github tercih edilir. Editör için ise Sublime Text, Notepad++ , Dreamweaver ve Webstrom.

Eğitimde Front-End Geliştirme Temelleri üzerinde durularak Html,Css ve Javascript başlangıç olarak eğitim aldım. Detaylı olarak açıklama yapmak gerekirse Html nedir ne değildir? sorusuyla başladık. HTML bir proglamlama dili değildir sadece internet üzerinde web sayfası oluşturmak için kullanılan bir işaretleme dilidir. W3C yani dünya ağ birliği HTML standartları belirlemek için kurulmuştur. HTML kodlarıyla kendi başına çalışan bir program yazılamaz. HTML kodunu web tarayıcıları okur, yorumlar ve görsel hale dönüştürürler. CSS ve JavaScript ile beraber kullanıldığında HTML kodlarıyla görsel ve dinamik web siteleri yaratılabilir.

Html komutları <html> bu şekilde küçüktür işaretleri arasına yazılır ve </html> bu şekilde kapatılır.

Html etiketleri yani tag ler şu şekildedir.

<html>

<head>

Buraya <title> Başlık ismi verilir </title>

Buraya linkler gelebilir <link rel="stylesheet" href="style.css">

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

</head>

<body>

Buraya <h1> <p> <a> <br> <ul> <li> <img> gibi belgeyi tanımlayıcılar gelir.

</body>

</html>

<h1> Başlık </h1>

<p> Paragraf </p>

<br> Boşluk

<a> Sayfadan diğer sayfaya bağlama işlemi href ile hedef gösterici </a>

<ul> Sırasız liste </ul>

<li> Liste öğesi tanımlama </li>

<i> Yazıyı italik görüntüleme </i>

<b> Yazıyı kalın şekilde görüntüleme </b>

<img> Fotoğraf ekleme </img>

<strong> Yazıyı koyu şekilde baskın olarak gösterir. </strong>

<form> Form oluşturmak için yazılır </form>

<input> Form öğesi içinde giriş kontrollerini belirtmek için kullanılır. </input>

Gibi tag ler en çok kullandığımız etiketlerdir.

<div>

İçine her türlü içerik girilebilir. Amacı sayfayı bloklara bölmektir. Block bir elementtir.

- float

- top, left, right,

- height (35% veya 35px)

- padding-left, padding-right)

- margin (margin-top, margin-bottom, margin-left, margin-right)

- border

- background

- text-align özelliklerle birlikte kullanılır ve stil dosyasında tutulur.

</div>

Css ise kısaca açıklama yapmak gerekirse stil dosyasıdır. Yani html kodlarımızın web sayfasında estetik görünmesi için bazı dokunuşlar yapar.

selector { property : value; property: property: value; } şeklinde yazılır.

Selector : h1, h2, h3, p

Property : color, font-size

Value: red, 14px

gibidir.

Çok sık karşımıza çıkan diğer Css kodlaması için gerekli olanlar ise id ve class tır.

ID: Aynı özellikleri taşıyan element bulunamaz ve CSS kodlamasında kendinden öncekini tanımlar. "#" şeklinde css stil dosyasında yazılır.

Class: Elementi tanımlarız ve birden fazla element aynı sınıfın içinde olabilir. Farklı elementler de aynı sınıfa ait olabilirler. Sayfa içinde aynı sınıfa ait birden fazla eleman bulunabilir. CSS kodlamasında sınıflar "." işareti ile tanımlanır.

Bazı Css özellikler kısaca şunlardır.

background-color : red
background-image : url ( ../img/dosya.jpg )
background-repeat: no-repeat ( arka planı tekrar etme )
background-position : right top ( arka planı sağ üste yerleşir )

border-style : kenar stili
dotted
dashed
solid

border-color : kenar rengi

border-width: kenar genişliği şeklinde

margin: dış boşluk

margin-top : üst
margin-right : sağ
margin-bottom : alt
margin-left : sol şeklinde

padding : iç boşluk
padding-top : üst
padding-right : sağ
padding-bottom : alt
padding-left : sol şeklinde

height and width : yükseklik ve genişlik

max-height: 500px

min-width: 100px

text align : center

text decoraiton : underline

text-transform : uppercase

line-height : 10px

word-spacing : 3px

font family : "Times New Roman", Times, serif;

font-size : 12px

a: hover { color: hotpink; }

a:link - a normal, unvisited
a:visited - user has visited
a:hover - a link when the user mouses over it

display: elemanın nasıl görüntüleneceğini belirtir. Şu şekildedir.

display : inline

display : block

display : none

Block elementler

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

Inline elementler

<span>
<a>
<img>

Inline elementlere padding verilmez. Bunun için display : inline -block

ÖRNEK

li { display: inline;

} yazdığımızda elemanımız olan <li> yatay menü şeklinde sıralanıyor.

visibility: hidden; Elemanı gizler fakat düzenini de aynı zamanda etkiler.

position: konum özelliği

static : Statik konumlandırılmış öğeleri üst, alt, sol ve sağ özellikleri etkilenmez. relative : Göreceli olarak konumlandırılmış bir elemanın üst ayarı, sağ, alt ve sol özellikleri normal pozisyonuna göre ayarlanır. fixed : Sabit pozisyonda olan bir elementtir. Sayfa kaydırılsa bile aynı yerde kalır. absolute : Konumlandırılmış bir öğe sayfa kaydırıldığında aynı yerde kalmaz. Top ve left komutları otomatik olarak 0 değeri alır ve bir üstteki div’i de position:relative; olarak değerlendirir.

z-index : 1; Eleman, ya da arkasında, diğerlerinin önüne yerleştirilen bir elemanın yığın sırasını belirtir.

Kullanımı doğru şekilde doğru yerde yapılmasına örnek verebileceği iki özellik var bunlar float ve clear.

Clear : Kayan elementlerin düzenleri konusunda kontrol ve düzeltme işlevi görür.

Float : Elemente kaydırma özelliği verir.

float: right

clear : left

Css de form oluşturmak için input için width değeri veririz.

Eğer sadece bir giriş stili istiyorsak