What's a web page made of?
- 1. Introducing HTML & CSS..
- 2. What is HTML? • HyperText Markup Language
- 3. What is CSS? • Cascading Style Sheets
- 4. What does that mean!? • JavaScript/Ruby = the blueprint
- 6. What does that mean!? • JavaScript/Ruby = the blueprint • HTML = the structure
- 8. What does that mean!? • JavaScript/Ruby = the blueprint • HTML = the structure • CSS = everything that makes it look like a house!
- 10. • <!DOCTYPE html> must always be included to indicate what kind of document you are creating.
- 11. • HTML page is split into two parts: • head - title of site (not the title on the page), links to external stylesheets/scripts • body - content of page, what the user sees
- 12. • HTML uses elements such as <body>, <h1>, <p>, <div> and many more. • Great glossary of elements - https://www.codecademy.com/articles/glossary-html
- 13. • <h1> - used for the most important heading on your page • <p> - defines a paragraph of text • <a> - defines a link, but needs ‘href’ and the URL you are pointing at to work - e.g. <a href=“www.2017.inspirewit.com”>
- 14. • <ul> - “unordered list”. • Each item within the list must be enclosed within an <li> tag as well.
- 15. Indentation • Good indentation improves readability. • Easier for debugging. • Some languages are indentation-dependent.
- 16. • <div> - a block container for content. Can contain anything. • You can have multiple divs in a document.
- 17. • Classes allow the same HTML element to be presented differently depending on its class. • In CSS class selectors are preceded with a ‘.’ • A class can be used to identify more than one element.
- 18. • CSS opens with { and each line ends with ; • We code in American, so ‘color’ not ‘colour’!
- 19. • float - pushes an element to the left/right, taken out of the flow of the other elements.
- 20. • Pseudo element - used to style specific parts of an element. Can be used to: • style something when a mouse moves over it • visited/unvisited links differently • style an element when it gets focus (clicked on)
- 21. Chrome Developer console • On Windows to open: Ctrl + Shift + J • On Mac: Alt + Cmd + J • Either: right click on an element on the page and select “inspect element”
- 22. useful for: • seeing the web page as the browser sees it • debug code • observe JavaScript being run