SlideShare a Scribd company logo
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

More Related Content

What's hot

Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran 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 1
Jeremy White
 
Getting Information through HTML Forms
Getting Information through HTML FormsGetting Information through HTML Forms
Getting Information through HTML Forms
Mike Crabb
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
Bernardo Raposo
 
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
Dipen 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 Script
Fahim Abdullah
 
Basic html
Basic htmlBasic html
Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
Brainware Consultancy Pvt Ltd
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
Pamela Fox
 
Html training slide
Html training slideHtml training slide
Html training slide
villupuramtraining
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
Nikita Garg
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
sunmitraeducation
 
PHP HTML CSS Notes
PHP HTML CSS  NotesPHP HTML CSS  Notes
PHP HTML CSS Notes
Tushar Rajput
 
HTML CSS | Computer Science
HTML CSS | Computer ScienceHTML CSS | Computer Science
HTML CSS | Computer Science
Transweb Global Inc
 
Introduction to WEB HTML, CSS
Introduction to WEB HTML, CSSIntroduction to WEB HTML, CSS
Introduction to WEB HTML, CSS
University of Technology
 
Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners Basics of HTML 5 for Beginners
Basics of HTML 5 for Beginners
MediaLinkers Kennesaw
 
Introduction to html course digital markerters
Introduction to html course digital markertersIntroduction to html course digital markerters
Introduction to html course digital markerters
SEO SKills
 
Html introduction by ikram niaz
Html introduction by ikram niazHtml introduction by ikram niaz
Html introduction by ikram niaz
ikram niaz
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
Lee Lundrigan
 

What's hot (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
 

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

Stole16
Stole16Stole16
Stole16
rworldoffice
 
#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 & CSS
Shay Howe
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Terry Ryan
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
Robert Nyman
 
HTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginnersHTML, CSS, JavaScript for beginners
HTML, CSS, JavaScript for beginners
PrakritiDhang
 
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
Inventis Web Architects
 
An Introduction to HTML5
An Introduction to HTML5An Introduction to HTML5
An Introduction to HTML5
Steven Chipman
 
計算機概論20161205
計算機概論20161205計算機概論20161205
計算機概論20161205
志宇 許
 
Supercharged HTML & CSS
Supercharged HTML & CSSSupercharged HTML & CSS
Supercharged HTML & CSS
Max Kraszewski
 
Html coding
Html codingHtml coding
Html coding
Briana VanBuskirk
 
ppt.pptx
ppt.pptxppt.pptx
ppt.pptx
AnasKhan937513
 
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
 
Java script and html
Java script and htmlJava script and html
Java script and html
Malik M. Ali Shahid
 
Java script and html new
Java script and html newJava script and html new
Java script and html new
Malik M. Ali Shahid
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
PL dream
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
Jerry Wijaya
 
Html5 quick learning guide
Html5 quick learning guideHtml5 quick learning guide
Html5 quick learning guide
Prima Utama Apriansyah
 
Html5 quick-learning-quide
Html5 quick-learning-quideHtml5 quick-learning-quide
Html5 quick-learning-quide
Ashok Suragala
 
1cst
1cst1cst

Similar to 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
Java script and htmlJava script and html
Java script and html
 
Java script and html new
Java script and html newJava script and html new
Java script and html new
 
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 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
 
1cst
1cst1cst
1cst
 

Recently uploaded

How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
Infosec train
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
GNAMBIKARAO
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
APNIC
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
Tarandeep Singh
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
dtagbe
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
rtunex8r
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
APNIC
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
thezot
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
Donato Onofri
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
3a0sd7z3
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
3a0sd7z3
 

Recently uploaded (11)

How to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdfHow to make a complaint to the police for Social Media Fraud.pdf
How to make a complaint to the police for Social Media Fraud.pdf
 
cyber crime.pptx..........................
cyber crime.pptx..........................cyber crime.pptx..........................
cyber crime.pptx..........................
 
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...
 
Bengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal BrandingBengaluru Dreamin' 24 - Personal Branding
Bengaluru Dreamin' 24 - Personal Branding
 
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
一比一原版(uc毕业证书)加拿大卡尔加里大学毕业证如何办理
 
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
怎么办理(umiami毕业证书)美国迈阿密大学毕业证文凭证书实拍图原版一模一样
 
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...Securing BGP: Operational Strategies and Best Practices for Network Defenders...
Securing BGP: Operational Strategies and Best Practices for Network Defenders...
 
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
一比一原版新西兰林肯大学毕业证(Lincoln毕业证书)学历如何办理
 
HijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process HollowingHijackLoader Evolution: Interactive Process Hollowing
HijackLoader Evolution: Interactive Process Hollowing
 
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
快速办理(Vic毕业证书)惠灵顿维多利亚大学毕业证完成信一模一样
 
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
快速办理(新加坡SMU毕业证书)新加坡管理大学毕业证文凭证书一模一样
 

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