SlideShare uma empresa Scribd logo
1 de 8
Baixar para ler offline
HTML ve CSS
Mustafa Kırımlı
HTML (HyperText Markup Language)
HTML, sayfanın yapısı ve içeriği hakkında
bilgiler barındıran, etiket (tag) ve öznitelik
(attribute) içeren, metin bazlı, basit bir dildir.
Her sayfanın ham (raw) hali ve oluşturulmuş
(genrated source, dom) hali olmak üzere iki
HTML kodu bulunur.
Başlıca HTML Elementleri
●
●
●
●
●
●
●
●

html
head
body
div
table
form
a
img

●
●
●
●
●
●
●

span
p
h1-h6
ul
ol
hr
br
Örnek HTML Sayfası
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo Application</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
CSS (Cascading Style Sheets)
CSS, html ‘e stil vererek sayfanın görünümünü
şekillendirir.
Hiçbir CSS olmayan sayfada tarayıcının
varsayılan stilleri uygulanır. Örneğin p etiketi
için block span etiketi için inline stil uygulanır.
CSS (Cascading Style Sheets)
CSS html üzerinde hangi etikete stil
uygulayacağını seçiciler (selectors) yardımıysa
gerçekleştirir.
CSS etiket özelliği olarak
, html
kodunun içinde
etiketleri içinde veya
harici dosya
olarak yüklenir.
<p style=”color:red”></p>

<style>..</style>

<link rel="stylesheet" href="" type="text/css" />
CSS Seçicileri (selectors)
● Tüm element seçici (*)
● Type seçici (a, from, table, div, span ..)
● ID seçici (#header, #main, #contact ..)
● Class seçici (.hidden, .alert, .description)
CSS Conditional comments
<!--[if IE]>

<!--[if gte IE 8]>

According to the conditional comment this is IE

According to the conditional comment this is IE 8 or higher

<![endif]-->

<![endif]-->

<!--[if IE 6]>

<!--[if lt IE 9]>

According to the conditional comment this is IE 6

According to the conditional comment this is IE lower than 9

<![endif]-->

<![endif]-->

..7..8…

<!--[if !IE]> -->
According to the conditional comment this is not IE 5-9

<!--[if IE 9]>
According to the conditional comment this is IE 9
<![endif]-->

<!-- <![endif]-->

Mais conteúdo relacionado

Semelhante a HTML ve CSS

CSS - Genel Bakış
CSS - Genel BakışCSS - Genel Bakış
CSS - Genel Bakışcmkandemir
 
Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018
Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018
Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018Murat KARA
 
Temel (Basic) HTML ve CSS | Front-End Camp 2018
Temel (Basic) HTML ve CSS | Front-End Camp 2018Temel (Basic) HTML ve CSS | Front-End Camp 2018
Temel (Basic) HTML ve CSS | Front-End Camp 2018Cihan Baran
 
Web Site Tasarimi (HTML)
Web Site Tasarimi (HTML)Web Site Tasarimi (HTML)
Web Site Tasarimi (HTML)Murat KARA
 
Web Tasarımı
Web TasarımıWeb Tasarımı
Web Tasarımıdilarra
 

Semelhante a HTML ve CSS (6)

CSS - Genel Bakış
CSS - Genel BakışCSS - Genel Bakış
CSS - Genel Bakış
 
Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018
Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018
Web Site Tasarımı (HTML-Css) Dersi Güncelleme - 2018
 
Temel (Basic) HTML ve CSS | Front-End Camp 2018
Temel (Basic) HTML ve CSS | Front-End Camp 2018Temel (Basic) HTML ve CSS | Front-End Camp 2018
Temel (Basic) HTML ve CSS | Front-End Camp 2018
 
Html
HtmlHtml
Html
 
Web Site Tasarimi (HTML)
Web Site Tasarimi (HTML)Web Site Tasarimi (HTML)
Web Site Tasarimi (HTML)
 
Web Tasarımı
Web TasarımıWeb Tasarımı
Web Tasarımı
 

Mais de Mustafa Kırımlı

Mais de Mustafa Kırımlı (8)

Compute @ edge
Compute @ edgeCompute @ edge
Compute @ edge
 
Why and Way of Using Docker & Kubernetes
Why and Way of Using Docker & KubernetesWhy and Way of Using Docker & Kubernetes
Why and Way of Using Docker & Kubernetes
 
Running kubernetes
Running kubernetesRunning kubernetes
Running kubernetes
 
Spot instances on kubernetes
Spot instances on kubernetesSpot instances on kubernetes
Spot instances on kubernetes
 
Opsiyonlar
OpsiyonlarOpsiyonlar
Opsiyonlar
 
PHP Dosya Yükleme
PHP Dosya YüklemePHP Dosya Yükleme
PHP Dosya Yükleme
 
Smarty Template Engine
Smarty Template EngineSmarty Template Engine
Smarty Template Engine
 
Http Yaşam Döngüsü
Http Yaşam DöngüsüHttp Yaşam Döngüsü
Http Yaşam Döngüsü
 

HTML ve CSS

  • 1. HTML ve CSS Mustafa Kırımlı
  • 2. HTML (HyperText Markup Language) HTML, sayfanın yapısı ve içeriği hakkında bilgiler barındıran, etiket (tag) ve öznitelik (attribute) içeren, metin bazlı, basit bir dildir. Her sayfanın ham (raw) hali ve oluşturulmuş (genrated source, dom) hali olmak üzere iki HTML kodu bulunur.
  • 4. Örnek HTML Sayfası <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Demo Application</title> </head> <body> <h1>Hello World!</h1> </body> </html>
  • 5. CSS (Cascading Style Sheets) CSS, html ‘e stil vererek sayfanın görünümünü şekillendirir. Hiçbir CSS olmayan sayfada tarayıcının varsayılan stilleri uygulanır. Örneğin p etiketi için block span etiketi için inline stil uygulanır.
  • 6. CSS (Cascading Style Sheets) CSS html üzerinde hangi etikete stil uygulayacağını seçiciler (selectors) yardımıysa gerçekleştirir. CSS etiket özelliği olarak , html kodunun içinde etiketleri içinde veya harici dosya olarak yüklenir. <p style=”color:red”></p> <style>..</style> <link rel="stylesheet" href="" type="text/css" />
  • 7. CSS Seçicileri (selectors) ● Tüm element seçici (*) ● Type seçici (a, from, table, div, span ..) ● ID seçici (#header, #main, #contact ..) ● Class seçici (.hidden, .alert, .description)
  • 8. CSS Conditional comments <!--[if IE]> <!--[if gte IE 8]> According to the conditional comment this is IE According to the conditional comment this is IE 8 or higher <![endif]--> <![endif]--> <!--[if IE 6]> <!--[if lt IE 9]> According to the conditional comment this is IE 6 According to the conditional comment this is IE lower than 9 <![endif]--> <![endif]--> ..7..8… <!--[if !IE]> --> According to the conditional comment this is not IE 5-9 <!--[if IE 9]> According to the conditional comment this is IE 9 <![endif]--> <!-- <![endif]-->