Description of Tools

HTML is short for HyperText Markup Language. It is a type of computer language that creates pages which can be posted on the internet. HTML consists of text, graphics and design elements. What makes this relatively simple is that, these elements are already tagged with codes that has instructions on how to display them on to the web browser or email program. The tags will provide the layout and formatting information so that it meets the designer's needs. Also, it is used to specify hypertext links. These allow Web developers to direct users to other webpages with only a click of the mouse on either an image or a word.

CSS is short for Cascading Style Sheets. This a feature that has been added to HTML that will give the web developer and the user more control over how the webpages are being displayed. With the use of CSS, the designers and users can create style sheets with the use of different elements (such as links), to appear how they like in their webpage.

Komodo Edit is a free text editor for dynamic programming languages. This is a program which is used for editing plain text files. The program has different types of languages which the user can access. This include PHP, CSS, HTML, SQL etc. Using this program, the user can practice any language that is avaliable to them and also view their coding in a web browser.

Wireframe tools are for design and planning purposes. This mimic the tools that the user will acquire for such design. For example, if the user is designing a webpage, he can use the wireframe tool to picture what he is designing, therefore giving him a clearer idea of how to design the webpage. There are programs online free to use such as Lumzy and Balsamiq.

Graphics Program enables the user to manipulate visual images on a computer. Most graphics programs have been designed  to be able to import and export more than one graphic file format. An example of a program would be Adobe Photoshop.

Lorem Ispum is a filler text which shows graphic elements of article such as the layout and font. The content of Lorem Ispum is written in latin. This web program is a random text generator which means that if an user ask for two paragraphs of text, they will get two paragraphs of random text in latin. This can be used for coding and documents of examples.

Reference
http://en.wikipedia.org/wiki/Website_wireframe
http://en.wikipedia.org/wiki/Graphics_software
www.webopedia.com/TERM/H/HTML.html
 www.w3.org/Style/CSS/Overview.en.html
 en.wikipedia.org/wiki/Lorem_ipsum

Website design

Website Name:- OnePiece

About the website -

Home - This will include information about One Piece (anime and manga). There will be links inputted onto the menu bar that will lead to other pages of the website. For example, Anime page and Manga page. This page will also include social media links.






Anime Page - This will include about the channels is it on, about the latest episode, links where to watch the episode, open information about other episodes.









Manga Page - This will include about a summary of the latest episode and other episode (when chosen), links where to read it.








Character Page - This will have a summary about the character, what abilities and powers they have, other information.









Other Page - It will include about the story so far, locations of the current storyline, movie fillers, discussion group (forum).

U20P2: - CSS Box Model

  

The CSS Box Model.

The CSS Box Model is essential for understanding CSS. The box model is a set of standards for how the web browsers will be displayed and content on the page.

In the box model the main features are border, background, padding, width and margin.

• Border - This is the outline of your box model. You can adjust the width and colour of the border. All you have to remember about this feature is that, it is the limit for your page.

An example for this - border: 10px solid black;

• Padding - This feature sits in-between the border and content, this acts as a secondary border line for the box. This affects the background colour of the element.

For example: padding: 50px or top padding: 25px;

• Margin - This is the box outside the box. This goes around the border of your box. These are spaces which can allow the box model to be positioned.

For example: Float, Left and Right.

An example of how this is set up is: margin: 10px; 

• Content - This is information of the box. This is where all the data is stored like text and images.

This is an example from my project, showing Div Tags and examples of style sheets:

Index

<div class="Content"></div>

Style Sheets

.content {

width: 600px;

height: 600px;

background: red;

padding: 5px;

}

Reference

http://www.w3.org/TR/CSS2/box.html

http://www.htmlandcsswebdesign.com/articles/boxmodel.php

http://www.cssnewbie.com/understanding-the-css-box-model/

U20P1: - Explain how HTML files access CSS

Inline

The CSS is attach to the HTML element, for example <h1 style="colour, blue,">this would make the colour of the heading title blue.

Inline on Page (Internal)

THe CSS is described in the <HEAD> tag. for example
<head>
      <style>
           h1{
                 colour:blue;
                }
      </style>
</head>

External CSS Page

<head>
     <link rel="sytlesheet" href="style.css">
</head>

With this code, all h1 layout can change without changing anything in the coding of the style.

CSS - Cascading Style sheets

HTML is used for layout
CSS is used to format web pages

The structure of CSS
A CSS rule has two maiun parts: a selector and one or two declarations. Properties and values help create the things you want, for example Font size or Colour

Inline

Advantages

1. Lower The HTTP Requests: This means that the website  loads faster than External CSS
2. Quick-Fixes: Fix to the HTML source are imenant,  but the fix should be when you have spare time to do it.
3. Smaller Websites:  With smaller websites means using Inline CSS would help serice providers and the user.
4. Testing: Inline CSS is used by web designers when starting a new project. This helps them because it is much simpler to scroll up the source rather than changing the source. When detecting a problem is not so easy to fix, when debugging a page source.

Disadvantages

1. Every Element: In every element, you must include every inline styles. This causes download time for the viewer and maintenance work for a designer.
2. Over-doing: Inline CSS can be over done because of the fact that they are the most specific out of the three CSS.
3. Pseudo-elements: In inline CSS, it is hard to do pseudo-elements in inline styles. E.g. Inline CSS, the link is all you can style with, unlike in external and internal CSS you can style a lot more features in your CSS.

 Internal

 Advantages

1. One style of same element: In this type of CSS, you do not need to input every element. All paragraphs in a CSS can be in one font by just adding an inline style tag in the internal HTTP request.
2. Pseudo-elements: With internal style sheets, you can style the tag however the user wants too.
3. No additional downloads: Unless, this style sheet request for a HTTP, then there are not need for additional downloads.
4. Cache Problem: In CSS internal styles, it is compatible with all browsers like Firefox or Chrome.
   

Disadvantages

1. Large file Size: In internal CSS, when created offline, it seems that the size is not big, but when its online, the file size increases.
2. Multiple Documents: when using internal CSS, you will not be able to use it on multiple web pages.
3. Slow Page Loading: Internal CSS usually have less demand for HTTP request, but when used online the pages that are loading is considerably slow when comparing to inline and external CSS.

External

Advantages

1. Full control of page structure: This CSS gives you the allowance to display your webpage without exposing the official appearance of the web page.
2. Less loading time: With low file sizes and reduced bandwidth, the external CSS will decrease the amount of loading time in its web pages.
3. Reduced file size: By styling text in a separate file, the file size of the CSS will decrease massively. This works by the external CSS already downloaded, making web pages load much faster than before.
4. Higher page ranking: This means search engines can look for your web page, it has a greater amount of chances that a user visits your webpage.

Disadvantages

1. When rendering documents, the external sytle sheets has to be loaded before the documents can be applied.
2. It has faults such as when small number of styling definition.
3. To be able to import information into a document, there must be an extra download to be able to do the importing.

Sources:
http://vineetgupta22.wordpress.com/2011/07/09/inline-vs-internal-vs-external-css/
http://www.schoolsucks.com/paper/Advantages-And-Disadvantages-Of-External/15415.html
http://webdesign.about.com/od/beginningcss/qt/tipcssinlinesty.htm
http://rainbow.arch.scriptmania.com/css/cascading_style_sheets.html
http://www.basictips.com/tips/article_92.shtml