Activity 3
It's crunch time!
• Define HTML.
HTML is the main markup language for displaying web pages and other information that can be displayed in a web browser.
• What does HTML stand for?
HyperText Markup Language
• Define HTML elements. What are the six main HTML Elements syntax?
HTML elements start with a START TAG
HTML elements end with an END TAG
Everything in between is called ELEMENT CONTENT
Some elements have EMPTY CONTENT
Empty elements are CLOSED IN THE START TAG
Most HTML elements can have ATTRIBUTES
• Demonstrate the properly nested HTML Syntax.
An HTML Element is everything from the start tag to the end tag.
<!DOCTYPE html>
<html>
<body>
</body>
</html>
• Define HTML Attributes and provide 2 examples with their description.
Attributes provide additional information about an element, and are specified in the start tag.
Examples:
Class – specifies one or more classnames for an element
Id – specifies a unique id for an element
Style – specifies an inline CSS style for an element
Title – specifies extra info about an element
• Who is making the Web Standards?
The W3C (World Wide Web Consortium)
• Define HTML Tag.
These are used to create HTML documents so that you can view them in browsers
• What are the correct HTML tag for the 3 largest heading? Use the word TITLE as an example.
<h1>TITLE</h1>
<h2>TITLE</h2>
<h3>TITLE</h3>
• What is HTML tag for inserting a line break?
<br>
• What is the preferred way for adding a background colour in HTML?
By using styles, ie: <body style=”background-color:yellow;”></body>
• What is the correct HTML tag to make text bold?
<b>
• What is the correct HTML tag to make a text italic?
<i>
• What is the correct HTML for creating a hyperlink?
<a> or <a href”#”>
• How can you create an e-mail link?
<p>
<a href=”mailto:vonnmartin@gmail.com?
Subject=Hello!”>
Click here for mail!</a>
</p>
• Demonstrate the HTML coding to open a link in a new browser window?
<p>
<a href=http://google.ca target=”_blank”>Hey!</a>
</p>
• Create the HTML coding for a table with 2 columns and 3 rows.
<table border=1>
<tr>
<td>XXXX</td>
<td>XDXD</td>
</tr>
<tr>
<td>XXXX</td>
<td>XDXD</td>
</tr>
<tr>
<td>XXXX</td>
<td>XDXD</td>
</tr>
</table>
• Demonstrate the HTML coding to left align text in a table cell.
<table border=1 width="200">
<tr>
<td align="center">XXXX</td>
<td>XDXD</td>
</tr>
<tr>
<td align="left">XXXX</td>
<td>XDXD</td>
</tr>
<tr>
<td align="right">XXXX</td>
<td>XDXD</td>
</tr>
</table>
• Create a simple HTML form with the following fields:
a. text field for full name
<form>
First Name: <input type=”text” name=”firstname”><br>
Last Name: <input type =”text” name=”lastname”>
</form>
b. password
<form>
Password: <input type=”password” name=”pwd”>
</form>
c. a question with 3 answers using radio buttons,
<form>
<input type=”radio” name=”sex” value=”male”>Male<br>
<input type=”radio” name=”sex” value=”female”>Female<br>
<input type=”radio” name=”sex” value=”other”>Other
</form>
d. a survey question with 2 checkboxes
<form>
<input type=”checkbox” name=”pet” value=”Cat”>I have a cat.<br>
<input type=”checkbox” name=”pet” value=”Bird”>I have a bird.
</form>
e. a submit button
<form name=”input” action=”html_form_action.asp” method=”get”>
Vonnz Codename: <input type=”text” name=”user”>
<input type=”submit” value=”Submit”>
• What does CSS stand for?
Cascading Style Sheet
• Define the function of CSS.
CSS is used for describing the look and formatting of a document written in a markup language.
• What style elements can be applied in CSS?
Inline, Internal, and External
• How are HTML colours defined? What is a Hex and what is RGB?
HTML colors are defined using the Hex notation. Hex values are 3 pairs of two digit numbers, starting with a #sign.
RGB is a color model in which the colors red, blue and green are added together to provide a vast amount of colors.
• Explain how there can be 16 million different colours.
There are 256 values each for red, blue and green, and 256x256x256 > 16 million
• What are colournames? provide three examples with the corresponding HEX codes.
Colornames are color values that are defined in the HTML and CSS color specification. ie; Black (#000000), white (#ffffff), red (#FF0000)
• What is javascript? What is the coding for javascript?
JavaScripts make HTML pages more dynamic and interactive, and they use the <script> tag.
• What tag allows you to create a list of items with numbers?
<ol>
<li>X</li>
</ol>
• What tag allows you to create a list of items with bullets?
<ul>
<li>X</li>
</ul>
• Create the HTML coding for a checkbox. The checkbox should have a question and at least 3 options.
<p>Which of these do you have?<br></p>
<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
• What is the correct HTML for making a text input field?
<form>
First Name: <input type=”text” name=”firstname”><br>
Last Name: <input type =”text” name=”lastname”>
</form>
• What is the correct HTML for creating a dropdown list?
<form action=”demo_form.asp”>
<select name=”Pokemon”>
<option value=”bulbasaur”>Bulbasaur</option>
<option value=”charmander”>Charmander</option>
<option value=”squirtle>Squirtle</option>
</select>
<input type=”submit>
</form>
• What is the correct HTML for creating a text area?
<textarea rows=”4” cols=”50”>Hey hey hey?!</textarea>
• What is the correct HTML for inserting an image? (use www.digitalvoices/images/image1.jpg as an example)
<img src=”www.digitalvoices/images/image1.jpg>
• What is the correct HTML for inserting a background image? (use www.digitalvoices/images/background.jpg as an example)
<body background=www.digitalvoices/images/background.jpg>
</body>
• What is an “iFrame”? Demonstrate the coding.
An iFrame is used to display a web page within a web page.
<iframe src=”URL”></iframe>
• Define XHTML. Explain why XHTML is being used by web designers.
XHTML (Extensible HTML) is used by web designers because it is stricter and cleaner, and is supported by all major browsers.