What is HTML?
HTML stands for Hypertext Markup Language, the language in which web pages are written. Look at the code of a web page (View menu > Source or View menu > Page Source), and you will see that it consists of plain text that, in addition to the text you can read on the formatted web page, includes a lot of odd-looking codes surrounded by angle brackets. These codes show the web browser how to arrange and format the text on the page, where to place images, and where to direct the browser when the user clicks on a link.
HTML Basics
- All HTML codes are surrounded by angle brackets.
- Most codes have two parts: an opening tag, and a closing tag. The closing tag starts with a backslash to distinguish it from the opening tag. For example, <em> is an opening tag, for which </em> is the closing tag.
- The text to be affected appears between the opening and closing tags. If the tag has options (e.g., to specify a color or size), this appears within the opening tag as an attribute and its value. You can see this in a tag like <font color="red">. Attributes and values are not repeated in the closing tag </font>.
- If you need multiple HTML tags to get the effect you want, be sure to nest them properly. If you open a set of tags inside another set of tags, close the inside set before closing the outside set. (See the example of bold and italic in the text formatting table below.)
- Some HTML codes use only one tag, such as <hr> to insert a horizontal rule, or <br> to move to a new line.
HTML Samples
You can achieve a lot of effects with very simple HTML by copying and modifying the samples below.
Text Formatting
Effect | Sample |
---|---|
Bold (or "strong") text | <strong>Your text here</strong> |
Italics (or "emphasis") | <em>Your text here</em> |
Both bold and italic
|
<strong><em>Your text here</em></strong> |
Change text colour
|
<font color="red">Your text here</font> |
Change text size
|
<font size="+2">Your text here</font> |
Change both text colour and size | <font size="+1" color="blue">Your text</font> |
Start a new paragraph
|
<p> |
Start a new line
|
<br> |
Horizontal rule
|
<hr> <hr width="50%"> |
Images
YQuiz Writer provides an area where you can enter a web address for an image, and it will be displayed in your finished quiz. How to find the web address of an image.
Use these examples if you need additional images for your question. Try using images as the "matches" in a matching answer question!
Image Effect | Sample |
---|---|
Display an image
|
<img src="http://www.yorku.ca/cst/images/staff_nen.jpg"> |
Links to Web Sites
YQuiz Writer provides an area where you can enter a web page address, and it will be displayed as a link in your finished quiz. Use these examples if you need additional links for your question.
Link Effect | Sample |
---|---|
Link some text to a web page
|
<a href="http://www.yorku.ca">York Web Site</a> |
Open the link in a new window
|
<a href="http://www.yorku.ca" target="_blank">Your text</a> |