SlideShare a Scribd company logo
1 of 29
HTML
Introduction to webdesign:
the basic web page
with practice suggestions
Online Publishing
CSS
• Cascading Stylesheets
• To apply layout to a HTML page, in a way that clearly separates
layout from content
• Selectors: indicate to what you want to apply formatting
• Cascading: Styles are inherited
• 3 ways to implement:
• Inline styles
• In the HTML Header
• In a separate CSS file
CSS Selectors
• Any HTML Element
• body
• h1
• p
• a
• li
• …
• id selector: #myparagraph1 #mainimage
• class selector: .citation .french .highlight
CSS Box Model
• The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
Example CSS Box Model
• div.ex
• {
• width:220px;
• padding:10px;
• border:5px solid gray;
• margin:0px;
• }
CSS Examples
• Inline styles
• <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
• In Header Element
• <head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
<style type="text/css">
body { background-color:#FFD700; font: calibri, sans-serif; }
h1 {margin-bottom:20px;padding: 10px; background-color:#FFA555; font: 32px bold
calibri, sans-serif;}
#container { padding:10px; }
#header { background-color:#FFA500;padding:10px; }
#menu { background-color:#FFE700;height:100%;width:20%;float:left;
padding:10px; }
#content { background-color:#00DDEE;height:100%;width:70%;float:left;
padding:10px; }
p { font: 14px calibri, sans-serif;
.english { color: green; }
.dutch { color: blue; }
</style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: yellow;
}
/* selected link */
a:active {
color: orange;
}
<body>
<div id="container">
<div id="header">
<h1 >Stylesheet with divisions</h1>
</div>
<div id="menu">
<p><b>Menu</b><br /><br />
<a href="http://www.kuleuven.be">KU leuven</a><br />
<a href="http://www.france.fr">France</a><br />
<a href="http://www.belgium.be">Belgium</a> </p></div>
<div id="content">
<p class="english">Content goes here</p>
<p class="dutch">Inhoud komt hier</p>
</div>
</div>
HTML 5 nav
• <div id="menu">
• <p><b>Menu</b></p>
• <nav>
• <a href="http://www.kuleuven.be">KU leuven</a> |
• <a href="http://www.france.fr">France</a> |
• <a href="http://www.belgium.be">Belgium</a>
• </nav>
• </div>
CSS Examples
• External Stylesheet File (.css)
• Link in HTML:
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
• Stylesheet contents:
• body {background-color:yellow;}
• p {color:blue;}
• a {text-decoration:none;}
• a:link {color:#FF0000;} /* unvisited link */
• a:visited {color:#00FF00;} /* visited link */
Customizing WordPress CSS
• https://en.support.wordpress.com/custom-design/editing-
css/
• https://dailypost.wordpress.com/2013/06/21/css-intro/
• https://dailypost.wordpress.com/2013/08/29/css-matched-
rule-pane/
HTML color codes
• http://www.w3schools.com/colors/colors_picker.asp
• http://htmlcolorcodes.com/color-picker/
Forms
• Forms are an easy way to implement interactivity on a
website
• You need 2 pages (you can combine it in one):
• the actual HTML page with Form elements
• A server-side or client-side script that will parse the form
Form element example
Form Example Code
<form id="form1" name="form1" method="post"
action="processthisform.php">
<p>
<label for="Name">Name</label>
<input type="text" name="Name" id="Name" />
</p>
<p>Study programme:
<select name="Programme" id="Programme">
<option value="1">Master of Arts in Cultural
Studies</option>
<option value="2">Master of Arts in History</option>
<option value="3">Master of Science in Information
Management</option>
</select>
</p>
Form Example Code
<p>Gender: </p>
<p>
<label>
<input type="radio" name="Gender" value="M" id="Gender_0" />
Male</label>
<br />
<label>
<input type="radio" name="Gender" value="F" id="Gender_1" />
Female</label>
<br />
</p>
<p>I wil attend on: </p>
<p>
<label>
<input type="checkbox" name="Attend" value="fri" id="Attend_0" />
Friday</label>
<br />
<label>
<input type="checkbox" name="Attend" value="sat" id="Attend_1" />
Saturday</label>
</p>
Form Example Code
<p>Comments:</p>
<p><textarea name="Comments" id="Comments"
cols="60" rows="5"></textarea>
</p>
<p>
<input type="submit" name="Submit" id="Submit"
value="Submit" />
<br />
</p>
</form>
Form Example Code
<h1>Calculate your BMI</h1>
<form name="myform" action="" method="get">
<p>height<br />
<input type="text" name="height" value="">
<p>weight<br />
<input type="text" name="weight" value="">
<p>
<input type="button" name="button" Value="Click" onClick="testResults(this.form)">
</form>
<p><script language="JavaScript">
function testResults (form) {
var TestVar = eval(form.weight.value) / (eval(form.height.value) / 100);
// document.write ("<p><b>Your bmi: " + TestVar + "</b></p>");
document.getElementById("answer").innerHTML = "<p><b>Your bmi: " + TestVar +
"</b></p>";
}
</script>
<p id="answer"></p>
HTML 5 Datalist
• <form action="action_page.php">
• <input list="browsers" name="browser">
• <datalist id="browsers">
• <option value="Internet Explorer">
• <option value="Firefox">
• <option value="Chrome">
• <option value="Opera">
• <option value="Safari">
• </datalist>
• <input type="submit">
• </form>
HTML 5 Output
• <form action="action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTML 5
• Main features
• Back to HTML
• Semantic elements
• Graphics
• Multimedia
• New API’s
• Obsolete tags removed
• Optimized for Mobile
• Increased importance of JavaScript
• HTML5 Canvas
What you need to learn
• HTML Box Model & CSS
• Understand the HTML DOM
• HTML Forms
• Javascript & jQuery
Some links
• Notepad++
• EasyPHP: http://www.easyphp.org
• http://html5demos.com/file-api
• http://www.sitepoint.com/html5-ajax-file-upload/
Semantic Elements
Graphics
• Canvas
• Drawing graphics on the fly using Javascript
• SVG
• You can now directly define SVG graphics in HTML
Multimedia
• Video tag
• <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
• Audio tag
• <audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
• Iframe tag for Youtube
• <iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>
API’s
• HTML Drag & Drop
• Local Storage
• Geolocation

More Related Content

What's hot

Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Web Design Bootcamp - Day1
Web Design Bootcamp - Day1
Aslam Najeebdeen
 

What's hot (19)

CSS Best practice
CSS Best practiceCSS Best practice
CSS Best practice
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Html5 elements-Kip Academy
Html5 elements-Kip AcademyHtml5 elements-Kip Academy
Html5 elements-Kip Academy
 
Slicing the web
Slicing the webSlicing the web
Slicing the web
 
Web Design Course: CSS lecture 4
Web Design Course: CSS  lecture 4Web Design Course: CSS  lecture 4
Web Design Course: CSS lecture 4
 
Html5 101
Html5 101Html5 101
Html5 101
 
Html5 101
Html5 101Html5 101
Html5 101
 
6. CSS
6. CSS6. CSS
6. CSS
 
CSS Frameworks
CSS FrameworksCSS Frameworks
CSS Frameworks
 
Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Web Design Bootcamp - Day1
Web Design Bootcamp - Day1
 
Bootstrap [part 2]
Bootstrap [part 2]Bootstrap [part 2]
Bootstrap [part 2]
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
 
HTML5 Essentials
HTML5 EssentialsHTML5 Essentials
HTML5 Essentials
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
 
Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3Web Design Course: CSS lecture 3
Web Design Course: CSS lecture 3
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Introduction to Html by Ankitkumar Singh
Introduction to Html by Ankitkumar SinghIntroduction to Html by Ankitkumar Singh
Introduction to Html by Ankitkumar Singh
 
HTML5 - Just the basics
HTML5 - Just the basicsHTML5 - Just the basics
HTML5 - Just the basics
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
 

Viewers also liked

Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
Amen.fr
 
présentation wordpress
présentation wordpressprésentation wordpress
présentation wordpress
monsieurpixel
 

Viewers also liked (20)

Amen et l'Afnic : Choisir son adresse internet.
Amen et l'Afnic : Choisir son adresse internet.Amen et l'Afnic : Choisir son adresse internet.
Amen et l'Afnic : Choisir son adresse internet.
 
Bien débuter avec une plateforme e-commerce
Bien débuter avec une plateforme e-commerceBien débuter avec une plateforme e-commerce
Bien débuter avec une plateforme e-commerce
 
IAB European Agency Snapshot Study
IAB European Agency Snapshot StudyIAB European Agency Snapshot Study
IAB European Agency Snapshot Study
 
Les applications iOS (iPhone & iPad) et Android
Les applications iOS (iPhone & iPad) et AndroidLes applications iOS (iPhone & iPad) et Android
Les applications iOS (iPhone & iPad) et Android
 
Stratégie Product Listing Ads Google AdWords (2013)
Stratégie Product Listing Ads Google AdWords (2013)Stratégie Product Listing Ads Google AdWords (2013)
Stratégie Product Listing Ads Google AdWords (2013)
 
Comment choisir son nom de domaine avec Amen
Comment choisir son nom de domaine avec AmenComment choisir son nom de domaine avec Amen
Comment choisir son nom de domaine avec Amen
 
Amen.fr - Afnic Nouveaux GTLD
Amen.fr - Afnic Nouveaux GTLDAmen.fr - Afnic Nouveaux GTLD
Amen.fr - Afnic Nouveaux GTLD
 
Améliorez votre présence en ligne pour attirer vos clients
Améliorez votre présence en ligne pour attirer vos clientsAméliorez votre présence en ligne pour attirer vos clients
Améliorez votre présence en ligne pour attirer vos clients
 
Amen - Introduction au référencement (SEO)
Amen - Introduction au référencement (SEO)Amen - Introduction au référencement (SEO)
Amen - Introduction au référencement (SEO)
 
Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
Amen.fr - Choisir le nom de domaine le mieux adapté pour votre identité numér...
 
Initiation html css
Initiation html cssInitiation html css
Initiation html css
 
présentation wordpress
présentation wordpressprésentation wordpress
présentation wordpress
 
Découvrez le nouveau plugin pour la solution ecommerce Shopware
Découvrez le nouveau plugin pour la solution ecommerce ShopwareDécouvrez le nouveau plugin pour la solution ecommerce Shopware
Découvrez le nouveau plugin pour la solution ecommerce Shopware
 
Conseils et outils gratuits pour démarrer
Conseils et outils gratuits pour démarrer Conseils et outils gratuits pour démarrer
Conseils et outils gratuits pour démarrer
 
Choisir une adresse internet, quelles sont les questions à se poser?
Choisir une adresse internet, quelles sont les questions à se poser?Choisir une adresse internet, quelles sont les questions à se poser?
Choisir une adresse internet, quelles sont les questions à se poser?
 
I tourisme amen donuts webinar july 15
I tourisme amen donuts webinar july 15I tourisme amen donuts webinar july 15
I tourisme amen donuts webinar july 15
 
Adobe Digital Index "Best of the Best Benchmark 2014"
Adobe Digital Index "Best of the Best Benchmark 2014"Adobe Digital Index "Best of the Best Benchmark 2014"
Adobe Digital Index "Best of the Best Benchmark 2014"
 
Optimisez votre référencement sur Internet pour améliorer la visibilité de vo...
Optimisez votre référencement sur Internet pour améliorer la visibilité de vo...Optimisez votre référencement sur Internet pour améliorer la visibilité de vo...
Optimisez votre référencement sur Internet pour améliorer la visibilité de vo...
 
Optimisez votre Référencement sur Internet pour améliorer la visibilité de v...
Optimisez votre Référencement sur Internet pour améliorer  la visibilité de v...Optimisez votre Référencement sur Internet pour améliorer  la visibilité de v...
Optimisez votre Référencement sur Internet pour améliorer la visibilité de v...
 
Comment travailler sur des projets WordPress pour de gros clients
Comment travailler sur des projets WordPress pour de gros clientsComment travailler sur des projets WordPress pour de gros clients
Comment travailler sur des projets WordPress pour de gros clients
 

Similar to Lecture 03 HTML&CSS Part 2

HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
hoctudau
 
The project gutenberg e book, fairy tales from brazil, by elsie spicer
The project gutenberg e book, fairy tales from brazil, by elsie spicerThe project gutenberg e book, fairy tales from brazil, by elsie spicer
The project gutenberg e book, fairy tales from brazil, by elsie spicer
Andrei Hortúa
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
Gill Cleeren
 

Similar to Lecture 03 HTML&CSS Part 2 (20)

TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單TOSSUG HTML5 讀書會 新標籤與表單
TOSSUG HTML5 讀書會 新標籤與表單
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
Lecture 2 - HTML Basics
Lecture 2 - HTML BasicsLecture 2 - HTML Basics
Lecture 2 - HTML Basics
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
HTML CSS Best Practices
HTML CSS Best PracticesHTML CSS Best Practices
HTML CSS Best Practices
 
Html coding
Html codingHtml coding
Html coding
 
The project gutenberg e book, fairy tales from brazil, by elsie spicer
The project gutenberg e book, fairy tales from brazil, by elsie spicerThe project gutenberg e book, fairy tales from brazil, by elsie spicer
The project gutenberg e book, fairy tales from brazil, by elsie spicer
 
BITM3730 9-12.pptx
BITM3730 9-12.pptxBITM3730 9-12.pptx
BITM3730 9-12.pptx
 
HTML5
HTML5HTML5
HTML5
 
Print this
Print thisPrint this
Print this
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
FrontendwebsitehtmljavacssInternship.pptx
FrontendwebsitehtmljavacssInternship.pptxFrontendwebsitehtmljavacssInternship.pptx
FrontendwebsitehtmljavacssInternship.pptx
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
 
Layout with CSS
Layout with CSSLayout with CSS
Layout with CSS
 
Layout & css lecture
Layout & css lectureLayout & css lecture
Layout & css lecture
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
Creating HTML Pages
Creating HTML PagesCreating HTML Pages
Creating HTML Pages
 
Bootstrap 3 Cheat Sheet PDF Reference
Bootstrap 3 Cheat Sheet PDF ReferenceBootstrap 3 Cheat Sheet PDF Reference
Bootstrap 3 Cheat Sheet PDF Reference
 

Recently uploaded

Neurulation and the formation of the neural tube
Neurulation and the formation of the neural tubeNeurulation and the formation of the neural tube
Neurulation and the formation of the neural tube
SaadHumayun7
 
IATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdffIATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdff
17thcssbs2
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
中 央社
 

Recently uploaded (20)

B.ed spl. HI pdusu exam paper-2023-24.pdf
B.ed spl. HI pdusu exam paper-2023-24.pdfB.ed spl. HI pdusu exam paper-2023-24.pdf
B.ed spl. HI pdusu exam paper-2023-24.pdf
 
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
 
Gyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptxGyanartha SciBizTech Quiz slideshare.pptx
Gyanartha SciBizTech Quiz slideshare.pptx
 
MichaelStarkes_UncutGemsProjectSummary.pdf
MichaelStarkes_UncutGemsProjectSummary.pdfMichaelStarkes_UncutGemsProjectSummary.pdf
MichaelStarkes_UncutGemsProjectSummary.pdf
 
Neurulation and the formation of the neural tube
Neurulation and the formation of the neural tubeNeurulation and the formation of the neural tube
Neurulation and the formation of the neural tube
 
UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...
UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...
UNIT – IV_PCI Complaints: Complaints and evaluation of complaints, Handling o...
 
An Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptxAn Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptx
 
IATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdffIATP How-to Foreign Travel May 2024.pdff
IATP How-to Foreign Travel May 2024.pdff
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. Henry
 
Open Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointOpen Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPoint
 
Basic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
Basic Civil Engg Notes_Chapter-6_Environment Pollution & EngineeringBasic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
Basic Civil Engg Notes_Chapter-6_Environment Pollution & Engineering
 
Morse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxMorse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptx
 
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文會考英文
 
Basic_QTL_Marker-assisted_Selection_Sourabh.ppt
Basic_QTL_Marker-assisted_Selection_Sourabh.pptBasic_QTL_Marker-assisted_Selection_Sourabh.ppt
Basic_QTL_Marker-assisted_Selection_Sourabh.ppt
 
Application of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matricesApplication of Matrices in real life. Presentation on application of matrices
Application of Matrices in real life. Presentation on application of matrices
 
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdfPost Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
Post Exam Fun(da) Intra UEM General Quiz 2024 - Prelims q&a.pdf
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
 
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdfINU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
INU_CAPSTONEDESIGN_비밀번호486_업로드용 발표자료.pdf
 
Matatag-Curriculum and the 21st Century Skills Presentation.pptx
Matatag-Curriculum and the 21st Century Skills Presentation.pptxMatatag-Curriculum and the 21st Century Skills Presentation.pptx
Matatag-Curriculum and the 21st Century Skills Presentation.pptx
 
Mbaye_Astou.Education Civica_Human Rights.pptx
Mbaye_Astou.Education Civica_Human Rights.pptxMbaye_Astou.Education Civica_Human Rights.pptx
Mbaye_Astou.Education Civica_Human Rights.pptx
 

Lecture 03 HTML&CSS Part 2

  • 1. HTML Introduction to webdesign: the basic web page with practice suggestions Online Publishing
  • 2. CSS • Cascading Stylesheets • To apply layout to a HTML page, in a way that clearly separates layout from content • Selectors: indicate to what you want to apply formatting • Cascading: Styles are inherited • 3 ways to implement: • Inline styles • In the HTML Header • In a separate CSS file
  • 3. CSS Selectors • Any HTML Element • body • h1 • p • a • li • … • id selector: #myparagraph1 #mainimage • class selector: .citation .french .highlight
  • 4. CSS Box Model • The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
  • 5. Example CSS Box Model • div.ex • { • width:220px; • padding:10px; • border:5px solid gray; • margin:0px; • }
  • 6. CSS Examples • Inline styles • <p style="color:blue;margin-left:20px;">This is a paragraph.</p> • In Header Element • <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>
  • 7. <style type="text/css"> body { background-color:#FFD700; font: calibri, sans-serif; } h1 {margin-bottom:20px;padding: 10px; background-color:#FFA555; font: 32px bold calibri, sans-serif;} #container { padding:10px; } #header { background-color:#FFA500;padding:10px; } #menu { background-color:#FFE700;height:100%;width:20%;float:left; padding:10px; } #content { background-color:#00DDEE;height:100%;width:70%;float:left; padding:10px; } p { font: 14px calibri, sans-serif; .english { color: green; } .dutch { color: blue; } </style>
  • 8. /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: yellow; } /* selected link */ a:active { color: orange; }
  • 9. <body> <div id="container"> <div id="header"> <h1 >Stylesheet with divisions</h1> </div> <div id="menu"> <p><b>Menu</b><br /><br /> <a href="http://www.kuleuven.be">KU leuven</a><br /> <a href="http://www.france.fr">France</a><br /> <a href="http://www.belgium.be">Belgium</a> </p></div> <div id="content"> <p class="english">Content goes here</p> <p class="dutch">Inhoud komt hier</p> </div> </div>
  • 10.
  • 11. HTML 5 nav • <div id="menu"> • <p><b>Menu</b></p> • <nav> • <a href="http://www.kuleuven.be">KU leuven</a> | • <a href="http://www.france.fr">France</a> | • <a href="http://www.belgium.be">Belgium</a> • </nav> • </div>
  • 12. CSS Examples • External Stylesheet File (.css) • Link in HTML: • <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> • Stylesheet contents: • body {background-color:yellow;} • p {color:blue;} • a {text-decoration:none;} • a:link {color:#FF0000;} /* unvisited link */ • a:visited {color:#00FF00;} /* visited link */
  • 13. Customizing WordPress CSS • https://en.support.wordpress.com/custom-design/editing- css/ • https://dailypost.wordpress.com/2013/06/21/css-intro/ • https://dailypost.wordpress.com/2013/08/29/css-matched- rule-pane/
  • 14. HTML color codes • http://www.w3schools.com/colors/colors_picker.asp • http://htmlcolorcodes.com/color-picker/
  • 15. Forms • Forms are an easy way to implement interactivity on a website • You need 2 pages (you can combine it in one): • the actual HTML page with Form elements • A server-side or client-side script that will parse the form
  • 17. Form Example Code <form id="form1" name="form1" method="post" action="processthisform.php"> <p> <label for="Name">Name</label> <input type="text" name="Name" id="Name" /> </p> <p>Study programme: <select name="Programme" id="Programme"> <option value="1">Master of Arts in Cultural Studies</option> <option value="2">Master of Arts in History</option> <option value="3">Master of Science in Information Management</option> </select> </p>
  • 18. Form Example Code <p>Gender: </p> <p> <label> <input type="radio" name="Gender" value="M" id="Gender_0" /> Male</label> <br /> <label> <input type="radio" name="Gender" value="F" id="Gender_1" /> Female</label> <br /> </p> <p>I wil attend on: </p> <p> <label> <input type="checkbox" name="Attend" value="fri" id="Attend_0" /> Friday</label> <br /> <label> <input type="checkbox" name="Attend" value="sat" id="Attend_1" /> Saturday</label> </p>
  • 19. Form Example Code <p>Comments:</p> <p><textarea name="Comments" id="Comments" cols="60" rows="5"></textarea> </p> <p> <input type="submit" name="Submit" id="Submit" value="Submit" /> <br /> </p> </form>
  • 20. Form Example Code <h1>Calculate your BMI</h1> <form name="myform" action="" method="get"> <p>height<br /> <input type="text" name="height" value=""> <p>weight<br /> <input type="text" name="weight" value=""> <p> <input type="button" name="button" Value="Click" onClick="testResults(this.form)"> </form> <p><script language="JavaScript"> function testResults (form) { var TestVar = eval(form.weight.value) / (eval(form.height.value) / 100); // document.write ("<p><b>Your bmi: " + TestVar + "</b></p>"); document.getElementById("answer").innerHTML = "<p><b>Your bmi: " + TestVar + "</b></p>"; } </script> <p id="answer"></p>
  • 21. HTML 5 Datalist • <form action="action_page.php"> • <input list="browsers" name="browser"> • <datalist id="browsers"> • <option value="Internet Explorer"> • <option value="Firefox"> • <option value="Chrome"> • <option value="Opera"> • <option value="Safari"> • </datalist> • <input type="submit"> • </form>
  • 22. HTML 5 Output • <form action="action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form>
  • 23. HTML 5 • Main features • Back to HTML • Semantic elements • Graphics • Multimedia • New API’s • Obsolete tags removed • Optimized for Mobile • Increased importance of JavaScript • HTML5 Canvas
  • 24. What you need to learn • HTML Box Model & CSS • Understand the HTML DOM • HTML Forms • Javascript & jQuery
  • 25. Some links • Notepad++ • EasyPHP: http://www.easyphp.org • http://html5demos.com/file-api • http://www.sitepoint.com/html5-ajax-file-upload/
  • 27. Graphics • Canvas • Drawing graphics on the fly using Javascript • SVG • You can now directly define SVG graphics in HTML
  • 28. Multimedia • Video tag • <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> • Audio tag • <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> • Iframe tag for Youtube • <iframe width="420" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1"> </iframe>
  • 29. API’s • HTML Drag & Drop • Local Storage • Geolocation