WebDesign HTML/CSS Flashcards
Question
Answer
What does HTML stand for?
Hyper Text Markup Language
Which doctype declaration does HTML5 use?
< !DOCTYPE html >
How do you declare a headline?
< h1 >…< /h1 >
sizes range from 1 to 6
How do you declare paragraphs in HTML?
< p >…< /p >
Give the hyperlink tag to a homepage Sweetheart.com.
< a href=”http://www.sweetheart.com” > This is the link to Sweetheart< /a >
- the page will open in the current window
Explain < img src=”w3schools.jpg” alt=”W3Schools.com” width=”104” height=”142” >. (4)
- tag to display an image
- the src attribute links to where the image is located, in this case, the same folder the HTML file is in
- alt is the text that is displayed if you hover over the picture or that is displayed in case the picture won’t load
- width and height refer to the display properties, not the actual size of the image, it will be resized to fit
What does the < body > element define?
- the document body or what is actually displayed/visible on the web page
What does the < html > element define?
the whole document
How do you close a break element? Why should you close it when it is anyway empty?
< br / >
- close all elements if you need stricter validation or make your document readable by XML parsers
How can you display a tool tip about an element for screen readers? (3)
< p title=”paragraph about zoos in Chicago” >text text< /p >
- screen reader reads it to a blind person
- is also displayed when you hover over element
< p title=”mouse” >< /p >
What is the tag to create a horizontal line in HTML?
< hr / >
< br / > is an … HTML element for creating a …
…empty…line break
What is the < head > element for?
-it only contains meta data-permissible elements: < title >, < meta >, < style >, < link >, < script >, < noscript > and < base >
How do you avoid the “poem problem”, that lines and spaces are ignored in HTML?
If you wrap paragraphs not in < p >, but in < pre > tags, all spaces will be honoured.< pre >text will show this way< / pre >
< pre > defines…
pre-formatted text.
The … element defines emphasised text (italics), with added … importance.
…< em > …semantic
How do you italicise “flower” in the following text paragraph?< p >The red poppy, was the famous flower blooming across Flanders during WWI< / p >
< p >The red poppy, was the famous < i >flower< / i > blooming across Flanders during WWI< / p >< em > also italicises, but with added semantic importance; do not use it for formatting alone!
How do you format text in bold?
< b >text< / b > bold formatting< strong >< / strong > bold formatting with added semantic importance
How do you highlight text by colouring its background, similarily to using a text marker in a book?
< mark >text< / mark > …text will be highlighted in front of a yellow background
How can you can you create strikethrough formatting? And why would this be used?
< del >puppy< / del > …puppy will be cancelled out-emphasises that something is now deleted and still inform users that it once existed/was considered/etc.
How can you show through formatting that particular text was added to a paragraph?
< p >< ins >Bunnies< / ins > are cute.< / p >
How do you create a subscript in HTML such as is required for a logarithms base?
< sub >…< / sub >
How can you reformat HTML to a smaller sized text with direct formatting?
textsuitable for footmarks
How can you reformat HTML to a smaller sized text with direct formatting?
< small >text< / small > -suitable for footmarks
In HTML, how do you format short quotes correctly?
< q >Flowers are beautiful!< / q > -text in quotes will normally be wrapped in quotation marks
In HTML, how do you format long quotes (several lines) correctly? (3)
< blockquote >text text< / blockquote >-quote will generally be indented-you can inbuilt a reference to the source: cite=”http://www.text.com”
In HTML5, what is a clever way to show your readers what an abbreviation stands for?
< abbr title=”Woof Dog Home” >WDH< / abbr >
With HTML tags, how can you show/highlight text to the reader designated as computer code? (3)
< code >command blah< / code >-you can achieve richer effects with CSS-text is usually displayed in the font family Monospace
With HTML tags, how can you show/highlight text similar to computer code as keyboard input or computer output? (3)
< samp >sample output< / samp >< kbd >keyboard input< / kbd >-all displayed in font family Monospace
How do you insert comments in HTML, which show text or code that should not be displayed in the browser, for example reminders or for debugging?
In HTML5, what is the tag for defining/formatting a mathematical variable?
< var >x< / var >
What does CSS stand for?
Cascading Style Sheets
What are the 3 ways in which CSS can be added to HTML?
-inline - with a style attribute in tags-internal - with a style element in the head section-external - by linking to an external .css file
What is the general CSS syntax for internal / external CSS?
element { property:value ; property:value }element…HTML, e.g. pproperty…CSS, e.g. colorvalue…CSS, e.g. red
Why would you use inline styling for CSS?
To apply a unique styling to a single HTML element.
Why would you use internal styling for CSS?
You can define a common style for all HTML elements on a page, e.g. every instance where you find an H1 heading it will be displayed in red.
Use internal CSS styling to colour the page background black, to double the size of the h1 headlines and to change the font of text to Verdana.
body { color:black;}h1 { font-size:200%;}p { font-family:verdana;}
“Colour” the following text in blue using inline CSS styling. Assume it’s a headline of the highest order.Come to the Blue Mountains today!
< h1 style=”color: blue;” >Come to the Blue Mountains today!< / h1 >
Why would you use external style sheets?
The same styling can be applied to several pages of a homepage at once.
What is the CSS Box Model?
~every HTML element has a box around it, even if its invisible~with CSS you can make it visible with the border property and style it
How do you link to an external style sheet called minnie.css?
in the head section: < link rel=”stylesheet” type=”text/css” href=”minnie.css” >
What does the CSS padding property do and how?
-defines a space inside the border of an HTML elementp { padding:10px; }
What does the CSS margin property do and how?
-defines a margin outside the border of an HTML elementp {margin:30px; }
How do you make the invisible box around an HTML element visible?
p { border:1px solid black; }
You can internally style HTML elements by referring to them directly in the head section, but how can you achieve a different styling for some items or an item of the same type of element?
1) use the id attribute to assign an individual styling for a single element2) use the class attribute to assign a styling to you chosen group of elements
Show how the id attribute is used on a p element called “bunny”, which should be coloured blue.
p#bunny { color:blue; }< p id=”bunny” >Bunnies are different< / p >
Show how the class attribute is used on 2 p elements of the group to be called “error”, which should be coloured red.
p.error { color:red; } < p class=”error” >I beg to differ.< / p >< p class=”error” >I differ, too.< / p >
What is the difference linking to another website and linking to a different page within your website?
-linking outside requires an absolute URL (a full web address with http://)-linking within uses a relative URL, e.g. a page in the current folder can be targeted by just linking to the pages title
By default, links will appear like this in all browsers:-an unvisited link –a visited link –an active link -
~an unvisited link - underlined & blue~a visited link - underlined & purple~an active link - underlined & red
How can you change the default link colours for hover, visited, active and default with CSS?
a:hover {color:yellow; background-color:black}a:visited {color:red; background-color:black}a:active {color:blue; background-color:transparent}a:link {color:black; background-color:transparent}
The target attribute of a link specifies…
…where to open the linked document.
Open http://www.lambda.info in a new window or tab using HTML.
< a href=”http://www.lambda.info” target=”_blank” >Visit Lambda!< / a >
Open http://www.omega.info in the parent frame using HTML.
< a href=”http://www.omega.info” target=”_parent” >Visit Omega!< / a >
Open http://www.potatoes.info in the full body of the window using HTML.
< a href=”http://www.potatoes.info” target=”_top” >Visit Potatoes!< / a >-if page is locked in a frame, you can break out of it with _top
How do you target frames via a link?
< a href=”http://www.candice.edu” target=”framename” >Directory< / a >
How do you turn an image into a link? (3)
-wrap the link around the image-don’t forget to add alt and style-style=”border:0;” will prevent IE9 and earlier from displaying a border around the image
How do you bookmark / link to a certain place inside a HTML document from inside the page?
~create a link to your bookmark< a href=”#tips” >Go to the Tips Section< / a >-mark the target section with an ID< a id=”tips” >Tips Section< / a >
How do you bookmark / link to a certain place inside a HTML document from another page?
~create a link to your bookmark< a href=”http://www.thispage.com/page01.htm#tips” >Visit the Tips Section< / a >-mark the target section with an ID< a id=”tips” >Tips Section< / a >
How do screen readers work? (3)
~reproduce HTML as text-to-speech, sound icons or braille output-they read alt attributes-alt attributes should accurately describe the image they represent
What are the 2 ways to specify width and height of an image?
CSS in tag styling:style=”width:128px;height:128px”HTML width & height attributes:< img width=”128” height=”128” >
What is the benefit of using CSS in tag styling for height and width instead of HTML attributes?
~prevents internal or external style sheets to change the default size of an image
How do you access an image in a sub-folder?
< img src=”/images/smilie.gif” >
How do you access an image from an image server?
~you enter the URL, the pertinent sub-folders and the file name< img src=”http://www.mouse.co.jp/mickey_and_minnie/mickey.gif” >
How do you create an image map?
< img src=”planets.jpg” alt=”Planets” usemap=”#planetmap” style=”width:145px;height:126px;” >< map name=”planetmap” >< area shape=”rect” coords=”0,0,82,126” alt=”sun” href=”sun.htm” >< area shape=”circle” coords=”90,58,3” alt=”Mercury” href=”mercury.htm” >< / map >
How can I let an image float around text / a paragraph?
~you can only use CSS, the align attribute is not supported anymore in HTML5< img src=”true” alt=”true” style=”float: left;” >-the image floats to the left of the text
Tables are defined with the … tag.
< table >…< / table >
Tables are divided into table rows with the … tag.
< tr >…< / tr >
Table columns are achieved by dividing table rows into table data with the … tag. The first row’s columns are usually reserved for the table headings, so in the first row … is replaced by the … tag.
< td > tag, < td >, < th >
How do you specify a border for a table in HTML, without using CSS?
~place the border attribute within the table tag < table border=”1” style=”width:100%” >-use style sheets instead, the border attribute is on its way to deprecation
How do you use CSS to draw a simple border around your table?
table, th, td { border: 1px solid black;}
If you want to display table borders without inner margins between the table rows and cells, how would you achieve this best?
table, th, td { border-collapse: collapse;}
Cell padding specifies the space between the … and … The default is displayed … padding.
cell content, its borders, without
How do you set a cell padding of 5 pixel?
th, td { padding: 5px;}
By default, all major browsers display table headings as … and …Which CSS property helps you to left-align the table headings?
bold, centered.th { text-align: left;}
To increase the space between cells of a table, you can use the following property…
table { border-spacing: 5px;}-does not work, if you used border collapse as well
If you have a table with 3 headlines (3 columns) and if you wanted to merge headline 1 and 2 to span two columns, how would you do it?
< tr > < th colspan=”2” >Name< / th > < th >Age< / th >< / tr >
If you want a table cell to span 2 rows, how would you do it?
< tr > < th rowspan=”2” >Animals:< / th > < td >Tiger< / td >< / tr >< tr > < td >Rhinoceros< / td >< / tr >
How do you specify an overall headline for your table?
< caption >Title of Table< / caption > -the caption tag follows immidiately after the table tag
If you use internal style sheets to format your table, consider that all tables in a document will be formatted the same way. To style a table individually, use the following…
table#IndivBunnyTable { width: 100%; background-color: blue;}< table id=”IndivBunnyTable” >
Using style sheets, how could you achieve an alternating background colour pattern (every other row is light gray) for your table.
table#01 tr:nth-child(even) { background-color: #eee;}table#01 tr:nth-child(odd) { background-color: #fff;}
How can you apply a specific type of formatting to a group of one or more columns, instead of repeating the styles for each cell, for each row? (4)
~use the < colgroup > element-it mirrors the table, but only its columns: < colgroup >< col >< col >..< / colgroup >-< col > is an empty element-must be located after < table > and < caption >, but before all others
Write up a simple colgroup for a table with 3 columns, the second and the third column are both green.
< colgroup > < col > < col span=”2” style=”background- color:green >< / colgroup > -Note: You have to declare only one of the spanned columns
< thead > is used to …
…group header content in a table.
< tbody > is used to …
…group body content in a table.
< tfoot > is used to …
…group footer content in a table.
What are the benefits of using < tbody >, < thead > or < tfoot > in a table? (4)
-used to group and structure content in a table-those 3 elements can then be formatted using style sheets-you could e.g. enable scrolling only for the body section of a table-when printing large tables across multiple pages, header and footer can be print
How do you use thead, tbody and tfoot? (3)
~the elements should frame the rows and tabledata they are supposed to encompass-thead comes after table, caption and colgroup elements, but before all other-tfoot comes after table, caption, colgroup, thead, but before tbody
What types of HTML lists exist?
~unordered lists-ordered lists-description lists
Make an unordered list with the items of coffee, chocolate and milkshake.
< ul > < li >Coffee< / li > < li >Chocolate< / li > < li >Milkshake< / li >< / ul >
How do you change the bullet type of an unordered list? What types of bullets exist?
< ul style=”list-style-type:circle” >-disc, circle, square, none
Which bullet type is used as default in an unordered list?
~round bullet / disc
Make an ordered list with the items of cinnamon, blue cheese and mango.
< ol > < li >Cinnamon< / li > < li >Blue cheese< / li > < li >Mango< / li >< / ol >
You use … to format the marker of an ordered list and … to format the bullets of an unordered list.
the HTML type attributestyle sheets
How do you change the marker type of an ordered list? What types of markers exist?
< ol type=”A” >< / ol > 1 (numbers, default), A (uppercase letters), a (lowercase letters), I (uppercase Roman numbers) and i (lowercase Roman numbers)
A HTML description list is …
… a special type of structured list, where a term is introduced and its description follows in the next line with indentation.
Make a HTML description list with the followering content:national colours - green and yellowAborigines - longest continuing culture on Earth
< dl > < dt >national colours< / dt > < dd >- green and yellow< / dd > < dt >Aborigines< / dt > < dd >- longest continuing culture on Earth< / dd >< / dl >
Tweak the following code so the list becomes displayed horizontally.< ul > < li >mermaid< / li > < li >unicorn< / li > < li >harpye< / li >< / ul >
ul#fantasy li { display:inline;}
Most HTML elements are divided into … and … elements. The former will be automatically formatted with a linebreak before and after it, the latter has no inherent formatting. Both are like containers: … for text, … for other elements.
block levelinlineinline elementsblock level elements
Which ones of these are block level elements?a) < p >b) < a >c) < b >d) < div >e) < blockquote >
a), d) and e)
Which ones of these are inline elements?a) < img >b) < ul >c) < span >d) < h2 >e) < td >
a), c) and e)
Style the background of the following text black, the text colour white.< h2 >London< / h2 >< p >London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.< / p >
< div style=”background-color: black; color: white; margin: 20px; padding: 20px;” >< / div >
Colour the background of “long tusks” blue. The gigantic mammoth has long tusks.
The gigantic mammoth has < span style=”background-colour: red;” >long tusks< / span >.
Classing HTML elements means…
…grouping elements by the attribute class to assign similar formatting to the whole group.
Assign a class to the following text and change it’s background colour to orange.My Neighbour TotoroTotoro are basically 3 fantasy animals, that look like a mix of a cat and a tanuki. There is a large one, a medium-sized one and a tiny white one.
.totoro { background-color:orange;} < div class=”totoro” >< h2 >My Neighbour Totoro< / h2 >< p >Totoro are basically 3 fantasy animals, that look like…< / p >< / div >
Use a class attribute to style all instances of the word “red” occurring in the text red.During WWI thousands of soldiers died on the battlefields of Flanders. Strikingly, a sea of red poppies grew across the burial grounds. That is why the red poppy became the symbol of Armistice Day.
span.red {color:red;}During WWI thousands of soldiers died on the battlefields of Flanders. Strikingly, a sea of < span class=”red” >red< / span > poppies grew across the burial grounds. That is why the < span class=”red” >red< / span > poppy became the symbol of Armistice Day.
Could you use the table element to design a layout?
You could and many developers have done so, because table elements can be easily styled through CSS. But remember < table > was not designed for that purpose, use < div > instead.
HTML5 has 8 new elements, especially invented to make designing layouts easier. What are they?
header - nav - footer - section - article - aside - details - summary
What does the < header > element stand for? (3)
~defines a header for a document or a section-usually reserved for the logo, banner, heading elements, etc.-new in HTML5, all latest browsers
What does the < nav > element stand for? (4)
-defines a container for navigation links-reserved for the navigation bar alone-in the past, it was a column to the left, nowadays, it’s often a horizontal bar below the banner-new in HTML5, all latest browsers
What does the < section > element stand for? (4)
~defines a section in a document-nowadays, pages are often complex: this would be reserved for structuring content into sections, chapters, headers, footers, etc.-on a simple traditional website it wud be the main body content of the page-new in HTML5, all latest browsers
What does the < article > element stand for? (3)
~defines an independent self-contained article, independent from rest of page -its the container of a self-contained topic on the same page: a forum post, a blog post, a news story or a comment-new in HTML5, all latest browsers
What does the < aside > element stand for? (4)
~defines content aside from the content it is placed in-could be a sidebar or further information about an article, etc.-must always be related to the surrounding content-new in HTML5, all latest browsers
What does the < footer > element stand for? (3)
-defines a footer for a document or a section-very commonly it’s a bar right across the bottom of the page with authorship, copyright and contact information, sitemap, back to top links, related documents, etc.-new in HTML5, all the later version browser
What does the < details > element stand for? (5)
~latest, not supported by IE or Firefox-additional details the user can hide on demand-interactive widget the user can open or close-by default its closed-comes with a simple open attribute
How can you use CSS to display or not display the contents of the details tag in HTML5 (without using the attribute open)?
details { display:block;}
What does the < summary > element stand for? (4)
-defines visible heading for details element-element can be clicked to view/hide details-is first child of details element-only supported in latest versions of chrome, safari and opera!
What is RWD? (3)
Responsive Web Design-create web sites which adjust & align themselves according to what media tool you use for viewing them-a must for tablets and mobile devices
What is Bootstrap? (3)
~most popular CSS framework for RWD-helps develop sites that look nice at any size: screen, laptop, tablet or phone-free collection of tools available at GitHub
When and how was Bootstrap invented?
-invented by Mark Otto & Jacob Thornton at Twitter as a framework to encourage consistency across internal tools-released as open source product in Aug 2011 at GitHub
Why use Bootstrap? (4)
1) Mobile-first approach2) Browser-support: all popular browsers3) RWD: adjusts to desktops, tablets, etc.4) Ease of use: only need to know HTML & CSS
What does Bootstrap include? (5)
~scaffolding: layout, grid system, fluid gridsystem, RWD-base CSS: classes for forms, etc.-components: icons, dropdowns, etc.-JS plugins: custom jQuery plugins-customisable components
What are HTML forms mainly used for?
~to pass data to a server
What kind of input elements can HTML forms contain? (9)
~text fields-text area-radio-buttons-submit buttons-select lists-checkboxes-legend-label elements-fieldset
Create a simple text fields for your user to enter his or her first name.
< form >First name: < br / >< input type=”text” name=”firstname” >< / form >
What is an iframe?
~used to display a web page within a web page
What is the basic syntax of an iframe? (3)
< iframe src=”mypage.htm” width=”400” height=”300” >< / iframe >-width & height specifies the size of the display-can also be specified in percent
By default an iframe is displayed with borders and scrollbar, how can you remove them?
with the attribute frameborder=”0”
Use an iframe as the target frame for a link to WoofDogSite.
< iframe src=”iframe.htm” name=”iframe1” >< / iframe >< p >< a href=”http://www.woof.de” target=”iframe1” >WoofDogSite< / a >< / p >
How many written colours are supported by all browser for HTML and CSS?
140(17 from HTML, 123 from CSS)
List the 17 colours from HTML.
aqua, blue, navy, tealgreen, lime, olivered, fuchsia, purple, maroonblack, white, gray, silverorange, yellow
What is the hexadecimal code for black?
000000
What is the hexadecimal code for white?
FFFFFF
What is the hexadecimal code for yellow?
FFFF00
Colours are displayed on digital devices combining…
…red (R), green (G) and blue (B), RGB, light.
Explain how colours are used in HTML / CSS. (5)
-colours are defined using a hexadecimal (hex) notation for the light of Red, Green, and Blue values (RGB)-lowest value for each light source is 0 (hex 00), highest is 255 (hex FF)-hex values are written as # followed by either three or six hex characters
How many different colours can be displayed in RGB?
-16 million different colours (256 x 256 x 256)
Most modern monitors are capable of displaying at least … different colours.
16384
Which tag shows a message in case JavaScript code cannot be displayed by the user’s browser?
< noscript >Sorry, your browser does not support JavaScript!< / noscript >
What are the 3 functions the title element provides?
~displays a title for the page in search engine results-defines a title in the browser toolbar-provides a title for the page when it is added to favorites
What does the base element do? Give an example for a base element declaration.
~specifies the base URL/target for all relative URLs in a page< base href=”http://www.mausi.de/images/” target=”_blank” >
What is the main function of the style element?
~is used to specify how HTML elements should render in a browser
What are meta tags for? (4)
~to provide data information about data-metadata will not be displayed on the page, but will be machine parsable-used to specify page description, keywords, author of the document, last modified, etc.-metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services
Declare likely search engine keywords in a meta tag for a website which sells cupcakes.
< meta name=”keywords” content=”cupcakes, cakes, baking, pastry, chocolate” >
Declare a meta description for the web page of a no-kill shelter.”Rescuing dogs and cats from pounds in NSW”
< meta name=”description” content=”Rescuing dogs and cats from pounds in NSW” >
In a meta tag, define the author of a web page as Arnold Schwarzenegger.
< meta name=”author” content=”Arnold Schwarzenegger” >
Give the meta tag to refresh a web page every 30 seconds.
< meta http-equiv=”refresh” content=”30” >
The script tag is used to…
…define a client-side JavaScript.
Write the code for the following simple JavaScript program:On click of a button (“Click here”), a paragraph of text (“A Paragraph”) changes into the message, “Hello Gonzo!”.
< script >function myFunction() { document.getElementById(“demo”).innerHTML = “Hello Gonzo!”;}< / script >< p id=”demo” >A Paragraph< / p >< button type=”button” onclick=”myFunction()” >Click here< / button >
What are character entities? (3)
~some characters are reserved for tags, e.g. greater than.-to use them for another purpose on your web page, you must use the corresponding character entity - also if you want to display a character that is not on your keyboard
What do character entities look like?
&entity_name; OR entity_number; E.g. to display a less than sign, you would use < or <(not all browsers support entity names, but all support entity numbers)
Remember, using more than one space in a sequence will get those in excess truncated. To avoid that, you have to use … or the character entity name … or the character entity number …
pre-formatting for non-breaking space
Give the character entities for the copyright sign.
© OR ©
Diacritical marks are … added to a letter. An example are … Glyphs can also be displayed using …
glyphsaccentscharacter entities
A HTML symbol entity can be displayed using…
…entity names, a hexadecimal entity number or a decimal entity number.e.g. for the EURO symbol€€€
What kind of symbols can be displayed using entity numbers or names? (4)
NAME?
When using entity numbers or names can every symbol be displayed in every browser?
No, disregarding the way used to display the symbol, some symbols are not supported by some browsers (e.g. Firefox support is quite limited).
What is a character encoding standard or character set?
~it defines the characters that can be displayed on the web page-e.g. ASCII
What character sets exist?
-ASCII-ANSI (Windows-1252)-ISO-8859-1-UTF-8 (Unicode)
What is ASCII? (3)
-first character encoding standard-defines 127 different alphanumeric characters that could be used on the internet-supported numbers (0-9), English letters (A-Z), and some special characters
What is ANSI (Windows-1252)? (3)
-the original Windows character set-supported 256 different character codes -it is virtually identical to ISO-8859-1, but has a few extra characters
What is UTF-8 (Unicode)?
~covers almost all of the characters and symbols in the world-default for HTML5, but HTML4 can read it, too
What is ISO-8859-1?
~default character set for HTML4-also - like ANSI - supported 256 different character codes-if a browser detects ISO, it will default to ANSI
How is UTF-8 declared in HTML5?
< meta charset=”UTF-8” >
How is ISO-8859-1 declared in HTML4?
< meta http-equiv=”Content-Type” content=”text/html;charset=ISO-8859-1” >
What does URL stand for?
Uniform Resource Locator
A URL can be composed of … (www.blob.de) or an … (…) address (192.68.20.50). When you click on a link in an HTML page, an underlying … tag points to an … on the web.
wordsInternet Protocol (IP)< a >address
What syntax rules does a web address follow?
scheme://host.domain:port/path/filename
Describe scheme://host.domain:port/path/filename. (6)
-scheme: defines the type of Internet service (most common is http)-host: defines the domain host (default host for http is www)-domain: defines the Internet domain name-port: defines the port number at the host (default for http is 80)-path: defines a pa
What type of URL schemes exist?
http - https - ftp - file
What does http stand for?
HyperText Transfer Protocol
What does https stand for?
Secure HyperText Transfer Protocol
What does ftp stand for?
File Transfer Protocol
URLs can only be sent over the Internet using the … character set. … converts characters into a format that can be transmitted over the Internet. It replaces non … characters with a “…” followed by … digits. URLs cannot contain …! … normally replaces a … with a plus (+) sign, or …
ASCIIURL encodingASCII%hexadecimalspacesURL encodingspace%20
What is XHTML essentially?
It is HTML written as XML.
What does XHTML stand for?
EXtensible HyperText Markup Language
What are the basic properties of XHTML? (4)
~almost identical to HTML-stricter than HTML=HTML defined as an XML application-supported by all major browsers
Why was XHTML invented?
A lot of web pages contain bad HTML coding (wrong nesting, unclosed tags, etc.). Some browser might still be able to interpret these pages, others not. However, especially the new compact mobile devices require strong validation to display content correctly.
What are the most important differences XHTML has from HTML in terms of document structure? (3)
~must have an XHTML DOCTYPE declaration-< html >, < head >, < title >, and < body > are mandatory-he xmlns attribute in < html > must specify the xml namespace for the document
Give the doctype declaration for XHTML.
< ! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd” >
Declare the xmlns attribute for XHTML.
< html xmlns=”http://www.w3.org/1999/xhtml” >
What are the most important differences between XHTML elements and HTML elements? (4)
~must be properly nested-must always be closed, including empty elements (e.g. < hr / >)-XHTML elements must always be in lower case-XHTML documents must have one root element –>
What are the most important differences between XHTML attributes and HTML attributes? (3)
~attribute names must be in lower case-attribute values must always be quoted (e.g. width=”100%”)-attribute minimisation is forbidden / attributes must come in name-value pairs (e.g. < input disabled=”disabled” > instead of < input disabled >)
You can validate your XHTML documents with the …
W3C Validator
What does a radio button do?
Lets you select one among a limited number of choices.
Draw up a simple radio button with the choices dog or cat.
< form >< input type=”radio” name=”pet” value=”dog” checked=”checked” >Dog< br / >< input type=”radio” name=”pet” value=”cat” >Cat< / form >
For a radio button, what does the checked attribute do?
~choose which choice is selected by default-is an attributed that can be minimised
How does a submit button work and what is a form-handler? (3)
-if clicked submits a form to a form-handler-form-handler is typically a server page with a script for processing input data-form-handler is specified in the form’s action attribute
Create a simple form for the user to enter his/her state with a submit button and a form-handler.
< form action=”action_page.php” >State:< br / >< input type=”text” name=”state” value=”NT” >< br / >< br / >< input type=”submit” value=”Submit” >< / form >
What does a form-handler action attribute do? (3)
~defines the action to be performed when the form is submitted-normally, the form is submitted to a web page on a web server-if action attribute is omitted, action is set to the current page
What does a form-handler method attribute do?
-specifies the HTTP method (GET or POST) to be used when submitting forms-has 2 possible values - GET and POST
When should you use the GET value for the method attribute of a form-handler? (3)
~best suited to short amounts of data-when there is not sensitive information (will be visible in page address)-if form submission is passive (like a search engine query)
When should you use the POST value for the method attribute of a form-handler?
~if form is updating data, or includes sensitive information (password)-submitted data is not visible in the page address
For the submission of a form to a server to be carried out, at all, apart from the handler, what syntax item needs to be there?
Every input item must have a name attribute. Without it, the item will be left out of the submission.
What does the < fieldset > form element do? (3)
~as a structural element, fieldset groups related data in a form-should encompass the form data it is to group-visually, combined with legend, it creates a nice border + headline for a form
What does the < legend > form element do?
It is the alter ego of the caption or the summary element in terms of being the first child of its parent element, fieldset, and forming its structural headline.
List all 8 form attributes that exist.
~accept-charset-action-autocomplete-enctype-method-name -novalidate-target
What is the form attribute accept-charset for?
~specifies the charset used in the submitted form, if it is to differ from the character set of the original page
What is the form attribute enctype for?
~specifies the encoding of the submitted data, if it is to differ from the encoding of the current page
What is the form attribute novalidate for?
~specifies that the browser should not validate the form-its a minimised attribute
What are the default values for the form attributes (excluding novalidate and name)?
-accept-charset: the page charset-action: the submitting page-autocomplete: on - browser auto completes form-enctype: is url-encoded-method: GET - insensitive data submission-target: “_self” - open in current page / frame
What are possible values for the following form attributes:accept-charset,autocomplete,enctype,method,novalidate, and target
-accept-charset: UFT-8, ISO-8859-1, ASCII, ANSI-autocomplete: on or off-enctype: application/x-www-form-urlencoded-method: GET or POST-novalidate: novalidate-target: _blank, _self, _parent, _top, framename
Create a simple drop-down list with 3 car brands as choice.
< form action=”action_page.php” >< select name=”cars” >< option value=”volvo” >Volvo< / option >< option value=”bmw” >BMW< / option >< option value=”vw” >Volkswagen< / option >< / select >< br / >< br / >< input type=”submit” >< / form >
How can you preselect one of the items of your drop-down list?
The minimised attribute “selected” could be added to the desired option element.
Create a text area with size 30 x 10 and the pre-written sentence “The dog was playing with the cat in the garden.”
< form action=”action_page.php” >< textarea name=”message” rows=”10” cols=”30” >The dog was playing with the cat in the garden.< / textarea >< br / >< br / >< input type=”submit” >< / form >
Create a button which if clicked opens a message box with the message “Hello World!”
< button type=”button” onclick=”alert(‘Hello World!’)” >Click Me!< / button >
Which function does the < label > element have in a form?
In a radio button list, if you have labels properly declared, the user can also click the word (label) to select a choice, not only the radio button directly.
Create a simple radio button list with two choices and properly declared labels.
< form action=”demo_form.asp” > < label for=”python” >Python< / label > < input type=”radio” name=”Language” id=”python” value=”python” >< br / > < label for=”ruby” >Ruby< / label > < input type=”radio” name=”Language” id=”ruby” value=”ruby” >< br / >< br / > < input type=”submit” value=”Submit” >< / form >
If you have a longer drop-down list, you can group related content using the … element.
< optgroup >
Create a simple 4 items select list (Suzuki, Toyota, Mercedes, Audi), including 2 categories (Japanese and German cars).
< select > < optgroup label=”Japanese Cars” > < option value=”suzuki” >Suzuki< / option > < option value=”toyota” >Toyota< / option > < / optgroup > < optgroup label=”German Cars” > < option value=”mercedes” >Mercedes< / option > < option value=”audi” >Audi< / option > < / optgroup >< / select >
Create a password field.
< form >User password:< br / >< input type=”password” name=”psw” >< / form >
How do you create a submit button to send your form data to your form-handle page?
< input type=”submit” value=”Submit” >-if you forget the value attribute, the button will have the default text “submit query”
Create two checkboxes with the following values…I am employedI am an entrepreneur(without handler and submission)
< form >< input type=”checkbox” name=”occupation” value=”Employed” >I am employed< br / >< input type=”checkbox” name=”occupation” value=”Entrepreneur” >I am an entrepreneur< / form >
Which new form input types did HTML5 add? (13)
colordate - datetime - datetime-localemail - telmonth - week - timenumber - rangesearch - url
What happens if a new input type introduced since HTML5 is not supported by your user’s browser?
They will be read as input type=”text”.
What is the function of the input type=”date” value and how is it supported? (5)
~specifies a field where you can enter a date-on entering you will GET a date picker, drop-down or wheel menu, where you can choose the date-new in HTML5-not supported by Mozilla & Internet Explorer-you can add restrictions like max or min, but they are even more sparsely supported
Create a date form field with restrictions of minimum age 1/01/1930 and maximum age today. Leave out handler and submission.
Birthday:< br / >< input type=”date” name=”bday” max=”2014-11-23” min=”1930-01-01” >
What is the function of the input type=”color” value and how is it supported? (4)
-is used for input fields that should contain a color-comes with a colour picker if supported-new in HTML5-not supported by IE & Safari (Picker won’t show up)
Create a colour input field for a form (no handler or submission).
Select your favorite colour:< input type=”color” name=”favcolor” value=”#ff0000” >
What is the function of the input type=”range” value and how is it supported? (4)
-is used for input fields that should contain a value within a range-input field can be displayed as a slider control-new in HTML5-not supported by IE 9 and earlier & Firefox older versions (slider won’t show up)
Create a range input field for a form with values ranging from 0 to 10 (no handler or submission).
Points:< input type=”range” name=”points” min=”0” max=”10” >
What is the form input type “month” for and how well supported is it? (3)
-allows the user to select a month and year-new in HTML5-not supported by IE & Firefox (month picker won’t show up)
Create a month input field for a form (no handler or submission).
Birthday (month and year):< input type=”month” name=”bdaymonth” >
What is the form input type “week” for and how well supported is it? (3)
-allows the user to select a week and year-new in HTML5-not supported by IE & Firefox (week picker won’t show up) & Safari has issues
Create a week input field for a form (no handler or submission).
Select a week:< input type=”week” name=”year_week” >
What is the form input type “time” for and how well supported is it? (3)
-allows the user to select a time (no time zone)-new in HTML5-not supported by IE & Firefox (time picker won’t show up)
Create a time input field for a form (no handler or submission).
Select a time:< input type=”time” name=”usr_time” >
What is the difference between the form input type “datetime” and “datetime-local”?
Both allow the user to select a date and time, but “datetime” also allows the selection of a time zone.
Write 2 input fields, one for “datetime” and one for “datetime-local”.
Birthday (date and time):< input type=”datetime” name=”bdaytime” >< input type=”datetime-local” name=”bdaytime” >
How well supported are input type “datetime-local” and “datetime”? (3)
-datetime is not supported by Firefox, IE and Chrome; Safari has issues-datetime-local is not supported by Firefox and IE-new in HTML5
What is the form input type “email” for and how well supported is it? (4)
-is used for input fields that should contain an e-mail address-depending on browser support, the e-mail address can be automatically validated when submitted-some smartphones recognise the email type, and adds “.com” to the keyboard to match email input-
Create an email input field for a form (no handler or submission).
E-mail:< input type=”email” name=”email” >
What is the form input type “tel” for and how well supported is it? (3)
-is used for input fields that should contain a telephone number-currently supported only in Safari 8-once you try typing, it will show the telephone keyboard
Create a telephone input field for a form (no handler or submission).
Telephone:< input type=”tel” name=”usrtel” >
What is the function of the input type=”url” value and how is it supported? (4)
-is used for input fields that should contain a URL address-depending on browser support, the url field can be automatically validated when submitted-some smartphones recognise the url type, and adds “.com” to the keyboard to match url input-not supported
Create a url input field for a form (no handler or submission).
Add your homepage:< input type=”url” name=”homepage” >
Write a search Google input field for a form (no handler or submission).
Search Google:< input type=”search” name=”googlesearch” >
What is the search input field used for and how well is it supported? (3)
~is used for search fields-a search field behaves like a regular text field-new in HTML5 and not supported in all browsers but chrome & safari
Name input restriction attributes that are new in HTML5? (5)
max - min - pattern - required - step
Explain < input type=”number” name=”points” min=”0” max=”100” step=”10” value=”30” >.
Type/number: number fieldName/points: title of the fieldMin/0: the minimum value for the field is 0Max/100: the maximum value for the field is 100Step/10: you can enter numbers in steps of 10Value/30: the default value for the input field
What does the required input restriction attribute do?
~specifies that an input field is required (must be filled out)
What does the pattern input restriction attribute do?
~specifies a regular expression to check the input value against
What other input restrictions exist besides the new ones from HTML5 and name and value? And what do they do? (4)
disabled: input field should be disabledmaxlength: maximum number of characters for an input fieldreadonly: input field is read only (cannot be changed)size: width (in characters) of an input field
What is the purpose of the input value attribute?
~specifies the initial value for an input field-e.g. you could write a default message in a text field, which would give the user an example / help how to fill out the text field correctly
What is the purpose of the input readonly attribute?
the input field is read only (cannot be changed)
What is the purpose of the input disabled attribute? (4)
~specifies that the input field is disabled-a disabled element is un-usable and un-clickable-disabled elements will not be submitted-minimised attribute
What is the purpose of the input size attribute?
~specifies the size (in characters) for the input field
What is the purpose of the input maxlength attribute? (4)
~the maximum allowed length for the input field-input control will not accept more than the allowed number of characters-does not provide any feedback: if you want to alert the user, you must write JS code-JS provides many ways to add illegal input:(to) safely restrict input, restrictions must be checked by the receiver (the server) as well
Which ATTRIBUTES did HTML5 add for the input element? (18)
~autocomplete - autofocus-height - width-form - formaction - formenctype - formmethod - formnovalidate - formtarget-min - max - step - required - pattern-multiple-placeholder-list
What is the purpose of the input autofocus attribute? (3)
~an input element is automatically given focus when the page loads-minimised attribute-not supported in IE9 and earlier
A field outside a form can still be made part of a certain form using the …
…input form attribute.
Show how you can make the external input field, Last Name, part of the form “Melonz1”.
< form action=”action_page.php” id=”Melonz1” >First Name: < input type=”text” name=”fname” >< br / >< input type=”submit” value=”Submit” >< / form >Last name: < input type=”text” name=”lname” form=”Melonz1” >
What is the input formaction attribute for? (3)
~specifies the URL of a file that will process the input control when the form is submitted-overrides the action attribute of the < form > element-is used with type=”submit” and type=”image”
The formenctype attribute specifies how the … should be … when submitting it to the server (only for forms with …). The formenctype attribute … the enctype attribute of the form element.
form-data encodedmethod=”post”overrides
The formnovalidate specifies that the … should not be validated when submitted. So using it, you could specify that specific input should not be validated, whereas … or … should be validated. This is the case because the formnovalidate attribute … the novalidate attribute of the form element. However, the formnovalidate attribute can only be used with …
input element other inputthe rest of the formoverridestype=”submit”
What is the input formmethod attribute used for? (3)
-defines the HTTP method for sending specific form-data to the action URL-overrides the method attribute of the form element-can be used with type=”submit” and type=”image”
What does the input formtarget attribute do? (3)
-specifies a name or a keyword that indicates where to display the response that is received after submitting the form-overrides the target attribute of the form element-can be used with type=”submit” and type=”image”
Create a button submitting date to a new window.
< input type=”submit” formtarget=”_blank” value=”Submit to a new window” >
What does the input multiple attribute do? (3)
~specifies that the user is allowed to enter more than one value in the input element-works with the following input types: email, and file-not supported in IE9 and earlier
Create a file upload that accepts multiple files.
< form action=”action_page.php” > Select images: < input type=”file” name=”img” multiple > < input type=”submit” >< / form >
Create an input field that can contain only three letters (no numbers or special characters).
< form action=”action_page.php” > Country code: < input type=”text” name=”country_code” pattern=”[A-Za-z]{3}” title=”Three letter country code” > < input type=”submit” >< / form >
What is the input pattern attribute for? How can you help the user? How is it supported? (4)
-specifies a regular expression that the input element’s value is checked against -you can use it to establish input restrictions-use the global title attribute to describe the pattern to help the user-not supported in IE9 below and Safari
Which input types can the pattern attribute restrict? (6)
text - search - url - tel - email - password
The placeholder attribute specifies a … that describes the … value of an input field (a sample value or a short description of the format).
hintexpected
With which input types can the placeholder attribute interact? (6)
text - search - url - tel - email - password.
Create 2 textfields that ask for your first and your second pet with placeholders.
< form action=”action_page.php” > < input type=”text” name=”pet1” placeholder=”First pet” >< br / > < input type=”text” name=”pet2” placeholder=”Last pet” >< br / > < input type=”submit” value=”Submit” >< / form > –>
The input required attribute … a user to fill out the input field, else the form …
compelscannot be submitted
Create a text input field for donations with an alternative submit button picture.
< form >I want to donate: < input type=”number” name=”don_amt” / >$< br / >< input type=”image” src=”button.gif” alt=”Submit” width=”48” height=”48”/ >< / form >
What is special about the input type=”image” in combination with a button?
~upon submission, the exact coordinates (x and y) of where the user clicked on the picture will be submitted, too
What will happen if you do not specify the size (height and width) of an image?
If the browser does not know the size, the page will flicker while images load.
What is an API?
an Application Programming Interface
List the most interesting new HTML5 categories/elements? (4)
~semantic elements, e.g. < section >-form controls, e.g. range-graphic elements: < svg > & < canvas >-multimedia elements: < audio > & < video >
List the most important new HTML5 API’s? (6)
~HTML Geolocation-HTML Drag and drop-HTML Local Storage-HTML application Cache-HTML web Workers-HTML SSE
HTML5 Local Storage is a powerful replacement for …
… cookies.
List the 6 HTML 4.01 elements that have been removed in HTML5 to be replaced by CSS.
< basefont > < big > < center > < font > < strike > < tt >
List the 3 HTML 4.01 elements that have been replaced by new HTML5 elements.
< applet > to < object >< dir > to < ul >< acronym > to < abbr >
List the 3 HTML 4.01 elements that have been removed without replacement in HTML5.
< frame > < frameset > < noframes >
What does the following statement mean?display:block
~convert the element to a block-level element-block-level means with a linebreak before and after
If an old browser finds an unrecognised HTML5 element, what will it do with it?
~display it as inline element
Redefine header, footer and section of HTML5 as block-level elements, so older browsers don’t treat them as inlines.
header, footer, section { display:block}
< script >document.createElement(“mouse”)< / script >< style >mouse { display:block; padding:50px; background-color:#000;}< mouse >Hello, Mouse!< / mouse >
What is the Shiv Solution?
-a “HTML5 Enabling JavaScript” developed by Sjoerd Visscher to enable IE8 and earlier versions to allow styling of new HTML elements
Give the statement you have to add to your head element to enable “the shiv” for older IE browsers.
[if lt IE 9] > < script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js” >< / script >< ! [endif]
What are the properties of block-level elements?
is 100% of the width of its parent element as tall as its content each element will appear on a new line, separated by the margin set on them
What are the properties of inline elements?
are as tall and as wide as their content can’t set width or height on inline elements — they just sit inside the content of block level elements sit on the same line with other inlines and text wrapping if there is no space on the line, inline elements flow to the next line
