Beyond simply embedding a YouTube video clip into a blog posting or web page of your choosing, did you know that you can actually specify where a particular video clip should begin playing? In episode 224 of Tekzilla Daily, Veronica Belmont explains the steps to specify the beginning point for either an embedded YouTube video or one that is linked to.
For the Web-based Learning Technology Repository (WBLTR), at the end of Module 4 and Module 8 you’ll be your compressing (aka: zipping) the site you are developing and submitting for grading via the dropbox in D2L. Both the Mac and Windows operating systems have the built-in capability to create compressed .zip files for submitting. Below I’ve provided short video tutorials illustrating the process for both Mac or Windows.
Due to the Thanksgiving holiday, our synchronous class session on Wed, 11/25 is canceled. Have a wonderful Thanksgiving! ~ Dr. J
Those of you who are adding photos, images, or embedded media to your modules may be looking for ways to align your images in different ways. In my sample site at edtechsandbox.com/~hre472/summer2009/samplesite I’ve included a few image placeholders and embedded video and positioned them without using tables with some simple HTML code!
To align a photo to the right of text, in the HTML code, simply add this code in front of the image code:
<p style=”float: right; margin-bottom: 10px; margin-left: 10px;” align=”right”>
Then, just make sure to also add a </p> after the image code.
For example, here’s the code for a right-aligned image that I have on my front page of my module:
<p style=”float: right; margin-bottom: 10px; margin-left: 10px;” align=”right”><img style=”width: 300px; height: 300px;” alt=”Placeholder IMAGE” src=”images/image300×300.gif”></p>
To have the image aligned on the left and text to the right, simply change the “float: right” to “float: left” as this will then cause the image to float on the left side with text to the right. You can add margin-top and margin-right values to add more white space and/or adjust the px values to reflect more or less white space.
I can explain this in more detail in a future synchronous session but wanted to share the code in advance for anyone wishing to give this a try!
~ Dr. J
HTML tags comprise the backbone of any web-based content, providing the stylistic and functional information that a web browser needs to display the page. While web editors like KompoZer and Dreamweaver as well as the built-in text editor in Edublogs (WordPress) feature a WYSIWYG (What You See is What You Get) editor, it is possible to do a great deal of HTML content creation or adjustment to existing HTML by knowing just a few simple HTML tags.
Below is a table of basic HTML tags. Remember that tags are generally always used in pairs, with the closing tag identical to the opening tag with the exception of including a forward slash to begin the closing tag. For the examples provided below, the opening tag is shown in ALL CAPS with the closing tag in lowercase. Tags are not case sensitive, but typically only lowercase tags are used.
| Tag: | Description: |
| <HTML></html> | Tags used at the beginning and end of every document |
| <HEAD><TITLE>docname.html</title></head> | Start and ends document information: title of page. Does not show in browser. |
| <BODY></body> | Starts and ends body of document. Documents have ONE body tag; all background and link color info. goes in this one tag. <BODY bgcolor=”#ffffff”> for a solid white background <BODY background=”beige.gif”> uses an image file for a background. As with any image reference, the image must be in the same directory as the HTML file. |
| <LINK=”#xxxxxx”> <ALINK=”#xxxxxx”> <VLINK=”#xxxxxx”> |
Link color can be changed by placing these tags within the <BODY> tag, along with any background information. |
| <H1>Title of Document</h1> | Enlarges text and places space around it. Varies in size from H1 to H6, with each getting progressively smaller. |
| <A HREF=”http://…”>text</a> |
Links text to a particular web document. (external link) |
| <A HREF=”#textname”>text</a> | Works with a target or name tag to link to text within the same web page. (internal link) |
| <A NAME=”textname”>text</a> | Target or name tag used for internal (aka “anchor”) link. |
| <IMG SRC=”http://www…/pix.gif”> | Places the selected image in document. No ending tag needed. |
| <A HREF=”mailto:me@global.uillinois.edu”></a> |
Creates an email link |
| <FONT SIZE=+1>text</font> <FONT COLOR=”#ff00ff”>text</font> |
Enlarges text from +1 to +7 Changes color of font between tags. |
| <HR> | Horizontal rule: places a line across page. No need for an end tag. Images may also be inserted as horizontal rules. |
| <BR> | Line break |
| <P>paragraph text</p> | Paragraph break. Double spaces before next text. |
| <CENTER>text</center> | Centers text horizontally |
| <B>bold</b> | Makes text bold |
| <I>italic</i> | Makes text italic |
| <UL><LI></ul> | Unordered, bulleted list. The <LI> tag marks each bulleted item |
| <OL><LI></ol> | Ordered lists where list items <LI> are numbered |
| <BLOCKQUOTE>text</BLOCKQUOTE> | Indents text |
For those experienced with HTML, what are some other basic HTML tags that you’ve found to be helpful that I should consider adding to this list?
As each of your continue working on developing your Web-based Learning Technology Respository site, I thought it would be helpful to provide links to some additional resources and readings related to the principles of web design. While this is not a course on web design or in-depth study of web development, those who are interested in digging a bit deeper into the fundamentals of these areas are welcome to do so. I’ve broken the resources below into groups based on various elements of the design process.
Planning a Web Site
HTML Basics
Usability
Accessibility
Evaluating Web Sites
Misc.
Have you found other great resources related to web design or web development? Post a comment and share them here! My ever-expanding collection of web design resources is available at delicious.com/jrhode/webdesign
For an exhaustive, every-expanding directory of screen capture, screen casting and software demo tools, bookmark Jane Hart’s directory at http://c4lpt.co.uk/Directory/Tools/capture.html
BTW…a great source to subscribe to to learn about new e-learning technologies is Jane Hart’s blog at http://janeknight.typepad.com/ or follow her on Twitter @c4lpt
Here’s a free, very simple screen capture & annotation tool that I just stumbled across called Aviary Talon. Capture any webpage by adding Aviary.com/ to the beginning of the URL!
Aviary offers a variety of other web-based graphics editing features if you’re looking to do some advanced editing to your screen captures.
Here are some resources that you might want to ask for as a holiday gift:
Empower English Language Learners with Tools from the Web
Lori Langer de Ramirez
Aligned with TESOL standards, this user friendly guide shows how teachers can use Web 2.0 tools to help English language learners build language build language proficiency. Readers will find descriptions of Web tools such as blogs, podcasts, and social networking sites; classroom-ready projects for K-12; and guidelines on safe and appropriate internet use.
Teaching with Author Web Sites, K-8
Rose Cherie Reissman, Mark Gura
Author web sites can easily be integrated into any classroom as a free, accessible resource for instruction, thus inviting students into a fascinating literary community. This book examines the web sites of favorite children’s book authors, offers activities for promoting literacy and class participation, and includes suggestions for math, science, and social studies.
Empowering Students with Technology: Second Edition
Alan November
Offering more than 50 web sites, plus practical lesson ideas, new resources, and real-life examples, this second edition helps educators expand classroom experiences and strengthens students; critical thinking, research, and problem-solving skills. Examines learning in a globally connected community; opportunities for learners with special needs; information literacy; applications for digital cameras and cell phones, and more.</p
Teaching in the Digital Age: Using the Internet to Increase Student Engagement and Understanding, Second Edition
Kristen J. Nelson
The author helps teachers encourage active student involvement through internet-based activities that focus on individual learning styles and reflect current brain research. This how-to book helps teachers generate projects on information gathering and analysis, interpersonal exchange, and problem solving, and also includes lesson plans, curriculum standards, and assessment rubrics.
Blogs, Wikis, Podcasts, and Other Powerful Web Tools for Classrooms: Second Edition
Will Richardson
With updated research on web technology, a critical section on internet safety, and a new emphasis on information literacy with related links, this resource demystifies powerful internet tools for classrooms. The author provides definitions and explanations, teaching applications, and real-world examples for relevant, interactive learning.
Here’s an example of a sample screencast I recorded providing a quick introduction to one of my favorite websites, Google Reader. Notice that the media you see below is not the actual embedded video (since I recorded nearly the entire width of the screen). Rather, I took a screen capture of the video to serve as the placeholder media and then make it a link to view the screencast. This is an effective approach if the screencast you wish to embed is to wide for your blog template.
I look forward to viewing your screencast that you create for your Module 3 ELT Activity!