SlideShare ist ein Scribd-Unternehmen logo
1 von 79
Downloaden Sie, um offline zu lesen
HTML UND CSS
FÜR DESIGNER
Pubkon 2014, Michaela Lehr @fischaelameer
1. INHALTE
2. TYPOGRAFIE
3. LAYOUT
4. GRAFISCHE ELEMENTE
Thanks Maciej Cegłowski!
1. INHALTE
HYPERTEXT MARKUP LANGUAGE
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<p>Paragraph</p>
<footer>
<p>Footer paragraph</p>
</footer>
<ol>
<li>List item</li>
<li>List item</li>
</ol>
<ul>
<li>List item</li>
<li>List item</li>
</ul>
<h1>The Internet <span>has a human face</span></h1>
<h1>The Internet<br>
<span>has a human face</span>
</h1>
<h1>The Internet<br>
<span class="t-headline-decent">has a human face</span>
</h1>
<Start-Tag eigenschaft="wert">Auszuzeichnender Inhalt</End-Tag>
<a href="https://twitter.com/anildash" target="_blank">Anil Dash</a>
<img src="images/bt14.064.jpg" alt="White mouse holding a teddy bear.">
2. TYPOGRAFIE
CASCADING STYLE SHEETS
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
...
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Internet with a human face</title>
</head>
<body>
...
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Internet with a human face</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
...
</body>
</html>
<link rel="stylesheet" href="styles/main.css">
selektor {
eigenschaft: wert;
}
element {
eigenschaft: wert;
}
.klasse {
eigenschaft: wert;
}
#id {
eigenschaft: wert;
}
body {
color: #333333;
}
h1,
h2 {
font-family: 'Exo2', Sans-Serif;
}
@font-face {
font-family: 'Exo2';
}
@font-face {
font-family: 'Exo2';
src: url('fonts/Exo-2/Exo2-Black.woff') format('woff'),
url('fonts/Exo-2/Exo2-Black.ttf') format('truetype');
}
@font-face {
font-family: 'Exo2';
src: url('fonts/Exo-2/Exo2-Black.woff') format('woff'),
url('fonts/Exo-2/Exo2-Black.ttf') format('truetype');
font-style: normal;
font-weight: 900;
}
@font-face {
font-family: 'Exo2';
src: url('fonts/Exo-2/Exo2-LightItalic.woff') format('woff'),
url('fonts/Exo-2/Exo2-LightItalic.ttf') format('truetype');
font-style: italic;
font-weight: 300;
}
h2 {
font-family: 'Exo2', Sans-Serif;
font-style: italic;
font-weight: 300;
}
PIXEL (px)
PROZENT (%)
EM (em)
h2 {
font-size: 20px;
line-height: 1.5em;
}
PIXEL (px)
PROZENT (%)
EM (em)
ROOT EM (rem)
h2 {
font-size: 20px;
line-height: 1.5rem;
}
3. LAYOUT
* {
box-sizing: border-box;
}
.l-copytext img {
width: 100%;
}
.l-copytext ol {
margin-left: -2em;
}
.l-copytext ol img {
margin: 1em 0;
}
4. GRAFISCHE ELEMENTE
html,
body {
height: 100%;
margin: 0;
}
<section class="title-container">
<h1 id="title">The Internet
<br><span class="t-headline-decent">with a human face</span></h1>
</section>
.title-container {
margin: 0 0 4rem 0;
width: 100%;
height: 100%;
}
.title-container {
background-image: url('../images/bt14.001.jpg');
background-position: 50% 50%;
background-size: cover;
margin: 0 0 4rem 0;
width: 100%;
height: 100%;
}
.title-container h1 {
position: static | relative | absolute | fixed;
}
<section class="title-container">
<h1 id="title">The Internet
<br><span class="t-headline-decent">with a human face</span></h1>
</section>
.title-container h1 {
position: absolute;
left: 10%;
bottom: 10%;
}
.title-container {
background-image: url('../images/bt14.001.jpg');
background-position: 50% 50%;
background-size: cover;
margin: 0 0 4rem 0;
position: relative;
width: 100%;
height: 100%;
}
<a href="https://twitter.com/anildash" target="_blank">Anil Dash</a>
a {
color: #00a0a0;
font-weight: 700;
text-decoration: none;
}
a:hover,
a:active {
border-bottom: 4px solid #00a0a0;
}
JAVASCRIPT
JQUERY
HTML – INHALT
CSS – AUSSEHEN
JAVASCRIPT – VERHALTEN
$(document).on('ready', function () {
});
$(document).on('ready', function () {
var animateElement = function (selektor) {
$(selektor).hide().slideDown(1000);
};
});
$(document).on('ready', function () {
var animateElement = function (selektor) {
$(selektor).hide().slideDown(1000);
};
animateElement('#title');
});
MEDIA QUERIES
Display-Breite/-Höhe,
Browser-Breite/-Höhe,
Geräte- und Browser-Ratio ...
body {
color: #333333;
font-family: 'Gentium', Serif;
font-size: 125%;
font-weight: 400;
line-height: 1.5em;
}
body {
color: #333333;
font-family: 'Gentium', Serif;
font-size: 100%;
font-weight: 400;
line-height: 1.5em;
}
@media screen and (min-width: 900px) {
body {
font-size: 125%;
}
}
a {
color: #00a0a0;
font-weight: 700;
text-decoration: none;
transition: border 0.1s ease-in;
}
a:hover,
a:active {
border-bottom: 4px solid #00a0a0;
}
$color-primary: #00a0a0;
a {
color: $color-primary;
font-weight: 700;
text-decoration: none;
transition: border 0.1s ease-in;
&:hover,
&:active {
border-bottom: 4px solid $color-primary;
}
}
GITHUB.COM
Beispiel: github.com/Fischaela/Pubkon-2014
CODECADEMY
codecademy.com
TREEHOUSE
teamtreehouse.com
DANKE! <3

Weitere ähnliche Inhalte

Was ist angesagt?

Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basicsEliran Eliassy
 
3 Layers of the Web - Part 1
3 Layers of the Web - Part 13 Layers of the Web - Part 1
3 Layers of the Web - Part 1Jeremy White
 
Getting Information through HTML Forms
Getting Information through HTML FormsGetting Information through HTML Forms
Getting Information through HTML FormsMike Crabb
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you needDipen Parmar
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptFahim Abdullah
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSMario Hernandez
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop NotesPamela Fox
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basicsNikita Garg
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markertersSEO SKills
 
Html introduction by ikram niaz
Html introduction by ikram niazHtml introduction by ikram niaz
Html introduction by ikram niazikram niaz
 

Was ist angesagt? (20)

Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
3 Layers of the Web - Part 1
3 Layers of the Web - Part 13 Layers of the Web - Part 1
3 Layers of the Web - Part 1
 
Getting Information through HTML Forms
Getting Information through HTML FormsGetting Information through HTML Forms
Getting Information through HTML Forms
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
Basic html
Basic htmlBasic html
Basic html
 
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
Html training slide
Html training slideHtml training slide
Html training slide
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
 
HTML CSS | Computer Science
HTML CSS | Computer ScienceHTML CSS | Computer Science
HTML CSS | Computer Science
 
Introduction to WEB HTML, CSS
Introduction to WEB HTML, CSSIntroduction to WEB HTML, CSS
Introduction to WEB HTML, CSS
 
Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markerters
 
Html introduction by ikram niaz
Html introduction by ikram niazHtml introduction by ikram niaz
Html introduction by ikram niaz
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
 

Ähnlich wie HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)

#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]Dalibor Gogic
 
An Intro to HTML & CSS
An Intro to HTML & CSSAn Intro to HTML & CSS
An Intro to HTML & CSSShay Howe
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Terry Ryan
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5Robert Nyman
 
HTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersHTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersPrakritiDhang
 
Fronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateInventis Web Architects
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5Steven Chipman
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205志宇 許
 
Supercharged HTML & CSS
Supercharged HTML & CSSSupercharged HTML & CSS
Supercharged HTML & CSSMax Kraszewski
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)Ahsan Rahim
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quideAshok Suragala
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quideJerry Wijaya
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quidePL dream
 

Ähnlich wie HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014) (20)

Stole16
Stole16Stole16
Stole16
 
#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]#3 HTML & CSS [know-how]
#3 HTML & CSS [know-how]
 
An Intro to HTML & CSS
An Intro to HTML & CSSAn Intro to HTML & CSS
An Intro to HTML & CSS
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
HTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersHTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginners
 
Fronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-templateFronttechnieken met HTML5 en de Slice-template
Fronttechnieken met HTML5 en de Slice-template
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205
 
Supercharged HTML & CSS
Supercharged HTML & CSSSupercharged HTML & CSS
Supercharged HTML & CSS
 
Html coding
Html codingHtml coding
Html coding
 
ppt.pptx
ppt.pptxppt.pptx
ppt.pptx
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
Java script and html new
Java script and html newJava script and html new
Java script and html new
 
Java script and html
Java script and htmlJava script and html
Java script and html
 
Html5 quick learning guide
Html5 quick learning guideHtml5 quick learning guide
Html5 quick learning guide
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
 
1cst
1cst1cst
1cst
 

Kürzlich hochgeladen

Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxeditsforyah
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationMarko4394
 
Internet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptxInternet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptxErYashwantJagtap
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作ys8omjxb
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationLinaWolf1
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一z xss
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Paul Calvano
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Sonam Pathan
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 

Kürzlich hochgeladen (17)

Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
Q4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptxQ4-1-Illustrating-Hypothesis-Testing.pptx
Q4-1-Illustrating-Hypothesis-Testing.pptx
 
NSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentationNSX-T and Service Interfaces presentation
NSX-T and Service Interfaces presentation
 
Internet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptxInternet of Things Presentation (IoT).pptx
Internet of Things Presentation (IoT).pptx
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
Potsdam FH学位证,波茨坦应用技术大学毕业证书1:1制作
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
PHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 DocumentationPHP-based rendering of TYPO3 Documentation
PHP-based rendering of TYPO3 Documentation
 
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
办理(UofR毕业证书)罗切斯特大学毕业证成绩单原版一比一
 
Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24Font Performance - NYC WebPerf Meetup April '24
Font Performance - NYC WebPerf Meetup April '24
 
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
Call Girls In The Ocean Pearl Retreat Hotel New Delhi 9873777170
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 

HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)