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>
<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>
<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>
<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
Note: only a member of this blog may post a comment.