CE419 Session 3: HTML (contd.), CSS Web Programming � 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
Showtime! Let's see forms in action. � 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, I’ve stepped on nails, screws, screws, drawing pins, drawing pins, stubbed my toe, I’ve stubbed my toe, <span> I’ve come off stage with blood just come off stage with blood coming out. I mean, I’ve had it all just coming out </span> . I mate, but to be honest, nothing's mean, I’ve had it all mate, going to stop me. but to be honest, nothing's going to stop me. I’ve stepped on nails, I’ve stepped on nails, screws, screws, drawing pins, drawing pins, stubbed my toe, stubbed my toe, <div> I’ve I’ve come off stage with blood just come off stage with blood coming out. just coming out </div> . I I mean, I’ve had it all mate, but to be mean, I’ve had it all mate, honest, nothing's going to stop me. 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: <tag attrib1="value" attrib2="value">…</tag> • There are element-type-specific attributes: <a href="value"> Click here, dude! </a> • There are core attributes that can be applied to almost every html element. <div id="header" class="bored"> Hi! </div> � 11
Common Attributes in HTML • id a unique identifier for an element in the document. • class classifies this element into one or more subtypes. • dir specifies the reading direction for text as left to right or right to left. • lang specifies the language of this element’s content. • style specifies an inline style for this element. • title provides 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 • inline using style attribute in HTML tags. <span style="color: red;">This is blue!</span> • internal using <style> tag in HTML head <!DOCTYPE html> <html> <head> <style> span { color: red; } </style> </head> � 15
Applying CSS to HTML Files (contd.) • external there is a separate CSS file linked to HTML. <head> <title>CSS Example</title> <link rel="stylesheet" href="css/style.css"> • Which method do we prefer? (inline/internal/external) � 16
CSS Syntax � 17
Lengths and Percentages • px div { width: 100px; pixels height: 150px; } • em relative to current font size • % based on the length of same property of the parent element � 18
Colors • red rgb(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
Showtime! Let's see some CSS in action. � 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; }
Showtime! Let's see selectors in action. � 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
Showtime! Let's see box model in action. � 29
Thank you. Any questions? � 30
Recommend
More recommend
