comp2- HTML and CSS Flashcards
what is the basic structure of a webpage?
note ) = > and (=
(!doctype html)
(html)
(head)
(title) (/title)
(/head)
(body)
content of web page
(/body)
(/html)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.
what does the (div> (/div> block-level tag do?
divides the page into sections
what does the (p> (/p> block-level tag do?
creates a paragraph( puts a empty line before and afterwards)
what does the (ol> (/ol> block-level tag do?
creates a ordered list with numbers.
what does the (ul> (/ul> block-level tag do?
creates a unordered list with bullet points
what does the (li> (/li> block-level tag do?
encloses each list item in a list.
what does the (h#>(/h#> block-level tag do?
creates a heading 1-6 with heading 1 being the biggest
what does the (hr> block-level tag do?
creates a horizontal line
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>
what does the (strong> (/strong> inline tag do?
makes the enclosed text strong (bold)
what does the (em> (/em> inline tag do?
makes the enclosed text emphasized (italics)
what does the (br> inline tag do?
makes text afterwards go on a new line
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>
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 do you write comments in html?
note ) = > and (=
(!--comment--) which can be conditional eg (!--[if IE 8}) some html (![endif]--)
What does HTML stand for?
Hypertext markup Language
what does CSS stand for?
cascading style sheets
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)
<div class="thick"> THIS IS BOLD </div>
(/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)
<div> THIS IS 22 PX </div>
(/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 <strong> and <em> over <b> and <i> ?</i></b></em></strong>
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>
