Please enable JavaScript.
Coggle requires JavaScript to display documents.
WEB DEVELOPMENT - Coggle Diagram
WEB DEVELOPMENT
HTML AND TAGS
<html> Bir HTML belgesinin künyesidir.Belgenin kökenini belirtir.
<body> Belgenin gövdesidir
head: Belgenin içerisindeki verileri,bilgileri gosterir.
HTML Belgesindeki verilerin dogrulanmasi icin kullanilir.<head> </head> tagi iceinde kullanilir.
<div> Bir belgedeki bölüm karisikliklarini önlemek icin kullanilir.
<a> Site ici veya disi link vermek icin kullanilir.
<p> Belgede Paragraf tanımlar.
<span> Belgedeki bir bölüm,kelime yada cümleye renk,kalinlik vs gibi özellik verir.<p> tagi icinde kullanilir.
<img> metne resim yükler.(UNPAIRD TAGDIR)
<ul> Noktali liste olusturur.
<ol> numara sirali liste olusturur.
<li> Bir liste öğesini tanımlar. (<ol> ve <ul> taglarinin icine yerlestirilir.)
<b> Kalın metin tanımlar
<br> Bir alt satıra gecmek icin kullanilir.Paragrafi icine yerlestirilir ve istedigimiz yeri böler.
<i> metnin belli bölümünü italik yapar.
<strong> Önemli metni tanımlar( <b> tagindan farki vurgu icin kullanilir.her ikisi de kalinlastirir.)
<h1,2,3,4,5,6></h1,2,3,4,5,6> basliklari belirtir.
<table> Tablo tanımlar
<abbr> bir kurum yada yer kısaltmasını belirtir.
<title> Belge için bir başlık tanımlar
<video> Belgeye Video içeriği yerleştirmede kullanilir.(UNPAIRD TAGDIR)
<audio> Ses içeriği yerlestirmede kullanilir.
<figure> figür,çizim,sekil gibi elemanlari belirtmede kullanilir.
<picture> Birden fazla görüntü,görsel kaynagi icin dizi belirtir.
<sup> Metinde üst simge olusturur.
<sub> Metinde alt simge oluşturur.
<mark> İşaretli / vurgulanan metni tanımlar(uzerini fosforlar)
<code> Bilgisayar kodunun bir parçasını tanımlar.(metnin icinde daha kücük yazilir.)
<pre> Önceden biçimlendirilmiş metni tanımlar
<blockquote> Başka bir kaynaktan,siteden alıntı bölümü belirtir.
<q> Kısa bir alıntı tanımlar
<summary> Bir <detay> elemanı için görünür bir başlık tanımlar.(Bu tagin icindeki kelime,cümleyi tiklarsan alta acilir.)
<details> Kullanıcı tarafindan görüntülemek veya gizlemek ek ayrıntılar tanımlar
<acronym> HTML5 desteklemez. Yerine <abbr> tagi kullanilir.
<del> Bir belgeden silindi metni tanımlar
<ins> Bir belgeye yerleştirilmiş olan bir metnin altini cizerek vurgular.(<p> tagi icinde kullanilir.
<cite> Bir eserin,calismanin başlığını tanımlar
<em> Vurgulanan bölümü,metni ITALIK yaparak gösterir.
<td> Tablodaki hücreyi gösterir.
<!DOCTYPE> : Belge türünü belirler
<tr> Tablodaki satiri gösterir.
<th> Bir tablodaki bir başlık hücreyi tanımlar
CSS AND PROPERTIES
CSS COLORS : Belgeye renk verilir.RGB,HEX,HSL şeklinde 3 renk değeri vardir
CSS BACKGROUNDS: Arka plan(background) efektlerini oluşturmada kullanılır.
background-color
background-color: ...;
background-image
background-image: url(“/css/images/css-jpg”) ;
background-repeat
background-repeat: repeat-x/repeat-y/[repeat/space/round/no-repeat]{1,2};
background-attachment background-attachment: fixed; scroll; local;
background-shorthand
background: #3cb371 url("/css/images/css-jpg") no-repeat right top;
CSS BORDERS: Bir elemanin kenar stilini,rengini,genişliğini beliler.
border style
border-style: dotted/double/inset/hidden ;
border width
border-width: 1px yada medium
border color border-color: “#ff0000”; yada “rgb(454,84.09); yada “blue”;
border sides
border shorthand
border: width: style: color:
rounded borders
border-radius:. .px;
CSS MARGINS: Sayfadaki default olarak tanimli kenar boşluklarıni degistirmede kullanilir.
Değerleri: px/pt/cm vs
Margin de tek satırda tüm komutlarıyla margin- top/bottom/left/right siralamasiyla yazilir.
Margin de tek satırda tüm komutlarıyla margin- top/bottom/left/right siralamasiyla yazilir.
CSS PADDING: Kenar çizgisiyle tanımlanmış bir öğede icerigin çevresi ile boşluk oluşturmada kullanılır.(Kutunun icindeki yazinin ic çizgiyle mesafesi)
Değerleri: px, pt, cm
padding-top padding-left
padding-bottom padding-right
Padding shorthand ise su sekildedir : padding-top-right-bottom-left
CSS HEIGHT/WIDTH: Bir elementin sayfadaki yükseklik ve genişliğini ayarlar.
Margin ve Padding değerlerini içermez. Bunlari ayrica bilmemiz gerekir.
Değerleri “px yada %” ile verilir.
CSS BOX MODEL: Web Tasarımında CSS, tüm HTML elementlerini bir kutuya benzetilir. buna BOX MODEL(KUTU MODELI) adi verilir.
CSS TEXT: Textin renk, bicim,pozisyon ve yapisal ayarini yapar.
Text Color
Text Color
Text Direction : Texti tersten yazar.
-Vertical Alignment : Text dikey hizalar
Text Decoration text-decoration: none;
Text Transformation text-decoration: uppercase; veya lowercase; veya capitalize;
Text Spacing.
Text Shadow: texte gölge ekler
CSS FONTS: Yazi tipinin türünü,koyulugunu ve boyutunu ayarlar.
Font Family. font-style: normal ; italic; oblique
Font Weight. font-weight: normal; lighter; bold;
Font Variant. font-variant: small-caps;
Font Size. font-size: %; yada em;
Font Shorthand.
CSS ALIGN: Elementleri konumlandirma ve ölceklendirmede kullanilir.
Centre Align Text text-align: center;
Centre An İmage display: block;
Left and Right Align - Using Position position: absolute;
Left and Right - Using float float: left; yada right;
The Clearfix Hack overflow: auto;
CSS OPACITY: Sayfanin ve diger ogelerin opaklik(netlik) ayarını 0.0 ile 1.0 degerleri arasinda saglar.
opacity: 0.8;
CSS TABLES: Tablonun stil renk ve yapisina dair tüm ayarlar burada yapilir.
Border(kenar) rengini ayarlamak icin: table, th, td { border: 2px solid red; }
border(kenar) çizgisini tek çizgi yapmak icin: table {
border-collapse: collapse;
sadece dis kenar çizgisi olusturmak icin(satir ve sütun çizgisiz): table {
border: 1px solid black;
genişlik ve yüksekliğini (weight and height) ayarlamak icin: table {
width: 100% ;
}
th{
height: 50px;
İçeriği yatay olarak sola , sağa yada ortaya hizalamak icin:
th {
text-align: left; right; centre;
İçeriğini dikey olarak üste , alta yada ortaya hizalamak icin td {
height: 25px; vertical-align: top; bottom; centre;
satır çizgilerinin sadece alt tarafta olmasi icin: th, td {
border-bottom: 1px solid #ddd;
Mouse ile üzerine gelinen satırın vurgulanması için: tr:hover { background-color: #f5f5f5;}
Zebra desenli tablo olusturmak icin: th {
background-color: #4CAF50; color: white;
