Simmien gordon: 2014

Tuesday 2 December 2014

Box Model

Introduction

In a web page document each part is done with a rectangular box. In CSS each element is described using the standard box model.

Content

This is where the text and images are shown.

The content surrounds the rectangle which is given by the width and height of the box, which usually relies on the on the parts rendered content. The four content edges define the box’s content.

Example

a:after {
content: " (" attr(href) ")";
}

Padding

This clears the area around the content and is not visible.

The top, bottom, left, right padding can be changed separately.

Values

Length: defines a fixed padding using pixels, pt, em, etc.

%: sets padding by percentage.

Example

p {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}

Border

This is a border that surrounds the padding and content.

Before you use a border a border style must be set.

Border styles

· Dotted.

· Dashed.

· Solid.

· Double.

· Grove.

· Ridge.

· Inset.

· Outset.

Border width

The border-width sets the width of the border using pixels or using values like thin, medium, or thick.

Example

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

Border colour

This is used to set the colour of the border which can be set by name of a colour, RGB Value or a hex or transparent.

Example

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: #98bf21;
}

Margin

Clears elements outside the border. The margin is not visible.

The top, right, left and bottom can be changed separately .

Values

Auto: The browser does it for you.

Length: You can set a margin using px, cm, etc.

%: You can set a margin by percentage.

Inherit: Specifies that the margin should be inherited from the parent element.

Example

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 50px;
}

http://www.w3schools.com/css/css_boxmodel.asp

Thursday 6 November 2014

In this blog entry I will be describing how HTML and its purpose on developing a website, how CSS is used to develop a website and compare the contrast between HTML and CSS and how they work together to develop a website.

HTML

HTML stands For Hypertext Mark-Up Language. This is a language describing web-pages using ordinary text. Every web page contains HTML file, where the web browser converts the .HTML file into. Each file is just text but with an .HTML extension it can be converted into a working web page if you have the corrected tags for the web page.

HTML tags

Most tags have two parts, for example the start is a tag like <html> and the closing tag will be the same tag but with a / in front of it like </html>.

No closing tag

Some tags have rules for example you must have <img> if you want to use images.

Every HTML files needs to have the basic tags for it to be valid, so browses are able to read the HTML text, these tags are:

Tag attributes

Attributes allow you to customise a tag, an example of this <img src=”image.jpg”>

Most attributes are optional for most tags and is mostly used when you want to change something. Some tags need to be used to display content and web pages properly.

CSS

CSS stands for Cascading Style Sheets and is used to describe the look and formatting of a document in a mark-up language this allows customization and improves the presentation of webpages. It is also used to adapt to different devices, CSS can be used with HTML and makes it easier to maintain.

Examples

The tag <p> can be customized by adding CSS code for example

p {font-style: italic}

By placing more info you have now put that whole paragraph in Italic.

How HTML and CSS work together

Every webpage is viewed in a browser, what you see in your browser will be a combination of structure, style and interactivity.

HTML is the structure of the webpage for example the paragraphs, lists and images.

CSS Is there to communicate with the browser to tell the browser how the content (HTML) should be displayed, for example different layouts for different devices.

Tuesday 4 November 2014

M2 Different CSS styles

Introduction

There are three types of CSS styles, external style sheet, internal style sheet and inline style. In this Report I will be describing the different types of CSS styles, Examples of where it would be used and the advantages and disadvantages of each CSS style.

Inline CSS:

Inline CSS is applied is applied to one element using the style attribute

Example

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Advantages

Testing: Loads of web designers use inline CSS to test websites that they have just started on, It is also used to debug there pages when there is a big problem with their website.

Smaller websites: Incline CSS are great for blogs where there are a limited amount of pages and it helps users and service providers.

Lower the HTTP Requests: Because the website gets lower HTTP Requests it means the website loads a lot faster.

Disadvantages

Every element: This means to implement CSS it must be used every time you use a tag which takes up a lot of maintenance time.

Internal CSS

An internal style sheet should be used when one document has a unique style. You can do this at the head of a HTML page, inside the <style> tag

Example

<head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>

Advantages:

One style only: Internal styles doesn’t need to be assigned to every element like inline

No additional downloads: You don’t need to download anything extra to receive style information.

Disadvantages

Multiple documents: This can’t be used if you want multiple web pages.

Slow page loading: Compared to inline and external CSS as there’s less HTTP request.

Large file size: when using internal CSS the file sizes are large which is okay when the website is offline but when the website goes online it will take a long time to load.

External CSS

An external style sheet is perfect when it applied to many pages. You can also change the way the whole website look by changing a single file. Each Page needs to have a <link> tag. This goes inside the head section.

Example

Advantages:

Reduced file size: External CSS file size is lesser compared to the two.

Less load time: External CSS takes about 8 seconds to load.

You can control the feel and look of many documents which is really helpful if you are working with a team of people to create a website.

It is much easier to reuse CSS code if you have separate fields. You don’t need to type the same code on every webpage.

Using External CSS it makes your web pages highly readable and to the best quality.

Disadvantages on external CSS

Because downloading speed on CSS is fast it could slow down the speed of your webpages. Also if you don’t have many styles. Your site can become harder to maintain.

http://www.w3.org/standards/webdesign/htmlcss

http://webdesignfromscratch.com/html-css/how-html-css-js-work-together/

http://www.w3schools.com/css/css_howto.asp

http://ictjaicss.weebly.com/m1---styles-of-css.html

http://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/

Monday 13 October 2014

Advantages and Disadvantages of Notepad and Komodo edit

Introduction

In this report I will be writing about the advantages and disadvantages of Notepad and Komodo edit when it comes to web development.

Advantages of Notepad

Notepad is designed for users to create text that is not formatted and is very basic word processor program you can almost describe as very basic version of Microsoft word, one of the main advantages of Notepad is that it requires no training and you can start HTML straight away. It comes free with every version of Windows which means you do not have to go through the hassle of downloading the program. The program doesn’t take up much space on your laptop/desktop PC and because it’s low specification software it means that it doesn’t take a long time to load.

Disadvantages of Notepad

The main disadvantage of Notepad is that it is very simple software and its primary function is not for HTML, because it is not its primary function it does not read the language and have intelligent answer’s to help out the programmer with features such as auto fill. It also doesn’t have default templates to make your web design quicker. It’s only available on Windows as Microsoft made it. You also have to preview in a web browser which means you must save it as a HTML file.

Advantages of Komodo edit

Advantages of Komodo edit are firstly you can save time on coding and it allows you to auto fill parts of your coding, it has a colour coded feature for certain words that are used. There is also a web browser built in so you can view your code and it works on windows and OS.

Disadvantages of Komodo edit

Firstly you have to download komodo edit and need 70mb to run because it’s a bigger program than notepad it takes longer to load and it is not for beginners so it requires training to use.

Conclusion

Notepad is built in to Windows and takes less time to load whereas you have to download komodo edit and takes a lot of time to load and komodo edit is for advanced users and notepad is for beginners. Notepad and komodo edit are two great pieces software to use but I prefer komodo edit as with the right help you can build websites with less hassle and it makes it easier to build websites, this is because the has template and auto fill technology to help.

References

download.cnet.com/Komodo-Edit-for.../3010-2352_4-10700439.html