Skip to main content

Posts

Showing posts from 2011

Lesson 11: Borders css

Lesson 11: Borders Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages. border-width border-color border-style border The width of borders [border-width]
Post a Comment
More information Read more

Lesson 10: Margin and padding css

Lesson 10: Margin and padding In the previous lesson you were introduced to the box model. In this lesson, we will look at how you can change the presentation of elements by setting the  margin  and  padding properties. Set the margin in an element Set the padding in an element Set the margin in an element An element has four sides: right, left, top and bottom. The  margin  is the distance from each side to the neighboring element (or the borders of the document). See also the diagram in  lesson 9  for an illustration.
Post a Comment
More information Read more

Lesson 9: The box model css

Lesson 9: The box model The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed: The box model in CSS
Post a Comment
More information Read more

Lesson 6: Links css

Lesson 6: Links You can apply what you already learned in the previous lessons to links (i.e. change colors, fonts, underline, etc). The new thing is that CSS allows you to define these properties differently depending on whether the link is unvisited, visited, active, or whether the cursor is on the link. This makes it possible to add fancy and useful effects to your website. To control these effects you use so-called pseudo-classes. What is a pseudo-class? A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag. Let's look at an example. As you know, links are specified in HTML with  <a>  tags. We can therefore use  a  as a selector in CSS
Post a Comment
More information Read more

Lesson 5: Text css

Lesson 5: Text Formatting and adding style to text is a key issue for any web designer. In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text. The following properties will be described: text-indent text-align text-decoration letter-spacing text-transform Text indention [text-indent]
Post a Comment
More information Read more

Lesson 4: Fonts css

Lesson 4: Fonts In this lesson you will learn about fonts and how they are applied using CSS. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be described: font-family font-style font-variant font-weight font-size font Font family [font-family]
1 comment
More information Read more

Lesson 3: Colors and backgrounds css

Lesson 3: Colors and backgrounds In this lesson you will learn how to apply colors and background colors to your websites. We will also look at advanced methods to position and control background images. The following CSS properties will be explained: color background-color background-image background-repeat background-attachment background-position background
Post a Comment
More information Read more

Lesson 2: How does CSS work?

Lesson 2: How does CSS work? In this lesson you will learn how to make your first style sheet. You will get to know about the basic CSS model and which codes are necessary to use CSS in an HTML document. Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely recognize many of the codes. Let us look at a concrete example. The basic CSS syntax Let's say we want a nice red color as the background of a webpage: Using  HTML  we could have done it like this: <body bgcolor="#FF0000"> With  CSS  the same result can be achieved like this:
Post a Comment
More information Read more

Lesson 1: What is CSS ?

Lesson 1: What is CSS? Maybe you already heard about CSS without really knowing what it is. In this lesson you will learn more about what CSS is and what it can do for you. CSS is an acronym for  C ascading  S tyle  S heets. What can I do with CSS? CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. Just wait and see!
Post a Comment
More information Read more

Introduction - Free CSS Tutorial

Introduction - Free CSS Tutorial Cascading Style Sheets (CSS) is a fantastic tool to add layout to your websites. It can save you a lot of time and it enables you to design websites in a completely new way. CSS is a must for anyone working with web design. This tutorial will get you started with CSS in just a few hours. It is easy to understand and it will teach you all the sophisticated techniques. Learning CSS is fun. As you go along through the tutorial, remember to take enough time to properly experiment with what you learn in each lesson. Using CSS  requires basic experience with HTML . If you are not familiar with HTML, please start with  our HTML tutorial  before moving on to CSS. Which software do I need?
Post a Comment
More information Read more

Lesson 15: The final tips

A few pieces of good advice for your website projects. Lesson 15: The final tips Congratulations, you have now reached the final lesson. So now I know everything? You have learned a lot and you are now capable of making your own websites! However, what you have learned are the basics and there is still a lot more to be mastered. But you now have a good foundation from which to build on. In this last lesson, you will get some final tips
Post a Comment
More information Read more

Lesson 13: Uploading pages

Find out how to get your pages published on the Internet so others can enjoy them too. Lesson 13: Uploading pages Until now, only you have had the satisfaction of viewing your pages. Now it is time for the rest of the world to see your masterpieces. Is the world ready for that? The world is ready - you soon will be too.  To get your website on the internet, you just need some server space and a free FTP program . If you have Internet access, you might already have some free server space for your website. Your server space will then probably be called something like http://home.provider.com/~usernumber. But you might need to activate it first. Read more about this in the papers from your Internet provider or on their support pages.
Post a Comment
More information Read more

Lesson 12: Layout (CSS)

Understand how Cascading Style Sheets (CSS) can be used to add fantastic layout to your pages. Lesson 12: Layout (CSS) Wouldn't be great if you could give your pages the layout they deserve? Sure, but how? To give your website layout use Cascading Style Sheets (CSS) . In this lesson you will get a short introduction to CSS. But later you can learn all about CSS from scratch in our CSS tutorial . So please consider this lesson only as an appetizer
Post a Comment
More information Read more

Lesson 11: More about tables

Create even more advanced tables. Lesson 11: More about tables The title "More about tables" may sound a bit boring. But look at the positive side, when you master tables, there is absolutely nothing about HTML that will knock you out. What is left then? The two attributes  colspan  and  rowspan  are used when you want to create fancy tables. Colspan  is short for "column span".  Colspan  is used in the  <td>  tag to specify how many columns the cell should span
Post a Comment
More information Read more

Lesson 10: Tables

Construct HTML tables for the presentation of structured content. Lesson 10: Tables Tables are used when you need to show "tabular data"  i.e. information that is logically presented in rows and columns. Is it difficult? Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML. Example 1: <table> <tr> ll 1</td> <td>C <td>C eell 2</td> </tr> /td> <tr> <td>Cell 3 <<td>Cell 4</td> </tr> </table> Will look like this
Post a Comment
More information Read more

Lesson 9: Images

Familiarise yourself with seven of the most-used elements Lesson 9: Images Wouldn't it be great if you could have an image of actor and music legend David Hasselhoff right in the centre of your page? That sounds like a bit of a challenge... Maybe, but in fact it is pretty easy to do. All you need is an element: Example 1: <img src="david.jpg" alt="David" /> would look like this in the browser
Post a Comment
More information Read more

Lesson 8: Links

Discover how to create links to your own and other pages on the Internet. Lesson 8: Links In this lesson, you will learn how to make links between pages. What do I need to make a link? To make links, you use what you always use when coding HTML: an element.  A simple element with one attribute and you will be able to link to anything and everything . Here is an example of what a link to HTML.net could look like
Post a Comment
More information Read more

Lesson 7: Attributes

Learn to add extra information to your tags and formulate commands in a more explicit manner. You can add attributes to a number of elements. What is an attribute? As you probably remember, elements give structure to a HTML document and tells the browser how you want your website to be presented (for example,  <br />  informs the browser to make a line break). In some elements you can add more information. Such additional information is called an attribute. Example 1: <h2 style="background-color:#ff0000;">My friendship with HTML</h2> Attributes
Post a Comment
More information Read more

Lesson 6: A few more elements

Familiarise yourself with seven of the most-used elements. Lesson 6: A few more elements Did you manage to make a few pages on your own? If not, here is an example: <html> <head> <title>My website</title> </head> <body> <p>text, text text <h1>A Heading</h1> , text</p> ext text, text</p> <h2>Subhead</h2> <p>text, t </body> </html> Now what ?
Post a Comment
More information Read more

Lesson 5: What have you learned so far?

Lesson 5: What have you learned so far? Always start with the basic template we made in the previous lesson: <html> <head> <title></title> </head> <body> </body> </html> In the head section, always write a title:  <title> The title of your page </title> . Notice how the title will be shown in the upper left corner of your
Post a Comment
More information Read more

Lesson 4: Create your first website

Lesson 4: Create your first website With what you learned in the previous lessons, you are now only minutes away from making your first website. How? In Lesson 1 we looked at what is needed to make a website: a browser and Notepad (or similar text editor). Since you are reading this, you most likely already have your browser open. The only thing you need to do is to open an extra browser window (open the browser one more time) so you can read this tutorial and see your new website at the same time. Also, open Notepad (in Accessories under Programs in the Start menu
Post a Comment
More information Read more

Lesson 3: Elements and tags

Lesson 3: Elements and tags You are now ready to learn the essence of HTML: elements. Elements give structure to a HTML document and tells the browser how you want your website to be presented. Generally elements consists of a start tag, some content, and an end tag. "Tags"? Tags are labels you use to mark up the begining and end of an element. All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">". Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.
Post a Comment
More information Read more

Lesson 2: What is HTML?

Lesson 2: What is HTML? This lesson will give you a brief presentation of your new friend, HTML. What is HTML? HTML is the "mother tongue" of your browser. To make a long story short, HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today
Post a Comment
More information Read more

Lesson 1: Let's get started

Lesson 1: Let's get started In this first lesson, you will get a brief presentation of the tools you need to make a website. What is needed? Most likely you already have everything you need. You have a "browser". A browser is the program that makes it possible to browse and open websites. Right now you are looking at this page in your browser.
Post a Comment
More information Read more