Saturday, February 22, 2014

Turning a Boring Article into an Elegant Webpage!

Today, I found an article from World Book Online about Yuna Kim and took its content to design a web page!

The article I found:




This is my code:

<!DOCTYPE html>
<html>
<head>
    <title>Kim Yu-Na</title>
    <style type="text/css">
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: papayawhip;
            margin: 0;
        }
        header, #body, footer {
            margin: 0;
            padding: 5px 50px;
        }
        header {
            background-color: peachpuff;
            text-align: center;
        }
        h1 {
            color: lightseagreen;
            margin-bottom: 0;
        }
        h2 {
            color: DarkKhaki;
            font-style: italic;
            font-size: 1.25em;
            margin-top: 0;
        }
        #body {
            background-color: bisque;
            color: midnightblue;
            width: absolute;
            height: absolute;
        }
        img {
            float: left;
            margin: 10px;
            width: 11%;
            height: 11%;
            border: 1px solid white;
        }
        footer {
            background-color: inherit;
            text-align: right;
            color: darkcyan;
        }
        a {
            color: inherit;
        }
    </style>
</head>
<body>
<header>
    <h1>Kim Yu-Na</h1>
    <h2>Figure skater<h2>
</header>
<div id="body">
<p><img src="http://olympicgirls.net/sport-girls/kim-yu-na-figure-skating-07.jpg" alt="Kim Yu-Na Skating" caption="From http://olympicgirls.net/kim-yu-na/kim-yu-na-figure-skating-07/" />Kim Yu-Na (1990-...) is a champion South Korean figure skater. She won the gold medal in women's figure skating at the 2010 Winter Olympic Games in Vancouver, Canada. The judges awarded her 228.56 points, a new world record. She had set the previous world record in 2009. Many observers described her performance as one of the greatest in Olympic figure-skating history. Kim became the first South Korean to win a medal at a Winter Olympics in a sport other than speed skating. Kim's success in international figure skating has made her a national hero in South Korea.</p>
<p>Kim Yu-Na was born on Sept. 5, 1990, in Bucheon, South Korea. She began skating at the age of 5. She won the South Korean Ladies Figure Skating title at the age of 12. She repeated as champion the next three years. In 2006, Kim moved to Toronto, Canada, to train under Brian Orser, a retired Canadian figure skater. Kim won the World Junior Figure Skating Championships in 2006 and the World Figure Skating title in 2009.</p>
</div>
<footer>
    <p><cite>Courtesy of <a href="http://worldbookonline.com/" target="_blank">World Book Online</a></cite></p>
</footer>
</body>
</html>



And here's my final webpage!



I'm still working on developing my artistic taste for color schemes because you can see that the colors for the headings 1 and 2 don't really match with the background...

But these are some websites that really helped me with colors:

http://www.colors.commutercreative.com/



This is an elegant and simple website that shows all the colors and gives you the names... I really like its modern look!


http://colorschemedesigner.com/


On this website you choose a color from the wheel and the website suggests color schemes and gives you the hexidecimal values.


Thursday, February 20, 2014

Run a Non-Default Browser in Metro: Windows 8

Today I started working on the 4th edition! No, I did not finish the 3rd edition. I mean, if I finished the whole thing I'd be really bored with this new edition since everything is pretty much the same except HTML5, the new CSS, and a section on understanding Javascript.

Did you know that Javascript actually has nothing to do with Java? The creators originally named it "LiveScript," but Java was really popular then, so the creator renamed it Javascript, or "JS" for marketing purposes.

I need to share something that really frustrates me about Microsoft. So you know the new Windows 8? Well, they have apps that can operate in metro, meaning in the tablet way, imitating the Apple ipad, etc. etc.

Okay. I'm not too cool with the metro thing. But since I have it anyways, why not use it? Okay, so I want to use IE 10 (the newest version of Internet Explorer) in metro. But Microsoft only allows you to use IE 10 in metro if it is set as your default browser! Why?

This is their ridiculous reason:

"Metro style enabled desktop browser may participate in the Metro style user experience only if it is the default browser... The restriction to limit Metro style user experience participation to the user's default browser is rooted in preserving the Metro style user experience."

Source: http://superuser.com/questions/490415/is-it-possible-to-use-the-ie10-app-without-making-internet-explorer-the-default

I don't want to set IE as my default browser because then every time I run my html files, they run with IE:
From the source up there, I learned a way to get around Microsoft's ridiculous rules!

You go to Default Programs (search from start) > Set your default programs. Choose IE, and set it as your default browser:

Then, on the left hand side, click on the browser you want as your default, the one you want to open html files with. For me, it's Google Chrome. Click choose defaults for this program.

The extensions part should look like this:


Make it look like this by checking everything in extensions:

Now go back to your files and they'll open with Google Chrome!


And IE runs in metro:


Take that, Microsoft!


Thursday, February 13, 2014

Colors and Backgrounds

Today I used what I learned about specifying colors in CSS in order to make a black and white webpage about Cabbages and Cauliflowers much more exciting. Here's what it started like, with CSS rules on only the text style:



Then I added color to the text, background color, and background images. This is the new style sheet:

<style type="text/css">

  body{margin-left: 10%;
    margin-right: 10%;
    background-color: #BBE09F;
    background-image: url(cabbage_C.gif);
    background-repeat: no-repeat;
    background-position: center 85px;
    background-attachment: fixed;
  }
   
  div#titlepage {
    padding: 1em;
    background-color: #D4F8B9;
    background-image: url(cabbage_C.gif);
    background-repeat: no-repeat;
    background-position: center 85px;
    background-attachment: fixed;
  }
  
  div#titlepage p {
    text-align: center;
    font-variant: small-caps;
    }
   
  p {
    text-align: justify;
    }
 
  h1,h2,h3,h4,h5,h6 {
    text-transform: uppercase;
    text-align: center;
    }
    h1 {
        color: #C30;
    }
    h2 {
        color: #630;
    }
    a:link {color:#030;}
    a:visited {color:#363;}
    a:hover {text-decoration:none;
    color:#030;
    background-color:#87B862;
    }
    a:active{color:#C30;}

    </style>

This is what it looks like now!


Tuesday, February 11, 2014

More on Colors!

As promised yesterday, we'll look at

#FFFFFF

and

#FFF

today.

So, #FFFFFF is written in hexidecimal. The first two Fs are for red, the next two Fs for green, and the last two FFs are for blue. Basically, if each of the digist (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) for red are the same, you can simplify it to one digit. Same for green and blue. So in our example, that simplifies to #FFF.

It isn't very intuitive to come up with hexidecimal for a color on the spot, so here's a handy dandy colorful table for you:

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

Source: http://www.w3schools.com/cssref/css_colors.asp.

Monday, February 10, 2014

Colors, colors, colors, and colors!

In CSS, we use colors in text, backgrounds, borders, underlines, on and on and on. The most common way to specify a color is by giving its RGB value. RGB stands for red, green, and blue. You guessed it! You basically say how much red, green, and blue you want in that color!

There are four ways to give RBG values:

rgb (255, 255, 255)
rgb (100%, 100%, 100%)
#FFFFFF

#FFF

These all describe the color white. Let's look at the first one:

rgb (255, 255, 255)

The higher the number, the more light. 255 is the highest number you can specify for each color, and the most light means white. But why is 255 the highest number? Well, 8 bits (a bit in a computer is a 1 or 0) are used for providing the red value, and 8 bits can have 256 numbers (28=256), so the numbers range from 0 to 255, 0 being no red light, 255 meaning the most red light. The same is for blue and green.

rgb (100%, 100%, 100%)

The RGB values here are just specified using percentages, 0% being no light, 100% being the most.



#FFFFFF

and

#FFF

Are in hexidecimal, which we'll go over tomorrow.