![Page 1: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/1.jpg)
![Page 2: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/2.jpg)
HTML & WEBPAGES
• What’s the connection?
• Html describes the structure of webpages.
BUT WHAT DOES THAT MEAN?!!
STRUCTURE = CONTENT
![Page 3: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/3.jpg)
Html element
![Page 4: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/4.jpg)
Html Element - Header
Html element
![Page 5: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/5.jpg)
Html Element - Paragraph
Paragraph
![Page 6: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/6.jpg)
Html Element Structure
Element
![Page 7: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/7.jpg)
Html Element – Image
Image
![Page 9: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/9.jpg)
Html & Trees
Hasan
Nadine AbdulrahmanSiblings
![Page 10: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/10.jpg)
Html Trees
div
h1 pSiblings
![Page 11: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/11.jpg)
![Page 14: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/14.jpg)
What about looks?
![Page 15: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/15.jpg)
Cascading Style Sheet
CSS describes how html element should be rendered on screen.
![Page 16: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/16.jpg)
Adding Line Breaks, Comments & Spaces
![Page 17: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/17.jpg)
Okay, so enter doesn’t work!
• The line break element is <br>.
• Notice it doesn’t have a closing tag.
![Page 18: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/18.jpg)
Okay, so enter doesn’t work!
• The line break element is <br>.
• Notice it doesn’t have a closing tag.
![Page 19: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/19.jpg)
Is there another way to do it?!
![Page 20: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/20.jpg)
Adding Comments
![Page 21: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/21.jpg)
Adding Spaces
![Page 22: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/22.jpg)
Okay, so space didn’t work!
• Use for spaces.
• Other special characters
![Page 23: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/23.jpg)
Lists Unordered List
Ordered List
![Page 24: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/24.jpg)
Tables
![Page 25: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/25.jpg)
With websites, navigation is key!
• There are two types of links in html:o External link : meaning you link
your website with another website.
o Internal: meaning link with in your code.
• To do that use an element called Anchor.
![Page 26: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/26.jpg)
Internal Linking
![Page 27: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/27.jpg)
Html Element – Image
What about resizing the image?
• For that we use attributes called:oWidthoHeight
![Page 28: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/28.jpg)
Adding a title attribute on an image
The title appears when you hover on the image.
![Page 29: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/29.jpg)
Adding a Video File
• Supported formats are:o MP4o OOG
![Page 30: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/30.jpg)
Adding an Audio File
• Supported formats are:o MP3o WAV
![Page 31: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/31.jpg)
Build the skeleton of your site with what you have learned so far!
![Page 32: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/32.jpg)
It should look like this. • You’ll use the following:
Headers & Paragraphs
Lists (chose whether you want it ordered or not.
Remember the preserve and break elements.
Images.
Internal and external linking.
For the horizontal line a new element called horizontal line <hr>.
Feel free to add any videos or audio ☺
![Page 33: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/33.jpg)
Cascading Style Sheet
CSS simply adds style to your html.
![Page 34: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/34.jpg)
Adding CSS to your Html
![Page 35: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/35.jpg)
Selector
Property
Value
Rule
![Page 36: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/36.jpg)
Font color, type and size.
• Use the following properties on the body of your html:o color.
o font-size.
o font-family.
![Page 37: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/37.jpg)
Font color, type and size.
• Use it now but only on headers.
• What do you have to change?
• Can I apply the same rule on multiple elements?
![Page 38: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/38.jpg)
Take a look at the reference sheet to figure out how to align the header to the center.
![Page 39: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/39.jpg)
Inheritance and Overriding
• Since everything in the body changes if we applied CSS to the body, how do I style multiple elements differently?
• Try the code on the right.
![Page 40: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/40.jpg)
Using Classes
• What if I want one paragraph to have the font color blue and another to have the font color green?
![Page 41: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/41.jpg)
Using Classes
• What if I want a header & a paragraph to have blue font?
![Page 42: HTML & WEBPAGESfab.academany.org/2018/labs/fablabirbid/students... · CSS describes how html element should be rendered on screen. Adding Line Breaks, Comments & Spaces. Okay, so](https://reader034.vdocument.in/reader034/viewer/2022052000/601207299a94d56e255c04ab/html5/thumbnails/42.jpg)
External CSS