Zombie Blocks and Other Blocks of Content - Part 2

5 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $99.99
You save:  $30
List Price:  €93.29
You save:  €27.99
List Price:  £78.80
You save:  £23.64
List Price:  CA$137.46
You save:  CA$41.24
List Price:  A$151.09
You save:  A$45.33
List Price:  S$135.39
You save:  S$40.62
List Price:  HK$780.72
You save:  HK$234.24
CHF 62.15
List Price:  CHF 88.79
You save:  CHF 26.64
NOK kr747.51
List Price:  NOK kr1,067.92
You save:  NOK kr320.41
DKK kr487.15
List Price:  DKK kr695.95
You save:  DKK kr208.80
List Price:  NZ$163.80
You save:  NZ$49.14
List Price:  د.إ367.26
You save:  د.إ110.18
List Price:  ৳11,720.79
You save:  ৳3,516.59
List Price:  ₹8,342.33
You save:  ₹2,502.95
List Price:  RM471.26
You save:  RM141.39
List Price:  ₦148,985.10
You save:  ₦44,700
List Price:  ₨27,784.17
You save:  ₨8,336.08
List Price:  ฿3,684.08
You save:  ฿1,105.33
List Price:  ₺3,264.50
You save:  ₺979.44
List Price:  B$542.30
You save:  B$162.70
List Price:  R1,812.25
You save:  R543.73
List Price:  Лв182.48
You save:  Лв54.75
List Price:  ₩138,450.18
You save:  ₩41,539.20
List Price:  ₪371.74
You save:  ₪111.53
List Price:  ₱5,871.66
You save:  ₱1,761.67
List Price:  ¥15,809.09
You save:  ¥4,743.20
List Price:  MX$1,843.54
You save:  MX$553.11
List Price:  QR363.80
You save:  QR109.15
List Price:  P1,353.39
You save:  P406.05
List Price:  KSh12,848.71
You save:  KSh3,855
List Price:  E£4,770.27
You save:  E£1,431.22
List Price:  ብር5,752.76
You save:  ብር1,726
List Price:  Kz85,641.43
You save:  Kz25,695
List Price:  CLP$92,679.73
You save:  CLP$27,806.70
List Price:  CN¥725.54
You save:  CN¥217.68
List Price:  RD$5,910.22
You save:  RD$1,773.24
List Price:  DA13,467
You save:  DA4,040.50
List Price:  FJ$224.25
You save:  FJ$67.28
List Price:  Q775.04
You save:  Q232.53
List Price:  GY$20,868.13
You save:  GY$6,261.06
ISK kr9,751.70
List Price:  ISK kr13,931.60
You save:  ISK kr4,179.90
List Price:  DH996.73
You save:  DH299.05
List Price:  L1,785.70
You save:  L535.76
List Price:  ден5,746.58
You save:  ден1,724.14
List Price:  MOP$802.41
You save:  MOP$240.74
List Price:  N$1,817.68
You save:  N$545.35
List Price:  C$3,671.30
You save:  C$1,101.50
List Price:  रु13,330.97
You save:  रु3,999.69
List Price:  S/376.18
You save:  S/112.86
List Price:  K383.52
You save:  K115.06
List Price:  SAR375.16
You save:  SAR112.55
List Price:  ZK2,575.94
You save:  ZK772.86
List Price:  L464.26
You save:  L139.29
List Price:  Kč2,309.86
You save:  Kč693.02
List Price:  Ft36,947.80
You save:  Ft11,085.45
SEK kr734.22
List Price:  SEK kr1,048.94
You save:  SEK kr314.71
List Price:  ARS$90,229.18
You save:  ARS$27,071.46
List Price:  Bs689.27
You save:  Bs206.80
List Price:  COP$412,757.10
You save:  COP$123,839.51
List Price:  ₡52,415.29
You save:  ₡15,726.16
List Price:  L2,465.86
You save:  L739.83
List Price:  ₲751,207.13
You save:  ₲225,384.67
List Price:  $U3,927.20
You save:  $U1,178.27
List Price:  zł405.69
You save:  zł121.72
Already have an account? Log In


Alright, next we need to talk about links. So the A or anchor tag is what's used to create hyperlinks. href attribute is what holds the destination URL. And the content or the link text is the text between the opening and closing tags. So here we have an opening a tag, then we have an href attribute, linking to https colon, forward slash forward slash undead that Institute which is my website for zombie themed web development books. So if you ever want to go deeper, there's a place to go.

Then we have the link text, which is more zombie web development, and the closing a tag. One thing you want to be careful about is absolute versus relative links. So links within an HTTP or HTTPS are usually absolute links. And as long as the page is working, the browser should get there if you don't include the HTTP or HTTPS. These are relative links. And so the browser assumes that they will be in the same folder path are on the same server as this current page.

So if you go to hv s colon forward slash forward slash google.com, it will go out to another webpage, get google.com and bring it back to you. If you just type in google.com it will look for a file named google.com. Which not quite as helpful generally. Alright, let's let's do some more live coding. Let's look at some. Okay, so here we have our a tag with href undying, love.org undying love.

Sorry, we have some break tags just to break it up. And here we have email link. So email links work pretty similar to regular text links. But here we just start with a mail to instead of http colon forward slash forward slash, and that allows the somebody clicks on it, it will open up the default email client on that computer. You can also set up telephone links, so to and SMS links. those last two particularly Useful on phones that can also be used other nowadays as well.

So that is how you do some links. So oftentimes when we're creating text for the web, it's important to make it skimmable or make it easy for people to just skim through it. One of the best ways to do that is through headings and subheadings. html starts with h1 through h6, it's important to avoid blank heading tags, just as anyone who is a sighted user will scan through a page with their eyes jumping from heading to heading to try to find the content they're looking for. So also screenreader users will scan with their ears and jump between headings to try to find what they're looking for. So blank headings can particularly throw them off, even if they don't throw off sighted users that much.

Alright, so the headings, each one is generally going to be your largest heading, but it usually holds the title of the page. So you don't want to often use h1, unless you know it's not the title of the page. The next is h2. And you should begin to break your content out there. h3 and keep going h4 more sub headings. h5, often if you get here usually have some content problems.

So you might want to relook at that. And if you get age 60 almost definitely have some content problems. Okay, here we have HTML headings. You can see as you go up in ages, h1 is the largest here then h 2345 and six for PFC Wiggins must report to a random chipmunk apparently. And as you can see, h1 slash h1, h2, slash h2, et cetera. One last section we're going to cover here is about quotes.

So there are two different ways to or two different tags you can use for quotes in HTML. inline quotes will be handled with a Q, you can also actually use quotation marks. But if you happen to be in a culture that does not use quotation marks the way Americans tend to, for instance, French the language uses a different type of quotation marks. But if you're using a cue tag, it has two big benefits. One is that there's a site attribute that can allow you to place a URL from where you where you got the quote from, so that people can access that content. And it also allows you to versatility in styling quotes, particularly if you need the double arrow quotes or guillemette, I think it's called, that are used in French, you can make those changes with CSS, rather than having to re write the page or change the page.

And there's also block quotes, which has its own tag of blockquote. Surprising enough, that's for very long quotes that are going to prevail against the stinky zombies Of course, and by default, it will set the quote off from other texts indenting it and giving some space above and below it from the surrounding text. And you can also use the same attribute on a blockquote but there's also cite element, he's that with a blockquote. First to creative work and must include either the title, the author, or the URL of that work. That said, another web Center is a She says you should never use the author, insight element. So use your best judgment.

And finally here we have two examples of quotes Allison's Zombieland using the same element using the buck code. And that's how you can play with quotes and really start marking up the types of content within your website.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.