HTML Flashcards

1
Q

?What are some simple HTML formats

A

Headings <h1> to <h6>

Paragraphs <p> </p>

Links <a href=”http://some.com”>Label</a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is the basic HTML syntax for an element?

A

Start tag.

End tag.

Element content

Most elements have attributes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What does

<html>

</html>

represent?

A

The <html> element defines the whole HTML document.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is an HTML attribute?

A

Attributes provide additional information about HTML elements.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What part of the element are attributes defined?

A

.Attributes are always specified in the start tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the general syntax of an attribute?

A

Attributes come in name/value pairs like: name=”value”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is the tag for an HTML link?

A

HTML links are defined with the <a> tag.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What attributes are standard for most HTML elements?

A

class , classname, Specifies a classname for an element

id, id Specifies a unique id for an element.

style, style_definition, Specifies an inline style for an element

title, tooltip_text, Specifies extra information about an element (displays as a tooltip)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What should headings be used for?

A

Headings Are Important

Use HTML headings for headings only. Don’t use headings to make text BIG or bold.

Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document structure.

H1 headings should be used as main headings, followed by H2 headings, then the less important H3 headings, and so on.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

How can you make a horizontal line?

A

The <hr /> tag creates a horizontal line in an HTML page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How can you make a comment in HTML?

A

<!– This is a comment –>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What does the <p> tag represent?

A

Paragraphs are defined with the <p> tag.

Forgetting the end tag can produce unexpected results or errors.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

How can you create a line break?

(Create a new line without starting a new paragraph?)

A

<br> or <br />

In XHTML, XML, elements with no end tag (closing tag) are not allowed.

Even if <br> works in all browsers, writing <br /> instead works better in XHTML and XML applications.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Where can you find information on HTML?

A
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What are the three main categories of formatting tags?

A

Text formatting

Computer output

Citation, quotation and definition

Each of these categories has a number of tags that create certain formatting in an HTML document.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What are the HTML text formatting tags and what do they do?

A

<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What are the “computer output” tags and what do they do?

A

<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<tt> Defines teletype text
<var> Defines a variable
<pre> Defines preformatted text

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

What are the citation, quotation and definition tags and what do they do?

A

<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What tag is used in place of the depricated ‘font’ tag?

A

Use CSS. Cascading sheet styles.

example:

<html>
<body>

<h1 style=”font-family:verdana”>This is a heading</h1>
<p style=”font-family:courier”>This is a paragraph.</p>

</body>
</html>

20
Q

What is CSS and what is it used for?

A

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

CSS can be added to HTML in the following ways:

in Cascading Style Sheet files (CSS files)
in the <style> element in the HTML head section
in the style attribute in single HTML elements

21
Q

How is the style attribute used and when should it be used?

A

It is time consuming and not very practical to style HTML elements using the style attribute.

The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.

22
Q

What is the link syntax?

A

<a href=”url”>Link text</a>

23
Q

How do you specify an anchor in a link?

A

The name attribute specifies the name of an anchor.

<a name=”tips”>Useful Tips Section</a>

<a href=”url#tips”>Visit useful tips” </a>

24
Q

How do you create an image as a link?

A

Put it after the start tag and before the end tag where the text is normally used as a link.

The syntax for inserting an image is

<img src=”myimg.gif” />

25
Q

How do you send an email from within HTML?

A

<a href=”mailto:someone@example.com?Subject=Hello%20again”>
Send Mail</a>

Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.

<a href=”mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!”>Send mail!</a>

26
Q

How can you align an image in some text?

A

Use the align attribute.

Valid values are bottom, middle and top, bottom is the default value.

<p>An image
<img src=”smiley.gif” alt=”Smiley face” align=”middle” width=”32” height=”32” />
with align=”middle”.</p>

27
Q

How can you float an image?

A

<p>
<img src=”smiley.gif” alt=”Smiley face” align=”left” width=”32” height=”32” />
A paragraph with an image. The align attribute of the image is set to “left”. The image will float to the left of this text.
</p>

28
Q

How can you create an image map?

A

An image map in accomplished using the map tag and sub tags of area. The area attributes such as shape and coords define the ‘live’ areas.

<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=”mercur.htm” />
<area shape=”circle” coords=”124,58,8” alt=”Venus” href=”venus.htm” />
</map>

29
Q

What are the tags that are used to define an HTML table?

A

<table> Defines a table

<th> Defines a table header

<tr> Defines a table row

<td> Defines a table cell

<caption> Defines a table caption

<colgroup> Defines a group of columns in a table, for formatting

<col /> Defines attribute values for one or more columns in a table

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

30
Q

Which tags are used to define a list in HTML?

A

<ol> Defines an ordered list

<ul> Defines an unordered list

<li> Defines a list item

<dl> Defines a definition list

<dt> Defines an item in a definition list

<dd> Defines a description of an item in a definition list

31
Q

Which tags are used in forms?

A

<form> Defines an HTML form for user input

<input /> Defines an input control

<textarea> Defines a multi-line text input control

<label> Defines a label for an input element

<fieldset> Defines a border around elements in a form

<legend> Defines a caption for a fieldset element

<select> Defines a select list (drop-down list)

<optgroup> Defines a group of related options in a select list

<option> Defines an option in a select list

<button> Defines a push button

32
Q

Where would you find an input element and what would it be used for?

A

<input> elements are used within a <form> element to declare input controls that allow users to input data.

33
Q

What are some values for the ‘type’ attribute in an input tag?

A
  • Button
  • Checkbox
  • FileUpload
  • Hidden
  • Password
  • Reset
  • Submit
  • Text
34
Q

What are event attributes and what can they accomplish in an input attribute in a form?

A

Event attributes in an input tag will cause a specified script to be run. They are as follows:

  • onblur (element loses focus)
  • onchange
  • onclick
  • ondblclick
  • onfocus
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onkeydown
  • onkeypress
  • onkeyup
  • onselect
35
Q

How would you define a password field in a form?

A

<form>

Password: <input type=”password” name=”pwd” size=”20” />

</form>

36
Q

How is a form submitted?

A

Form information is sent to a server using the submit button.

<input type=”submit” />

A submit button is used to send form data to a server. The data is sent to the page specified in the form’s action attribute. The file defined in the action attribute usually does something with the received input:

<form name=”input” action=”html_form_action.asp” method=”get”>
Username: <input type=”text” name=”user” />
<input type=”submit” value=”Submit” />
</form>

37
Q

What are the 2 types of methods in the methos attribute in a form tag?

A

get

post

Notes on the “get” method:

  • This method appends the form-data to the URL in name/value pairs
  • This method is useful for form submissions where a user want to bookmark the result
  • There is a limit to how much data you can place in a URL (varies between browsers), therefore, you cannot be sure that all of the form-data will be correctly transferred
  • Never use the “get” method to pass sensitive information! (password or other sensitive information will be visible in the browser’s address bar)

Notes on the “post” method:

  • This method sends the form-data as an HTTP post transaction
  • Form submissions with the “post” method cannot be bookmarked
  • The “post” method is more robust and secure than “get”, and “post” does not have size limitations
38
Q

How can you use a form to send an email?

A

<form action=”MAILTO:someone@example.com” method=”post” enctype=”text/plain”>
Name:<br />
<input type=”text” name=”name” value=”your name” /><br />
E-mail:<br />
<input type=”text” name=”mail” value=”your email” /><br />
Comment:<br />
<input type=”text” name=”comment” value=”your comment” size=”50” />
<br /><br />
<input type=”submit” value=”Send”>
<input type=”reset” value=”Reset”>

</form>

39
Q

How can you use group together elements in a form?

A

Use the fieldset attribute.

<form action=””>
<fieldset>
<legend>Personal information:</legend>
Name: <input type=”text” size=”30” /><br />
E-mail: <input type=”text” size=”30” /><br />
Date of birth: <input type=”text” size=”10” />
</fieldset>
</form>

Personal information: Name:
E-mail:
Date of birth:

40
Q

What is the syntax for using radio buttons in an html form?

A

<form>
<input type=”radio” name=”sex” value=”male” /> Male<br />
<input type=”radio” name=”sex” value=”female” /> Female
</form>

Male
Female

41
Q

What is the purpose of frames in an HTML document?

A

With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

  • Frames are not expected to be supported in future versions of HTML
  • Frames are difficult to use. (Printing the entire page is difficult).
  • The web developer must keep track of more HTML documents
42
Q

What is an Iframe?

A

An iframe is used to display a web page within a web page.

<iframe src=”URL”></iframe>

It can be used as a target for a link and display chosen urls in the Iframe window.

<iframe src=”demo_iframe.htm” name=”iframe_a”></iframe>
<p><a href=”http://www.w3schools.com” target=”iframe_a”>W3Schools.com</a></p>

This link will switch the displayed html with the one referenced.

43
Q

How are colors represented?

A

000000 rgb(0,0,0) Black

HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB).

44
Q

In addition to the hexidecimal colors, named colors are supported in HTML. How many named colors are there?

A

147 color names are defined in the HTML and CSS color specification (16 basic color names plus 130 more). The table below lists them all, along with their hexadecimal values.

The 16 basic color names are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

45
Q

What is the best way to design a layout for an HTML document?

A

Website Layouts

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).

Multiple columns are created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages.

Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).