Embed Size (px)
Citation preview
CE419 Web Programming Session 3: HTML (contd.), CSS
�1
Forms
�2
Forms
• Provides a way to interact with users.
• Not useful without a server-side counterpart.
�3
From Elements
<form action="…" method="get"> <input type="text" /> <input type="password" /> <input type="checkbox" /> <textarea></textarea> <button>Submit</button> </form> form.html
�4
Let's see forms in action.
Showtime!
�5
Meaningless HTML Elements
• HTML is all about applying meaning to content.
• Most HTML tags apply meaning, but a few are meaningless, like <div> & <span>.
• Used to group things together and hook some information onto that group.
• This later will help us to apply styles using CSS.
�6
<div> and <span> Group things together.
<div> vs. <span>
• <span> element is inline, <div> element is block.I’ve stepped on nails, screws, drawing pins, stubbed my toe, <span>I’ve come off stage with blood just coming out</span>. I mean, I’ve had it all mate, but to be honest, nothing's going to stop me.
I’ve stepped on nails, screws, drawing pins, stubbed my toe, I’ve come off stage with blood just coming out. I mean, I’ve had it all mate, but to be honest, nothing's going to stop me.
I’ve stepped on nails, screws, drawing pins, stubbed my toe, <div>I’ve come off stage with blood just coming out</div>. I mean, I’ve had it all mate, but to be honest, nothing's going to stop me.
I’ve stepped on nails, screws, drawing pins, stubbed my toe, I’ve come off stage with blood just coming out. I mean, I’ve had it all mate, but to be honest, nothing's going to stop me.
�8
But you told us HTML is all about meaning and stuff :(
New in HTML5
• <header>, <nav>, <article>, <aside>, <footer>, <section>, …
Common Attributes in HTML
• Tags can have attributes:
• There are element-type-specific attributes:
• There are core attributes that can be applied to almost every html element.
<tag attrib1="value" attrib2="value">…</tag>
<a href="value">Click here, dude!</a>
<div id="header" class="bored">Hi!</div>
�11
Common Attributes in HTML
• ida unique identifier for an element in the document.
• classclassifies this element into one or more subtypes.
• dirspecifies the reading direction for text as left to right or right to left.
• langspecifies the language of this element’s content.
• stylespecifies an inline style for this element.
• titleprovides extra information about the element.
�12
What is CSS? It's all about presentation.�13
What is CSS?
• CSS enables the separation of document content from document presentation.
• CSS stands for Cascading Style Sheets.
• What is a 'style sheet'?
• What does 'cascading' mean?
• We'll talk about it more.
�14
Applying CSS to HTML Files
• inlineusing style attribute in HTML tags.
• internalusing <style> tag in HTML head
<span style="color: red;">This is blue!</span>
<!DOCTYPE html> <html> <head> <style> span { color: red; } </style> </head>
�15
Applying CSS to HTML Files (contd.)
• externalthere is a separate CSS file linked to HTML.
• Which method do weprefer?(inline/internal/external)
<head> <title>CSS Example</title> <link rel="stylesheet" href="css/style.css">
�16
CSS Syntax
�17
Lengths and Percentages
• pxpixels
• emrelative to current font size
• %based on the length of sameproperty of the parent element
div { width: 100px; height: 150px; }
�18
Colors
• redrgb(255,0,0) rgb(100%,0%,0%) #ff0000 #f00
• How to make gray?
• rgba(255, 0, 0, 0.5) hsl(0, 100%, 50%) hsla(0, 100%, 35%, 0.5)
�19
Fonts
• CSS gives you power over how text is displayed.
• User's browser needs to find the font that you are using.
• Web safe fonts.
• @font-face
�20
Let's see some CSS in action.
Showtime!
�21
CSS Selectors
• Select elements by:
• Tag name: body, h1, p, strong, …
• id: #header, #linktostuff, #container, #video
• class: .link, .photo, .description
• There are far more complex selectors!
'id' & 'class' selectors
<div id="greeting">Hi!</div> <div class="description">That was a greeting</div>
#greeting { color: yellow; font-size:50px; }
.description { font-family: Tahoma; font-size: 11px; }
Let's see selectors in action.
Showtime!
�24
CSS Box Model
• How elements are displayed?
• display property
• block, inline, inline-block, none
• Every tag has a default display.
�25
CSS Box Model Every element on a page is a rectangular box.
�26
CSS Box Model
• Every element is a rectangular box
• There are several properties that determine the size of that box.
div { border: 6px solid #949599; height: 100px; margin: 20px; padding: 20px; width: 400px; }
�27
CSS Box Model
�28
Let's see box model in action.
Showtime!
�29
Any questions?
Thank you.
�30
