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!

Advertisements

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

Beginning Artist : Pick Your Tools : Drawing

Tree drawn with a classic stylus and nib. Carissa Carnahan 2014

Tree drawn with a classic stylus and nib.
Carissa Carnahan 2014

Drawing is usually the starting point for aspiring artists.  Can you get the stuff in your head onto paper.

Many tutorials start off with the suggestion of spending an hour a day drawing.  Do blind contour drawing, negative space, shading, still lives or from photo.  This is valid advice.  I think that you should do this AFTER you learn about your tools.

Learning the basics of drawing is very important, no matter what medium you choose.  It forces you to see things that are really there and what they look like.  The important thing is to see what is there and make your hands translate what your eyes see onto paper.  The way this is done depends on what tools you are using.

Common materials for drawing and sketching includes a variety of graphite pencils, various charcoals, conte, ink, chalk and pastels.  The way you use them is very different and practice with them can improve skill with the more expensive mediums.

Pencil:

Pencils come in a wide variety of hardnesses,  the hardness dictates how dark the pencil shows up on the paper.  The harder it is the lighter it is.  Try buying a variety pack and try them out.

Charcoal:

Charcoals are similar to pencils in that the harder they are the lighter they are on the paper.  They also very from what kind of plant they came from.  Vine charcoals are very dark and fragile while Tree charcoals tend to be lighter but sturdier.  Charcoals smear a lot and are good all kinds of things.  I like them for light studies (shadows.)  They take practice to use because they smudge easy and they never really come off the paper all the way.

c_draw_conte-sketching-pencils

Conte drawing tools

Conte:

Conte is commonly referred to conte crayon.  It is a neat way clay like substance that is a cross between a pencil crayon and oil pastel.  The common colors are black, white and red/brown (sepia.)  Conte is a really smooth drawing material, one of my favorites.  Conte is great for textures, shading and tons of other things.

Chalks:

Chalks are common.  You used them to draw on side walks when you were a kid!  Artist chalks are brighter and more expensive.  They stay around longer (on paper) when sealed correctly.  Chalks blend really well and can create amazing treatments. Messy and fun.

You can also use high end chalk pigment to create your own paints and cosmetic products (hair and nail colors are common.)

Pastels:

Pastels come in two varieties, dry (essentially chalk) and oil.  They are hard to get the hang of right away.  More is not always better with them.  It seems counter intuitive, but it is true.  I like the feel of oil pastels over chalk.  They are smoother on the page and your hands do not dry out.

Inks:

Inks are more of a finishing product. Inks can be used from a standard pen (go Bic!) or you can go modern with fine tip felt pens or sharpies.  You can also go traditional and get a fountain pen or stylus with a variety of nibs.  Inks are great for practicing lines, line shading techniques and stippling (drawing with dots.)

Art supply stores usually have all of these items in the same area.  Start off with the cheap ones.  As you get better move up to the more expensive ones.

I hope that this opens you new artists up to some new mediums!

pencils

A variety of pencils and the type of lines they make.

New Artists: Starting when YOU are Ready

For some reason non-artists seem to think that all artists start off knowing what they want to do or were “born that way,” with the talent and a rudimentary knowledge on how to use it.  This is simply not correct.

Those artists that were born with the talent do not develop the skills unless they are given the tools to learn it.  In this day and age we have art classes in every stage of our development.  Talent is quickly identified and (in some cases) encouraged.  The budding artists are given access to many mediums and people to teach them the basics.

Not all artists are discovered when they are in school.  Many of our favorite and most influential artists did not start until later in life (article here.)  I was never one for history, even art history, so when I read this I was surprised to see how many started “later” in life.  Some tried and failed early on, others had obligations that kept them from exploring their art and some probably lacked the proper motivation.

There is a bonus starting early and starting late.  Early starters learn about several mediums and usually get to practice each before choosing one they really like.  Late starters have worldly wisdom and can “see” things that early starters cannot.  Late starters know how to research what they want and go for it with all their might.  Early starters get to dawdle and often lack the same gusto when perusing their art.  It is only later in life that, many, early starters realize what they have and peruse it.

Age does not matter when it comes to being an artist.  Determination is what really matters. 

How determined are you to create something?

How determined are you to share your world?

Here are some more artists that started later in life, if you wanted to know, courtesy of wetcanvas.com 🙂

Chuck Homan began painting late in life
Alice Latimer Moseley, Folk Artist started at age 63
Edie Wells Bristol began painting, at age 50
Minnie Pwerle began painting late in life at around the age of 89
Mose Tolliver Folk Artist started painting late in life
James C. Pratt started painting late in life
Bill Traylor, who was born as a slave, began painting at age 83
Kacey Carneal, a folk artist started painting late in life
Rover Thomas, began painting late in life
Nealie O’Sullivan began painting late in life
Nan Rumpf began painting late in life
Margaret Roberts began painting late in life
Yehudith – Israeli artist began painting late in life
Francia (15th century painter) began painting after 40
Dorris Curtis began painting at the age of 65
Matt Lamb began painting at age 49
Joseph Crépin (1875-1948) began painting at age 63
Hattie Brunner (1889-1982) began painting at age 67
Lynn Hoehn watercolorist began painting at age 60
Elmira Wade began painting at age 60
Joseph Pickett (1848–1918) began painting at age 65
Ellis Ruley (1882–1959) began painting at age 57
Joseph Garlock (1884-1979) began painting at age 65
Howard Finster began painting at age 60
Alyce Frank, began painting at age 43

A Problem with Vision

VisonI have 20/20 eyesight.  This post is not about that kind of vision.  That is a small ‘v’ type problem.  I am talking about Vision.  The thing designers, PM’s, Managers and Directors have when working on a project.  It is also known as a goal if you are not a visual person.

This past month has been busy, so busy that I have not had time to think about a post.  I have a consulting client and and actual web development client.  In addition one of my previous clients moved his site to WordPress (you are welcome for the recommendation.) I also am rebuilding my spouses website since he is changing focus.  That is quite a bit on top of a full time job.

What does that have to do with Vision?

I have a Vision…  Not a dream, those are less concrete and not always based in reality (they are fun sometimes, I have awesome dreams.)

These Visions are of completed projects for myself, clients and friends.  Some of the Visions include a “how to” guide and others do not.  If I think about things enough I can figure out the steps, best methods and problems I will run into. Things that are good to know and will speed along a project. Some of the Visions are so clear and complete I can See and Hear them, like they are completed and working.  It is really incredible.

NeedAGuideThe problem is with the Visions that some are BIG and do not come with “how to” guides.  I am not experienced enough in some areas to know exactly what steps to take to get to the end of the project.  Some times I cannot See where to separate a section of a project into smaller steps or phases. I have had this problem in previous projects and had to abandon them for various reasons (usually time.)

Projects where I have little or no Vision do not always go well.  They have a tendency to get put on the back burner while I wait for the Vision to clarify itself or just get dropped all together.  Others just end up mediocre and I do not learn anything.  I despise those kinds of projects.  They are boring and almost a waste of time.

Projects that have a clear Vision with little guidance are hard to work on, but usually rewarding (because I learn something.)  They do not always turn out as planned, that can be good or bad.  I always do the best I can to get the desired result.  Often I run into time constraints and have to rush things along because I spent to much time researching.

There is a pretty easy solution the problems with unclear Visions.

Learn!

The internet is full of information, guides and tutorials to show one how to do things.  Always do research.  Someone out there has probably documented their journey through a similar problem and you CAN use it help you succeed.  It may not be the fastest solution but it is going to be the best.  You will have this knowledge and experience to use on future projects.  Your Visions will come to fruition and the clients will be happy (we can hope.)

Do not let your lack of experience make you fail.  I am not going to!

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