HTML

The acronym HTML stands for HyperText Markup Language, the authoring language used to create pages on the World Wide Web. HTML is a set of codes or HTML tags that provide a web browser with directions on how to structure a web page's information and features.

CSS

Short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page.

- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files

- HTML describes the structure of Web pages using markup
- HTML elements are the building blocks of HTML pages
- HTML elements are represented by tags
- HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
- Browsers do not display the HTML tags, but use them to render the content of the page

Responsive Design Exercise

The aim for this exercise is to create a website using HTML/CSS. We have to use these web languages to experiment with the basic elements on a web page.

- HTML Headings
- HTML Paragraphs
- HTML Colours
- HTML Imags
- CSS Colours
- CSS Text

Tutorial / Lessons

Codecademy is an online interactive platform that offers free coding classes in 12 different programming languages including Python, Java, PHP, JavaScript (jQuery, AngularJS, React.js), Ruby, SQL, and Sass, as well as markup languages HTML and CSS.

HTML Lessons

W3Schools is a web developers site, with tutorials and references on web development languages such as HTML, CSS, JavaScript, PHP, SQL, W3.CSS, and Bootstrap, covering most aspects of web programming. The site derives its name from the World Wide Web (W3), but is not affiliated with the W3C.

HTML Colour Research

In HTML, a colour can be specified by using a colour name. It supports 140 standard colour names.

A color can also be specified as an RGB value, using this formula: rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.

To display the color black, all color parameters must be set to 0, like this: rgb(0,0,0).
To display the color white, all color parameters must be set to 255, like this: rgb(255,255,255).

color can also be specified using a hexadecimal value in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255).

For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00).

HTML Colour Exercise (RGB)

Here I have modified the RGB Value to the colours I want as an experiment.

Here I am trying to create a gradient of red. To find out the HEX value, I have used the colour picker and it tells me the HEX value for all gradient.

I have then applied these HEX value into my HTML colour code and it works!

CSS Lessons

A CSS rule-set consists of a selector and a declaration block.

The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

After Learning the Basic CSS rule set. I have applied the elements on W3school coder.

First I have set up the page as usual. The next thing I did was to apply a background colour which I wanted red. The name for this tone of red is Indian Red.
body {
background-color: IndianRed;
}

The next thing is to create a heading of the page. "CSS Example created by Vince". To set the heading, I have chose the font colour and the position of the text (Center).
h1 {
color: white;
text-align: center;
}

Last thing I did was to set the paragraph text style. Font family to Calibri and Font size to 20px.
p {
font-family: Calibri;
font-size: 20px;
}

Here I have added an image with CSS code. I have googled an image of the Harrow Campus and copied the link.
With this link, I can place it into the CSS image Code. I have also added a description code where I can write about the image underneath the image.

Google Font on Hotglue

TEST!
This font is from 'Google Font'.

Anton. Sans-Serif

Google Font coding Documentation:

Evidence of Coding Font style obtained from Google Font on Hot Glue.

HOW TO:

1. I have looked for a google font and clicked on the URL from the embed font code. "https://fonts.googleapis.com/css?family=Anton"

2. Then I have copied the code from the website it opened.

3. The next step was to add < style > at the top and < /style > at the end of the code. Then pasted it onto Hot Glue code editor.

4. To find out my hot glue text box target name code, I have clicked on the target icon of the text box and then I have copied the code.

5. Before pasting the code, I needed to add 'div[id="TEXT BOX NAME CODE"]
{
font-family: 'Anton', sans-serif;
}

at the bottom of the code. (Before < /style>)