Skip to content

Latest commit

 

History

History
199 lines (142 loc) · 5.55 KB

README.md

File metadata and controls

199 lines (142 loc) · 5.55 KB
Raw

Hafta 1

Amaç : Front-end'in ne olduğunu, HTML ve CSS kavramlarını öğreneceğiz. Sonrasında en temel HTML etiketlerinin ne olduğunu ve bunları stillendirmeyi öğreneceğiz.

Yazarlar : hazalsilayaprak && aykutsahinler && altaysimsek && ufukcankurt

html-tag

HTML(Hyper Text Markup Language) Nedir?

HTML bir programlama dili değildir. Aslında Microsoft Word gibi belgeleri düzenleme ve biçimlendirmeye yarar. Arama motorlarına web sitesi hakkında bilgi verir. Web sayfalarının hazırlanmasını sağlar.

HTML neler sunar?

Görsel, yazı gibi şeylerin web sitesine yerleştirilmesini sağlar.

HTML Tag'leri

<html>

Tüm tagleri saran kodlamanın html kodları ile yapılması gerektiğini ifade eden başlatıcı tagdir.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Welcome to PAUSIBER</h1>
    <p>Follow us instagram and twitter</p>
  </body>
</html>

html-tag

<head>

<head> etiketi tarayıcıya web sitesi hakkındaki bilgileri barındıran etikettir. Bu alanda yer alan kodlar sitede görünmez.

<head> etiketinin içine yazılan etiketler nelerdir?

<meta>

Sayfamızın açıklama, anahtar kelimeler, sayfa yazarı, son değiştirilme tarihi gibi bilgilerin bulunduğu kısımdır.

<script>

Sayfamızda JS yazabilmemizi sağlayan etikettir.

<noscript>

Kullanıcı tarayıcısında JS çalıştırılmasını engellediyse bu etiket içine yazılan uyarı mesajı ile JS kullanımını açın gibi mesajlar gösterilebilir.

<title>

Sayfanın tarayıcı sekmesinde yazan başlığı, ismidir.

<style>

Sayfamızda CSS yazabilmemizi sağlayan etikettir. Sayfamızı stillendirir.

<link>

Sayfamıza dışarıdan bir dosya dahil etmek istiyorsak bu etiket içine yazarız.

<body>

<head> etiketinden farklı olarak içine yazılan bütün etiketler sitede görünür. Kısaca sayfanın görünen kısmını oluşturur.

<body> etiketinin içine yazılan başlıca etiketler nelerdir?

<p>

Sayfada bulunan paragraflar, cümleler, kısaca yazıların yazıldığı etikettir.

<h1>, <h2>, ... ,<h6>

Sayfamızda başlık olarak geçen yazıları temsil eder. Önem sırasına göre h1 den h6 ya kadar gider.

<a>

Bir resim, yazı ya da herhangi bir şeye tıklandığında başka bir yere yönlendirmek istediğimizde etiketini kullanırız.

<img>

Sayfamıza resim eklememizi sağlayan etikettir.

<iframe>

Bir sayfanın içerisine farklı bir internet sayfasını çağırıp, görüntülemenize yardımcı olan bir HTML etiketidir.

<br>

Sayfamızda satır atlatmak için kullanılan etikettir.

<hr>

Sayfamıza çizgi çizmek için kullanılan etikettir.

<ul>, <ol>

Bir listenin var olduğunu belirten etikettir.

<li>

Listenin elemanlarının yazıldığı etikettir.

<div> !!

Sayfamızda sanal bir kutu oluşturduğumuz etikettir.

<marquee>

Sayfada metnin otomatik bir şekilde sağa, sola, yukarı veya aşağı hareket etmesini sağlar.

<table>

table 

<table style="width:50%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
table, th, td {
  border: 1px solid black;
}

CSS Nedir?

"Cascading Style Sheets" in kısaltmasıdır. Sitemizde var olan HTML etiketlerini şekillendirmemize olanak sağlayan dildir.

HTML elementlerine neden class verilir?

Tanımlamış olduğumuz HTML etiketlerinden hernangi birine erişebilmek için class verilir.

Id ile class arasındaki fark nedir?

Id tektir, bir kere kullanılır. Class birçok etikette kullanılabilir.

CSS nasıl yazılır?

HTML etiketinin içinde stil belirtme | Inline

Etiketin içine style="" yazdığımız anda " " içine yazılacak bütün CSS kodları o etikete ait olur.

<div class="box" style="width: 200px; height: 200px; background-color: #ddd;"></div>

HTML sayfasında CSS yazmak | Internal

HTML sayfamızda <head> elementlerinin arasında <style> elementi kullanarak stiller yaratmamız mümkündür.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>hafta1</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

Stilleri CSS dosyasından çağırmak | External

Herhangi bir not alma uygulamasından (atom, sublime, notepad++, not defteri) CSS kod yapısına uygun bir şekilde yazılır ve kaydedilir daha sonra HTML dosyamızda etiketi arasına etiketi açılı ve href="" kısmına CSS dosyamızın uzantısı eklenir.

Bu hafta neler yaptık ?

'Front-end nedir?' öğrendik.

'HTML nedir?' öğrendik.

'CSS nedir?' öğrendik.

Haftaya Görüşmek Üzere!