Project 4 -Task 1: Overview of HTML and CSS

March 4, 2011 § Leave a comment

What is HTML?

HTML is a language for describing web pages, HTML stands for Hyper Text Markup Language, it is not a programming language, it is a markup language. A markup language is a set of markup tags, HTML uses markup tags to describe web pages.
HTML is responsible for the construction, and the total output, of a page.

HTML Documents = Web Pages

* HTML documents describe web pages
* HTML documents contain HTML tags and plain text
* HTML documents are also called web pages

HTML markup tags are usually called HTML tags

* HTML tags are keywords surrounded by angle brackets like <html>
* HTML tags normally come in pairs like <b> and </b>
* The first tag in a pair is the start tag, the second tag is the end tag
* Start and end tags are also called opening tags and closing tags

There are three “sections” of a HTML document source: Inline, Internal, and External.

Inline markup goes in the <body> tag, and defines the webpage’s base layout. It structures the output of a webpage, such as creating tables and divisions, forms and buttons, links and anchors, or even just normal text and images.

Internal markup goes in the <head> tag.  Most of the time, users do not directly see anything in internal markup (with the exception of something such as the <title> of a page). Internal markup can declare some special things about a page that the user won’t notice, such as the Character Set Declaration, the Document Type Declaration, keywords, and description to that webpage.

External markup is markup (of any language, for example css) not contained in the HTML document, but in a different file. The contents of this file, to retrieve the markup, can usually be called by Internal Markup.

This below is the classic structure of a html document:

<Html> —-> It’s where the web page starts

<Head> —-> It’s where the head of the web page starts
</ Head> —-> It’s where the head of the web page finishes

<Body> —-> It’s where the body of web page starts
</ Body> —-> It’s where the body of the web page finishes

</Html> —> It’s where the web page finishes

The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages.

What is the HTML head element?

It’s a container for all the head elements. In the <head> you can find elements about scripts, instructions for the browser where to find style sheets, meta information, and more.

Description of the head elements tags:

<head>     Defines information about the document
<title>                 Defines the title of a document
<base />     Defines a default address or a default target for all links on a page
<link />     Defines the relationship between a document and an external resource
<meta />     Defines metadata about an HTML document
<script>     Defines a client-side script
<style>     Defines style information for a document

What is the body?
The body element defines the document’s body, and it contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

What is the Doctype?

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
The doctype declaration should be the very first thing in an HTML document, before the tag.

This below is a short coded piece of HTML written for this analysis:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Test html for written research </title>
<meta name="Description" content="This a description to show meta tag" />
<meta name="Keywords" content="Html, CSS, test, Brighton City College, Web design course" />
</ head>
<body>
<h1> Test html with notepad </h1>
<p> This is a html test, I want to show how the html tags work </p>
<img src="html-icon.png">
<ul>
<li>Test 1 unordered list</li>
<li>Test 2 unordered list</li>
</ul>
<a href="test.html">This is a test for link </a>
</body>
</html>

Final result

In this picture you can see the relation between the HTML code and the final result in the browser

What is the difference between HTML and CSS?

CSS is another widely-accepted web-design language, CSS stands for Cascading Style Sheets.
While with HTML we design and create the structure and the outline of a web page, with CSS we don’t create anything, but we use it to decorate, align, and position (etc) elements in HTML.
CSS can edit things such as element width and height, background color, border, alignment, and actual visibility, for starters.
CSS is incorporated into a webpage using Internal markup (in the <head>; in <style> tags) or external markup (from a “.css” file).

This is a web page where a CSS is applied, in this case the CSS is used to position, align, and decorate all the HTML emelents

This is the same web page without the CSS. With this example it is easy to understand the function of the CSS

CSS rule structure

This below is the classic structure of a CSS rule:

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.

In this case the rule is applied to the heading 1 and it sets the colour (blue) and the size (12px) of the font.

We have different ways to write a CSS rule:

sometimes you can find CSS rule on one line like this:   p { color:red; font-size:12px; }

othertimes you can see one declaration on each line to make the rule more readable:

p {
color:red;
font-size:12px;
}

This below is a short coded piece of HTML, you can see I added in the <head> a link to the css file.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Test html for written research </p>
<meta name="Description" content="This a description to show meta tag" />
<link href="style.css" rel="stylesheet" type="text/css" />
</ head>
<body>
<h1> Test html with notepad </h1>
<img src="html-icon.png">
<p> This is a html test, I want to show how the html tags work
 This is a html test, I want to show how the html tags workThis
 is a html test,I want to show how the html tags work This is a html test,
 I want to show how the html tags work </p>
<ul>
<li>Test 1 unordered list</li>
<li>Test 2 unordered list</li>
</ul>
<a href="test.html">This is a test for link </a>
</body>
</html>


A coded piece of CSS written on Notepad

This below is a short code piece of CSS:

h1 {
font-family:"Verdana";
font-size:25px;
color:blue;
font-weight:bold;
}
p {
color:black;
font-size:12px;
font-family:"Verdana";
line-height:20px;
}

Final result with a CSS file

In this picture you can see the relation between Html, Css and final result.

 

Advertisements

Where Am I?

You are currently browsing the Project 4 – Task 1 category at Giorgio Scappaticcio's Blog.