Daily Archives: February 5, 2013

Introduction to HTML and CSS – Learning Activity 1.3 CSS, Font and Colour

“Add font and colour to the index.html file already created:

  • Add font and colour to the header text elements, and the paragraph elements.
  • Test out the result in your browser.
  • Add a print screen of the CSS file, and how it all looks like in your browser.”

Here’s how my CSS file looks like:

CSSScrShot

And, this is how it looks like in my browser:

Finito CSS

Notepad has actually been pretty easy to use during these learning activities, however, it’s a bit dull to stare at for hours.
I mean, as notepad is pretty generic looking, letters and codes easily floats together, after a few hours in front of the screen. Suppose it’s pretty important to be organized when using notepad.

I have to admit, I wasn’t really concentrating on making this little “website” visually attractive. As I’ve never touched webdesign before, I was more concentrating on getting into the basics, and understanding my tasks.
But now, after being able to test out a few things, troubleshooting mistakes and reading loads, I’ll be able to concentrate more on the design and visual expression in the code.

Basically, as a designer, the sky is the limit when it comes to CSS and HTML.
There are so many codes, and tags that will enable you to create aesthetics and attractive websites. I suppose you will have to listen to the client, combined with a large portion of creativity when producing a website.

However, the subject is indeed extremely interesting. Hopefully, this will all go well 😉

Rock’n’Roll

-Marit

Advertisements

Introduction to HTML and CSS – Learning Activity 1.2 Head/Body

“Use the index.html file created in the previous learning activity:

  • Divide the content into head and body
  • Add a title to the website, and link a CSS file.”

So, here’s how this looks in notepad:

Head-Body

Aaaand, this is how it looks like in the browser:

PrntScrHeadBody

One more learning activity to go!

Introduction HTML and CSS – Learning activity 1.1 Index Page

Back in business!

After a good few months on maternity leave, I’m back.
So, fist subject on my curriculum; introduction to HTML and CSS – yikes!

“Use notepad to create a website called index.html with the following content:

  • Header text element
  • Paragraph text element
  • Image element
  •  Link to reflective journal

Choose which content the elements should contain, and test it in your browser”.

Here’s how the screenshot of my notepad looked like:

IndexScrshot

And this is how it looked like in my browser:

HTMLPrintScrn

The biggest technical challenge in this learning activity, was the image insertion.
Text was pretty easy to minimize and maximize, as it was well explained in the lessons received in our classroom.

However, after trying and failing with the image for a while, I finally realized I had misspelled “img src”. I actually wrote “img scr”.
Oh, the headache this little misspell caused.
Hehe – anyway, I should have spent a bit more time to study the details there. This was  obviously a very fixable thing, however lesson learned.
I’ll be more careful with the spellings in the codes from now on… 🙂

Next learning activity to be added soon.