These are also things that I've picked up in our classes at University.
3 basic categories to web pages:
- Structure (HTML etc)
- Style (CSS, CSS3 etc. CSS effects what your content "looks like")
- Interactivity(CSS, jQuery)
Elements
<p) opening tag
</p> closing tag
Anything that has a 'tag' is an element, of which there are only two types.
Type 1: Block Level Element
Aside from 'anchor', 'image' and 'span', every element is a block level element, that is transparent and invisible on it's own.
- 100% width
- Full width of the page or the full width of what it's inside
- Always 100% wide, even if you define the pixels to be shown (e.g. 300px). This means it always owns the entire width of the page and the height that is explicitly defined by the content. As a result, Block Level elements stack and cannot generally be placed side by side.
- 0 height
- Cannot be seen, is invisible
- It's height is defined by its content
You can add margins, padding, borders etc*
Type 2: Inline Elements
Inline images sit next to each other until you run out of space, and then will move to the next line. You cannot give inline elements padding, margin or a border.
*Margins, Padding & Borders
Padding: If you put text inside a box and you don't want it to hit the edges, you put padding to stop it doing so.
Border: The space around the padding
Margin: Empty space to give breathing room.
When adding padding etc you are increasing the defined width of the element. If you have coded the element to be 200px but then add padding etc, the element side increases. A tool such as BorderBox can help with this - includes the padding and the border in the overall size, leaves the Margin as additional. A HTML Page
Everything in a HTML page is wrapped in opening and closing <html> </html> tags. Within that there is;
<head>
</head>
<body>
</body>
Everything in a HTML page is wrapped in opening and closing <html> </html> tags.
Within that there is;
<head>
<link-to-css> (this then links the browser to the appropriate CSS stylesheets)
</head> (the browser leaves the 'head' with all the information required to read the rest of the document)
<body>
<insert-content-here>
</body>
Elements naturally want to get to point 0, 0 - the top left hand corner, as long as nothing is in the way. But as they stack, they will appear one by one in the order that they read in the code. This can come in handy as if you want your elements to appear in a certain order, you just code them in that order.
No comments:
Post a Comment