what's a web page made of?
TRANSCRIPT
![Page 1: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/1.jpg)
Introducing HTML & CSS..
![Page 2: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/2.jpg)
What is HTML?
• HyperText Markup Language
![Page 3: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/3.jpg)
What is CSS?
• Cascading Style Sheets
![Page 4: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/4.jpg)
What does that mean!?
• JavaScript/Ruby = the blueprint
![Page 5: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/5.jpg)
![Page 6: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/6.jpg)
What does that mean!?
• JavaScript/Ruby = the blueprint
• HTML = the structure
![Page 7: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/7.jpg)
![Page 8: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/8.jpg)
What does that mean!?
• JavaScript/Ruby = the blueprint
• HTML = the structure
• CSS = everything that makes it look like a house!
![Page 9: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/9.jpg)
![Page 10: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/10.jpg)
• <!DOCTYPE html> must always be included to indicate what kind of document you are creating.
![Page 11: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/11.jpg)
• 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
![Page 12: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/12.jpg)
• HTML uses elements such as <body>, <h1>, <p>, <div> and many more.
• Great glossary of elements - https://www.codecademy.com/articles/glossary-html
![Page 13: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/13.jpg)
• <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”>
![Page 14: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/14.jpg)
• <ul> - “unordered list”.
• Each item within the list must be enclosed within an <li> tag as well.
![Page 15: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/15.jpg)
Indentation
• Good indentation improves readability.
• Easier for debugging.
• Some languages are indentation-dependent.
![Page 16: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/16.jpg)
• <div> - a block container for content. Can contain anything.
• You can have multiple divs in a document.
![Page 17: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/17.jpg)
• 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.
![Page 18: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/18.jpg)
• CSS opens with { and each line ends with ;
• We code in American, so ‘color’ not ‘colour’!
![Page 19: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/19.jpg)
• float - pushes an element to the left/right, taken out of the flow of the other elements.
![Page 20: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/20.jpg)
• 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)
![Page 21: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/21.jpg)
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”
![Page 22: What's a web page made of?](https://reader036.vdocuments.mx/reader036/viewer/2022070522/58edfad31a28abc87c8b4611/html5/thumbnails/22.jpg)
useful for:
• seeing the web page as the browser sees it
• debug code
• observe JavaScript being run