| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Amy Azaria

Page history last edited by aazaria 8 years, 10 months ago

Entry #7: Multiple-Choice Quiz + Results

This simple HTML code will allow you to create a multiple-choice quiz with the results sent to your email.

 

<body bgcolor=#ffffff> 

<h3>Vocabulary Quiz I</h3>

 

<form method="post" action="mailto:email@emailhost.com?subject=Vocabulary Quiz 1" enctype="text/plain">

 

Check the answer to each multiple-choice question, and click on the "Send Form" button to submit the information.

 

<p>1. The word which means "house" is:<br>

<input type="radio" name="1.The word which means house is" value="maison">maison<br>

<input type="radio" name="1.The word which means house is" value="quatre">quatre<br>

<input type="radio" name="1.The word which means house is" value="soleil">soleil<br>

<input type="radio" name="1.The word which means house is" value="poisson">poisson<br>

</p>

 

<p>2. The word which means "fish" is:<br>

<input type="radio" name="2. The word which means fish is" value="maison">maison<br>

<input type="radio" name="2. The word which means fish is" value="valise">valise<br>

<input type="radio" name="2. The word which means fish is" value="soleil">soleil<br>

<input type="radio" name="2. The word which means fish is" value="poisson">poisson<br>

</p>

 

<P>3. The word which means "suitcase" is:<br>

<input type="radio" name="3. The word which means suitcase is" value="renard">renard<br>

<input type="radio" name="3. The word which means suitcase is" value="valise">valise<br>

<input type="radio" name="3. The word which means suitcase is" value="soleil">soleil<br>

<input type="radio" name="3. The word which means suitcase is" value="poisson">poisson<br>

</p>

 

<br> 

 

<input type="submit" value="Send Form">

<input type="reset" value="Clear Form">

</form>

 

This code should be placed in the <body> section of the code.  Input your email where it says "action=".  This code will send the results of the quiz to your email.  All of the aqua text can be changed to format your needs.This HTML code is all formattable through CSS, the formatting would be put on the <p> tag.

 

This code will look like this.

 

More information can be found here.

 

Entry #6: Carousel on Bootstrap

Bootstrap is a website that allows coders to use some prewritten code on their website.  An important element of an attractive page is a slideshow, however, it can be fairly complicated to code.  In order to use the following code, there must be a link to the CSS in the head section.  The link will look like this, provided the file is in the CSS folder of the root folder.

 

 <!--carousel/slideshow css-->

link href="/css/carousel.css" rel="stylesheet"

 

This CSS can be found here.

 

The following is the code for the slideshow itself (images and text).

 

<!--slideshow-->

    <div id="myCarousel" class="slide carousel" data-ride="carousel">

      <!-- Indicators -->

      <ol class="carousel-indicators">

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

      </ol>

      <div class="carousel-inner" role="listbox">

        <div class="active item">

          <img class="first-slide" src="images/slide1.jpg" alt="First slide">

          <div class="container">

            <div class="carousel-caption">

              <h1>Slide 1.</h1>

              <p>This is text that will show up on top of your image.  You can delete or edit it to your liking.</p>

            </div>

          </div>

        </div>

        <div class="item">

          <div class="container">

            <div class="carousel-caption">

              <h1>Slide 2.</h1>

              <p>This is text that will show up on top of your image.  You can delete or edit it to your liking.</p>

            </div>

          </div>

        </div>

        <div class="item">

          <img class="third-slide" src="images/slide3.jpg" alt="Third slide">

          <div class="container">

            <div class="carousel-caption">

              <h1>Slide 3.</h1>

              <p>This is text that will show up on top of your image.  You can delete or edit it to your liking.</p>

            </div>

          </div>

        </div>

      </div>

      <a class="carousel-control left" href="#myCarousel" role="button" data-slide="prev">

        <span class="glyphicon-chevron-left glyphicon" aria-hidden="true"></span>

        <span class="sr-only">Previous</span>

      </a>

      <a class="carousel-control right" href="#myCarousel" role="button" data-slide="next">

        <span class="glyphicon-chevron-right glyphicon" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

      </a>

    </div><!-- /.carousel -->

 

This code will end up looking like this.  

 

 

NOTE: The text portion of the code was changed from above to show where that variable is in the code.

 

More information can be found here.

 

Entry #5: Favicon

Favicon's allow users to see a small graphic next to the tab title.  This is a basic, but very important part of a website.  The following code will go in the <head> section.

 

NOTE: The following code is based on the image you want being named "favicon.jpg" and being in the "images" folder, inside your root folder.  Also, it is good practice to use an image that is 16 x 16 or 32 x 32 pixels for the favicon.

 

<LINK REL="SHORTCUT ICON" href="/images/favicon.jpg">

 

This code will appear like this in a browser.

 

 

More information can be found here.

 

Entry #4: Mouse Over Image Change

This code will allow users to mouse over an image and have another one appear.  For example, you could have a picture saying 'GO', but upon mouseover, it would switch to 'STOP'.  The following code should be put into the section of the code where you would like the picture to appear, i.e. the body section.

 

<A href="/index.html" 
OnMouseOver="document.face.src='stop.gif';"
OnMouseOut="document.face.src='go.gif';">
<IMG SRC="go.gif" NAME="face" ALT="Click here">
</A>

 

In order to make this code work for you, you would need to replace the file names (stop.gif, etc.) with the files you want to use.

 

The file below shows an example of this code in action.

go:stop.mov

 

You can find out more here.

 

Entry #3: Dynamic Calendar (JS)

This code will allow you to have a calendar that highlights the current date.  Please note that the code references an external JavaScript file that can be found here.  The code below should be put into the <head> section of your code.

 

<style type="text/css"> 

.main {

width:200px;

border:1px solid black;

} 

.month {

background-color:black;

font:bold 12px verdana;

color:white;

} 

.daysofweek {

background-color:gray;

font:bold 12px verdana;

color:white;

} 

.days {

font-size: 12px;

font-family:verdana;

color:black;

background-color: lightyellow;

padding: 2px;

} 

.days #today{

font-weight: bold;

color: red;

} 

</style> 

<script type="text/javascript" src="basiccalendar.js" 

/***********************************************

* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/

* Script featured on Dynamic Drive (http://www.dynamicdrive.com)

* This notice must stay intact for use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/ 

</script> 

 

This code will produce a calendar that looks like this:

 

 

If you would like to edit it, an explanation of the codes parameters is below:

 

4 The month you wish to display, where 1=January, and 12=December.
2003 The year you wish to display.
main Name of CSS class to style the calendar's outermost table. 
month Name of CSS class to style the calendar's month/year bar. 
daysofweek Name of CSS class to style the calendar's week days row 
days Name of CSS class to style the individual days cells. 
0 The thickness of the border between all cells. 0=no border.

 

Note: As displayed in the comments of the code, you must keep the credits in the code to avoid plagiarism.

 

More information can be found here.

 

Entry #2:  Meta Tags

Meta tags allow you to have keywords so that if someone searches something related to your website, one of the hits will be your website.  The code can be seen below:

 

The description type of meta tag allows the coder to provide a description whereas keywords give search engine spiders something to rely on for results other than the first 20 words of your site.  As you can see in the next photo, keywords are allowing users to come up with this site as the first hit because the keywords strongly overlap with the search entry.

 

 

NOTE:  This code must go in between <head> and </head>.

 

More information can be found here.

 

Entry #1:  Embedding a Twitter Feed Into Your Website

There are two ways of embedding a Twitter feed into a website.  One way is to use this template:

 

<a class="twitter-timeline"

  href="https://twitter.com/twitterdev"  

  data-widget-id="YOUR-WIDGET-ID-HERE">

Tweets by @twitterdev

</a>

<script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.

com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));</script>

 

NOTE:  The part of this code that says @twitterdev should be replaced with your Twitter handle, and the link should be accurate to your Twitter.

 

The part of this program that says YOUR-WIDGET-ID-HERE will be replaced by the widget ID provided by Twitter.  In order to create one, go to 'Settings', 'Widgets', and 'Create New'.  Now, you will click 'Create Widget'.  Copy and paste the widget ID into this code after the equals (=) sign.

 

The other option for embedding a Twitter feed into a website is to go into the settings of your Twitter account, enter 'Widgets', and create a new widget.  After clicking 'Save Changes', the code for your widget will be at the bottom.  This can be copied and pasted into your HTML code.

 

You can find out more here.

Comments (5)

Lori said

at 11:58 am on Feb 24, 2015

4/4. Good job for your first post. Great topic, very useful. I suggest adding a photo showing us what the embed item will look like on a site.

Lori said

at 8:07 am on Mar 17, 2015

Entry #2: 4/4. Great job! All required elements are provided and this is a very useful and needed element for your Website.

Lori said

at 8:22 am on Mar 31, 2015

Entry #3: 4/4. Very neat and useful post. Your directions are very clear and easy to follow to apply this calendar.

Lori said

at 8:46 am on Apr 9, 2015

Entry #4: 4/4. This is a very useful post but I would also like to see you incorporate CSS for a more modern roll over approach that doesn't use images but rather than code. Also, one of the links in the post is not working.

Lori said

at 7:53 am on May 20, 2015

Entry #5: 4/4
Entry #6: 4/4

Both entries are wonderful- very useful and provide all the required elements. Really like the bootstrap post.

You don't have permission to comment on this page.