Embed Size (px)
Citation preview
Introducing HTML & CSS..
What is HTML?
• HyperText Markup Language
What is CSS?
• Cascading Style Sheets
What does that mean!?
• JavaScript/Ruby = the blueprint
What does that mean!?
• JavaScript/Ruby = the blueprint
• HTML = the structure
What does that mean!?
• JavaScript/Ruby = the blueprint
• HTML = the structure
• CSS = everything that makes it look like a house!
• <!DOCTYPE html> must always be included to indicate what kind of document you are creating.
• 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
• HTML uses elements such as <body>, <h1>, <p>, <div> and many more.
• Great glossary of elements - https://www.codecademy.com/articles/glossary-html
• <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”>
• <ul> - “unordered list”.
• Each item within the list must be enclosed within an <li> tag as well.
Indentation
• Good indentation improves readability.
• Easier for debugging.
• Some languages are indentation-dependent.
• <div> - a block container for content. Can contain anything.
• You can have multiple divs in a document.
• 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.
• CSS opens with { and each line ends with ;
• We code in American, so ‘color’ not ‘colour’!
• float - pushes an element to the left/right, taken out of the flow of the other elements.
• 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)
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”
useful for:
• seeing the web page as the browser sees it
• debug code
• observe JavaScript being run
