HTML/CSS Flashcards
Start of HTML doc
- DOCTYPE: Describes the type of HTML. While there are technically different types, for 99.999% of the HTML you’ll write, you’ll likely be fine with
- triggers standards mode but specifies an older form of validation
- Having no doctype triggers “quirks” mode. This is bad.
- triggers Standards mode with all updated features, which is good.
- = metadata and info about the page
- = content
- Full HTML tree structure
- is pretty standard, and will allow your website to display anyUnicode character. (Read more on how UTF-8 works here.)
- Avoids “div soup”
- Makes html more readable
- Also works better with search engines that crawl through your code because they look for key words in your semantic element tags
- Also lets them show cool previews of your content
- Also help with screen readers, making your page more accessible
CSS syntax
selector { declaration block; }
Semantic elements
- Elements where the tag name reflects the purpose of the element, e.g. paragraph, ul, ol, header, footer, span, article, section
- Make html easy to read and understand
- <div> could look like anything, but tells us it will take up the entire width of the page, and likely will include some information about who created it
</div>
- <div> could look like anything, but tells us it will take up the entire width of the page, and likely will include some information about who created it
- Other semantic elements include main, article, figure (some thing like an image), figcaption (nested in figure)</div>
- Make html easy to read and understand
Display properties
- main two – master these and the rest will make sense)
- display: block;
- Block element takes up as much width as possible
- Example: divs
- display: inline;
- Inline element takes up only as much width as needed
- Example: spans
- display: block;
Box model
- Content
* Padding
* Space between content and border
* Border
* Margin
* Space between this element and other elements
* Most people think of margin as the space on the outside of elements, while everything from the border to the content is “inside” the element
Inline elements
- Height treated the same as block elements
- Width, however, is content-based. AND you CANNOT set the width of an inline element. It is just as wide as the content, no more, no less.
- What happens when the content in an inline element is wider than the space available?
- THE CONTENT WRAPS
- You CAN add margin and padding to elements. Margin pushes elements away horizontally but NOT vertically.
What happens when you type google.com into your browser’s address box and press enter?
-The “g” key is pressed
OS interrupt, other behind the scenes OS behavior. In the browser, auto-complete machinery kicks into high gear, presenting suggestions based on past searches or popular searches.
-The “enter” key bottoms out
At this point, an electrical circuit specific to the enter key is closed (either directly or capacitively).
Interrupt fires [NOT for USB keyboards]
- (On OS X) A KeyDown NSEvent is sent to the app
- Parse URL
-Is it a URL or a search term?
When no protocol or valid domain name is given the browser proceeds to feed the text given in the address box to the browser’s default web search engine. In many cases the URL has a special piece of text appended to it to tell the search engine that it came from a particular browser’s URL bar.
-Convert non-ASCII Unicode characters in hostname
Since the hostname is google.com there won’t be any, but if there were the browser would apply Punycode encoding to the hostname portion of the URL.
-DNS lookup
Browswer checks its cache. if not there, calls on OS to do the lookup.. if not there then it makes a request to the DNS server configured in the network stack (local router or ISP’s caching server)
-ARP process
Address Resolution protocol. Need to know own MAC address of interface to be used, and IP address of destination.
If the computer is connected to a switch, the switch will check its local CAM/MAC table to see which port has the MAC address we are looking for. If the switch has no entry for the MAC address it will rebroadcast the ARP request to all other ports.
-Opening of a socket
Once the browser receives the IP address of the destination server, it takes that and the given port number from the URL (the HTTP protocol defaults to port 80, and HTTPS to port 443), and makes a call to the system library function named socket and requests a TCP socket stream - AF_INET/AF_INET6 and SOCK_STREAM
*This request is first passed to the Transport Layer where a
TCP segment is crafted. The destination port is added to the header, and a source port is chosen from within the kernel’s dynamic port range (ip_local_port_range in Linux).
*This segment is sent to the Network Layer, which wraps an additional IP header. The IP address of the destination server as well as that of the current machine is inserted to form a packet.
*The packet next arrives at the Link Layer. A frame header is added that includes the MAC address of the machine’s NIC as well as the MAC address of the gateway (local router). As before, if the kernel does not know the MAC address of the gateway, it must broadcast an ARP query to find it.
-HTTP protocol
Client sends HTTP request, gets response. Server responds with a response code, headers, and then the HTML payload.
-Browser
Parses HTML, CSS, and JS resources, then Renders it all (constructing the DOM, then render tree, then layout of render tree, then painting of the render tree
-Post-rendering and user-induced execution
After rendering has completed, the browser executes JavaScript code as a result of some timing mechanism (such as a Google Doodle animation) or user interaction (typing a query into the search box and receiving suggestions). Plugins such as Flash or Java may execute as well, although not at this time on the Google homepage. Scripts can cause additional network requests to be performed, as well as modify the page or its layout, causing another round of page rendering and painting.
SPDY
Google Chrome alternative to HTTP
How does SSL work?
Watch a video of this
