Ders_22 HTML Sayfa Düzeni (Layout)

Có thể bạn quan tâm

Ders_22 HTML Sayfa Düzeni (Layout)

HTML Sayfa Düzenleri (Layouts)

Aşağıda, sıkça karşılaştığımız bir html sayfa düzeni görmekteyiz. Bu düzen, <div> elemanları kullanılarak oluşturulmuştur. Şehir Galerisi İstanbul Ankara İzmir İstanbul İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. Copyright © dersimizkod-html.blogspot.com.tr

HTML <div> Elamanları ile Sayfa Düzeni

<div> elemanları, sıklıkla, html sayfalarının tasarım aracı olarak kullanılırlar. Çünkü; CSS ile <div> kutucuklarının yerleşimlerini dizayn etmek oldukça kolaydır. Yukarıdaki html sayfası, CSS ve html ile şöyle kodlanır: <!DOCTYPE html> <html> <head> <style> #header { background-color:black; color:white; text-align:center; padding:15px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> <h1>Şehir Galerisi</h1> </div> <div id="nav"> İstanbul<br> İzmir<br> Ankara<br> </div> <div id="section"> <h2>London</h2> <p> İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. </p> <p> İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. </p> </div> <div id="footer"> Copyright © desimizkod-html.blogspot.com.tr </div> </body> </html> Hatırlayacağımız gibi, diyez (#) ile başlayan CSS seçicileri, id'ye göre seçim yapar. Örneğin; #navseçicisi, sadece id="nav" özelliği içeren html elmanlarını seçer. Yukarıdaki her bir <div> elemanının bir id'si vardır. CSS kısmında da her bir id için yazılmış stiller vardır. Web tarayıcıları, div kutucuklarını, varsayılan olarak, alt alta gösterirler. Fakat CSS float özelliği bu kutucukları yan yana dizmemizi sağlar. Yukarıdaki nav ve section kimliğine sahip iki div, float:left kodu sayesinde, sayfanın solundan başlayarak yan yana dizilmişilerdir. Uygun bir dizilim için, divlere verdiğimiz width (genişlik) değerleri mantıklı olmalıdır yani toplamları sayfanın toplam genişliğini aşarsa, divlerimiz aşağıya düşebilir.

HTML5 İle Sayfa Düzeni

HTML5, html sayfamızın farklı bölgelerini tanıtan anlamsal elemanlara sahiptir. Bu elemanlar ve kastettikleri sayfa bölgeleri aşağıdaki tabloda verilmiştir:

Yukarıdaki sayfa şablonunda hangi html elemanının hangi bölge için kullanılacağı gösterilmiştir. Buna göre;

<header> başlık </header> elemanı: Html sayfanın ana başlığının olduğu bölgedir.
<nav> menü </nav> elemanı: Html sayfasının menü bölgedir. Site içerisinde gezinmek için genellikle bu bölge kullanılır.
<section> kesit </section> elemanı: Html sayfasının içerik üstü bölgesidir.
<aricle> makale </article> elemanı: Html sayfasının makale bölgedir.
<aside> kenarlık </aside> elemanı: Html sayfasının kenarlık bölgedir. Sayfanın sağında veya solunda olabilir. Menü olarak kullanımı yaygındır.
<footer> son </footer> elemanı: Html sayfasının son bölgedir.

Bu dersin başında verdiğimiz html sayfasını şu kodlarla da oluşturabiliriz: <!DOCTYPE html> <html> <head> <style> header { background-color:black; color:white; text-align:center; padding:15px; } nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } section { width:350px; float:left; padding:10px; } footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <header> <h1>Şehir Galerisi</h1> </header> <nav> İstanbul<br> İzmir<br> Ankara<br> </nav> <section> <h1>London</h1> <p> İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. </p> <p> İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. </p> </section> <footer> Copyright © dersimizkod-html.blogspot.com.tr </footer> </body> </html> Bu kodun çıktısı da tıpkı daha yukarıdaki gibi olacaktır: Şehir Galerisi İstanbul Ankara İzmir İstanbul İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. İstanbul güzel bir şehirdir. Copyright © dersimizkod-html.blogspot.com.tr

HTML Sayfa Düzeni İçin <table> (Tablo) Elemanı

Html <table> elemanı, sayfa düzeni için geliştirilmiş bir eleman değildir. Bu yüzden bu amaçla kullanımları tavsiye edilmez. <table> elemanı, verileri daha düzenli bir şekilde sunmak için kullanılır. Tavsiye edilmese de, <table> elemanlarının, CSS ile şekillendirilebildikleri için, sayfa düzeni oluşturma yetenekleri vardır. sonraki ders için tıklayınız Gönderen Muzaffer

Etiketler: <article>, <aside>, <footer>, <header>, <nav>, <section>, float, html

Hiç yorum yok:

Yorum Gönder

Ana Sayfa Kaydol: Kayıt Yorumları (Atom)

HTML DERSLERİ

Ders_1 HTML Nedir?

Ders_2 HTML Tag İfadeleri

Ders_3 HTML Editörleri

Ders_4 HTML Sayfa Yapısı

Ders_5 HTML Elemanları

Ders_6 HTML Temel İçerik Elemanları

Ders_7 HTML Tag Özellikleri (Attributes)

Ders_8 HTML Başlıkları

Ders_9 HTML Parafrafları

Ders_10 HTML Stilleri (style)

Ders_11 HTML Metin Elemanlarını Biçimlendirme

Ders_12 HTML Alıntı Yapma ve Kaynak Belirtme

Ders_13 HTML Bilgisayar Kodu Elemanları

Ders_14 HTML Yorumları (Comment)

Ders_15 HTML ve CSS

Ders_16 HTML Linkleri

Ders_17 HTML Görselleri (Images)

Ders_18 HTML Tabloları

Ders_19 HTML Listeleri (List)

Ders_20 HTML Blok ve Satıriçi Elemanlar

Ders_21 HTML Klasları (Class)

Ders_22 HTML Sayfa Düzeni (Layout)

Ders_23 HTML Uyumlu (Responsive) Web Dizaynı

Ders_24 HTML Iframe Elemanı

Ders_25 HTML Renk Adları ve Kodları

Ders_26 HTML Head Elemanı

Ders_27 HTML Varlıkları ve Vurgu İşaretleri (Entities/Marks)

Ders_28 HTML Semboller

Ders_29 Dil Kodlaması (Encoding/Character Set)

Ders_30 HTML URL Adresi Yazma (URL Encoding)

Ders_31 HTML ve XHTML

Ders_32 HTML Form Elemanı

Ders_33 HTML Form Elemanları

Ders_34 HTML Input Elemanının Tipleri (Input Type)

Ders_35 HTML Input Elemanının Özellikleri 1 (Attribute)

Ders_36 HTML Input Elemanının Özellikleri 2 (Attribute)

Ders_37 HTML JavaScript

HTML5 DERSLERİ

HTML5 Ders_1 Tanıtım (Introduction)

HTML5 Ders_2 Tarayıcı Desteği

HTML5 Ders_3 HTML5'in Yeni Elemanları (Elements)

HTML5 Ders_4 Anlamsal Taglar (Semantics)

HTML5 Ders_5 HTML5'e Geçiş (Mgration)

HTML5 Ders_6 Stil/Dizin Rehberi

HTML GRAFİK DERSLERİ (CANVAS-SVG)

HTML Canvas Ders_1 Tanıtım

HTML Canvas Ders_2 Bir Obje Çizmek

HTML Canvas Ders_3 Koordinatlar

HTML Canvas Ders_4 Gradyanlar (Gradients)

HTML Canvas Ders_5 Textler

HTML Canvas Ders_6 Resimler (Images)

HTML Canvas ile Saat Yapımı

HTML SVG Ders_1 Tanıtım

HTML SVG Ders_2 HTML ile SVG

HTML SVG Ders_3 SVG Dikdörtgen (Rectangle)

HTML SVG Ders_4 Daire (Circle)

HTML SVG Ders_5 Elips (Ellipse)

HTML SVG Ders_6 Çigi (Line)

HTML SVG Ders_7 Çokgen (Polygon)

HTML SVG Ders_8 Kırık Doğrular (Polyline)

HTML SVG Ders_9 Path Elemanı ile Çizim

HTML SVG Ders_10 Text Çizimi

HTML SVG Ders_11 Çizim Biçimleri (Strokes)

HTML SVG Filtreleme Ders_1

HTML SVG Blur Efekti - Filtreleme Ders_2

HTML SVG Gölge Efekti Verme - Filtreleme Ders_3

HTML SVG Gradyanlar (Gradients) - Ders_1 Linear Gradyanlar

HTML SVG Gradyanlar (Gradients) - Ders_2 Radial Gradyanlar

HTML MULTİMEDYA DERSLERi

HTML Multimedya Ders_1 Tanıtım

HTML Multmedya Ders_2 Video

HTML Multimedya Ders_3 Audio (Ses)

HTML Multimedya Ders_4 Plug-In

HTML Multimedya Ders_5 Youtube Videoları

HTML API DERSLERi

HTML API Ders_1 Geolocation (Konum)

HTML API Ders_2 Sürükle Bırak (Drag/Drop)

HTML API Ders_3 Local Storage (Local Depolama)

HTML API Ders_4 App Cache (Uygulama Belleği)

HTML API Ders_5 Web Workers (Web İşçileri)

HTML API Ders_6 Server-Sent Events (SSE) - Sunucudan Gelen Olaylar

SON

Popular Gönderiler

Ders_22 HTML Sayfa Düzeni (Layout) HTML Sayfa Düzenleri (Layouts) Aşağıda, sıkça karşılaştığımız bir html sayfa düzeni görmekteyiz. Bu düzen, <div> elemanları kulla...
HTML5 Ders_4 Anlamsal Taglar (Semantics) HTML5'in Anlamsal Tagları (Semantics) Hakkında Semantic (anlamsal) taglar, kelime anlamı ile aynı işi yapan html elemanlarıdır. Mese...
Ders_18 HTML Tabloları HTML Tabloları Aşağıda bir tablo örneği verilmiştir: No Ad Soyad Not 1 Muzaffer KAYA 94 2 Pelin AY 80 3 Adem KIŞ 67 4 Ali YILMA...
HTML SVG Ders_9 Path Elemanı ile Çizim HTML5 SVG ile Yörünge (Path) Çizimi < path > elemanı, karmaşık geometrik şekiller çizmek için kullanılır. path çizerken aşağıd...

ETİKETLER

.htm (1)
&nbsp (1)
<a> (1)
<abbr> (1)
<address> (1)
<area> (1)
<article> (3)
<aside> (2)
<audio> (1)
<b> (1)
<base> (1)
<bdo> (1)
<blockquote> (1)
<br> (1)
<canvas> (6)
<caption> (1)
<circle> (2)
<cite> (1)
<code> (1)
<colgroup> (1)
<datalist> (1)
<dd> (1)
<defs> (1)
<del> (1)
<div> (3)
<dl> (1)
<dt> (1)
<ellipse> (1)
<em> (1)
<embed> (2)
<feBlend> (1)
<feColorMatrix> (2)
<feComponentTransfer> (1)
<feComposite> (1)
<feDiffuseLighting> (1)
<feDistantLight> (1)
<feFlood> (1)
<feGaussianBlur> (2)
<feImage> (1)
<feMerge> (1)
<feOffset> (1)
<fePointLigth> (1)
<feSpotLight> (1)
<feTile> (1)
<fieldset> (2)
<figcaption> (1)
<figure> (1)
<filters> (1)
<footer> (3)
<form> (3)
<g> (2)
<h> (1)
<head> (3)
<header> (2)
<hr> (1)
<i> (1)
<iframe> (1)
<img> (2)
<input> (4)
<ins> (1)
<kbd> (1)
<keygen> (1)
<label> (1)
<legend> (2)
<li> (1)
<line> (1)
<linearGradient> (1)
<link> (2)
<map> (1)
<mark> (1)
<meta> (2)
<nav> (2)
<noscript> (1)
<object> (2)
<ol> (1)
<optgroup> (1)
<option> (1)
<output> (1)
<p> (1)
<path> (2)
<polygon> (1)
<polyline> (1)
<pre> (2)
<q> (1)
<radialGradient> (1)
<rect> (1)
<samp> (1)
<script> (2)
<section> (3)
<select> (1)
<small> (1)
<source> (2)
<span> (1)
<strong> (1)
<style> (2)
<sub> (1)
<sup> (1)
<svg> (6)
<tbody> (1)
<td> (1)
<text> (1)
<textarea> (1)
<tfoot> (1)
<th> (1)
<thead> (1)
<title> (2)
<tr> (1)
<track> (1)
<tspan> (1)
<ul> (1)
<var> (1)
<video> (1)
A (1)
accept-charset (1)
action (1)
alt (1)
analog saat (1)
animasyon (1)
animation (1)
ANSI (1)
API (7)
app cache (1)
appcache (1)
appication cache (1)
ASCII (1)
attribute syntax (1)
attributes (1)
audio (1)
autocomplete (3)
autofocus (1)
autohide (1)
autoplay (2)
background-color (1)
blur (1)
bootstrap (1)
border (2)
border-collapse (1)
border-radius (1)
border-spacing (1)
C (1)
cache manifest (1)
canvas (1)
charset (1)
class (1)
color (3)
colspan (1)
comment (1)
comment tags (1)
controls (2)
coords.accuracy (1)
coords.altitude (1)
coords.heading (1)
coords.latitude (1)
coords.longitude (1)
copyright (1)
createLinearGradient() (1)
createRadialGradient() (1)
CSS (1)
cx (2)
cy (2)
çizgi (1)
çizim (1)
daire (1)
dataTransfer.getData() (1)
dataTransfer.setData() (1)
datetime-local (1)
dikdörtgen çizimi (1)
disabled (2)
domain (1)
drag drop (1)
drawImage() (1)
drop-down list (1)
elips (1)
enctype (1)
entities (1)
entity (1)
EventSource() (1)
fill (2)
fill-rule (1)
fillText (1)
fillText() (1)
filter (1)
float (2)
font-family (2)
font-size (2)
form (1)
formaction (1)
formenctype (2)
formmethod (2)
formnovalidate (1)
formtarget (2)
geolocation (1)
getCurrentPosition() (1)
google maps (1)
gölge efekti (1)
gölge verme (1)
gradient (2)
gradyan (1)
gradyanlar (1)
graphic grafik element eleman (1)
H (1)
height (1)
hex kodları (1)
host (1)
href (1)
htm (2)
html (76)
html arrow symbol (1)
html color (1)
html dizin (1)
html editörleri (1)
html elemanları (1)
html element ekleme (1)
html greek letter (1)
html mathematical symbol (1)
html nedir (1)
html renk adları (1)
html renk kodları (1)
html renkleri (1)
html sayfa yapısı (1)
html sembolleri (1)
html symbol (1)
html syntax (1)
html tanıtım (1)
html tarihçesi (1)
html varlıkları (1)
html versiyonları (1)
html5 (31)
html5 elemanları (1)
html5 elements (1)
HTML5 form element eleman (1)
html5 semantics (1)
html5 tarayıcı desteği (1)
html5.css (1)
html5' geçiş (1)
html5'e dönüştürme (1)
http-equiv (1)
ISO-8859-1 (1)
id (2)
in (1)
javascript (2)
konum (1)
L (1)
lang (2)
line (1)
list (1)
localStorage (1)
loop (1)
M (1)
manifest (1)
margin (1)
max (1)
maxlength (2)
media element eleman (1)
method (1)
min (1)
min max (1)
month (1)
multimedia (1)
multimedya (1)
multiple (1)
name (1)
novalidate (3)
onerror (1)
onmessage (1)
onopen (1)
opacity (1)
özellikler (1)
padding (2)
paragraph (1)
password (1)
path (1)
pattern (2)
placeholder (1)
playlist (1)
plug-in (1)
points (2)
polygon (1)
port (1)
preventDefault() (1)
Q (1)
r (1)
radialGradient (1)
range (1)
readonly (2)
required (2)
rgb kodları (1)
rowspan (1)
rx (1)
ry (1)
S (1)
saat (1)
search (1)
server sent events (1)
ses (1)
sessionStorage (1)
shadow effect (1)
sheme (1)
sınıf (1)
size (2)
sound (1)
SourceGraphic (1)
src (1)
SSE (1)
step (2)
stroke (3)
stroke-dasharray (1)
stroke-linecap (1)
stroke-opacity (1)
stroke-width (3)
strokeText (1)
strokeText() (1)
style (3)
submit (1)
sürükle bırak (1)
svg (9)
svg filters (1)
T (1)
tag (2)
target (2)
terminate() (1)
text (3)
text-align (2)
tuval (3)
type (3)
url (2)
usemap (1)
utf-8 (1)
V (1)
value (1)
video (2)
vidyo (1)
w3.css (1)
web işçileri (1)
web worker (1)
web workers (1)
width (1)
window.localStorage (1)
window.sessionStorage (1)
worker (1)
workers (1)
x1 (1)
x2 (1)
xhtml (1)
y1 (1)
y2 (1)
yeni html5 elamanları (1)
yeni html5 element (1)
youtube (1)
Z (1)

Từ khóa » Html Layout Kullanımı