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. Dropdown navigation (MAC)to suit Preliminary Task
  15. Dropdown navigation (Windows)to suit Preliminary Task
  16. Tables
  17. Text
  18. 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 thesection that you wish video to appear.

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”>

Dropdown menu (MAC) to suit Preliminary Task. Copy and paste into each page.

<!DOCTYPE html>
<html>
<head>

———————————————————— Place this section between the <head > tags
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>

————————————————————
</head>
<body>

————————————————————  place the below code immediately after the first <body> tag

<h1>Developing Information Systems/Planning Design & Implementation
2018.
</h1>

 

<div class=”dropdown”>
<button class=”dropbtn”>Home</button>
<div class=”dropdown-content”>
<a href=”index.htm”>Index</a>

</div>
</div>
<div class=”dropdown”>
<button class=”dropbtn”>Traditional stages</button>
<div class=”dropdown-content”>
<a href=”page1.htm”>Understanding the problem</a>
<a href=”page2.htm”>Planning</a>
<a href=”page3.htm”>Designing</a>
<a href=”page4.htm”>Implementing</a>
<a href=”page5.htm”>Testing, evaluating and maintaining</a>
</div>
</div>
<div class=”dropdown”>
<button class=”dropbtn”>Complexity of systems</button>
<div class=”dropdown-content”>
<a href=”page6.htm”>Systems for individuals</a>
<a href=”page7.htm”>Systems for organisations</a>
<a href=”page8.htm”>Systems developed by individuals</a>
<a href=”page9.htm”>Systems developed by teams</a>
</div>
</div>
<div class=”dropdown”>
<button class=”dropbtn”>Roles of people</button>
<div class=”dropdown-content”>
<a href=”page10.htm”>Roles played by individuals</a>
<a href=”page11.htm”>Strengths and weaknesses of individual </a>

</div>
</div>
<div class=”dropdown”>
<button class=”dropbtn”>Social and Ethical issues</button>
<div class=”dropdown-content”>
<a href=”page12.htm”>Machine-centred systems </a>
<a href=”page13.htm”>Human-centred systems </a>
<a href=”page14.htm”>Relationships between participants </a>
<a href=”page15.htm”>Safe work environment </a>
<a href=”page16.htm”>Impact on the participants </a>
</div>
</div>

————————————————————

</body>
</html>

Dropdown menu (Windows) to suit Preliminary Task. Copy and paste into each page.

Place this code into the <head>
<style type=”text/css”>
  ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style>
Place this code into the <body> immediately after the body tag.
<br>
    <h2>Developing Information Systems/Planning Design &amp; Implementation 2018.</h2><br>
     <ul id=”drop-nav”>
<li><a href=”index.htm”>Home</a></li>
    <ul>
      <li><a href=”page1.htm”>Stages</a>
     <ul>
      <li><a href=”page2.htm”>Understanding the problem</a></li>
      <li><a href=”page3.htm”>Planning</a></li>
      <li><a href=”page4.htm”>Designing</a></li>
      <li><a href=”page5.htm”>Implementing</a></li>
       <li><a href=”page21.htm”>Testing, evaluating and maintaining</a></li>
    </ul></li>
      <li><a href=”page6.htm”>Complexity</a>
     <ul>
      <li><a href=”page7.htm”>Systems for individuals</a></li>
      <li><a href=”page8.htm”>Systems for organisations</a></li>
      <li><a href=”page9.htm”>Systems developed by individuals</a></li>
      <li><a href=”page10.htm”>Systems developed by teams</a></li>
    </ul></li>
      <li><a href=”page11.htm”>Roles</a>
     <ul>
      <li><a href=”page12.htm”>Roles played by individuals</a></li>
      <li><a href=”page13.htm”>Strengths and weaknesses of individual </a></li>
      <li><a href=”page14.htm”>xxxxx</a></li>
      <li><a href=”page15.htm”>xxxxx</a></li>
    </ul></li>
    </ul>
 <li><a href=”page16.htm”>Social &amp; Ethical</a>
     <ul>
      <li><a href=”page17.htm”>Machine-centred systems </a></li>
      <li><a href=”page18.htm”>Human-centred systems </a></li>
      <li><a href=”page19.htm”>Relationships between participants</a></li>
      <li><a href=”page20.htm”>Safe work environment </a></li>
      <li><a href=”page20.htm”>Impact on the participants</a></li>
    </ul></li>
    </ul>

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


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

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 that contains objects side by side or with captions

<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