Embedding code

Social media and other sites often encourage their content to be included in outside websites. Meanwhile, third-party software, often required for these applications, needs to be coded. This requires embedding code. We will consider YouTube, Google Maps and Twitter today. But, first, we need to understand the code.

<object></object>
An element used for incorporating video, multimedia or Flash files.

<embed></embed>
An older element for displaying video, multimedia or Flash.

<iframe src="pageurl.html"></iframe>
An element that allows another page to be shown within the existing document. This tag allows specific dimensions and shows a window of the referred to URL. This format is commonly used for newspaper advertisements.

<script></script>
This tag allows Javascript to be included within an HTML page.

These are employed in various fashion in embedded HTML. Some examples include the following.

YouTube, etc.

Most video hosting sites have convenient links to embedded code. For YouTube, the "Share" button leads to the "Embed"

Google maps

Like YouTube, Google Maps provides easy methods to both create and link to maps. If you enter an address into the Google search bar, a link to the map will be displayed, which takes you to a map of the location. In the below example, I entered "Tehama Hall Chico Ca" for displayed map.


View Larger Map

Twitter feed

Microblogging is another tool used for communicating directly with your audience without traditional intermediaries. But your audiences may not be familiar with Twitter or want to visit another site to view your tweets. Twitter accounts for this by providing Javascript to embed within your HTML, which permits a widget to appear within your design.

It's as simple as entering the username of the individual you want to feature--most likely yourself or your organization--and dropping the resulting Javascript into the body of your HTML.

jour 355

weekly schedule

  1. Internet & Web / HTML
    Readings: Get books
  2. Bits & bytes / HTML / Embedding / Code
    Readings: Briggs ch. 1
  3. Images / Exercise 2
    Readings: Briggs ch. 2
  4. Exam 1 / CSS Intro / Colors
    Readings: Briggs ch. 3
  5. Divisions / Web typography / Photoshop text
    Readings: Briggs ch. 4
  6. CSS ID / Project one guide
    Readings: Briggs ch. 5
  7. Exam 2 / Uploading / Backgrounds
    Readings: Briggs ch. 6
  8. Project one due / Evaluation guide
    Readings: Briggs ch. 7
  9. Spring Break
  10. Search / Project eval / Online advertising
    Readings: Briggs ch. 8
  11. Standards / Audio / Backgrounds
    Readings: Briggs ch. 9
  12. Exam 3
    Readings: Briggs ch. 10
  13. CSS3 / Usability / Lightbox
    Readings: Briggs ch. 11
  14. Project editing
    Readings: TBD
  15. Material review / Exam 4
  16. Final project
  17. Final project due

Matthew Blake    Department of Journalism    CSU-Chico    
mdblake@csuchico.edu    (530) 898-3608