Simmien gordon: November 2014

Introduction

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.

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/