Feeds:
Posts
Comments

Archive for the ‘Written Work’ Category

HTML

HTML (Hypertext Mark-up Language) was originated and developed by British Physicist Tim Berner Lee and is first mentioned on the Internet in late 1991.

It is a mark-up language  (not programming language) used to create HTML documents that are made up of HTML tags and plain text. Web browsers such as Safari and Firefox read the HTML documents and display them as web pages by using the HTML tags to interpret the content of a page.

HTML 4.0 is the current version as recommended by the World Wide Web Consortium (W3C). It supports multimedia options, scripting languages, style sheets and documents that are more accessible to users with disabilities.

HTML Tags

HTML mark-up tags describe the web pages and consist of keywords or letters surrounded by angle brackets that normally come in pairs. The first tag in the pair is called the start tag and looks something like this: <p>, the second tag is called the end tag and looks like this </p>. They are also known as opening and closing tags. Information appears between these pair of tags and are known as elements. Tags can also have attributes, which are extra bits of information that appear inside quotation marks. These are specified in the start tag and come in name/value pairs such as <style type=”text/css”>.

HTML Document (web page)

A typical web page may be coded in the following way:

The text between <html> and </html> describes the web page. The start tag will appear at the very beginning of the document and the end tag at the very end. All other information appears between these pairs of tags.

The head area  <head> </head>

Information about the document is placed between this pair of tags this can include the following:

Title – defines the title of the document and is essential to produce a valid document and helps with SEO(Search Engine Optimization).

Example: <title>CMC – the Clinical Media Centre at Brighton and Sussex University Hospitals in Brighton</title>

In a browser this will appear at the very top of the page, above where the url is situated.

Meta information – used to provide information about the page – this helps with SEO. SEO is very important, Good titling and descriptions  or a webpage/site help to push them get them on to the top pages of a browser.

Example: <meta name=”Description” content=”CMC  – The Clinical Media Centre specialises in clinical and non-clinical photography, video, graphics and retinal photography ” />

Style -used to describe CSS (Cascading Style sheets) at page level  – This describes how elements of a page will physically look and act.

Example: <style type=”text/css”> <!– –> </style>

This information can also be included by using links.

Links -Defines a link to an external resource. It is most commonly used to link a CSS file to an HTML document. Different links specify different actions

Links example: <link href=”styles.css” rel=”stylesheet” type=”text/css” />

href specifies  the target of a link (in this case the target is css styles which contains the information about how the page should look

rel specifies the relationship of the target of the link to the current page.  stylesheet is telling us that we are linking to a page (styles.css) that defines the different elements of styling that can be applied across the website.

Type can be used to specify the MIME type of the target of a link . A MIME is a two-part identifier for file formats on the internet. (Or an attribute?) In this case the MIME is =”text/css” and is telling us (I think) that the type is text that has had css styling applied to it as specified by the href and rel links as discussed above. (another example of a type is audio – the MIME could be audio/mpeg).

Script -Used to define a scripting language, such as JavaScript. JavaScript works in conjunction with HTML and create an ‘event’ to make enhanced user interfaces and dynamic websites.  An example of this are pop-up slim boxes which create pop-up boxes for enlarged images:

<script type=”text/javascript” src=”js/mootools.js”></script>

<script type=”text/javascript” src=”js/slimbox.js”></script>

<link rel=”stylesheet” href=”css/slimbox.css” type=”text/css” media=”screen” />

Body area <body> </body>

This is where all of the content is placed. This element must be used and used once only. It must start immediately after the closing head tag and end directly before the closing html tag.

The body area can contain the following:

Heading <h1> </h1> – If your document contains headings than you can apply html tags specifically to those. These range from <h1> through to <h6> and determine the size of the heading so that it displays either as a main or sub heading. – <h1> displays as the largest size and is normally only used once on a page and <h6> as the smallest. <h2> to <h6> can be used as often as required, but should always be used in order, as they were intended. For example, an <h4> should be a sub-heading of an <h3>, which should be a sub-heading of an <h2>.

Example: <h1>Beachcombing at Saltdean</h1>

Paragraphs <p> </p> – The main body text is placed between this pair of tags. If you want text to appear on different lines then you need to explicitly state this by place each line of text within p tags like so:

<p>This is the first line of text</p>

<p>this is the second</p>

This is because web browsers don’t usually take notice of what line your code is on.

Lists – The two main kinds of lists are ordered and unordered. Ordered are sequential lists which are normally represented by incremental numbers and are defined by the <ol> tag while unordered lists are non-sequential lists list items which are usually preceded by bullets and are defined by the <ul> tag. Within the lists, the li tag is used to define each list item.

Example: <ul>

<li>shells</li>

<li>stones</li>

<li>seaweed</li>

</ul>

Links – These can be used to make pages of a website link together, to send the user to another part of the page they are viewing or to link to any file anywhere on the web.

An anchor tag <a is used to define the link, for these to become active you need to add the destination of the link.

Example (This is for a navigation bar):

<div id=”navbar”><a href=”index.html”>Home</a>|<a href=”about.html”>About</a>|<a href=”guidelines.html”>Guidelines</a>|<a href=”finds.html”>Gallery</a>|<a href=”contact.html”>Contact</a></div>

Images – The img tag is used to put an image into a document

Example: <img src=”images/seaweed-2.jpg” alt=”Seaweed on shore” width=”164″ height=”164″ />

The src attribute tells the browser where to find the image.

It is important to include width and height attributes. If they are excluded, the browser will try to calculate the size of the image as it loads, instead of when the page loads – this can cause the layout of the document to jump around while the page is loading.

The alt attribute is the alternative description, it is important as it is used for people who cannot or choose not to view images.

Forms <form> </form> – These are used to pass data to a server and contain input elements such as text fields, checkboxes, radio-buttons and submit buttons.

Example (text field): <form> First name: <input type=”text” name=”firstname”</form>

Check boxes let a user select one or more options of a number of choices.

Radio buttons let a user select only one of a number of choices.

Submit buttons are used to send form data to a server. The data is sent to the page specified in the form’s action attribute.

Divs <div> </div>– Divs stand for division and their purpose is to divide up a web page into distinct sections, thus providing a definite structure to the page. It can be used in combination with CSS to provide design and layout.

Example: <div id=”footer”>

<p>Copyright J Lewis. All rights reserved | Private Policy | Terms and Conditions | Site Map</p>
</div>

CSS

CSS stands for Cascading Style Sheets and allows for flexible formatting of web pages. It was created by W3C to overcome the expensive and unwieldy process of HTML having to format documents.

It enables content, style and interaction to be put into separate ‘layers’ which makes the job of creating a web document quicker, cleaner and easier as well as adding the ability to create fantastic looking sites with all kinds of multimedia additions. It also makes websites more accessible and are an attempt to ‘future proof” against ongoing developments in technology and functionality.

CSS has been around for nearly a decade, but it is only had recent widespread support and been integrated into the majority of browsers.

Basic CSS Syntax

Whereas HTML defines the content of a web document, CSS defines how HTML elements are to be displayed.

A CSS rule has two main parts: a selector, and one or more declarations:

Selector: The selector is normally the HTML element you want to style (for instance the paragraph <p>

Declaration: A declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

Example: p {color:red; font-size: 14px; text-align:centre;}

P is the selector, colour, font-size and text align are the properties while red, 14px and centre are the values.

CSS declarations always end with a semicolon, and declaration groups are surrounded by curly brackets.

id and class selectors can also be specified. An id selector is used to specify a style for a single, unique element whereas a class selector is used to specify a style for a group of elements and in contrast to the id selector is most often used on several elements.  The id selector is define with “#” and the class selector with “.”.

Finally, when a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:

External Style Sheet: External CSS style sheets enable the appearance and layout of all the pages in a Web site to be changed, just by editing one single file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

Example: <head> <link href=”styles.css” rel=”stylesheet” type=”text/css” /> </head>

Internal Style Sheet: Internal style sheets are be used when a single document has a unique style. Internal styles are defined in the head section of an HTML page, by using the <style> tag.

Example: <head>

<style type=”text/css”>

hr {color:blue;}

p {margin-left:10px;}

body {background-image:url(“images/background.jpg”);}

</style>

</head>

Inline Styles: Inline styles are place within an HTML element and lose many of the advantages of style sheets by mixing content with presentation. This method should be used sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

Example: <p style=”color:blue;margin-right:20px”>This is a paragraph.</p>

For examples of HTML coding and CSS styling please look at post –  Classroom Project – Coding, further up this blog.

Read Full Post »