Tech

Blog

[Hex

Week

5]

b
yJ
a
c
k
i
eC
r
o
x
f
o
r
d

Monday, November 16th

(My goal for this afternoon is to start
the CSS layout section of the Khan
programming course for Game & Sim.)

CSS Grouping Elements

HTML has two grouping elements that can be used to move and resize different
parts of a webpages layout called <span> and <div> tags. Technically speaking, these
tags have no actual meaning or purpose unless theyre combined with CSS. The <span>
tag is an inline element that can be used to style text on a page, like by changing the
color, size, or position. The <div> tag is a block element that can be used to create
boxes and divisions between different parts of a page.
To illustrate the ideas behind <div> and <span>, Khan Academy programming coach
(whose named I just learned is Pamela!!!) edited a simple webpage about cats. Heres a
quick before-and-after of the video:
Before:

After:

You can probably tell the differences between the two images but Im not here to
make assumptions! The word love was changed to the color red by using the <span>
tag before the word love and assigning a class to it, like this:
<span class=lovey-dovey> love </span>.
At the top in the <style> tag (this single tag holds all the CSS elements on a

page) one would write:

.lovey-dovey{

color: red}
And its as simple as that! <span> is just a specifier that allows you to easily edit
certain things on a webpage by assigning them classes and IDs, just like <div>. Speaking
of which, thats where the gray box around the paragraph came from! <div> is responsible
for making sidebars, headers, text boxes, and essentially every major webpage element,
but in this case its only adding a simple background to the paragraph to demonstrate
the concept. To properly execute this, someone would use <div> tags surrounding the <p>
tags, and then add a class or ID to the <div> like we did with the <span>, like so:
<p><div id=official-info> (all of the paragraph text)</div>
And then, in the <style> tag:
#official-info{
background: rgb(230, 230, 230)}
Ta-daaaa~!
Aint that neat? This stuff is just like magic and I love it. Im addicted

to CSS. I imagine that this will soon become disruptive to my social and personal life as
no one will be able to put an end to my rampant programming binge; for days I will be

toiling away at my keyboard ceaselessly, my hands raw, my eyes bleeding. Worried by my

prolonged absence, family and friends will try to reach me, but to no avail. I will have
been busy coding
the best interactive orca-whale-following-your-cursor webpage the

world has ever known

. In the meantime, though, Im working on the next Khan challenge.
Lets take a look B-)

Challenge: Group the groupers

Before:

After:

For this challenge, I had to do a few things: first, add a <span> to the first
sentence of each paragraph, then add a class to those <span>s called first-sentence.
To the overall text I had to designate a <div> and a class for the <div> called info. In the
style tag I wrote the following to make the text bold and the background gray:
.first-sentence{
font-weight: bold
}
.info{
background-color: rgb(230, 230, 230);
}

Wednesday, November 18th

(My goal for this afternoon is to continue
progress on the CSS layout portion of the
programming course on Khan Academy!)

CSS width, height, and overflow

One of the most gratifying aspects of CSS and HTML is how you can manipulate
the items on your screen to be aesthetically pleasing. The CSS elements that I learned
today are imperative to fulfilling the task of fitting images and text on a page in such a
manner that will satisfy all of your visionary needs.
On the left here is a screencap of
a simple page made using
novice-level HTML & CSS coding.
You might agree that its rather
plain and not exactly a sight for
sore eyes. There clearly arent any
advanced techniques at work, and
the information is portrayed in an
unsightly, unorganized fashion.
One way to tidy up a block of
clunky, disagreeable text is to use
the
overflow
property.
Overflow is the CSS property most commonly responsible for the appearance of scrollbars
on a webpage. Overflow organizes text in compact order that eliminates chunky
overwhelming lengths of text by neatly cramming all of it into a box, like this:

This can be accomplished through the utilization of the mighty and elusive <div>.

In the <style> tag after classifying/identifying your <div>, you can use the overflow
property in a number of ways:
overflow: hidden:
Creates a box, but cuts off the text inside rather than creating
a scroll-bar.

overflow: auto:
Creates a box and a scroll-bar to navigate the text.

overflow: visible:
Creates a box, but excess text will spill out of the bottom.
There are also x and y values for overflow that specify what action should be
taking place in what direction. For example, if you wanted a horizontal scrollbar instead
of the customary vertical one, you would use
overflow-x: auto
.
Another useful bit of information I learned today was that you can resize any
image on your page by using the
width
and
height
properties. The fun thing about this

is that when you change one property, the other automatically changes with it to satisfy
the proportions of the image to save you some grief! Its fantastic.

Challenge: The overflowing ocean

Before:

After:

This challenge required that I, your Blog Host Jackie, resize both this beautiful
image of the riveting sea and its less beautiful, less riveting text counterpart. I did this in
part by setting the width of the image and the text to 70%, then by setting the text

overflow to auto. You cant tell from the screencaps, but I also changed the background
color of the text area to a seafoam blue-green, because I am a tasteful individual. Heres
the code I wrote to make all this wild fun stuff happen:
.info {
background: rgb(219, 235, 255);
width: 70%;
height: 200px;
overflow: auto;
}
.pic{
width: 70%;
}

Friday, November 20th

Do you see this? This configuration of hot rectangles is referred to as

THE BOX

MODEL,
and its about to rock your gosh darn world. Everything you previously thought I
thought I knew about the universe was wrong and is now being replaced with boxes.

Anything is possible and I fear what I may do with this newfound limitless power. I feel
invincible, dear reader, like I could engage in hand-to-hand three-way combat between a
lion and a bear at the same time and actually convince both of them to befriend me, the
three of us sharing a boundary-dissolving bond that lasts the rest of our natural lives.

I understand that you may be harboring some minor disgruntlement about what
Im trying to convey right now, but allow your confusion to subside as I am about to
explain to you why this is so exciting. There one was a time when boxes of content on
any webpage I made were horribly ugly and there was nothing any of us could do to
prevent the ugliness from invading our lives. Until now. We have all collectively reached a
Golden Age wherein boxes permeate themselves to obtain a multilayered richness that,
for purposes of this tech blog, were previously unbeknownst to me.
Dont let the confinements of the written word prevent you from experiencing the
true splendor of my realization, observe:

Never in my life have I been so

enthralled to see such a gaudy,
unimpressive arrangement of
color and words. This is truly a
breakthrough and a
monumental feat on behalf of
humanity as a whole. Im proud
just to be alive when I look at
this, purely accredit to the fact
that I can do something Ive
never been able to do beforewhich is making lines go
around boxes on a screen.

Content
typically comes in the form of words and images, like we saw in earlier

versions of the cat webpage.

Borders
are lines framing the content, and p
adding
is the
empty space between content and borders.
Margins
are the empty space surrounding
the border.

These four elements, much like earth, air, wind, and fire, are what constitute the
cosmic powers of balance and peace in the online universe, and from them anything can
be created. Because I like you Ill show you how to use them in the correct format.

#content{
border: 5px
(value specifies size)
solid
(style)
red
(color)
padding: 4px
margin: 1px}
The border can come in many different styles, and each side of the border can
actually be different. Heres a resource I found that demonstrates all the different
borders:

Challenge: The boxer model

This challenge was

fairly simple, it only
required me to put borders
around each of the images.
I did this by using the
img tag as a base, and
then writing border: 5px
solid black underneath it
which applied it to all the
images.