Joanne Kennedy
This file is stored in wd/html/html_essential/portfolio.html
Welcome to the portfolio of my exercises.
HTML Document Structure : Go to My CV
Portfolio of Exercises
Selector test page
This paragraph is in the content div and does not have any id or class attributes.
This paragraph is in the content div and has a class attribute value tip.
This paragraph is in the content div and has a span element inside it.
Essential
This tutorial covered the basic structure of a web document and introduced the complusory elements that every html document should contain.
Validation
Browsers are very forgiving programs and often display incorrectly marked up documents. This tutorial emphasised the importance of validation
I understand that html documents must be well formed and marked up according to a particular html specification.
An error that I came across was in the title element, as the closing tag was misspelt and the slash charater was missing for the end tag.
I put the coding into the W3C HTML validator, found the mistake and corrected it by ensuring both tags were matching and spelt correctly, I then added a slash character to the closing tag and re-validated the code to find no errors.
Text
This is a test paragraph with this embedded child em element.
In this tutorial I have learnt how to create paragraphs,
level 1 headings,
level 2 headings,
level 3 headings,
level 4 headings,
level 5 headings,
level 6 headings,
I have learnt how to create emphasized text, as well as strong text,along with code samples,
text which can be typed in by the user,
text for quotes,
Sample text,
and text that would be replaced.
I have also learnt how to include special characters for example; The copyright symbol - © The greek symbol Beta - Β The euro sign - € And the characters used in the tags < and >
Text is not just text!.
Hyperlinks
Hyperlinks define the structure of the web by providing a mechanism to reference documents.
Lists
- list item 1
- list item 2
- list item 3 with this embedded child em element.
HTML offers 3 type of lists unordered, ordered, and definition lists.
Unordered list
- first item on the list
- second item on the list
Ordered list
- first item on the list
- second item on the list
Definition list
- first definition term
- first definition description
- second definition term
- second definition description
Different lists embedded in one another
- first item on the list
- second item on the list
- embedded list
- first nested item on the list
- second nested item on the list
- more items
Necessary
Uploading or publishing your web document is part of the testing cycle.
The address of my site is: http://www.inn.leedsmet.ac.uk/~c3369865/
The address of my site is: http://"http://www.inn.leedsmet.ac.uk/~c3369865/" and I have checked it and it works and I am ready for the test!
Structure
A little patience and meticulous attention to a valid structured document is essential for any web development.
Navigation
Graphics
A picture speaks a thousand words but is it presentation or content?
Temporal
Time and space is always complex.
What is temporal data?
Temporal data means data constrained by time such as audio or video.
codec; is short for encoder/decoder and is a specification for how to store temporal data digitally.
OGG; is a free, open standard container format maintained by the Xiph.
WebM; is a video format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video.
In order to publish your holiday video stored in MP4 format, The first part of specifying the type for temporal data is to use open standards containers such as 'mp4' the second part of the attribute type definition for temporal data specifies the codec used for encoding and decoding the audio or video data. remember it is important to specify the type attribute as the browser can then decide whether it supports the particular format without downloading the file and therefore saving bandwidth.
you would ensure the video was viewable accross html5 browsers by trying them out across browsers such as chrome and firefox. if your audio and video is not displaying it would be useful to convert your file to another format such as webm.
Tables
Tables are ofen used incorrectly for layout and positioning!
| Name | Age | Sex |
|---|---|---|
| Survey conducted for the past 10 years! | ||
| Joanne Kennedy | 18 | Female |
| Jake Peel | 19 | Male |
| Span across ..... TWO columns! | column 3 | |
Forms
Forms are the main mexhanism for sending data from the client browser to a server program.