It was on CNN where I saw the pullquote styling that I'll be talking about in this post. Using the blockquote element, I've shown you how to style pullquotes before. In the new example, the pullquotes will force the text to be indented as it flows around them, engaging the body of the text. I am going to use material from a previous post to show you how it works. I will list the CSS immediately after the newly styled, How the Internet Works.
How the Internet Works
- IP Packets: IP Packets are similar to traditional snail-mail letters
- IP Addressing: Each packet has a from and to address
- IP Routing: Routers do the delivery work
In a previous post I described TCP/IP. In this post I'll focus more on the lower layers of the protocol stack: the IP layer and below. One key thing to understand is that the Internet is built on a single simple idea: the IP Packet.
So what is it?
An IP Packet is lot like a letter you send via the post office. In the case of IP Packets of course, we're really talking about an array of bytes in your computer memory, not a physical piece of mail. But there really are many similarities. In both case you have a From Address, a To Address, and inside it carries some contents that you want delivered at the other end.
With both IP Packets and letters, once you send it you no longer have any control over it - it's out of your hands. It goes into the delivery system and you depend on that delivery system to get it where it's supposed to go. There is a small chance it could get delivered to the wrong place, or lost completely.
The Internet is a series of tubes
US Senator Ted Stevens
The contents could be examined by some third party, damaged so that they are unreadable, or even intentionally altered by some unscrupulous party before being delivered. There are protections against each of these bad outcomes, which I'll talk about in a later post.
In the case of a letter, you write the from and to addresses on the outside of the envelope and place the contents inside the envelope. IP Packets have a similar idea. An IP Packet starts life as just a sequence of bytes in your computer memory. Typically the first 20 bytes or so are used like the outside of an envelope. This part of the packet is called the "IP Header".
This is where the from and to IP Addresses are placed. IP Addresses are 4 bytes each(*), so those take up 8 of the 20 bytes. Some of the other bytes in the header are used by the delivery system for housekeeping. As an analogy, recall that the outside of an envelope has a stamp, and the postal service adds a post mark. Similar idea.
After the IP header, we place the bytes of the payload - the thing we want to get delivered to the recipient. Once we've got the payload, and the header constructed, we need to send it. With letters we need to get them to the post office. The equivalent in the IP World is your local Router. The router is responsible for looking at the destination IP address and figuring out where to send the packet next.
That next hop is likely another router that is one step closer to the recipient - just as your local post office might send the letter to another postal facility to be sorted and forwarded on towards the destination address.
The internet is built on a single simple idea: the IP Packet
CSSRule.com
The way we get the packet from your computer to your local router is over your local area network (WiFi or Ethernet). If you are hooked up directly to a DSL/Cable Modem, then your "local" router is really a router located at your Internet Sevice Provider. The main idea here is that you can send the IP Packet to the router directly over the underlying networking media, whether that is Ethernet, WiFi, DSL, or Dial-up.
There is a whole other story on how the packet gets delivered over this media to the router, but for now just think of this media as your local mailman who picks up the letter and carries it to the post office (i.e. to the local Router). I can go into more details on Ethernet, WiFi, DSL etc. in a future post.
After an IP packet has been constructed in your computer memory, and carried to your local router via your local networking media, the router gets to work. It looks at the destination IP address, and matches this against a set of configured rules in a table. The rules are called "IP Routes", and the table is called the "IP Routing Table". By matching the destination IP address against the IP Routes, the router figures out the next place to send the packet. We call this the "next hop".
The next hop is going to be another router that will repeat the same processCSSRule.com
Your IP packet might hop through a dozen routers. Finally it reaches a router that can talk directly to the recipient, and that becomes the final "next hop". The packet is sent from that final router to the destination over the local networking media, just like the mailman delivering mail.
The recipient (destination computer) opens up the packet. It can see the senders IP address, and it can read the contents. It's at this point that IP will hand the contents off to some higher layer protocol like TCP or UDP. IP has done it's job which is to get the contents of the packet from the sender to receiver. Any replies that go back to the sender will be determined by a higher layer protocol. For example, TCP may want to send an acknowledgment of the received packet. It will do this by forming yet another IP packet, with the original sender's IP address now placed in the new packet's IP header as the destination IP address (just like you would reply to someone who sent you a letter by sending them back a letter with the from/to addresses reversed).
In the world of TCP/IP networking there are a lot more details, more protocols, more ideas, as well as info on how you can write programs to directly use the TCP/IP protocol stack. There are entire books, and series of books on these subjects, but I hope in this post I've at least given you a flavor of how the Internet really works under the hood.
Here's the CSS for the pullquotes shown above. If you are not on Blogger, then you will exclude parts of the selector that are in red. div.suspended has enough specificity for most users. The pathnames for the two images are generic. Replace them with your own pathnames.
#main-wrapper div.post-body div.suspended {
color: #666666;
font: bold 24px/27px arial;
padding: 0 27px 0 0;
width: 244px;
float: left;
margin:0;
}
div.suspended blockquote {
margin: 0; padding: 0;
padding-bottom: 25px;
padding-right: 10px;
text-align: left;
line-height: 1.1em;
}
.suspendedquote {
font-family: "museo", sans-serif;
}
.suspendedquote:after {
/* The curly end double quote symbol */
content: "\00201D";
/* The font */
font-family: Georgia;
font-size: 130px;
color: cornflowerblue; /* #d5ddf0; */
/* Positioning */
float: right;
margin-right: 10px;
/* margin-top: -7px; */
}
div.suspended span {
color: #999999;
display: block;
font: 10px/12px arial;
padding: 18px 0 0;
}
div.article {
margin-left: auto;
margin-right: auto;
width: 570px;
}
div.article p {
margin: 0;
padding: 0 24px 19px 186px;
color: #606060;
font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
font-size: 13px;
line-height: 1.6em;
text-align: justify;
}
.linediv {
width: 180px;
background-color: #000000;
height: 3px;
margin: 25px 0 0 0;
}
.starlistx {
list-style-type: none;
margin: 9px 0 10px;
padding: 0;
}
.starlistx li {
background: url("images/star.gif") no-repeat scroll 0 2px transparent;
padding-left: 17px;
padding-bottom: 9px;
color: #333333;
font: 11px/14px arial;
}
.article_summary {
float: left;
width: 160px;
color: black;
font: 12px /14px arial;
}
.article .captioned {
margin-bottom:35px;
}
.article .byline, .article .timestamp {
font-family : Arial,Helvetica,sans-serif;
font-size : 12px;
color : #666666;
margin-bottom: 3px;
line-height: 15px;
}
.article .timestamp {
margin-bottom: 20px;
font-size : 11px;
}
.article .related_topics {
clear: left;
float: left;
}
.article .related_topics h3 {
font-family: Arial,sans-serif;
font-size: 12px;
font-weight: 400;
color: #000000;
text-decoration: none;
letter-spacing: normal;
word-spacing: 0;
line-height: 18px;
padding: 0;
padding-top:5px;
}
.article .related_topics ul {
margin: 0; padding: 0;
margin-top: 6px;
font-family: arial;
font-size: 11px;
font-weight: bold;
font-style: normal;
color: #004276;
text-decoration:none;
letter-spacing: normal;
word-spacing: 0;
line-height:14px;
}
.article .related_topics ul li {
list-style-type: none;
padding-bottom: 2px;
}
.article .related_topics ul li a {
color: #767676;
}
.article .related_topics ul li a:hover {
color: #58c5fe;
text-decoration: none;
}
For the markup, see HTML.
Posts
Post a Comment
Note: Only a member of this blog may post a comment.