DESCRIPTIONS

denticode

Turkish

0

Javascript Kodlarını Veya Javascript Dosyasını HTML Dosyasına Ekleme

Javascript kodlarını HTML dosyasına eklemenin iki yolu vardır:

  • Direkt HTML dosyası içerisine yazabiliriz. HTML dosyası içine yazacaksak, kodları script etiketi içinde yazıyoruz. document.write örnek olması açısından kullanılmıştır, kafanızı karıştırmamalıdır. Dokümana yazdırmak için kullanılır.
  • Ayrı bir Javascript dosyası oluşturarak, bunu bir bağlantı ile HTML dosyasına bağlayabiliriz. Bunun için, HTML dosyamıza aşağıdaki gibi bağlantıyı belirten etiketi giriyoruz (src, javascript dosyamızın konumunu belirlerken, main.js ise javascript dosyamızın adıdır. Dosyamızın adıni istediğimiz şekilde belirleyebiliriz).

Kodları HTML dosyasında istediğimiz bölgeye yerleştirebiliriz.

denticode

Turkish

0

Javascript Nedir ve Javascript ile Neler Yapılabilir?

Javascript, uzunca bir süredir sadece tarayıcıda (Chrome, Firefox, Safari vb.), yani client tarafında çalışan ve web site içeriğini hareketli hale getiren bir script dili olarak işlev gördü. Node.js'in geliştirilmesiyle birlikte, server tarafında da işlev gören bir dil haline geldi.

Tıpkı insanların diğer insanlarla anlaşabilmesi için bir dile ihtiyaç duymaları gibi, biz insanların bilgisayarlarla, onların işlemcileri (CPU) vasıtasıyla iletişim kurabilmesi için de bir dile ihtiyacımız vardır. Bu dil, makine dilidir. Yüksek seviyeli programlama dillerini ise makine anlamaz. Bu dillerin makine diline dönüştürülmesi gerekir. Javascript, kendi kendine çalışan programlama dillerinin aksine, başka diller ile yazılan programlar tarafından yorumlanır. Bunu sağlayan da, yukarıda bahsettiğimiz gibi node.js'tir. Node.js, Javascript kodlarını makine diline çeviren bir programdır.

Kullanım alanının genişlemesiyle birlikte Javascript ile yapılabileceklerin de sınırı bir hayli genişlemiştir. Web siteleri, dinamik web uygulamaları, oyunlar, masa üstü uygulamalar, mobil uygulamalar ve hatta robotik programlama bile yapılabilmektedir.

denticode

Turkish

0

HTML <p></p> Etiketi

Kullandığımız her <p></p> etiketiyle yeni yeni paragraflar oluşturabiliriz. Bu etiket içine almadan da ekran metin yazdırabiliriz ama yazılan metin blok halinde olur.

denticode

Turkish

0

HTML Başlık Etiketleri

Başlıklar oluşturmak için şu etiketler kullanılır:

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

Bu etiketin sayı değeri büyüdükçe oluşturduğu başlık yazı boyutu küçülecektir. Web sayfamızda ,başlığımızı vurgulamak istediğimiz boyutta ayarlamak için bunlardan uygun olanını kullanırız. Aşağıdaki html editöründe kullanım şekillerini ve örnek tarayıcı ekranında ise sonuçlarını görebiliriz.

denticode

Turkish

0

<h1></h1> Etiketi

Aşağıdaki html editöründeki kodları, ve sonrasında da örnek tarayıcı ekranındaki sonucunu inceleyin. Tarayıcı ekranındaki yazının sorumlusu <h1></h1> etiketidir. Bu etiketin içindeki yazıyı istediğiniz şekilde değiştirin ve her defasında örnek tarayıcı ekranındaki sonucuna bakın.

<h1></h1> içine yazılan yazılar, bizim web sayfamızdaki içeriğe ana başlık oluşturur. Bunu <title></title> etiketi ile karıştırmayın. O, dokümanımızın ismini veren başlıktı, onu içerikte görmeyiz. <h1></h1> ise içerikte ana başlıklar oluşturmak için kullanılır. Her makalenin, kompozisyonun ana başlığının olması gerektiği gibi bizim de web sayfalarımızda, içeriklerin ana başlığının bulunması gerekir.

denticode

Turkish

0

HTML5 Ana İskeleti ( HTML Boilerplate )

Bu içerikte, html ana şablonundaki etiketlerin ne anlama geldiklerini kısaca ifade etmeye çalışacağım.

<!DOCTYPE html> : Hazırlanan html belgesinin hangi tipte bir doküman olduğunu tarayıcıya (Örneğin Chrome, Safari, Firefox vesaire) bildirmek için kullanılır. Buradaki haliyle HTML5 tipinde olduğunu ifade ediyor. Tarayıcıya bu bildirilmezse her tarayıcıda farklı görünüm ortaya çıkabilir.

<html></html> : Diğer yazılan tüm etiketleri kapsayan ana etikettir.

<head></head> : Bu bölümde olanlar web sayfasında görülmezler. Bu etiket içine, tarayıcı ve arama motorlarına sayfamız hakkındaki bilgileri, sayfanın başlığını ve daha sonra öğreneceğimiz çeşitli linkleri giriyoruz.

<title></title> : Bu etiketle, oluşturduğumuz HTML dokümanımıza ad verilir. Bunu, sayfa görüntülenirken tarayıcının en üstünde görebiliriz.

<body></body> : Ekranda gösterilmesini istediğimiz her şey bu etiket içine yazılır. Yani içeriğin olduğu kısımdır.

Evet ana şablon etiketleri bunlardır. Her html dosyasında göreceğimiz etiketlerdir. Her html belgesinde göreceğiniz için ezberlemeye gerek kalmadan aklınıza yerleşecektir.

denticode

Turkish

1

HTML Nedir?

Bir web sayfasının kalıbını-içeriğini belirler, iskeletini oluşturur.Bir internet sitesine baktığınızda büyük başlıklar, küçük alt başlıklar, paragraflar, irili ufaklı çerçeveler ve bu çerçevelerin içinde resimler vesaire görürsünüz. İşte bunların ne olduğunu, yani başlık mı, paragraf mı, tablo mu olduğunu bilgisayara söylememiz gerekir. Yani özetle, internet sitesini oluşturanlar, tarayıcılara (bilgisayara) html etiketleriyle derler ki bu eleman yazının başlığı, şu eleman yazının paragrafı, şu eleman da tablo; internet sitesini ziyaret edenlere bunları göstereceksin. Bir kişi de o siteyi ziyaret ettiğinde bilgisayar da kendisine verilen bu kodlara göre kullanıcıya başlığı, paragrafı, tabloyu gösterecektir.

Bunların oluşturulması amacıyla özel html etiketleri kullanılır. Bu etiketler, açılır kapanır olan ve kendiliğinden kapanan şeklinde olabilir. Ayrıca bu etiketlerde,attribute adı verilen, sayfa elemanına bazı özelliklerin verilmesi amacıyla, ilave bilgiler içeren bölümler vardır.

Şayet aşağıdaki css editöründeki tüm kodları silerseniz, HTML'in ne olduğu daha iyi anlaşılacaktır. Css ve javascript bu sayfa elemanlarına istenen estetik görünümü sağlar, hareket kazandırır.

denticode

Turkish

0

Merhaba Dünya / Hello World

Katıldığınız Codenti platformundan keyif almanızı dileriz. Uzmanlık seviyeniz ne olursa olsun aramıza hoş geldiniz.

Sayfayı incelediğinizde, aşağıda dört tane çerçeve olduğunu göreceksiniz. Bunlardan ilki html, diğeri css ve bir diğeri javascript editörüdür. Bunların altındaki de örnek bir tarayıcı ekranıdır (Tarayıcının ne olduğunu bilmiyorsanız bunu şimdilik bilgisayarınızın ekranı olarak düşünebilirsiniz). Yani html, css ve javascript kodları çalıştığında ekranda karşımıza ne çıkıyor onu göreceğiz. Ziyaret ettiğiniz her sayfada bu editörlere yazılan kodlarla dilediğiniz gibi oynayarak denemeler yapabilirsiniz. Sayfayı yenilediğinizde başlangıç haline geri dönecektir. Hiçbir şeyi bozmazsınız merak etmeyin.

Codenti'de önceden girilmiş konuları inceleyerek yeni bilgiler öğrenebilirsiniz. Dahası, siz geliştikçe hem topluluğa katkıda bulunabilir hem de kendi bilgilerinizi pekiştirebilirsiniz. Öğrenmenin en iyi yolu başkasına anlatmaktır.




Creative Commons License
Written descriptions and code snippets are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License(Youtube videos have their own licenses).