web programming session 3: html (contd.),...
TRANSCRIPT
![Page 1: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/1.jpg)
CE419 Web Programming Session 3: HTML (contd.), CSS
�1
![Page 2: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/2.jpg)
Forms
�2
![Page 3: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/3.jpg)
Forms
• Provides a way to interact with users.
• Not useful without a server-side counterpart.
�3
![Page 4: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/4.jpg)
From Elements
<form action="…" method="get"> <input type="text" /> <input type="password" /> <input type="checkbox" /> <textarea></textarea> <button>Submit</button> </form> form.html
�4
![Page 5: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/5.jpg)
Let's see forms in action.
Showtime!
�5
![Page 6: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/6.jpg)
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
![Page 7: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/7.jpg)
<div> and <span> Group things together.
![Page 8: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/8.jpg)
<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
![Page 9: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/9.jpg)
But you told us HTML is all about meaning and stuff :(
![Page 10: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/10.jpg)
New in HTML5
• <header>, <nav>, <article>, <aside>, <footer>, <section>, …
![Page 11: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/11.jpg)
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
![Page 12: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/12.jpg)
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
![Page 13: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/13.jpg)
What is CSS? It's all about presentation.�13
![Page 14: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/14.jpg)
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
![Page 15: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/15.jpg)
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
![Page 16: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/16.jpg)
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
![Page 17: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/17.jpg)
CSS Syntax
�17
![Page 18: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/18.jpg)
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
![Page 19: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/19.jpg)
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
![Page 20: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/20.jpg)
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
![Page 21: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/21.jpg)
Let's see some CSS in action.
Showtime!
�21
![Page 22: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/22.jpg)
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!
![Page 23: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/23.jpg)
'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; }
![Page 24: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/24.jpg)
Let's see selectors in action.
Showtime!
�24
![Page 25: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/25.jpg)
CSS Box Model
• How elements are displayed?
• display property
• block, inline, inline-block, none
• Every tag has a default display.
�25
![Page 26: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/26.jpg)
CSS Box Model Every element on a page is a rectangular box.
�26
![Page 27: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/27.jpg)
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
![Page 28: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/28.jpg)
CSS Box Model
�28
![Page 29: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/29.jpg)
Let's see box model in action.
Showtime!
�29
![Page 30: Web Programming Session 3: HTML (contd.), CSSce.sharif.edu/courses/94-95/2/ce419-1/resources/root/Slides/S3.pdf · Forms • Provides a way to interact with users. • Not useful](https://reader034.vdocuments.site/reader034/viewer/2022042309/5ed5d246e769c96ce4185c15/html5/thumbnails/30.jpg)
Any questions?
Thank you.
�30