HTML Revision Notes

Example 1:

Attaching a stylesheet SAMPLE.CSS to the web page:

Place the following code inside the head tags.

<LINK REL="stylesheet" href="sample.css"  type="text/css">

Example 2:

Create a hyperlink from text CIE Exams to the webpage CAMBRIDGE.HTML, which will open in a new window called _circular

<a href="CAMBRIDGE.HTM" target="_circular" > CIE Exams </a>

Values of the target attribute

_blankOpens the linked document in a new window or tab.
_selfOpens the linked document in the same frame as it was clicked (this is the default)
_parentOpens the linked document in the parent frame
_topOpens the linked document in the full body of the window
_framenameOpens the linked document in a named frame.

Example 3:

Insert the image blackcat.jpg and resize it to 200 pixels wide and 100 pixels high.

<IMG src="blackcap.jpg" width=200 height="100px">

Example 4:

Insert the image blackcat.jpg and resize it to 200 pixels wide, maintaining the aspect ratio.

<IMG src="blackcat.jpg" width="200px">

Example 5:

Again, make the above image a hyperlink that points to the website http://www.wildcats.com, which opens in a new window called _cats

<a href="http://www.wildcats.com" target="_cats"> <IMG src="blackcat.jpg"> </a>

Example 6:

Make the text mail me a hyperlink to send an email to the address android@alphabet.com with the subject line Application developer.

<a href="mailto:android@alphabet.com?subject=Application%20Developer">mail me</a>

Example 7:

Create an anchor called start. This must be invisible in the browser.

<a id="start">

Example 8:

Make the text Go to start a hyperlink that will point to the anchor created in the above example:

<a href="#start"> Go to start </a>

Inserting Video in the web page

Insert the video horserace.mp4. Set the width of the video 400 pixels and height to 300 pixels.

<video width="400" height="300">
   <source src="horserace.mp4 type=video/mp4>
</video>

Insert video: Specifying the video controls should be displayed (play/pause buttons, etc) CONTROLS

<video width="400" height="300" controls>
   <source src="horserace.mp4 type=video/mp4>
</video>

Insert video: Specifying the video should play automatically. AUTOPLAY

<video width="400" height="300" controls autoplay loop>
   <source src="horserace.mp4 type=video/mp4>
</video>

Insert video: Specifying the video should start over again every time it is finished. LOOP

<video width="400" height="300" controls autoplay loop>
   <source src="horserace.mp4 type=video/mp4>
</video>

Display an error message if the video doesn’t play.

<video width="400" height="300" controls autoplay loop>
   <source src="horserace.mp4 type=video/mp4>
   Your browser doesn't support this video format
</video>