HTML assignment help

     table of content
  1. How to use this page
  2. Advanced
  3. Audio & Video
  4. Copyright free items
  5. Editing HTML with Notepad
  6. Editing HTML with Developer
  7. Essential tags
  8. Embed a YouTube
  9. Images
  10. Java
  11. Links to HTML sites
  12. Lists
  13. Navigation
  14. Tables
  15. Text
  16. Home

 

How to use this page

This page has links to sites that can be used to find html code and java that you are able to use. The tags provided on this page will provide you with the core requirements of the course work that is being completed.

Editing with Notepad

Links to HTML sites

  1. Colour codes
  2. Simple Java Scripts
  3. HTML tags
  4. Dynamic Drive Java scripts
  5. Flash menu buttons

Essential html tags

sample site that provides a movie review similar to your task

Useful HTML TAGS

Basic tags that are required for every html file
<html><head>

<title></title>

</head>

Do not put anything here.

<body>

All content to be displayed on your webpage goes between the two body tags.
</body>

Do not put anything here.

</html>

Text

Font colours

<font color=”red”>This is some red text now</font>

Font Typeface

<font face=”Arial”>Your text here.</font>

Text headings tags

<h1>..</h1> is the largest while the smallest is <h6>..</h6>

Normal text to bold text using tag

<B>…</b>

Center text or objects using tag

<center>…</center>

Use a tag to make a break in text

<p> one line space

<br> a larger line space

Change font size tags

<font size=1>…….</font> very small font size

<font size=5>…….</font> larger font size

<font size=6>…….</font> normal font size

Change font colour tag

<body text=white> makes all the text on a page white, so have a dark background.

<font color=red> displays the text, that this tag has been added to, as red</font>

Increase size of Font

<p style=”font-size:120px”>This will display font very large sized font .</p>

Add space between objects

&nbsp; is the non-breaking space. You may need many to make a space. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 


Images

Add an image

Dependant upon your browser you may or may not need to add Inverted commas around the file name.

The image needs to be placed in the same folder as the html files or in a folder called images that is in the same folder as the html files. Also the file name and type needs to be exact. Jpg, jpeg, JPG or JPEG are different.

<img src=file> for an image in the folder remember to include the file type which will usually be a jpg

<img src=”http//www.domainname.com/picture.jpg”> will add an image from a website.

 

Image as a background

<body background=”darkrainbow.jpg”> if image is called darkrainbow and is a jpg

Change size of image

<img src=”file” width=100 height=250>

Create a link from a page using a tag

Using text

<a href=page.htm>text required</a>

<a href=http//www.domainname.com/>text required</a>

Using an image

<a href=page.htm><img src=file></a>

<a href=http//www.domainname.com/><img src=file></a>

 


Embed a YouTube

Step 1. Select the YouTube that you require
Step 2. Select the Share option at the bottom of the YouTube
Step 3. Select Embed
Step 4. Copy the Embed code
Step 5. Paste code in the section that you wish video to appear.


Tables


Tables are useful for locating text and images side by side

<table>
<tbody>
<tr>
<th><img class=”” src=”https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6009/6009787_sd.jpg;maxHeight=640;maxWidth=550″ width=”82″ height=”165″ /></th>
<th><td align=”right”>TEXT TEXT TEXTTEXT TEXTTEXT TEXTTEXT TEXTTEXT XT TEXTTEXT TEXTTEXT TEXTTEXT TEXTTEXT TEXTTEXT</td></th>
</tr>
</tbody>
</table>

Place an image next to a column of text

TEXT TEXT TEXTTEXT TEXTTEXT TEXTTEXT TEXTTEXT XT TEXTTEXT TEXTTEXT TEXTTEXT TEXTTEXT TEXTTEXT


Navigation

Create a navigation bar using a table tag

Use text as links of navigation (horizontal)

<table>

<tr>

<td><a href=index.htm>index</a> </td>

<td><a href=page1.htm>page 1 </a></td>   You are able to rename the pages to display the content of the pages.

<td><a href=page2.htm>page 2 </a></td>

<td><a href=page3.htm>page 3 </a></td>

<td><a href=page4.htm>page 4 </a></td>

<td><a href=page5.htm>page 5 </a></td>

</tr>

</table>

Use text as links of navigation (vertical)

<table style=”width:20%”>
<tbody><tr>
<th>Navigation</th>
</tr>
<tr><td><a href=”index.htm”>index</a></td></tr>
<tr><td><a href=”page1.htm”>Page 1</a></td></tr>
<tr><td><a href=”page2.htm”>Page 2</a></td></tr>
<tr><td><a href=”page3.htm”>Page 3</a></td></tr>
<tr><td><a href=”page4.htm”>Page 4</a></td></tr>
<tr><td><a href=”page5.htm”>Page 5</a></td></tr>
<tr><td><a href=”page6.htm”>Page 6</a></td></tr>
</tbody></table>

 

Use images as links of navigation

Dependant upon your browser you may or may not need to add Inverted commas around the file name.

<table>

<tr>

<td><a href=index.htm><img src=”index.jpg”></a> </td>

<td><a href=page1.htm><img src=actors.jpg></a></td>

<td><a href=page2.htm><img src=audio.jpg></a></td>

<td><a href=page3.htm><img src=reviews.jpg></a></td>

<td><a href=page4.htm><img src=filmclips.jpg></a></td>

<td><a href=page5.htm><img src=gossip.jpg></a></td>

</tr>

</table>

Use text as links of navigation (vertical)

<table>

<tr>

<td><a href=index.htm><img src=index.jpg></a> </td>

<td><a href=page1.htm><img src=actors.jpg></a></td>   use images to display the content of the pages. if the image is in the “images” folder add audio/

<td><a href=page2.htm><img src=audio.jpg></a></td>

<td><a href=page3.htm><img src=reviews.jpg></a></td>

<td><a href=page4.htm><img src=filmclips.jpg></a></td>

<td><a href=page5.htm><img src=gossip.jpg></a></td>

</tr>

</table>

Link colours may be changed by place these tags in the body

Visited link tag <body vlink=”red”>

Active link tag <body alink=”yellow”>

Lists

Nested Lists

<ul>
<li>blue</li>
<li>red
<ul>
<li>Light red</li>
<li>deep red</li>
</ul>
</li>
<li>white</li>
</ul>

Ordered Lists

<ol>
<li>one</li>
<li>Two</li>
<li>three</li>
</ol>

Unordered Lists

<ul style=”list-style-type:disc”>
<li>two</li>
<li>four</li>
<li>one</li>
</ul>

<ul style=”list-style-type:circle”>
<li>big</li>
<li>small</li>
<li>medium</li>
</ul>

Audio & Video

Adding audio to your website

Create a link to a sound

if sound is in the folder “audio” <a href=”audio/dingdong.avi”>Door chime</a>

Embed a sound

if sound is in the folder “audio”<embed src=audio/myvoice.avi> My opinion of the movie</a>

Adding controls to your audio

if sound is in the folder “audio” <embed src=audio/myvoice.avi width=170 height=25 Autostart=false loop=true> My opinion of the movie</a>

Use this code and Add audio to your website

<audio src=audioname.mp3 controls>
<embed
src=audioname.mp3
width=180
height=90
loop=false
autostart=false />
</audio>

Use this code and Add video to your website

<video width=”320″ height=”240″ autoplay>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>

Use this code to embed a Youtube video to your website

<iframe width=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k”>
</iframe>

Use this code to autoplay the Youtube.

<iframe width=”420″ height=”315″
src=”https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1″>
</iframe>

Embed a Youtube video

Add a YouTube video by locating the video you require, select “share” button under the video.  Then select “Embed” Then copy the code and paste in the html file where you wish it to display.

 

Tables

This table will place two images above a row of two images. add <td><img src=”actor?.jpg”> between the <TR> </tr> tag to add a new column</td>

<table border=”1″>
<tr>
<td><img src=actor1.jpg></td>
<td><img src=actor2.jpg></td>
</tr>
<tr>
<td><img src=actor3.jpg></td>
<td><img src=actor4.jpg></td>
</tr>
</table>

text or images may be placed within the tags

<table style=“width:100%”>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>


ADVANCED ITEMS

 

 

Add opaque area (change as required. images, height, width; change opacity specs)

<table style=”background-color: black; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;” height=”” width=”” border=”” align=”center” cellspacing=”” cellpadding=”0″>
<tr>
<td width=”” height=”” rowspan=””>text
<img src=”” width=”” height=”” border=”” />
</td>
<td width=””>
<img src=”” width=”” height=”” border=”” />
</td>
</tr>
<tr>
<td><img src=”” alt=”” width=”” height=”” border=”” /></td>
</tr>
<tr>
<td height=”” colspan=””>
<img src=”” alt=”” width=”” height=”” border=”” />
</td>
</tr>
</table>

14. Floating Image

<p>
<img src=“http://www.elearningatschool.com/images/sushilogo.jpg” alt=“Sushi”style=“float:right;width:42px;height:42px;”>
The image will float to the right of the text.
</p>

<p>
<img src=“http://www.elearningatschool.com/images/sushilogo.jpg” alt=“Sushi”style=“float:left;width:42px;height:42px;”>
The image will float to the left of the text.
</p>


Copyright Free items

Copyright Free items can be found here

HTML coding can be found here

HTML Home HTML Overview HTML Basic Tags HTML Elements
HTML Comments HTML Images HTML Tables HTML Lists
HTML Text Links HTML Image Links HTML Email Links HTML Frames
HTML Iframes HTML Iframes HTML Iframes HTML Iframes
HTML Blocks HTML Backgrounds HTML Colors HTML Fonts
HTML Forms HTML Embed Multimedia HTML Marquees HTML Header
HTML Style Sheet HTML Javascript

 

Java

http://dynamicdrive.com/

View the effect that you think is appropriate for your task, read the instructions carefully, copy the code, paste the code in the precise location as described. Download any images or js files required.

Add Find your location code (Place within the two body tags)

Geolocation code

<p>Click the button to get your coordinates.</p>

<button onclick=”getLocation()”>Try It</button>

<p id=”demo”></p>

<script>
var x = document.getElementById(“demo”);

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = “Geolocation is not supported by this browser.”;
}
}

function showPosition(position) {
x.innerHTML = “Latitude: ” + position.coords.latitude +
“<br>Longitude: ” + position.coords.longitude;
}
</script>

Edit HTML using Google Chrome Developer Tool

Leave a Reply