CE419 Web Programming. Session 3: HTML (contd.), CSS

Size: px

Start display at page:

Download "CE419 Web Programming. Session 3: HTML (contd.), CSS"

David Glenn
6 years ago
Views:

1 CE419 Web Programming Session 3: HTML (contd.), CSS 1

2 Forms 2

3 Forms Provides a way to interact with users. Not useful without a server-side counterpart. 3

4 From Elements <form action=" " method="get"> <input type="text" /> <input type="password" /> <input type="checkbox" /> <textarea></textarea> <button>submit</button> </form> form.html 4

5 Showtime! Let's see forms in action. 5

6 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

7 <div> and <span> Group things together.

8 <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

9 But you told us HTML is all about meaning and stuff :(

10 New in HTML5 <header>, <nav>, <article>, <aside>, <footer>, <section>,

11 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

12 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

13 What is CSS? It's all about presentation. 13

14 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

15 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

16 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

17 CSS Syntax 17

18 Lengths and Percentages px pixels em div { width: 100px; height: 150px; } relative to current font size % based on the length of same property of the parent element 18

19 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

20 Fonts CSS gives you power over how text is displayed. User's browser needs to find the font that you are using. Web safe 20

21 Showtime! Let's see some CSS in action. 21

22 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!

23 '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; }

24 Showtime! Let's see selectors in action. 24

25 CSS Box Model How elements are displayed? display property block, inline, inline-block, none Every tag has a default display. 25

26 CSS Box Model Every element on a page is a rectangular box. 26

27 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

28 CSS Box Model 28

29 Showtime! Let's see box model in action. 29

30 Thank you. Any questions? 30

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of