Tools & Techinques - Notepad vs Komodo Edit

Notepad vs Komodo Edit

In this post I will be explaining the advantages and disadvantages of Notepad and Komodo Edit and comparing the two. After I have compared to the two I will decide which is the better application in my opinion in a conclusion.

Notepad is a basic text editor which has the ability to make HTML based code. There are a few advantages of using Notepad. These are:

• The program is available on all Window operating systems.
• It has a simple layout and interface, making it easy to use.
• It is free.
• There is no training needed to use it.
• Can be used on low priority systems meaning it can be opened and used quickly.

The disadvantages of using Notepad are:

• The application doesn't save files normally as an HTML file, it must be chosen.
• Notepad isn't available on any other operating system other than Windows.
• Doesn't have any functions about web development.

Komodo Edit is also a text editor which is designed to make HTML files and can work with CSS and many other types of code. Here are the advantages of using Komodo Edit:

• It can Auto fill code meaning when typing in something like <p> it will automatically add </p> on the end of your text in between.
• It has colour coded text helping to see which piece of code is which making it easy to spot certain things when proof reading code.
• Komodo has a built in feature where you can preview your current code as a HTML, this makes it easier to check if something works without having to open a web browser up and opening a HTML file.
• It is free to download.
• It has a built in project management feature, in which all your files, such different web pages are saved in one location.
• It is available to Windows, Linux and Mac OS.

The disadvantages of using Komodo Edit are:

• You have to download the program from their website, it does not come pre-installed on any operating systems.
• It has a long start up time.
• It requires training to use it.

Conclusion

I have come to a conclusion that if I needed to use a program to make a web page or website I would pick Komodo Edit over Notepad. I wouldn't use Notepad because, it has a bad word layout and interface compared to Komodo Edit. Notepad also doesn't support web development, making it harder to code HTML in Notepad than Komodo Edit.

References:

Notepad(Software); 29/11/2013; http://bit.ly/fIfmU9

Activesite Komodo Edit; 29/11/2013; http://bit.ly/10SZlW

Explain the features of the box model for CSS



A labelled diagram of a box model

HTML elements such as paragraphs or headings can be considered as boxes. These boxes have been put in place to organise a structure of a webpage. In CSS, the term "box model" is used when talking about design and layout of a webpage.

The CSS box model is basically a box that wraps around HTML elements such as text and headings, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements. This helps a web developer create lots of box models, each with different subjects or topics and space them out with ease.

References:

CSS Box Model; 29/11/2013; http://bit.ly/aGhHTh

 

Explain how HTML files access CSS

HTML files access to CSS

 

In this post, I will be explaining how HTML files are used to access CSS. Both are used together to make most of the webpages on the internet today.

HTML

HTML (Hyper Text Markup Langauge) is used to create and show information for a webpage. HTML is used to format the style of a webpage, things such as headings, paragraphs, links and more. This is done using using tags for example <p> </p>. This stands for paragraph, and anything typed inbetween the two tags are displayed on the webpage as a paragraph. HTML is used to construct the main layout of a webpage.

CSS
 

CSS stands for Cascading Styles Sheets. The purpose of CSS is to change the style and presentation of an HTML file, such as changing the overall look of the webpage. CSS also add the visual effect such as colours in a website. It is really when using CSS as it make websites stand out more from the websites. Here is an example of CSS code in a style.css file.

h1
{ color:red; }

The code above shows that heading 1 should be the colour red because of what is written between the brackets and next to the semi colon.
 

Compare and Contrast
 

The best method of HTML accessing CSS is via a style.css sheet. This in Komodo Edit where the a style sheet is created and CSS coding in inputted. From there it is opened with the HTML fle which contains all of the written data such as paragraphs, headings, pictures etc.

References:

Cascading Style Sheets; 29/11/2013; http://bit.ly/8Mqyj

Assess different implementation of styles of CSS

Different Implementation of styles of CSS

In this post I will be explaining the different ways that CSS can be implementated in a HTML file. There are a few main ways of implementing CSS into a HTML file, these ways are:

• Inline
• Embedded
• External

Inline

Inline means the CSS code is inside the tag. This means you will be able to edit whatever is inside of the tag. However, if you write up the inside the tag the CSS must be in lower case when written in. When using the inline method of implementing CSS to change the style of the writing, you would need to write it in the relevant tag that is containing the relevant stuff.

For example:

<h1 style=”color:blue;background-color:yellow;”>This is an example</h1>

Advantages of using the inline method is that it enables the user to add CSS code without the use of a style sheet.

Disadvantages of using the inline method is that you have to re-write the same piece of code of you want to have the same colour scheme for another part of your website. For example if you did the type of code above, only h1 would be affected. If you wanted all of your headings to look the same you would need to re-write the same code.

Another disadvantage is that it would be very hard to edit a certain piece of code in a fully coded website, as it would be difficult to find that piece of code amongst 500 other lines of code.

External

External is using another page for adding CSS onto a webpage. This specific method requires the users to open up a seperate clear work sheet which they can do their CSS styling on that sheet using CSS coding. There must be a tag in the HTML code that links to the CSS style sheet. The HTML sheet requires the tag:

(<link rel="stylesheet" href="style.css">)

Once the CSS style sheet is saved as style.css, it creates a link between the two external work sheets.

The advantages of using external CSS is that all your CSS coding is in one place, meaning it is easy to find and edit as it colour coded.

External CSS sheets are able to edit more than one piece of code at a time, meaning if you wanted to change the text colours of all your current headings, you could.

Disadvantages of using a external CSS sheet are that you must be able to access it, and external style sheets are only used on large scale web designing, so it wouldn't be used on a small 3 page website as much as a website with 30 pages.

Embedded

Embedded CSS is when the CSS code is embedded into a HTML code. Embedded CSS is usually placed at the top of a HTML under it's own section, for example:

<head>
<style>
hr {color:black;}
p {margin-left:10px;}
body {background-image:url("background.jpg");}
</style>
</head>

 

Advantages of using in embedded are that styling classes can be created in order to use identical styling for two separate entities. Such as a heading and some of the content. There is no download is required for external styling sheet because all styling and HTML is done in one worksheet.

 

Disadvantages of using in embedded are that embedded styling can't always control styling for multiple documents. The HTML worksheet can often get messy with a lot of coding and hard to understand.

References:

Internal CSS - 30/11/12 - http://bit.ly/67RTT

External CSS – 30/11/12 - http://bit.ly/67RTT

Incline CSS – 30/11/12 - http://bit.ly/67RTT

 

Tools & Techinques - Loram Ipsum and Loram Pixel