Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. CSS - Genel Bakış
Temel HTML Etiketleri - Text, Image, Link, List, Imagecmkandemir
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları. Temel HTML Etiketleri - Text, Image, Link, List, Image
The document provides an introduction to HTML basics including HTML document structure, common tags, and formatting. It discusses the <!DOCTYPE> declaration, <head> and <body> sections, common text formatting tags, headings, paragraphs, comments, and includes code examples.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
The document provides an overview of basic HTML elements including tags, attributes, text formatting, links, images, lists, tables, frames, and forms. It explains common HTML tags like <html>, <head>, <body>, <p>, <b>, <i>, <img>, <a> and their attributes. It also covers how to add colors, links, images, lists, tables, frames, and forms to a webpage using HTML.
HTML is the standard markup language used to create web pages. It uses tags surrounded by angle brackets to denote headings, paragraphs, lists, links and other structural elements. A basic HTML document includes <html>, <head> and <body> tags, with metadata in the head and visible content in the body. Common tags describe text styling like <b> for bold, <i> for italics, and <p> for paragraphs.
Following are the some notes regarding HTML.It will provide you a basic insight in HTML and web designing.
For further, contact us -http://nextgenr.com/
Meta tags are HTML tags placed in the <head> section of a web page that provide information about the page content to search engines and browsers. Common meta tags describe the page keywords, description, author, and refresh settings. While meta tags were once important for search engine optimization, many search engines now rely more on other factors like page content and backlinks.
This document provides an introduction to CSS (Cascading Style Sheets) including what CSS is, where it can be used, CSS syntax, and key concepts like inheritance and the cascade. CSS is used to style and lay out HTML elements on a page. It allows customizing elements with properties like color, font, size and more. CSS can be included inline with HTML, embedded in the HTML <head> with <style> tags, or linked externally in a .css file. The cascade determines which styles take precedence when multiple selectors apply to the same element. Inheritance applies styles to descendant elements.
Temel HTML Etiketleri - Text, Image, Link, List, Imagecmkandemir
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları. Temel HTML Etiketleri - Text, Image, Link, List, Image
The document provides an introduction to HTML basics including HTML document structure, common tags, and formatting. It discusses the <!DOCTYPE> declaration, <head> and <body> sections, common text formatting tags, headings, paragraphs, comments, and includes code examples.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
The document provides an overview of basic HTML elements including tags, attributes, text formatting, links, images, lists, tables, frames, and forms. It explains common HTML tags like <html>, <head>, <body>, <p>, <b>, <i>, <img>, <a> and their attributes. It also covers how to add colors, links, images, lists, tables, frames, and forms to a webpage using HTML.
HTML is the standard markup language used to create web pages. It uses tags surrounded by angle brackets to denote headings, paragraphs, lists, links and other structural elements. A basic HTML document includes <html>, <head> and <body> tags, with metadata in the head and visible content in the body. Common tags describe text styling like <b> for bold, <i> for italics, and <p> for paragraphs.
Following are the some notes regarding HTML.It will provide you a basic insight in HTML and web designing.
For further, contact us -http://nextgenr.com/
Meta tags are HTML tags placed in the <head> section of a web page that provide information about the page content to search engines and browsers. Common meta tags describe the page keywords, description, author, and refresh settings. While meta tags were once important for search engine optimization, many search engines now rely more on other factors like page content and backlinks.
This document provides an introduction to CSS (Cascading Style Sheets) including what CSS is, where it can be used, CSS syntax, and key concepts like inheritance and the cascade. CSS is used to style and lay out HTML elements on a page. It allows customizing elements with properties like color, font, size and more. CSS can be included inline with HTML, embedded in the HTML <head> with <style> tags, or linked externally in a .css file. The cascade determines which styles take precedence when multiple selectors apply to the same element. Inheritance applies styles to descendant elements.
HTML (Hypertext Markup Language) is used to create web pages. It uses tags to define headings, paragraphs, lists, links and other elements. Some key HTML tags are <html> <head> <title> <body> <h1>-<h6> <p> <ul> <ol> <li> <a> <img>. HTML pages can be written using a basic text editor and have the .html file extension. The browser interprets the HTML tags to display the structured page content.
If you are using jQuery, you need to understand the Document Object Model and how it accounts for all the elements inside any HTML document or Web page.
Learn HTML and CSS in few steps . Practice an hour daily for good results in 10 days.
Here I am mentioning basic elements , attributes and tags of HTML with styling them
This document provides an overview of PL/SQL (Embedded SQL) including its basic constructs such as anonymous blocks, procedures, functions, packages, triggers, and cursors. It discusses the benefits of PL/SQL in combining the power of SQL with programming constructs like loops and conditional statements. Examples are provided for each construct to demonstrate their usage.
HTML allows users to create web pages. It uses tags to format text, add images and other multimedia, and create hyperlinks. Some key points:
- HTML was created by Tim Berners-Lee in 1989 and standardized in 1997.
- It uses tags enclosed in angle brackets like <p> to format text into paragraphs.
- Common tags include <h1> for main headings, <img> to add images, and <a> for hyperlinks.
- Tables, lists, and forms can be added using <table>, <ul>/<ol>, and <form> tags.
- HTML pages are plain text files that can be viewed on any browser.
This document provides an overview of HTML, CSS, and JavaScript. It discusses how HTML is used to define the structure and layout of web pages using markup tags, how CSS is used to style web pages, and how JavaScript can be used to add interactive elements. It also covers common HTML tags for headings, paragraphs, lists, and other content sections. Key elements like <head> and <body> are explained along with common tags used in each section.
This document provides an overview of HTML and CSS topics including:
- A brief history of HTML and CSS standards from 1990 to present.
- Descriptions of common HTML elements like <body>, <head>, <img>, <a>, and lists.
- Explanations of CSS concepts like selectors, properties, units, positioning, and layout fundamentals.
- Details on CSS topics like the box model, centering content, semantic HTML, and flexbox.
The document serves as a course outline or reference for learning HTML and CSS fundamentals.
The document discusses the basic syntax and structure of HTML documents. It covers the main components of HTML including:
1. The DOCTYPE declaration which identifies the document type
2. Elements which contain the content and are wrapped in tags
3. Attributes which provide extra information about elements
4. Comments for annotating the code
It provides examples of basic HTML code including the skeleton of an HTML document with headings, paragraphs, lists, links, and other common elements.
HTML structures web documents and defines the semantics, or meaning, of content. CSS handles presentation and styling. HTML uses tags to define headings, paragraphs, lists, links and other content. CSS allows styling of elements using selectors, properties and values. External CSS files allow separation of concerns and reuse of styles across pages.
This document provides an introduction to HTML and CSS. It defines HTML as a markup language used to structure web pages with tags, and CSS as a style sheet language used to describe how HTML elements are displayed. It lists common HTML elements like headings, paragraphs, and divs that can be block or inline, and describes how CSS can be applied internally, inline, or via external stylesheets to control things like colors, fonts, and layout. Key differences between HTML and CSS are also outlined, with HTML for structure and CSS for presentation.
This document provides an overview of various CSS topics including comments, colors, text formatting, positioning, and cross-browser compatibility. It explains concepts like using hexadecimal color codes, text properties like alignment and decoration, positioning elements with static, relative, absolute and fixed positioning, and strategies for aligning elements and dealing with browser inconsistencies.
Dokumen tersebut membahas pengenalan dasar HTML, yang meliputi penjelasan tentang apa itu HTML, penamaan file HTML, definisi elemen dan tag dasar seperti <html>, <head>, <body>, serta komponen-komponen penting lainnya seperti judul, paragraf, dan heading.
HTML is a markup language used to create web pages. It uses tags like <html>, <title>, and <body> that are placed within angled brackets to denote elements on a page. Tags can be container tags, which have an opening and closing tag to surround content, or empty tags which are standalone with no closing tag. When creating an HTML file, it should be saved with a .html or .htm extension and then can be viewed by opening it in a web browser.
The document describes various HTML tags for formatting text and displaying code. It defines tags for headings, paragraphs, and other basic text elements. It also covers tags for character formatting like bold, italics, and font styling. Finally, it outlines tags for displaying computer code and preformatted text, including <pre>, <code>, <tt>, <kbd>, <var>, <samp>, and <dfn>.
HTML is the markup language used to structure and present content on the World Wide Web. It uses tags to denote headings, paragraphs, lists, and other semantic elements to describe the purpose of text. HTML documents can include images, scripts written in languages like JavaScript, and cascading style sheets to define appearance and layout. Basic HTML uses tags placed within angle brackets to communicate how text and images should be displayed in a web browser.
This document provides an overview of dynamic HTML (DHTML) and its components. DHTML uses HTML for content, CSS for styling and presentation, and scripting languages to manipulate and change the page after it loads. The three components are linked via the Document Object Model (DOM), which provides a standard interface. DHTML allows creating animations, games and applications by dynamically building web pages without plugins. It makes the web experience more interactive for users.
The document provides an introduction to HTML and CSS. It begins with an overview of HTML tags for headings, paragraphs, and other basic text elements. It then covers CSS selectors, properties, and how CSS is used to style HTML elements by targeting them with selectors and assigning property values. Examples are given for common CSS properties like font styles, colors, sizes and positioning elements using width, height, margins and padding.
HTML (Hypertext Markup Language) is used to create web pages. It uses tags to define headings, paragraphs, lists, links and other elements. Some key HTML tags are <html> <head> <title> <body> <h1>-<h6> <p> <ul> <ol> <li> <a> <img>. HTML pages can be written using a basic text editor and have the .html file extension. The browser interprets the HTML tags to display the structured page content.
If you are using jQuery, you need to understand the Document Object Model and how it accounts for all the elements inside any HTML document or Web page.
Learn HTML and CSS in few steps . Practice an hour daily for good results in 10 days.
Here I am mentioning basic elements , attributes and tags of HTML with styling them
This document provides an overview of PL/SQL (Embedded SQL) including its basic constructs such as anonymous blocks, procedures, functions, packages, triggers, and cursors. It discusses the benefits of PL/SQL in combining the power of SQL with programming constructs like loops and conditional statements. Examples are provided for each construct to demonstrate their usage.
HTML allows users to create web pages. It uses tags to format text, add images and other multimedia, and create hyperlinks. Some key points:
- HTML was created by Tim Berners-Lee in 1989 and standardized in 1997.
- It uses tags enclosed in angle brackets like <p> to format text into paragraphs.
- Common tags include <h1> for main headings, <img> to add images, and <a> for hyperlinks.
- Tables, lists, and forms can be added using <table>, <ul>/<ol>, and <form> tags.
- HTML pages are plain text files that can be viewed on any browser.
This document provides an overview of HTML, CSS, and JavaScript. It discusses how HTML is used to define the structure and layout of web pages using markup tags, how CSS is used to style web pages, and how JavaScript can be used to add interactive elements. It also covers common HTML tags for headings, paragraphs, lists, and other content sections. Key elements like <head> and <body> are explained along with common tags used in each section.
This document provides an overview of HTML and CSS topics including:
- A brief history of HTML and CSS standards from 1990 to present.
- Descriptions of common HTML elements like <body>, <head>, <img>, <a>, and lists.
- Explanations of CSS concepts like selectors, properties, units, positioning, and layout fundamentals.
- Details on CSS topics like the box model, centering content, semantic HTML, and flexbox.
The document serves as a course outline or reference for learning HTML and CSS fundamentals.
The document discusses the basic syntax and structure of HTML documents. It covers the main components of HTML including:
1. The DOCTYPE declaration which identifies the document type
2. Elements which contain the content and are wrapped in tags
3. Attributes which provide extra information about elements
4. Comments for annotating the code
It provides examples of basic HTML code including the skeleton of an HTML document with headings, paragraphs, lists, links, and other common elements.
HTML structures web documents and defines the semantics, or meaning, of content. CSS handles presentation and styling. HTML uses tags to define headings, paragraphs, lists, links and other content. CSS allows styling of elements using selectors, properties and values. External CSS files allow separation of concerns and reuse of styles across pages.
This document provides an introduction to HTML and CSS. It defines HTML as a markup language used to structure web pages with tags, and CSS as a style sheet language used to describe how HTML elements are displayed. It lists common HTML elements like headings, paragraphs, and divs that can be block or inline, and describes how CSS can be applied internally, inline, or via external stylesheets to control things like colors, fonts, and layout. Key differences between HTML and CSS are also outlined, with HTML for structure and CSS for presentation.
This document provides an overview of various CSS topics including comments, colors, text formatting, positioning, and cross-browser compatibility. It explains concepts like using hexadecimal color codes, text properties like alignment and decoration, positioning elements with static, relative, absolute and fixed positioning, and strategies for aligning elements and dealing with browser inconsistencies.
Dokumen tersebut membahas pengenalan dasar HTML, yang meliputi penjelasan tentang apa itu HTML, penamaan file HTML, definisi elemen dan tag dasar seperti <html>, <head>, <body>, serta komponen-komponen penting lainnya seperti judul, paragraf, dan heading.
HTML is a markup language used to create web pages. It uses tags like <html>, <title>, and <body> that are placed within angled brackets to denote elements on a page. Tags can be container tags, which have an opening and closing tag to surround content, or empty tags which are standalone with no closing tag. When creating an HTML file, it should be saved with a .html or .htm extension and then can be viewed by opening it in a web browser.
The document describes various HTML tags for formatting text and displaying code. It defines tags for headings, paragraphs, and other basic text elements. It also covers tags for character formatting like bold, italics, and font styling. Finally, it outlines tags for displaying computer code and preformatted text, including <pre>, <code>, <tt>, <kbd>, <var>, <samp>, and <dfn>.
HTML is the markup language used to structure and present content on the World Wide Web. It uses tags to denote headings, paragraphs, lists, and other semantic elements to describe the purpose of text. HTML documents can include images, scripts written in languages like JavaScript, and cascading style sheets to define appearance and layout. Basic HTML uses tags placed within angle brackets to communicate how text and images should be displayed in a web browser.
This document provides an overview of dynamic HTML (DHTML) and its components. DHTML uses HTML for content, CSS for styling and presentation, and scripting languages to manipulate and change the page after it loads. The three components are linked via the Document Object Model (DOM), which provides a standard interface. DHTML allows creating animations, games and applications by dynamically building web pages without plugins. It makes the web experience more interactive for users.
The document provides an introduction to HTML and CSS. It begins with an overview of HTML tags for headings, paragraphs, and other basic text elements. It then covers CSS selectors, properties, and how CSS is used to style HTML elements by targeting them with selectors and assigning property values. Examples are given for common CSS properties like font styles, colors, sizes and positioning elements using width, height, margins and padding.
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları.PHP ve Kullanıcı Girişlerinin İşlenmesi
HTML Formlar – Kullanıcı Girişlerinin İşlenmesi
GET ve POST farklılıklar
Sihirli cURL
Escaping user data
Dosyalar
Chapter 2-8085 Microprocessor Architecture and Microcomputer Systemscmkandemir
The 8085 microprocessor uses three separate busses - the address bus, data bus, and control bus - to perform operations. The 16-bit address bus allows the 8085 to access up to 64K memory locations. The 8-bit data bus transfers data between the microprocessor and memory or I/O devices in 8-bit chunks. The control bus consists of individual control signals that coordinate operations. Memory is organized into chips that are selected using address lines and chip select signals. This allows the microprocessor to access multiple memory chips within its 64K address range.
Chapter 1-Microprocessors, Microcomputers, and Assembly Languagecmkandemir
This document provides an introduction to microprocessors and assembly language programming. It discusses the basic components and organization of a microprocessor-based system including the microprocessor, memory, and input/output. It also covers number systems including decimal, binary, and hexadecimal. The document provides examples of simple programs and discusses the instruction set and machine language of microprocessors. The overall purpose is to introduce foundational concepts about microprocessor architecture and assembly language programming.
Canvas Öğrenme Yönetim Sistemi Kullanım Kılavuzu Bölüm 2cmkandemir
Eskişehir Osmangazi Üniversitesi Eğitim Fakültesi
Öğrenme Yönetim Sistemleri Dersi Ödev Raporu
Öğretim Üyesi: Yrd.Doç.Dr. Celal Murat KANDEMİR
Hazırlayanlar: Mehmet Mevlüt ODACI
Şükrü DUTAR
• Sınav Hazırlama ve Soru Bankası Seçenekleri
• İletişim Araçları(Danışmanlık Hizmetleri)
• Ödev/Portfolyo Araçları
• Yönetimsel Araçlar
• Diğer Araçlar
Canvas Öğrenme Yönetim Sistemi Kullanım Kılavuzu Bölüm 1cmkandemir
Eskişehir Osmangazi Üniversitesi Eğitim Fakültesi
Öğrenme Yönetim Sistemleri Dersi Ödev Raporu
Öğretim Üyesi: Yrd.Doç.Dr. Celal Murat KANDEMİR
Hazırlayanlar: Mehmet Mevlüt ODACI
Şükrü DUTAR
• Öğreten Rolleri
• Öğrenen Rolleri
• Öğretene Sunulan Araçlar
• Öğrenene Sunulan Araçlar
• Kullanıcı Hesabı Oluşturma
o Öğretmen Hesabı Oluşturma
o Öğrenci Hesabı Oluşturma
o Ebeveyn Hesabı Oluşturma
• Ders Oluşturma
• İçerik ve Etkinlik Çeşitleri ve Adımları
• Öğrenci İzleme Yöntemleri
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. impress.js Framework
Eskişehir Osmangazi Üniversitesi, Mühendislik-Mimarlık Fakültesi, Bilgisayar Mühendisliği, Advanced Programming. Face Detection In Java by Using OpenCV Lİb.
PHP ve MySQL Bağlantısı - Temel İşlemlercmkandemir
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları.PHP ve MySQL Bağlantısı, Temel Veritabanı İşlemleri; SELECT, INSERT, DELETE, UPDATE
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. CSS - Sunum Bileşenleri
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. CSS - Sunum Bileşenleri
Kod Akış Kontrolü - Döngüler, Fonksiyonlarcmkandemir
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları.Döngüler ve fonksiyonlar
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan Web Tasarım ders notları. Web Sitesi Geliştirme Adımları
Eskişehir Osmangazi Üniversitesi, Eğitim Fakültesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi Bölümünde açılan İnternet Tabanlı Programlama ders notları. Temel HTML Etiketleri - Tablo, Form
2. HTML 5 Nedir?
HTML5 – HTML standartlarının bir sonraki en
büyük revizyonudur
Halen geliştirilmesine devam edilmektedir.
Son sürümünden hala çok uzakta
World Wide Web Consortium (W3C) altında
HTML 5 çalışma grubu tarafından 2007’den
itibaren geliştirilmektedir.
Özelliklerine ait ilk genel çalışma taslağı yayını
22 Ocak 2008
HTML 5’in bazı bölümleri tüm özellikler hazır
olmadan tarayıcılarda gerçekleştirilmeye
başlandı 2
3. HTML – Geçmiş, Şimdi, Gelecek
1991 – HTML ilk kez sözü geçiyor –Tim Berners-Lee – HTML
etiketler
1993 – HTML (ilk genel sürüm, IETF’de yayınlandı)
1993 – HTML 2 taslak
1995 – HTML 2 – W3C
1995 – HTML 3 taslak
1997 – HTML 3.2 – “Wilbur”
1997 – HTML 4 – ”Cougar” – CSS
1999 – HTML 4.01 (son)
2000 – XHTML taslak
2001 – XHTML (final)
2008 – HTML5 / XHTML5 taslak
2011 – özellikleri tamamlanmış HTML5
2022 – HTML5 – son tanımlamalar 3
4. HTML 5 Amaçlar
En son sürüm HTML5
Masaüstü uygulamaları gücüne sahip olması
amaçlanmıştır.
Herhangi bir platformda çalışabilir (Windows,
Linux, iPhone, Android, v.b.)
HTML, CSS, DOM ve JavaScript tabanlı yeni
özellikler
Harici eklenti ihtiyacını azaltmak
Daha iyi hata yakalama ve ayıklama
Betik (script) kod ile yer değiştirecek daha çok
işaret dili 4
6. Eski Etiketlerde Değişiklik
Doctype etiketi:
HTML etiketi:
Meta etiketi:
Link etiketi:
<!DOCTYPE html>
<html lang="en" xml:lang="en">
<meta charset="utf-8">
<link rel="stylesheet" href="style-original.css">
7. Yeni Sayfa DüzeniYapısı
Daha iyi sayfa düzeni yapısı: yeni yapısal
bileşenler
<section>
<header>
<nav>
<article>
<aside>
<footer>
<header>
<footer>
<nav> <aside>
<section>
<header>
<article>
<footer>
8. Yeni Sayfa DüzeniYapısı
(2)
Header veya footer gibi bileşenlerin sadece
sayfanın en üstünde ya da en altında olması
anlamına gelmez
Her bir HTML sayfanın üst bilgi ve alt bilgi
bölümleri (Header/footer)
<DIV> etiketinden çok farklı olmamakla
birlikte belge yapısı anlamsal olarak daha iyi
tanımlanmıştır
12. Yeni Etiketler
<article>
Harici içerik için, haber sayfalarından metin, blog,
forum, veya diğer harici kaynaklar
<aside>
İçerik ile ilgili sayfa kenarına yerleştirilmiş bilgi
<details>
Belge ile ilgili ayrıntıları veya belgenin bölümlerini
tanımlarken kullanılır
<summary>
Bir başlık, veya özet, bileşen detayı içinde
13. Yeni Etiketler (2)
<mark>
Vurgulanacak metinler için
<nav>
Navigasyon kısımları için
<section>
Belge bölümlerini ayırmak için (örneğin bölümler,
başlıklar, alt bilgiler)
<wbr>
Sözcük kaydırma (Word break) uzun kelime veya
cümleler bölmek için uygun yer tanımlamak amacıyla
kullanılır
Diğer etiketler
<command>, <datalist>, <details>, <progress>, vb.
15. CSS Genel Bakış
Cascading Style Sheets
(Basamaklı Stil Şablonları)
Celal Murat KANDEMİR
ESOGÜ – Eğitim Fakültesi - BÖTE
Twitter.com/cmkandemir
16. İçindekiler
CSS nedir?
CSS ile biçimlendirme (CSS)
Seçiciler ve stil tanımlamaları
HTML ve CSS bağlantısı
Font ve text stilleri
Arkaplanlar
http://jsfiddle.net
16
17. CSS:Yeni Bir Anlayış
İçerik sunumdan ayrılır!
17
Title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Suspendisse at pede ut purus
malesuada dictum. Donec vitae
neque non magna aliquam
dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
tortor purus, luctus non, aliquam
nec, interdum vel, mi. Sed nec
quam nec odio lacinia molestie.
Praesent augue tortor, convallis
eget, euismod nonummy, lacinia
ut, risus.
Bold
Italics
Indent
İçerik
(HTML belge)
Sunum
(CSS Belge)
18. Sonuç Sayfa
18
Title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Suspendisse at pede ut purus
malesuada dictum. Donec vitae neque
non magna aliquam dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
Tortor purus, luctus non, aliquam nec,
interdum vel, mi. Sed nec quam nec
odio lacinia molestie. Praesent augue
tortor, convallis eget, euismod
nonummy, lacinia ut, risus.
20. CSS Giriş
Cascading Style Sheets (CSS)
Belgelerin nasıl sunulacağını tanımlamak için
kullanılır
sizes, spacing, fonts, colors, layout, vb. özellikleri
tanımlar
İçeriklerin erişilebiliriliğini arttırır.
Esnekliği arttırır.
İçerikte bağımsız sunum şeklinin tasarlanmasını
sağlar.
CSS’e bağlı olarak , tüm HTML biçim (sunum)
etiket ve özelliklerinin kullanılması
önerilmemektedir., e.g. font, center, vb. 20
21. CSS Giriş(2)
CSS herhangi bir XML belgeye de uygulanabilir
Sadece HTML / XHTML belgeler değil
CSS farklı ortamlar (media) için farklı stiller
sağlar
Ekran (On-screen)
Basılı (In print)
Taşınabilir cihaz, projeksiyon, vb.
… ses veya Braille-tabanlı okuyucular dahil
21
22. Neden “Cascading”?
Öncelik şeması, bileşene hangi stil kuralının
uygulanacağını bulur
Cascade öncelikleri veya özgüllükleri (ağırlık)
hesaplanır ve kurallara atanır
HTML DOM ağacında bulunan çocuk (alt)
bileşenler, stilleri ebeveynlerinden (üst) miras
alırlar.
Onların üzerine yeni kurallar konabilir. (override)
important kuralı üzerinden control edilir.
22
25. Stil Miras Alma - Inheritance
Bazı CSS stilleri miras alınabilirken bazıları da
alınamaz
Metinle ilgili (Text-related) ve listeler ile ilgili
(list-related) özellikler miras alınabilir - color,
font-size, font-family, line-height, text-
align, list-style, vb.
Kutu ile ve konumlandırma ile ilgili (Box-related
ve positioning) stiller miras alınamaz not
inherited - width, height, border, margin,
padding, position, float, vb
<a> bileşenleri color ve text-decoration miras
alamaz 25
26. Style Sheets Sözdizimi
Stil şablonları kurallar (rules), seçiciler (selectors),
bildirimler (declarations), özellikler (properties) ve
değerler (values) içerir
Seçiciler virgül ile ayrılır
Bildirimler noktalı virgül ile ayrılır
Özellik ve değerler iki nokta ile ayrılırlar
26
h1,h2,h3 { color: green; font-weight: bold; }
http://css.maxdesign.com.au/
27. HTML ve CSS Bağlantısı
HTML (içerik) ve CSS (sunum biçimi) üç yolla
bağlanabilir:
Satıriçi (Inline): CSS kuralları style özelliğinde
Seçiciye ihtiyaç yok
Gömülü (Embedded): <head> içinde <style>
etiketi
Harici (External): CSS kurallar ayrı bir doyada (en
iyi ve doğrusu)
Genellikle uzantısı .css dosyalarda
Bağlantı <link rel="stylesheet" href="
…"> etiketi ile sağlanır
@import yönergesi üzerinden gömülü CSS blok
27
28. HTML ve CSS Bağlantısı(2)
Harici dosya kullanımı tavsiye edilir.
HTML belgeyi sadeleştirir
CSS dosya ön belleklendiği için sayfa
yüklenmesini hızlandırır
28
29. Satır içi Stiller - Inline Styles
CSS kurallar bileşenlerin style özelliğinde
tanımlanır
Seçicilere ihtiyaç yoktur
Ayarlandıkları bileşen üzerinde çalışırlar
Tavsiye edilmez
İçerik ve sunum biçimleri biribiri içine karışır
CSS’teki ana fikir bu karışıklığı ortadan
kaldırmaktır
29
30. Inline Styles: Örnek
30
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
inline-styles.html
31. Inline Styles: Örnek
31
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
inline-styles.html
32. Gömülü Stiller - Embedded
Styles
HTML içinde <style> etiketi arasına gömülür.
<style> etiketi belgenin <head> bölümüne
yerleştirilir.
type özelliği MIME (Multipurpose Internet Mail
Extensions) tipi belirler
MIME içerik biçimini tanımlar
Diğer MIME tipleri text/html, image/gif,
text/javascript …
Belge-belirli (document-specific) stiller için
kullanılır 32
<style type="text/css">
33. Gömülü Stiller: Örnek
33
<!DOCTYPE html>
<html>
<head>
<title>Style Sheets</title>
<style type="text/css">
em {background-color:#8000FF; color:white}
h1 {font-family:Arial, sans-serif}
p {font-size:18pt}
.blue {color:blue}
</style>
<head>
embedded-stylesheets.html
34. Gömülü Stiller: Örnek(2)
34
…
<body>
<header>
<h1 class="blue">A Heading</h1>
</header>
<article>
<p>Here is some text. Here is some text.
Here is some text. Here is some text. Here
is some text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</article>
</body>
</html>
35. …
<body>
<header>
<h1 class="blue">A Heading</h1>
</header>
<article>
<p>Here is some text. Here is some text.
Here is some text. Here is some text. Here
is some text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</article>
</body>
</html>
Gömülü Stiller: Örnek(3)
35
36. Harici CSS Stil - External CSS
Styles
Harici bağlama
Farklı HTML sayfaların ortak stil şablonu
kullanması sağlabilir
Tek bir dosyada değişiklik yapılması tüm web sitesi
boyunca bulunan sayfalardaki stillerin değişmesini
sağlar. (bkz http://www.csszengarden.com/)
link etiketi (rel özellliği ile)
Geçerli belge ile başka bir belge arasındaki ilişkiyi
belirler ve <head> </head> etiketleri arasındadır.
36
<link rel="stylesheet" type="text/css"
href="styles.css">
37. Harici CSS Stil (2)
@import
Harici CSS dosyaları bağlamak için diğer bir yol
Örnek:
Eski tarayıcılar @import yönergesini tanımaz
@import ile harici dosya eklemeyi IE CSS dosya
sınırı olan 32 civarında tutmanız önerilir.
37
<style type="text/css">
@import url("styles.css");
/* same as */
@import "styles.css";
</style>
39. Seçiciler - Selectors
Seçiciler kuralın hangi bileşene uygulanacağını
belirlemede kullanılır:
Belli tipteki tüm bileşenler (etiket-tag)
Belirli bir özellik ile eşlenenler (id, class)
Bileşenler HTML belge ağacında nasıl iç içe
kullanıldığına göre de eşleşebilir
Örnekler:
39
.header a { color: green }
#menu>li { padding-top: 8px }
40. Seçiciler (2)
Üç ana seçici çeşidi:
Etiket ile (type selector):
Bileşen id ile:
Bileşen sınıf adı ile (sadece HTML için):
Seçiciler virgül ile birleştirilebilir:
Bu ifade <h1> etiketleri, elements with link
class’ına sahip bileşenleri, ve top-link id’li
bileşenler ile eşleştirilir 40
h1 { font-family: verdana,sans-serif; }
#element_id { color: #ff0000; }
.myClass {border: 1px solid red}
h1, .link, #top-link {font-weight: bold}
42. Seçiciler(4)
Bileşen yerleşimine bağlı olarak eşleşir:
<p> içindeki tüm <a> tetiketleri için kullanılır
* – evrensel seçici (uzak durulmalı veya dikkatli
kullanılmalı!):
<p> bileşeninin tüm alt elemanları ile eşleşir
+ seçici – “sonraki kardeş - next sibling” için
kullanılır:
<img> etiketinden hemen sonraki link class
ismine sahip tüm kardeşler ile eşleşir
p a {text-decoration: underline}
p * {color: black}
img + .link {float:right}
43. Seçiciler (5)
> seçici–doğrudan alt düğümleri eşleştirir:
<p> etiketinin doğrudan alt düğümlerindeki error
sınıfına sahip tüm bileşenleri ile eşleşir.
[ ] – normal ifadeli etiket özellikleri ile eşleşir:
alt özelliğinde logo kelimesi geçen tüm etiketler ile
eşleşir.
.class1.class2 (boşluk yok) – aynı anda bu sınıfların
uygulandığı tüm bileşenlerle eşleşir
43
p > .error {font-size: 8px}
img[alt~=logo] {border: none}
44. CSS3 – Özellik Seçicileri
E[foo^="bar"]
E bileşeni: "foo" özelliği değeri "bar" string’i ile
başlayan
Örnek: a[src^="https://"]
E[foo$="bar"]
E bileşeni: "foo" özelliği değeri "bar" string’i ile
biten
E[foo*="bar"]
E bileşeni: "foo" özelliği değeri "bar" alt string’i
içeren
44
46. CSS3 –Yapısal Sözde Sınıflar
:root
Belge kök’ü (root)
E:nth-child(n)
E, aynı seviyedeki baştan n. sıradaki bileşen
E:nth-last-child(n)
E, aynı seviyedeki sondan n. sıradaki bileşen
E:nth-of-type(n)
E, aynı seviyedeki n. aynı tipteki bileşen
46
47. CSS3 –Yapısal Sözde Sınıflar(2)
E:nth-last-of-type(n)
E, sondan başa doğru aynı seviyedeki ve aynı
tipteki n. eleman
E:last-child
E, aynı seviyedeki elemanların en sonuncusu
E:first-of-type
E, aynı seviyedeki ilk aynı tipteki eleman
E:last-of-type
E, aynı seviyedeki en son aynı tipteki eleman
47
48. CSS3 – Structural Pseudo-
classes (3)
E:only-child
E, bir ebeveyni olan ve bu ebeveynin tek çocuğu
olan eleman
E:only-of-type
E, bir ebeyni olan ve bu ebeveynin aynı etiket
adına sahip tek çocuğu olan eleman
E:empty
E, alt elemanı(çocuk) olmayan eleman
More detailed descriptions:
http://www.w3.org/TR/css3-selectors/#structural-pseudos
http://fatihhayrioglu.com/css3-secicileri/
48
49. CSS3 – UI Bileşen Durumları
Sözde Sınıfları
Form elemanlarının çeşitli durumlarını
seçebilmek için kullanılan sözde sınıflardır.
E:enabled
Kullanıcı arayüz bileşeni E aktif
E:disabled
Kullanıcı arayüz bileşeni E pasif
E:checked
Kullanıcı arayüz bileşeni E seçili (örneğin radio-
button veya checkbox)
Şu an için sadece Opera tarafından
destekleniyor!
http://dev.opera.com/articles/view/styling-forms-with-attribute-selectors-1/ 49
50. Diğer CSS 3 Seçiciler
E:target
doküman içi linklere odaklanılmasını sağlar
E:not(s)
Olumsuzluk belirtmek için kullanılan sözde
sınıftır.
body içindeki tüm elemanlara kenar çizgisi ata, dipnot(blockquote) hariç
E ~ F
E bileşen sonrasında bir F bileşen.
http://www.w3schools.com/cssref/sel_gen_sibling.asp
50
51. CSS Kuralları İçinde Değerler
Renkler RGB biçiminde (ondalık veya onaltılık-hex):
Örnek: #a0a6aa = rgb(160, 166, 170)
Ön tanımlı renk isimleri mevuct: black, blue, vb.
Sayısal değerler:
Pixels, ems, vb. 12px , 1.4em
Points, inches, centimeters, millimeters
E.g. 10pt , 1in, 1cm, 1mm
Yüzdeler, e.g. 50%
Neyin Yüzdesi peki?...
Sıfır birimsiz kullanılabilir: border: 0;
51
52. Varsayılan-Default Tarayıcı
Stilleri
Tarayıcılar varsayılan stillere sahiptir
Belge ile ilgili CSS bulunmadığında kullanılır
Dikkat: varsayılan stiller tarayıcılarda farklılık
gösterir
E.g. margins, paddings ve font sizes çoğunlukla
farklıdır
Geliştiriciler genellikle bunları sıfırlar
52
* { margin: 0; padding: 0; }
body, h1, p, ul, li { margin: 0; padding: 0; }
53. CSS Basamak (Öncelik)
Tarayıcı, kullanıcı ve yazar stil şablonları
"normal" ve "important" bildirimleri vardır
Tarayıcı stilleri (en düşük öncelik)
Normal kullanıcı stili
Normal yazar stili (harici, head, satır içi)
Important yazar stili
Important kullanıcı stili (max öncelik)
53
a { color: red !important ; }
http://www.slideshare.net/maxdesign/css-cascade-1658158
54. CSS Etkinliği (Specificity)
CSS etkinliği, aynı kökenli stil bildirimlerinin
önceliğini bulmada kullanılır.
CSS'de etkinliğin anlamı stil çatışması(aynı
elemente birden fazla tanım yapıldığında)
olduğunda kullanılan hangi kodun web
tarayıcıları tarafından yorumlanacağını
belirlemektir.
http://fatihhayrioglu.com/cssde-tanimlamalar-ve-etkinliklerispecificity/
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-
you-should-know/
http://css.maxdesign.com.au/selectutorial/advanced_conflict.htm
54
55. CSS Etkinliği (Specificity)
Hesaplama Kuralları
Kod içinde tanımlama yapılmışsa (inline-kod)
Stil dosyasındaki tanımlı ID'lerin sayısına
Sınıf tanımlalarının sayısına
Seçicilerin sayısına bakar
55
58. CSS Etkinliği (Specificity)
CSS belirlemeye göre yüksek değer alanın
özelliği uygulanır.
Her ikisinde de h1'e bir tanımlama yapılmıştır.
Tanımlama sistemleri farklıdır.
Koddaki h1 elementi mavi değil sarı (yellow)
olarak gösterilir.
Eğer değer aynı olursa (0013 = 0013) ne olur?
bu durumda son yapılan tanımlamanın özellikleri
uygulanır.
Sıralama önemli !!! 58
59. CSS Etkinliği (Specificity)
59
• Ayrıca öncelik için !important tanımlaması vardır.
• Eğer yukarıdaki koda !important eklenirse
• Tanımlama yukarıdaki gibi değiştirildiğinde h1
elementi mavi renkte görünür
61. Text İle İlgili CSS Özellikleri
color – metin rengini belirler
font-size – size of font: xx-small, x-small,
small, medium, large, x-large, xx-large,
smaller, larger veya sayısal değer
font-family – virgül ile ayrılmış font isimleri
Örnek: verdana, sans-serif, vb.
Tarayıcı mevcut ilkini yükler
En az bir tane genel bir font olmalıdır
font-weight, normal, bold, bolder, lighter
veya [100 … 900] aralığında sayı değerleri alabilir
61
62. CSS Kuralları- Fontlar İçin (2)
font-style – font stilini verir
Değerler: normal, italic, oblique
text-decoration – metni dekore eder
Değerler: none, underline, line-trough,
overline, blink
text-align – metin veya diğer içeriğin
hizalamasını tanımlar
Değerler: left, right, center, justify
62
63. Steno Font Özelliği
font
Steno font özelliği aynı anda çoklu font özelliği
yapılandırmasını sağlar.
aşağıdaki ifadeyle aynıdır:
63
font:italic normal bold 12px/16px verdana
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;
67. CSS3 –Text Overflow
Metin taşıyıcı bileşeni aştığı zaman ne
yapılacağını belirler
Sözdizimi: text-overflow: <value>;
Alabileceği değerler:
ellipsis – Kırpılan metin elipslerle ifade edilir
clip –Varsayılan değer, metin kırpılır
Henüz Firefox ve IE tarafından desteklenmiyor
67
68. CSS3 – Sözcük Kaydırma-Word
Wrapping
Uzun cümlelerin kırılıp bir sonraki satıra
geçmesine izin verir.
Sözdizimi: word-wrap: <value>;
Alabileceği değerler:
normal
break-word
Destekleniyor
68
69. CSS3 –Text Girintisi
Paragrafların ilk cümlelerin soldan içeriye
kaydırılması için kullanılan bir özelliktir.
Sözdizimi: text-indent: <value>;
Alabileceği değerler: px değerleri
69
72. RGBA Renkler
72
Standart RGB renkleri saydamlık değeri ile
birlikte verilebilir (alpha channel)
Sözdizmi: rgba(<red>, <green>,
<blue>, <alpha>)
red, green ve blue değerleri 0 ve 255 arası
tamsayılar
Alfa saydamlık sayısı 0.0 ve 1.0 arasında
Örnek: rgba(255, 0, 0, 0.5)
73. HSL Renkler
Hue renk çarkındaki açıdır
0 (veya 360) red, 120 green, 240 blue
Saturation yüzdelik değer
100% tam renk
Lightness yüzdelik değer
0% koyu (black)
100% açık (white)
50% ortalama
73
74. HSLA Renkler
HSLA dördüncü değer olarak bileşen için alfa
saydamlığın verilmesini sağlar.
RGBA RGB, HSLA HSL
Örnek:
hsla(0, 100%, 50%, 0.5)
Sonuç:
74
76. Arkaplanlar
background-image
Arkaplan olarak kullanılacak olan resim bağlantı
yolu
background-color
Renk ve resim aynı anda kullanılır
background-repeat
repeat-x, repeat-y, repeat, no-repeat
background-attachment
fixed / scroll 76
background-image:url("back.gif");
77. Arkaplanlar(2)
background-position: arkaplan resmin
yatay-dikey olarak yerleşimini belirler.
Dikey-Vertical pozisyon: top, center, bottom
Yatay-Horizontal pozisyon: left, center,
right
Yüzdelik dilim veya sayısal değer olarak
tanımlanabilir
Örnekler:
77
background-position: top left;
background-position: -5px 50%;
78. Arkaplan Steno Özellik
background: arkaplan özellikleri için aynı anda
çoklu özellik yapılandırmak:
aşağıdaki ile eşdeğerdir:
Bazı tarayıcılar eğer steno kuralı kullanılırsa renk ve
resmi aynı anda uygulayamayabilir
78
background: #FFF0C0 url("back.gif") no-repeat
fixed top;
background-color: #FFF0C0;
background-image: url("back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
79. background-image veya
<img>?
Arkaplan resim tanımlamaları HTML içinde çok
fazla img etiketi kullanılmasını önler
Daha az kodlama
Daha içerik-odaklı yaklaşım
Sayfa içeriğinin parçası olmayan tüm resimler
CSS’ye taşınmalıdır.
79
80. CSS3 – Gradient Arkaplan
Gradientler iki veya daha fazla renk arasında
pürüzsüz geçiş sağlar
CSS gradientleri resimlerle yer değiştirerek
indirme zamanını hızlandırmak için
kullanılabilir.
Daha esnek bir yerleşim yaratır ve
yakınlaştırıldığında daha iyi görünür.
Hala deneysel aşamasında bir özelliktir.
80
82. CSS3 – Çoklu Arkaplan
CSS3 çoklu arkaplan resmi kullanılmasına izin
verir
Basitçe virgülle ayrılmış resim listesidir
Firefox (3.6+), Chrome (1.0/1.3+), Opera (10.5+)
ve Internet Explorer (9.0+)
82
background-image: url(sheep.png), url(grass.png);
83. CSS Referans
Tüm CSS 2.1 özellikleri için
http://www.w3.org/TR/CSS2/propidx.html
Tüm CSS3 özellikleri için
http://www.w3schools.com/css/css3_intro.asp
83