HTML & CSS – Lab 03 Text


For lab 03, we are going to create a book
review, which is going to allow you to use several text effects. This is a sample page
of something that you might include in your book review. It has a lot of different options
here for text. What I want to do is to go through what each one of them does. So I’m
working in Firefox and I’m going to right click and select View Page Source. This will
let me see how my source code was created. To make it easier to view, we’re hitting control
plus plus, which will increase the size of the font for the page. I’ve added a few things
that aren’t necessarily visible here. You can see I’ve got several tools, and you can
see where my h1 tags are, my h2, my paragraphs. This just sort of breaks it down. I have a
black quote here, paragraphs, address, so you can see some of the elements coming up.
It doesn’t show everything but it does show block level elements. So that you can see
where I’m adding things in here. Because this is an unordered list, which is actually for
navigation. So let’s just take a look comparing the source code to the results. Again, we’re
using HTML5, so I’m using the doctype of html with the language of English. And in my head
I declare the charset utf-8, which is what we use in America, and the title is “Lab 3:
Book Review”. And that shows up right here – Lab 03: Book Review. Then I have an id,
a div with an id of container. I’m doing this to get you in a habit of containing everything,
all of your content into a container. Once we start using CSS, we can then put that container
set to maximum size, center it, change colors, do some cool formatting. Then I have the header,
which is the masthead of my page and inside of it I have a navigational structure with
an unordered list. And this list has links to on-page references. So here I have my masthead.
Book review and links, which will take me to on-page references. And that closes my
header section. Then we have an article. Remember, an article can be hold out of the page and
republished elsewhere. It has several sections, which act as chapters. So I have h2 with an
id of plot. That’s what this is linking to. Some information about the plot. Then I have
characters, and you’ll notice in the characters, I’m actually using the definition here to
define these terms. “Goddess of poetry, and the Morrgan, goddess of war” And the definition
makes it appear as italics but you could change styling on that later. You’ll notice here,
I also have an abbreviation for the Celtic god, so I’m using the abbreviation here and
if we scroll over, you’ll see that I used the abbreviation and I used the title, which
is what makes Celtic appear right there. Then I have my character, series, author, I’m using
strong to put an emphasis on Kevin Hearne, and then I talk about him and I put in a block
quote. Apparently it doesn’t like my closing of my paragraph here. This is interesting.
This is one of those funky things where it depends on how it’s reading the rules because
I can put a block quote in a paragraph but Firefox doesn’t like it. So it’s indicating
that it considers this to be an error that there’s a little quote going on in that. So
you can have it in a paragraph or not. In here I have a block quote, I’ve also added
the quotes to make the quotes appear and then I’ve used the cite option, to cite my source
“Kevin Hearne from the book Hounded”. Now I did capture this image, which under fair
uses is as an academic thing and I’m referring to the actual book by Kevin Hearne, so it’s
generally considered appropriate to use the image of his cover, when providing a review
of his book. This is a figure, and this is my figure caption, so I have my figcaption
here. And then again I’m having an issue here where it doesn’t like me to have all of this
in one paragraph. Again, I have some bad habits from working with HTML back since 1997, that
hasn’t generally been allowed and you’ll see that it renders just fine. It’s backwardly
compatible. And then I have my address. This is my e-mail address. And this should have,
it’s not appearing here as a link, so I’ve got a minor error here. I’m going to show
you how to correct that. And then I have my “Page published”, with the date and time.
The published date “December 26th, 2013”. And I’ve put that in small which refers to
the fine print. That’s all in the footer. So let’s go take a quick look at my errors.
And I prefer working in Dreamweaver. I’m going to open up my index page. And you’ll notice
I have that Hounded picture here inside of my folder and I’ll show you how I got that
in a minute. But I had a few errors that aren’t showing up as errors in Dreamweaver. So here,
my mailto should have been in a form of a link. So it’s “a href=”, I should have put
that in quotes. No, not two Es. Close this. Add my name and close that. That should update
that to make it a link. Ok, that’s good. Now, it was not happy with my paragraph here
but I’m starting here so this should simply
close at this point. And it also did not like the paragraphs surrounding the block quote.
So we’ll just get rid of them. And that shouldn’t really impact the way that it looks. In Dreamweaver
I can now save this and I can just choose Put, and that will upload it. And when you’re
checking these to see if your changes worked, you need to make sure to refresh. That appears
to have worked. And if I view my page source, I should not have any errors. Ok, so that’s
a little bit of how to change things, re-upload, check to see if you have errors. And I will
have a separate video on how to get a screen capture to get the cover for your own book
review.

Tags:, , , ,

Add a Comment

Your email address will not be published. Required fields are marked *