Tuesday, 14 October 2014

1. Introduction to HTML and CSS

HTML

HyperText Markup Language (HTML) is the standard markup language used to create web pages or more specifically the content in webpages. The latest version is HTML 5.
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html> HTML tags most commonly come in pairs like <h1> and </h1> although some tags represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags).

HTML: Page Structure

All webpages contain an opening and closing html tag which are at the top and bottom of the page. Note closing tags include a forward slash / after the angle bracket.
All webpages also include head and body tags, again an opening and closing tag. Inside the body tag is the content you will see. The head tag contains content that you won’t see in a browser but will do some stuff like inform other computers what your webpage is about.
<html>
            <head>
            </head>
<body>
</body>
</html>
The head and body tags are indented or tabbed inside the html tag. Your webpage will work without these indents or tabs, however when you have a lot of tags, they will help you check if tags have matching closing tags also make you code easier to read.

HTML: Content in the <head> tag

The title is an example of content in the head tag. This title will not appear on the content of your webpage. The title is used by the browser which often shows the title on the tab for each page open in the browser. Search Engines such as Google use the title when displaying search results.
            <head>
<title>Glasnevin National School</title>
            </head>

HTML: Content in the <body> tag

Headings

HTML contains numerous tags to help you create content.
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<body>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
</body>
You can use one or more of these headings. <h1>is often bigger than <h6> and the other tags are a size between these. Search engines will look for headings as being important text headings on a website and they will place more importance on a <h1> heading than a <h6> heading.

Paragraphs

The HTML <p> element defines a paragraph.
<body>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
All text inside a <p> tag will be displayed on a single line. If the line is wider than the browser, the text will flow onto a second line. Just like writing, if you want to force the browser to create another paragraph, you need to tell the browser that you want to do this by creating another paragraph of <p> tag for additional content. There is no limit to the amount of content in <p> tags, it can include a few words or a book. A book would not be very interesting to read in a single paragraph though.

Images

In HTML, images are defined with the <img> tag.
The <img> tag is a bit special though. The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute defines the url (web address) of the image:
<img src="url" alt="some_text">

Example:
<img src="http://www.riai.ie/uploads/files/GlasnevinMuseum.jpg" alt="Glasnevin Museum" >

HTML: Putting it all together

<html>
            <head>
<title>Glasnevin National School</title>
            </head>
<body>
<h1>Interesting places to visit nearby</h1>
<h2>Cemeteries</h2>
<p>Due to the meticulous record keeping of Glasnevin Trust since 1828, Glasnevin Museum can help you find your relatives, family history or discover more about the stories of the people buried in Glasnevin Trust Cemeteries.</p>
<img src="http://www.riai.ie/uploads/files/GlasnevinMuseum.jpg" alt="Glasnevin Museum" >
</body>
</html>


CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language such as HTML. CSS can control elements such as layout, colour and font styles. Although HTML and CSS are different languages, they have grown up together and are very complimentary languages.

CSS content is placed inside a <style> tag which is inside the <head> tag.
<head>
<style>
 </style>
            </head>
Although CSS can be placed in a separate file to the HTML code, for now, as we are learning CSS and using only one HTML page, we will place the CSS styling inside the <style> tag.

CSS: Syntax

Syntax is a term used to describe the structure of a coding language. HTML uses angle brackets, CSS doesn’t. Angle brackets are therefore a syntax of HTML.
If you don’t include CSS styling, the browser will use default styles. Most browsers apply a similar style with subtle differences. Without CSS styling, websites would all look the same which would make the internet a very dull place indeed.
There are a few ways to style content in CSS. One way is to declare a different style for each of the tags. For example we can style all <h1> tags to be white and <h2> tags to be red. We could also set the back-ground colour of the <body> tag to be black.

CSS: Properties and their Values

Inside the style tag, type the name of a HTML tag you wish to style. This is called the selector. In this example, we are selecting the HTML tags to style.
Then create open and closed curly braces. Inside the braces, you will create one or more properties and values for those properties. This will always be in the format:
Selector {Property: Value;}

Examples:
h1 {color:red;}
p {color:white;}

Note: color is spelled without a u which is the American way. Most coding languages originated in the US. You will get an error if you use colour.
The properties and their values are from a defined list so you cannot make up your own. The list is very extensive however. You can find them at http://www.w3schools.com/cssref/default.asp
Remember, when choosing colours, CSS only contains a limited list of colours which have English names. The remaining colours use numbers prefixed by a hash tag e.g. #FF99CC is a light pink. A full range of colours is available at http://www.w3schools.com/tags/ref_colorpicker.asp.
The best way to learn is to play around with the properties and the values. Remember to refresh the browser to see your changes.

CSS: Example

The following example contains both HTML and CSS code. The CSS code is within the <style> </style> tags.
<html>
<head>
<title>Glasnevin National School</title>
<style>
                                                body {background-color:black;}
h1 {color:white; text-align:center; font-weight:800; }
h2 {color:#FF99CC; text-align:left; font-weight:600; }
p {color:white;}
img {width:200px; float:right;}
 </style>
            </head>
<body>
<h1>Interesting places to visit nearby</h1>
<h2>Cemeteries</h2>
<p>Due to the meticulous record keeping of Glasnevin Trust since 1828, Glasnevin Museum can help you find your relatives, family history or discover more about the stories of the people buried in Glasnevin Trust Cemeteries.</p>
<img src="http://www.riai.ie/uploads/files/GlasnevinMuseum.jpg" alt="Glasnevin Museum" >
</body>
</html>


No comments:

Post a Comment