Beginning Web Development : Inline Styles and Gradients

In all the books I have read about web design/development most of the authors say something along the lines of “HTML is the workhorse of the internet.”  While this is true, for very basic sites, CSS is the workhorse for design.  Everything that makes a site looks good is (usually) done with a CSS.  In the rare cases that it is not the styling is usually done via code (like JavaScript or PHP.)

Inline styles are handy when you are looking to change one or two single elements.  Elements that are not going to be changed on any other page or are unique for some reason.

<h1><strong>Hello!</strong><h1>

The above code would show a something like so:

Hello!

We can make it more interesting by adding a color:

<h1 style="color:red"><italic>Hello!</italic></h1>

Hello!

You can also do inline styles in the same way you do a CSS file.  You have to separate the CSS section with some element tags and the styles will be at the top of the page, before your content.

Here is the current opening to our test website.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset= "utf-8">
<title>Mere Magic Designs Tests Site</title>
<link rel="stylesheet" href="style.css"/>
</head>

<nav>
<a href = "index.html">Home</a> || 
<a href = "portf.html">Portfolio</a> || 
<a href = "vocab.html">Vocabulary</a> || 
<a href = "about.html">About</a>
</nav>

The styles are all held in a CSS file that is separate from the rest of the page.  We can add some styles by adding a style section in the <head> tag.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset= "utf-8">
<title>Mere Magic Designs Tests Site</title>
<style>
h1{color:red;
font-family: Helvetica;}
a{color:blue;
text-decoration:underline;
}
</style>
</head>

<nav>
<a href = "index.html">Home</a> || 
<a href = "portf.html">Portfolio</a> || 
<a href = "vocab.html">Vocabulary</a> || 
<a href = "about.html">About</a>
</nav>

Now the style is part of the web page.  It will act just like the link we had…

<link rel="stylesheet" href="style.css"/>

…but it is now part of the web page and will display as such.  This means that if a person looks at the code for your page they will be able to see all of the styles you used and how you used them.  It also removes the compartmentalization that makes CSS useful.  One CSS file can work on many pages and many sites.  Having a separate CSS file will also keep your style methods a secret (unless you know where to find them. 😉

You can do some cool things with CSS. Such as gradient backgrounds or sections (you may be more familiar with the popular term Ombre) .  To do this I recommend using as web based CSS Gradient generator.  There are quite a few to choose from and are all basically the same.  They contain an area to build your gradient and a text box where the CSS code is.  Just copy the code and paste it into your CSS document.

Here is the code for the gradient on the test site.

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #207cca 17%, #2989d8 41%, #56f756 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(17%,#207cca), color-stop(41%,#2989d8), color-stop(100%,#56f756)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#207cca 17%,#2989d8 41%,#56f756 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#56f756',GradientType=0 ); /* IE6-9 */

The first line tells the browser that the background will be #1E7599 if the gradient does not load correctly or the browser is really old.  Next we tell Mozilla (Firefox) that the gradient is linear. At the top the color is going to be #1E7599, when we have hit 17% of the screen (whatever the page is being viewed on) we are going to change to color #207CCA and so on.  We know that this line is for Mozilla because there is a comment at the end of the line letting us know.

Since the browsers display things differently it is good practice to have versions of the code for each browser your customers may use.  This is one of the reasons I recommend that you use a gradient generator, there are many browsers our there, and they change.  A gradient generator will cover the most common browsers for you.

You should also make comment your code.  You may forget why you put in a line or someone else may inherit your code and not know why you did something.

Visit the test site to see what it looks like now.

 

Beginning Web Development : Let’s Make it Pretty!

The web is full of pages that look the same.  To make ours stand out we should make it different, add some color and formatting.  We can do this two ways, but we are going straight to the best way, an external style sheet.

A style sheet is a single document that has all the formatting stored in it.  This way you do not get confused with all the HTML elements and the style tags.

To create a style sheet in Notepad you are going to save a blank document with the file extension of .css (it stands for cascading style sheet.)  Just like last week we will go to File ->Save As, change the “Save as Type:” field to “All Files” and in “File Name:” enter our file name with the extension we want.  I chose to do style.css as my file name.  It is also in the same folder as my file index.html.

The next thing we have to do is tell the browser that we have a file it needs to look at so our website will look pretty.  We have to add a line into our <header> element.

Here is what the first few lines of our index.html file look like.

<!DOCTYPE html>
 <html lang="en">
<head>
 <meta charset= "utf-8"/>
 <title>Mere Magic Designs Tests Site</title>
 </head>
<nav>
 Home || Vocabulary || About
 </nav>

We are going to add a new line of code right after the <title> element.  It is going to tell the browser to look for our formats in the style.css file we made.

The new header should look something like this (depending on what you named your file.)

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset= "utf-8"/>
<title>Mere Magic Designs Tests Site</title>
<link rel="stylesheet" href="style.css"/>
</head>

<nav>
Home || Vocabulary || About
</nav>

You may notice that we did not do a separate end element </link> on this line.  Since all the code is contained in the one line we are able to take a short cut and just use the /> at the end of the line to tell the browser we are done with the code and it can move on.

Basically we have told the browser that we are adding a stylesheet and that the name of the style sheet is style.css.  We are also telling the browser that the location of the stylesheet is relative to the location of the file index.css.  Meaning they are in the same folder.

Now we should create some coolness for our page and learn about Cascading Style Sheets.

There are a few things you need to know about how a stylesheet is set up to make it work properly.

Each element in the HTML document can be styled how ever we want.  We can make words red or blue, big or small.  We can make all the <h1> elements line up on the right instead of the left and change the fonts if we want.  We can make the background of our page a picture or just a color and add a boarder to the <nav> element if we so choose.  I recommend playing with these things and looking up all the things you can do on the internet, w3schools is a good place to start.

To make a change to the way the web browser will display things you must first select the element you want to change.  Let us make <h1> element bold(er) and change the font to Helvetica.  To do this we enter the below code:

h1 {
 font-family: "Helvetica", sans;
 }

We have told the browser that anything with an element of <h1> should be in the font Helvetica, if Helvetica is not installed on that users computer it should be displayed as a sans-serif font.

More Vocabulary!

Font: how the words look on a page.  Some fonts are really easy to read and other hard.  Ariel, Helvetica, and Times New Roman are all examples of fonts.

Serif: A serif is a “fiddly bit” on a font.  Times New Roman has lines hanging off the letters. Open a MS Word document and check out the different fonts.  Find out which fonts have a serif.  Fonts with a serif are considered more formal.

Sans-Serif: Sans translates to “none” or “without.” So a Sans-Serif font is a font without a serif.  No “fiddly bits!”  Ariel is a Sans-Serif font.  In most of the things I create I use sans-serif fonts.  I feel they are cleaner and easier to read.

Hex: No you are not going to curse anyone.  This is short for hexadecimal, or six decimals (characters in this case.) It is the way we tell the browser what color things should be.  You can use other ways but I find hex colors to be easier to write and understand.  White is #FFFFFF and black is #000000.  I recommend looking up the colors you want to use on the internet so you do not surprise yourself.

Ok, back to making the web page prettier.

In addition to changing the fonts we can change the color of the page and maybe make the footer font smaller than the rest.  The footer text is not as important as the rest of the text, so we should make it smaller.

With those changes the file style.css looks like so:

body{
background:#B8DBFF;
}

h1 {
font-family: "Times New Roman", Times, serif;
}

footer {
font-family:"Ariel", sans-serif;
font-size: 10px;
}

It is important to get the parts of these correct.

First you have the name of the element you want to change, body, h1 or footer.  These are followed by a set of “curly braces” {}.  This tells the browser what is being changed.

Once inside the braces you name what you are changing, background, font-size, font-family, etc, followed by a colon.  Then you tell it what you want the change to be, Hex color change, size change in pixels, whatever the change is.  End the change with a semi colon so the browser knows that you are done with that line.  If you do not end the line with a semi colon the change will not be made.

Play with making changes.  To the way your page looks.  Check out the w3schools website and find out some of the other changes that you can make.  In addition there are many tutorials out there that you can check out if you want more examples

Click here to see what my test site looks like now!

Beginning Web Development : Let’s Make a Page!

… and learn some vocabulary.

A lot of books teach you to build the site, then find hosting.  I always thought that was a bit like putting the cart before the horse.  You need a place to put your site even before it is made.  Set up your hosting first.  Check out my previous post on getting your hosting set up to make that happen.

All of my coding is happening in Notepad.  Yes, that wonderful staple of MS Windows software.  It is free and it will not fail you.  There is other free coding software available, but I want you to know how easy it is to do this yourself and with stuff you already have.

Notepad can be found in the Accessories folder of MS Windows.  Find it and open a new document.

Once you have opened your Notepad document we are going to save it with the correct file extension, .html or .htm.  This will prevent issues in the future

We are going to save the file as index.html. To do this we need to go to File -> Save As. You will need to change the “Save as Type” option to “All Files.”  On the “File Name:” line type in index.html.

We are saving the file as index.html for a reason.  Most browsers will not load the front page of a website unless it it labeled home.html or index.html.  Some hosting sites will let you flag a file to load first, but we are using free stuff and you should not expect a free host to allow that.  In addition it is good to learn to do things the smart way to prevent issues later on.

You may also want to make a file somewhere for you to put all your files.  You do not want to lose anything.  I made a file called Test Site and saved index.html in it.

You should test your index.html to make sure it is saved correctly.  The icon next to it should be the icon of whatever browser you use the most.  Internet Explorer will have the IE logo, Firefox, Chrome, Safari or Opera will have their respective logos next to the file name.  If you have a page icon next to your file name, the file was not saved with the correct file extension and will not open in a web browser.

If you double click on the file index.html it should open your web browser and show a blank page, and the file path in the address bar.

Try it!

We should go over some vocabulary before I get to far into this and lose you.

HTML: HTML is an acronym for Hypertext Markup Language.  It is the language that web browsers can read and understand.  It is what allows the browser to know what goes where.  Currently most sites are using HTML4 but HTML5 is the newest update to the language.  HTML5 it is what we will be using.

elements: HTML works by using elements to tell the browsers what certain things should look like. Elements are surrounded with <>.  An example is <body> (start the body) or </body> (end the body.)

A basic shell of a website will look like this:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset= "utf-8">
  <title>Site Name Here</title>
</head>

<nav>
Home || About
</nav>

<body>
 <h1>Welcome to the Test Site</h1>

  <h2>Greeking</h2>
<p>The gibberish in the next two paragraphs is called "Greeking." Greeking is used as a 
place holder.  That way you will know what the text on the screen will look like when you 
do various things to the page.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id orci risus. Donec id neque 
justo. Donec a ipsum vitae magna semper tristique. Morbi non pharetra enim. In finibus lectus 
nec ipsum varius ornare. Suspendisse mollis, urna non porta dignissim, leo leo vehicula risus, 
ultricies posuere massa risus sed ex. Morbi ipsum diam, viverra quis sodales quis, dictum ac 
nibh. Donec fermentum facilisis purus eu fermentum.</p>

<p>Nam id sapien vel leo elementum varius non a magna. Curabitur porttitor velit eu sapien 
maximus laoreet. Proin cursus condimentum tortor vel hendrerit. Morbi euismod neque vel 
tincidunt volutpat. Aliquam quam turpis, lacinia eget egestas eu, suscipit vel purus. 
Vestibulum tincidunt porttitor risus, in consectetur elit volutpat at. Pellentesque maximus 
tellus a mi posuere interdum. Donec lobortis dapibus luctus. Vivamus quam nibh, sagittis ac 
ultrices vitae, gravida at lectus. Curabitur porta erat ut lorem bibendum blandit. Nulla 
aliquet sit amet ex ac tincidunt. Quisque leo dui, dapibus eget felis sit amet, viverra 
placerat libero. Donec pretium in nisi id blandit. Pellentesque et pretium sapien.</p> 
</body>

<footer>
  <h3>This is the Footer</h3>
<p>In the footer we usually put links to copyright information, site maintenance 
information and even links that you think visitors might find useful but not very 
important.</p>
<p>Many people/companies put site maps, tech support information, or advertisements in this 
section.</p>
</footer>
</html>

Can you spot all the elements?

We have <! DOCTYPE html> to tell the browsers that this is an HTML document.

<head> contains information that users do not need to see but the browser needs to know in order to display the site properly.

<meta> contains things like what language your site will be in.

</head> Tells the browser that you are done with all the important content that makes the site look and act correctly.

<nav> Designates a navigation area.  This is how people will get around your site.  All the names of all your pages here, we will make them work in the next lesson.

</nav> ends the navigation area.

<body> This area is for the body of your web page.  All the important content goes here.  We have added a few other elements that will make things easier to read in the <body>.

<h1> Tells the browser to use its default Header 1 format.  A big bold header to tell people Welcome, or the name of the site.

</h1> Ends the Header 1 area.

<h2> Tells the browser to use the default Header 2 format.  It is smaller than <h1> but still nice and bold.  Good for article titles.

</h2> Ends the Header 2 area.

I hope you are seeing a pattern by now.  If you start an element you need to make sure you end it.  Not all browsers will know when to end an element and may cause things to load incorrectly.

<p> and </p> indicate the start and end of a paragraph. If you do not separate your paragraphs many browsers will just run them together.  That makes things hard to read.

</body> Ends the information in the main part of your web page.

<footer> and </footer> indicate the start and end of the footer or bottom of the page.  if you look at the bottom of most websites you will see that there is information in teeny words.  This is the footer.  It holds useful but unimportant information.

Make sure you save your file.  Test it!

It should show up as a white page with black words on it. Kind of like my test page. http://www.meremagicdesignstesting.site90.com/

IF you really want you can upload your test page so others can look at it.  You will have to follow the directions that the hosting site gives you.  They are pretty varied.  If you have issues leave a comment and I will see if I can help.

Play with the elements, check out other elements like <h3> or <h4>. Try leaving off a closing element and see what your web browser does.

Have fun with it and I will be making a new entry in a few days. 🙂

Follow Along Web Development

I finally am on my butt in a chair and working on a web development / design project.

I plan on doing short and quick projects to teach others (and myself) FREE and basic web development.  I have set up a Free test site http://www.meremagicdesignstesting.site90.com/.  Stop by and see what changes are being made.

I will be documenting everything here so you can see what I did to change it.

I do not have a schedule set up yet.  I was thinking of updating it twice a week.  That sounds good enough for busy people to follow along.  It will also allow for those who want to binge learn to get a lot of information at the end of every month.

Follow along with me and maybe you will learn something new!

~Carissa

On the Horse, Again…

UpToHereI finally got fed up with myself and how I have let myself get sidetracked from my goal of being a web developer.  I find kind of stupid admitting this, but I have started refresher courses with CodeAcademy.  I blew through the first HTML/CSS course and even felt interested enough to try the initial JavaScript course.  It was pretty fun.

At the end of this month it will be one year since I graduated.  I have not changed or grown much in this year, in my opinion.  I have blogged about my internship and how happy I was to stop.  It was not really because of the tasks I was doing, it was the environment and people I was working with.  I am still at the same job I was last year.  On a positive note I have a client and the potential to have another (if they would call me back.)  It is not like I am not using my degree, things are just not moving along as quickly as I wanted.

Part of the slowness is where I got my degree.  Another part is me not being comfortable with code.  By code I mean JavaScript, C++, PHP and what not.  HTML and CSS, I get.  I do not see them as code, per say, they are formatting.  I am hoping that if I work on my skills via CodeAcademy, and other such programs, I will develop my skills and become more confident in my skills.

At the beginning of the year I was thinking and talking about my “Year of 300.”  We are close to starting March.  I should probably give a status update.

Physical Fitness: 3/300 hours (day to day activities do not count,  I have been bad at exercising this year.)

Web Development: 1/300 hours (just got motivated to do stuff today.)

Graphic Art / Fine Art: 46/300 (lots of this going on this year)

shoutingspartan

Giving Up

I really feel like I have given up on being a web designer/developer.  I would much rather spend my time doing graphics than reinforcing what I learned in web development.

I keep thinking that “I should …” work  on something related to web dev for a few hours a week.  I never do.  I play around in Photoshop or read Photoshop tutorials. 

I have so much invested in web development that I am angry with myself for not working harder on it.  Today I was wondering how I even passed some of the classes when I can’t even get a PHP contact sheet to send mail properly.  I just can not seem to get it to work.  Just thinking about this makes me want to go take a bath and go to bed.  I am tired of beating my head against that brick wall.

When do you know that you “wasted” you time and money on something?  I wasted so much time on something that I cannot seem to do.  Super depressing thought…  I want to give up and try something that I am good at.  I do not know why I did not spend that time and money getting a degree in marketing and communications.  That would have been much easier and more up my alley.  Nope.  I had to try something new and hard…

….

What a waste.

About this point in my blog I would normally say something like “there is no wasted experience” or something.  I hate to say that it is true, but I do not feel that way about this.  Even on a practical level I think it was a waste to do this.  After the first class I almost failed (c++) and when I started thinking about changing majors, I really should have.  Heck I am better at database design and programming than I am at web development.  I almost changed two or three times.

Now I am left with something that gives me headaches, and that I cannot do anywhere else but at my desk.  Argh!

Really a waste.

Now I am left to decide if I want to attempt to continue with web development or drop it and focus on graphic design and marketing.  If I stick with it, it is going to be long and hard work.  I am going to have to strap myself to my desk and learn from scratch.  Learn the basics of PHP, Java, JavaScript and even HTML and CSS again.  The way I should have done it the first time, on my own with books and how to vids.

I could just drop it and take some classes at a community college and get a bachelors in marketing and communication.  I have enough experience to be able to test out of a bunch of the basic and mid level classes.  Write it off.  I hate to do that though.

I am genuinely interested in making good multi-platform websites.  The thought just gets me all thoughtful and curious. 

*Sigh*

I do not think I am going to figure this out tonight or even this month.

I do need to decide soon though.

Stick with it or drop it?  I wish I knew.

The Road to Learning

Holy Smokes!  I have been looking into the WordPress themes and their creation and I have to say that this is going to be tougher than I thought.  I might have to start taking some online classes or something.  Reading a book and following along with a few tutorials is NOT going to cut it.  Every time I look at something I get more lost. 

Is it standard to only be able to have 5 or 6 nav buttons / links per line? My big question right now is how can you – OR – Can you adjust a theme’s nav bar to be able to add more pages without it going to the next line? 

Every time I look at something I end up leaving one function to go to another function to another and so on.  This is getting kind of annoying.  I am pretty sure the real problem is my lack of understanding PHP and WordPress in general.  I am already missing the “basic” HTML and CSS layouts with the JavaScript bits. 

Enough complaining!  I do like the ease of use on some things.  It is pretty easy to install plugins and widgets and get them to work.  I also like that WordPress sites usually look very professional, well business casual anyway.  I have only seen one Worpress site that was visually horrific.  The site designer let the client walk all over the design. *shudder*  No I am not going to pass on what site it is, that would be rude and unprofessional.  I also am generally impressed with the number of plugins and widgets you can get. There is a way to add just about everything that a person would need.  If you can’t find it put the idea out there and some coding genius will make it happen.  Awesome!

If anyone can recommend a good set of WordPress instructional vids (free would be amazing) it would really help me out 🙂 

Laters!