Tuesday, 8 October 2013
Tools & Techniques - Notepad vs Komodo Edit
In this section of my blog, I will be comparing two commonly used web design software applications - Notepad and Komodo Edit. I will be stating the advantages and disadvantages of each. At the end, I will conclude which of the two I think is more suitable for web design environment.
Notepad is a type of text editor, which is included in all versions of Windows. It can be used to design a website by writing its HTML code. Notepad offers basic text manipulation functions, including finding text. Files saved with Notepad usually have .txt extention.
Even though Notepad is a simple text editor it has a number of advantages. One of the main advantages of using Notepad is the fact it's has very few features and is therefore very easy to use. This means no training is required to use it. Furthermore, it can be used on any computer running Windows OS and loads up very quickly.
Just as any other software Notepad has some bad sides to it. One of them is the limited functionality, which restricts the user to only input text on a plain background. Furthermore, it provides no external help due to its limited functionality. Additionally, it doesn't have a built-in browser that allows you to quickly review your HTML code, instead you need to save it each time you add or modify the code and reload the HTML code from the browser.
Komodo Edit is generally a code editor, but is also a web design software supported by variety of features and functions. It's also an open source software. Komodo Edit supports languages such as PHP, SQL, CSS, HTML.
There are number of advantages to Komodo Edit. One of them is the multi-platform support including Linux, Mac OS X and Windows. This allows all computer users to run Komodo Edit regardless of the OS they use. Furthermore, it has features that aid users experience such as autofill option for HTML, CSS and other languages. It also has a feature that highlights different section of the code in different colour to make it easier to read and follow. Additionally, it creates projects to organise all your website files in specified folder/s. Another major advantage of Komodo Edit is the ability to preview webpages inside the programme.
One disadvantage of Komodo Edit is the fact it's much more complex than Notepad and therefore requires training. It's also slower to load.
In conclusion, I think Komodo Edit is more suitable for web development. The main reasons for my opinion are the fact it can be run on different platforms, which allows users who are used to different operating systems to use it as well. Furthermore, it has variety of features and functions, one of which is the autofill option, which is a very helpful feature for begginers. It also allows you to preview your code in a webpage directly from the program.
Notepad is a type of text editor, which is included in all versions of Windows. It can be used to design a website by writing its HTML code. Notepad offers basic text manipulation functions, including finding text. Files saved with Notepad usually have .txt extention.
Even though Notepad is a simple text editor it has a number of advantages. One of the main advantages of using Notepad is the fact it's has very few features and is therefore very easy to use. This means no training is required to use it. Furthermore, it can be used on any computer running Windows OS and loads up very quickly.
Just as any other software Notepad has some bad sides to it. One of them is the limited functionality, which restricts the user to only input text on a plain background. Furthermore, it provides no external help due to its limited functionality. Additionally, it doesn't have a built-in browser that allows you to quickly review your HTML code, instead you need to save it each time you add or modify the code and reload the HTML code from the browser.
Komodo Edit is generally a code editor, but is also a web design software supported by variety of features and functions. It's also an open source software. Komodo Edit supports languages such as PHP, SQL, CSS, HTML.
There are number of advantages to Komodo Edit. One of them is the multi-platform support including Linux, Mac OS X and Windows. This allows all computer users to run Komodo Edit regardless of the OS they use. Furthermore, it has features that aid users experience such as autofill option for HTML, CSS and other languages. It also has a feature that highlights different section of the code in different colour to make it easier to read and follow. Additionally, it creates projects to organise all your website files in specified folder/s. Another major advantage of Komodo Edit is the ability to preview webpages inside the programme.
One disadvantage of Komodo Edit is the fact it's much more complex than Notepad and therefore requires training. It's also slower to load.
In conclusion, I think Komodo Edit is more suitable for web development. The main reasons for my opinion are the fact it can be run on different platforms, which allows users who are used to different operating systems to use it as well. Furthermore, it has variety of features and functions, one of which is the autofill option, which is a very helpful feature for begginers. It also allows you to preview your code in a webpage directly from the program.
Assess different implementation styles of CSS
In this section of my blog, I will be assessing the different implementation styles of CSS. I will be describing the three implementation styles of CSS, which are Inline, Embedded and External.I will also state the advantage and disadvantages of each style. I will end this section of my blog with a conclusion where, I will state which implementation style of CSS is better and why.
The purpose of Inline CSS technique is to add styling to HTML elements. In order to use the Inline technique you need to put the 'style' attribute in the tag you want to apply the styling to. If you happen to write the CSS code inside the '<h1></h1>' tag, it will automatically overwrite the Embedded and External styles if you've used them at any point. Inline CSS requires you to apply the specific styling to each HTML element you want to style individually. This technique is usually most suitable for styling simple web pages such as blogs, because the main content within them is text and there aren't many pages within them. Inline CSS allows you to change the style of a page very quickly. An example of Inline styling would be:
<p style="color:red; margin-center; 15px"> Styles of CSS
The result from styling the paragraph would look like this:
' Style of CSS '
Advantages of Inline CSS:
Disadvantages of Inline CSS:
The purpose of Inline CSS technique is to add styling to HTML elements. In order to use the Inline technique you need to put the 'style' attribute in the tag you want to apply the styling to. If you happen to write the CSS code inside the '<h1></h1>' tag, it will automatically overwrite the Embedded and External styles if you've used them at any point. Inline CSS requires you to apply the specific styling to each HTML element you want to style individually. This technique is usually most suitable for styling simple web pages such as blogs, because the main content within them is text and there aren't many pages within them. Inline CSS allows you to change the style of a page very quickly. An example of Inline styling would be:
<p style="color:red; margin-center; 15px"> Styles of CSS
The result from styling the paragraph would look like this:
' Style of CSS '
Advantages of Inline CSS:
- Websites/pages using Inline CSS load much quicker due to the low HTTP request
- Allows for the quick fixing of HTML source
- It's easier to scroll up in source containing Inline CSS, as opposed to changing the source file
Disadvantages of Inline CSS:
- Inline CSS requires to be applied on every HTML element, therefore increases overall time for creating/styling a website
- You can accidentally overwrite External and Embedded styling
Embedded CSS is the process of creating style sheets for an HTML file, as the CSS code takes place in the head tag. This technique is more efficient than Inline CSS, because it allows the developer to style the properties of the anchor tag, which include link, visited, hover and active. Furthermore, Embedded CSS eliminates the need for having to apply the styles to all elements of a web page. As a result of that, there are less HTTP requests, which means no further downloads will be necessary for obtaining style information. An example of Embedded CSS would as follows:
<head>
<style>
h1{
color:red;
}
</style>
</head>
Advantages of Embedded CSS:Don't need to be applied to every element
- Allows testing your website without breaking pages into different sections
- No additional downloads required to obtain style information
Disadvantages of Embedded CSS:
- Cannot control styles for multiple documents simultaneously
- Web pages load slowly due to the less HTTP requests
- The use of Embedded CSS increases web pages' overall size
External CSS is the process of creating style sheets for HTML files in a separate CSS file. This process can be done in any text editing software such as Notepad. This technique is very useful, as it separates the HTML file and CSS style sheet. This way you can use the CSS style sheet as many times as you need and apply it to any web page. The way External CSS style sheet is applied to a web page is by a code that links them, which is <link ref="stylesheet" href="style.css">. "style.css" is the name of the CSS style sheet and it has to be saved with the CSS extension in order for the link to be successful.
Advantages of External CSS:
Advantages of External CSS:
- External CSS style sheet can be applied to multiple pages
- The size of web pages are reduced, because the CSS code for them is stored in a separate file
Disadvantages of External CSS:
- Increased load time due to having to import the style sheets
- Not all style sheet features are supported by all version of Internet Explorer
References:
1. Inline Vs Internal Vs External CSS, 01/12/2013, http://bit.ly/1fdT6ht
2. What are the advantages and disadvantages of the various style methods?, 01/12/2013, http://bit.ly/1brr3WV
3. CSS How to, 01/12/2013, http://bit.ly/IrKRD2
Explain the features of the box model for CSS
In this section of my blog, I will be explaining the features of the box model for CSS.I will also describe the different layers of the box model as well as provide a diagram that illustrates the structure of a box model.
The diagram below shows the structure of a box model with the different layers and their names. Some of the layers are actually transparent.
Box model is a type of CSS design and layout coding. As the name suggests it's a box that web page developers use to wrap around elements or tags such as images or <p> Paragraph 1 </p>. The properties of the box model also allow you to separate different elements or tags from each other.
The MARGIN provides a transparent space between the border, which is visible and the actual sides of the web browsers. Examples of MARGIN properties are "margin-top: 10px;" and "margin-right: 50px;".
The BORDER is a visible coloured outline around the padding and actual content. An example of BORDER properties is "border: 10px dotted black;". There are different types of borders such as solid, dashed.
The PADDING is similar to MARGIN. It provides a space between the border and actual content. The colour of the space the PADDING provides is affected by the background colour of the box.
The CONTENT is the actual text and images found within the box.
Reference:
1: Box Model, 23/11/2013, http://bit.ly/H4hj0
The diagram below shows the structure of a box model with the different layers and their names. Some of the layers are actually transparent.
The MARGIN provides a transparent space between the border, which is visible and the actual sides of the web browsers. Examples of MARGIN properties are "margin-top: 10px;" and "margin-right: 50px;".
The BORDER is a visible coloured outline around the padding and actual content. An example of BORDER properties is "border: 10px dotted black;". There are different types of borders such as solid, dashed.
The PADDING is similar to MARGIN. It provides a space between the border and actual content. The colour of the space the PADDING provides is affected by the background colour of the box.
The CONTENT is the actual text and images found within the box.
Reference:
1: Box Model, 23/11/2013, http://bit.ly/H4hj0
Explain how HTML files access CSS
In this section of my blog, I will be describing HTML and CSS and their purposes. I will be describing both languages separately in more depth. I will end this section of my blog with a conclusion where, I will state how both languages work together in the development of websites.
HTML stands for Hypertext Markup Language. HTML is a web development language. HTML files use link element to access CSS inside the head tag. This is an example of a link element found inside the head tag of an HTML file - <link rel="stylesheet" href="style.css">. HTML describes how text and pages are structured and laid out using different tags and attributes. An example of HTML tag is <a> </a> and a property is 'href='.
CSS is a meta language that stands for Cascading Style Sheets. It's used to design style sheets for HTML web pages that define the visual layout of a web page. CSS controls the colours, layout and fonts within a web page. Once a style sheet is created you can use it on any web page as long as you perform the necessary changes according to the specific web page. You can apply differently formatted style sheets to the same web pages and make them look completely different, whilst the text remains the same. An example of CSS tag is 'a:visited { }' and you put a property like 'text-decoration:none;' within the curly brackets.
There are three ways HTML files access CSS. One of them is 'Inline'. This method requires you to type the CSS code within the HTML code. For example, you type in 'style=color:red;' within the <title> </title> tag. Another way is 'Internal'. This technique stores the CSS code in the head tag of a web page. An example would look like this "<head> <style> </style> </head>". The last and most appropriate way is 'External'. This technique uses CSS code from external file such as 'style sheet' to link it to the web page. The link element found in the head tag within the web page is "<link rel="stylesheet" href="style.css">".
--------------------------------------------------------------------------------------------------------------------------
References:
1: Can you explain how HTML files access CSS?, 01/11/2013, http://yhoo.it/18GuaOm
2: HTML & CSS, 01/11/2013, http://bit.ly/8Qjray
HTML stands for Hypertext Markup Language. HTML is a web development language. HTML files use link element to access CSS inside the head tag. This is an example of a link element found inside the head tag of an HTML file - <link rel="stylesheet" href="style.css">. HTML describes how text and pages are structured and laid out using different tags and attributes. An example of HTML tag is <a> </a> and a property is 'href='.
CSS is a meta language that stands for Cascading Style Sheets. It's used to design style sheets for HTML web pages that define the visual layout of a web page. CSS controls the colours, layout and fonts within a web page. Once a style sheet is created you can use it on any web page as long as you perform the necessary changes according to the specific web page. You can apply differently formatted style sheets to the same web pages and make them look completely different, whilst the text remains the same. An example of CSS tag is 'a:visited { }' and you put a property like 'text-decoration:none;' within the curly brackets.
There are three ways HTML files access CSS. One of them is 'Inline'. This method requires you to type the CSS code within the HTML code. For example, you type in 'style=color:red;' within the <title> </title> tag. Another way is 'Internal'. This technique stores the CSS code in the head tag of a web page. An example would look like this "<head> <style> </style> </head>". The last and most appropriate way is 'External'. This technique uses CSS code from external file such as 'style sheet' to link it to the web page. The link element found in the head tag within the web page is "<link rel="stylesheet" href="style.css">".
--------------------------------------------------------------------------------------------------------------------------
References:
1: Can you explain how HTML files access CSS?, 01/11/2013, http://yhoo.it/18GuaOm
2: HTML & CSS, 01/11/2013, http://bit.ly/8Qjray
Subscribe to:
Posts (Atom)