More HTML and pull quotes. Today I Learned: Wednesday, July 6, 2022
Published
•3 min read
N
Hello everyone, I'm a recent graduate of Blockchain & Backend Development at York University, Toronto. I started this blog to document my career change journey from bartender to a developer.
Since starting this blog in 2022, I have been hired as a research assistant and front-end developer at York's Digital Currencies Project. We are currently working on developing a way to estimate CO2 emissions associated with bitcoin mining.
Thanks for joining me.
- <nav> is used to define a group of navigation tabs.
- <main> is used to feature the bulk of the content on the webpage.
- <footer> is usually at the bottom of the page. It usually contains:
- Contact info
- Terms of use
- Site Map
- <section> is another way to separate elements of the page. Eg. You can keep similar articles on the same topic in the same section.
- <aside> is another sematicx tag. Seems like it is for marking articles to be kept aside.
- A pull quote is a quote pulled out from the text and pasted back into the article. Usually, the body of text is wrapped around it.
- <figure> and <figcaption> are semantic tags used to represent a semantic version of the <img> tag. You still put an <img> tag within these tags however. You should put the <figcaption> tags withing the <figure> tags.
- <audio> is a semantic tag to represent audio elements.
- <video> is the semantic tag for video elements.
- autoplay is an attribute for the tag to make it autoplay when the page is loaded.
- loop, this attribute will loop the video.
- controls adds play/pause to the video.
- Any text written within the <video></video> tags will be displayed if the video cannot be loaded.
- <embed> is a deprecated tag that has been replaced with <audio>, <video> and <img> tags.
- <header>, <nav>, <main>, <footer> are the tags that create the main structure of the webpage.
- Finished Codecademy’s HTML course, now on their CSS Course.
- classes seem to be represented by a ‘.’ infront of the class name in the css file. Eg. .header and .container.
- There also seems to be an ‘@media’ element in this CSS file. I’m not sure what the @ symbol is for, and I cannot find any reference to the media part in the HTML file.
- declaration is a term used in CSS, it is used to declare that a certain part of the HTML should look a certain way.
- It is wrapped in a declaration block {}.
- a selector is used to select the class from the HMTL file.
- peroerty is used to identify the property to change. Eg “color:"
- value is used after property. EG color: green;
- Inline styles is CSS found within the code of aHTML file, as opposed to a separate file.
- **
<p style='color: red;'>I'm learning to code!</p> - Multiple styles can be added to an inline CSS, you just need to add a semicolon ; at the end of the line first.
- **
- Internal Stylesheet. To use CSS without have inline styles on each element, you use a <style> element at the top of the page. It must be placed inside the <head> element. You include all you styling in this element.
- External Stylesheet. This what I’m familiar with. This is where the CSS is kept in a separate file, and is referenced to in the HTHML file. It should be within the same directory as the HTML file. You can used the relative path to point to this file. (Remember to use the ./file.css. Or else point to a an absolute path to a CSS webpage.
- <link> is the element used to link to a separate CSS file. It is a self closing tag.
- It has an attribute named rel. This is used to explain to the HTML file the type of relationship this link is to the file. For CSS links, this should be rel= ‘stylesheet’
