comp2- HTML and CSS Flashcards by Harvey Hughes

what is the basic structure of a webpage?

note ) = > and (=

(!doctype html)
(html)
  (head)
          (title)    (/title)
  (/head)
   (body)   
           content of web page  
  (/body)
(/html)

How well did you know this?

Not at all

Perfectly

whats is a meta tag and whats it used for?

(meta) provides meta data about a HTML document that isnt visible. can be page descriptions, authors, keywords which is used by a search engine to classify a page.

How well did you know this?

Not at all

Perfectly

what does the (div> (/div> block-level tag do?

divides the page into sections

How well did you know this?

Not at all

Perfectly

what does the (p> (/p> block-level tag do?

creates a paragraph( puts a empty line before and afterwards)

How well did you know this?

Not at all

Perfectly

what does the (ol> (/ol> block-level tag do?

creates a ordered list with numbers.

How well did you know this?

Not at all

Perfectly

what does the (ul> (/ul> block-level tag do?

creates a unordered list with bullet points

How well did you know this?

Not at all

Perfectly

what does the (li> (/li> block-level tag do?

encloses each list item in a list.

How well did you know this?

Not at all

Perfectly

what does the (h#>(/h#> block-level tag do?

creates a heading 1-6 with heading 1 being the biggest

How well did you know this?

Not at all

Perfectly

what does the (hr> block-level tag do?

creates a horizontal line

How well did you know this?

Not at all

Perfectly

what does the (span> (/span> inline tag do?

allows grouping of inline elements

eg (p>My mother has (span style=”color: blue;”>blue(/span> eyes.(/p>

How well did you know this?

Not at all

Perfectly

what does the (strong> (/strong> inline tag do?

makes the enclosed text strong (bold)

How well did you know this?

Not at all

Perfectly

what does the (em> (/em> inline tag do?

makes the enclosed text emphasized (italics)

How well did you know this?

Not at all

Perfectly

what does the (br> inline tag do?

makes text afterwards go on a new line

How well did you know this?

Not at all

Perfectly

what does the (a> (/a> inline tag do?

And a example to google saying click here

used in html links

(a href=”google.co.uk”> click here (/a>

How well did you know this?

Not at all

Perfectly

what does the (img/> inline tag do?

and a general example

opens a image
(img src=”filesource” alt=”alttext” width=”” height=””/>
alt is the text displayed when you hover over it and used in text only browsers.

How well did you know this?

Not at all

Perfectly

how do you write comments in html?

note ) = > and (=

(!--comment--)
which can be conditional eg 
(!--[if IE 8})
some html
(![endif]--)

How well did you know this?

Not at all

Perfectly

What does HTML stand for?

Hypertext markup Language

How well did you know this?

Not at all

Perfectly

what does CSS stand for?

cascading style sheets

How well did you know this?

Not at all

Perfectly

What does HTML do?

HTML is used for the content of the webpage and tags that do structure.

What does CSS do?

Controls the style of the webpage. Layout can also be controlled
is used to format and present the content of web pages

What are the two kinds of style sheet in css

embedded (internal) and external

What three parts make up a style rule in CSS?

a selector, property and a value.

selector{property:value; property2:value} the selector selects which elements of HTML are effected by the rule.

What are the three kinds of selector used in CSS style rules?

type- used inhead and external sheets type=”text/css”type selectors are also any html tag eg p{color:red;}
class-Used as much as u like .classname{property:value;}
ID- only used once written as #idname{property:value;}

Whats the property for changing the page colour?

backgroud-color

eg body{background-color:red;}

Whats the property for changing colour?

color | eg p{color:red;}

Whats the property for aligning text?

text-align | eg p{text-align:center;}

Whats the property for changing font?

font-family | eg p{font-family:Arial;} (if name id more then one word its in " ")

Whats the property for changing text size?

font-size | eg h1{font-size:40px;}

Whats the property for changing text to italic?

font-style | (div style="font-style: italic;"> (/div>

Whats the property for changing to bold ?

font-weight | p { font-weight: bold;}

How do inline style sheets look. | make a part of a line red.

(p>.....(span style="color: red;"> red text (/span> ....(/p>

How do inhead style sheets look. make all div in italics. note ) = > and (=

``` (head) (style type="text/css"/) div { font-style:italic; } (/style) (/head) ```

``` use a class selector called 'thick' that makes text bold. note ) = > and (= ```

``` (head) (style type="text/css"/) .thick { font-weight:bold } (/style) (/head) (body)

THIS IS BOLD

(/body) ```

use a id selector called 'twentytwo' that makes text 22 pixels big. note ) = > and (=

``` (head) (style type="text/css"/) #twentytwo { font-size: 22px; } (/style) (/head) (body)

THIS IS 22 PX

(/body) ```

What are the benefits of using an external style sheet?

ensure the same styles are applied to each HTML page of a website. Any changes made are added to all the pages

How do you use an external style sheet? | note ) = > and (=

(head) (link rel="stylesheet" type="text/css" href"mystyles.css" /) (/head)

What does an external style sheet look like?

a list of class, id and type selectors , saved as a .css

which selectors override the others?

``` ID overrides all class overrides type type doesnt override ```

Rule of thirds layout rule?

split the webpage into 3 vertically and horizontally and fit elements into these sections.

why use and over and ?

its allows the browser to decide their own treatment of the tag, eg a aural browser will pronounce the words louder for

The three colour schemes for web pages?

monochromatic, Analogous, complementary

What is a monochromatic colour scheme?

Uses a single base colour and any number of tints/shades of that colour.

What is a Analogous colour scheme?

use any three colours that are side by side on a 12-part colour wheel.eg yellow-green. usually one of the colours is predominant

What is a complementary colour scheme?

use colours that are located opposite each other on the colour wheel. eg green and red.

which tags follow american spelling?

color and center

what case are tags in?

lowercase

How do you make a table?

``` (table style="width:100%; border:2"> (th> table heading (/th> (tr> table row (td> table data (/td> (/tr> (/table> ```