CHAPTER 8: Enhancing a Website Session 1. Objectives Embed a YouTube video in your website Insert a slideshow in your website Use Google fonts in your.

Slides:

Advertisements

Similar presentations

PART IV - EMBED VIDEO, AUDIO, AND DOCUMENTS. Find a video on Youtube.com: Search for a video, then look for the Embed code. Copy this code into the HTML/JavaScript.

Advertisements

HTML Basics Customizing your site using the basics of HTML.

Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.

Embedding Multimedia Bronze Level – Optional. Contents Embedding from YouTube Uploading to the Media Server Embedding from the Media Server Copyright.

INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2013 UMSL Introduction to Web Page Design.

Principles of Web Design 5 th Edition Chapter Nine Site Navigation.

1 Lesson 5 Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

 Share assignments and files  Student and parent home access  Announcements  Classroom information.

Chapter 7 Using Advanced Cascading Style Sheets HTML5 & CSS 7 th Edition.

Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.

INSTRUCTIONAL SUPPORT SERVICES (ISS) SHORT COURSE, FALL 2012 UMSL Introduction to Web Page Design.

Embedding Videos. Adding Videos to Our Website: Videos can make our pages more interesting and engaging. Most video-hosting websites, such as YouTube,

PowerPoint Exercise: Download this exercise to your computer, then complete the numbered tasks. Fulbright Computer Skills Summer 2012.

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

WEBSITE DESIGN COURSE SESSION 1. WORDPRESS WORDPRESS.COM ONLINE FREE SOFTWARE FREE HOSTING BUT WITH A TAG IN IT VERY SIMPLE TO MAKE WORDPRESS.ORG OFFLINE.

A guide for UICET for using Wikispaces.  A wiki is a web page or collection of web pages that can be linked together as a website.  Wikis are often.

Enhancing and Customizing a Presentation

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Creating your Webpage with tables. This is a 2 column by 1 row table!

 In My.Wartburg you can add…  YouTube Videos  Films on Demand (Vogel Lib.)  Internet Pages With a Video  Anything with a URL (

Web Technologies Website Development Trade & Industrial Education

Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: –The head content –The body Creating Head Content and Setting Page Properties.

INTRODUCTION TO HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.

Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.

DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.

Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.

Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.

HTML CSS JAVASCRIPT. HTML - Stands for Hyper Text Markup Language HTML is a ‘language’ that describes web pages. This language is a collection of codes.

Chapter 2 Developing a Web Page. A web page is composed of two distinct sections: – The head content – The body Creating Head Content and Setting Page.

How To Add Flair To Your Site Maureen Enright, Elyse Kuriata, Nathan Boes, Hodge.

Add an Image. index.html about.html contact. html contact. html.

A Basic Guide to Using Wikispaces Jeff Rew TEDU 673.

Chapter 2 Web Page Design Mr. Gironda. Elements of a Web Page These are things that most web pages use.

USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.

Mrs. Knopp Library Media Specialist.  The term wiki comes from the phrase Wiki- Wiki which is the Hawaiian word for quick.  A wiki is a website that.

Using an HTML image (img) element’s onclick event to change the source (src) of an iframe to an embedded youtube video.

 How to create a quiz and teacher code. 1)First find a video on Youtube or other video hosting website and copy the embed code (Video embed code pictured.

August 31, 2015 Ms. Fiorante CC Enrichment. * STEP #1 GO TO * YOU WILL NEED A GMAIL ACCOUNT TO SIGN UP.

Things we’ve covered so far  Basic HTML  Some advanced tags i.e.  Styling using CSS  Background-color  Text  Changing the font on your site  Inserting.

Web Foundations WEDNESDAY, NOVEMBER 20, 2013 LECTURE 32: DREAMWEAVER SLIDE SHOW AND GOOGLE MAP.

Digital Data Displays Google Presentations/ Analyzing and Predicting Data iLearn Elementary Math Session 6 of 8.

USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.

A New Page to Add-On Your Multimedia Page. Creating a New Page Open up a new Windows Notepad Click File > Save As > My Computer > “your flash drive” Name.

Paper 3 Unit 15 – Web Authoring Software Choices Graphics Exporting Graphics Creating CSS RGB Colour CSS – Body, Table and TD Border Collapse Tables -

How to create blogs In. Register Click on If you have a Google account(i.e. Gmail), then sign in with your username.

Images. Intro What is it? Getting your image Inserting Moving Resizing Cropping.

Spiderman ©Marvel Comics Creating Web Pages (part 1)

Positioning Objects with CSS and Tables

Your HTML website creating your first html file. Creating an HTML FIle Open note pad from accessories, programs. Write code. Save and view. In 3 Steps.

Html By: Andrew, Aaron & Carlos. How to make a website Making a website requires making a page that is an index of all contained webpages This means linking.

Creating Web Pages with Links, Images, and Embedded Style Sheets

Embedding Videos and Slideshows. (Click on any question you have to go directly to the answer, while in presentation mode)

Revision Webpage design HTML.   FACE  Attributes  Marquee  Define the following terms.

Advanced Elements & Advanced HTML Codes AGCJ 407.

Weebly is Your Friend. * To Enhance And Promote Your Curriculum * To Provide A Student Resource * Add Efficiency to Your Planning * Informational * Promote.

Unit 15 – Web Authoring Web Authoring Project.

Unit 15 – Web Authoring Web Authoring Project.

Simple steps of using Google Earth to prepare Field Study report Objectives This simple guide uses Google Earth, the free version for students to organize.

Positioning Objects with CSS and Tables

ClubRunner Tutorial Home Page Stories.

Simple steps of using Google Earth to prepare Field Study report

Web Page Design ICT Ms. McGrew.

مسابقة المدرسين المجددين

Basic HTML and Embed Codes

Course: Design & Technology

ClubRunner Tutorial Home Page Stories.

Embedding Videos.

Positioning Objects with CSS and Tables

How to add a photo gallery in html/css

Presentation transcript:

CHAPTER 8: Enhancing a Website Session 1

Objectives Embed a YouTube video in your website Insert a slideshow in your website Use Google fonts in your website

Embed a YouTube Video

1. Go to YouTube and select the video of your choice 2. Share button -> Embed 3. Copy the code and place it where you would like the video to appear in your HTML code. 4. Customize the settings: width and height

Practice: Embed a YouTube Video 1. Embed a relevant YouTube video of your choice in your HTML/CSS project website. 2. Customize the settings to make it fit.

Use Google Fonts Which font can I use on my website? “Common” fonts Web fonts Google Fonts

Use Google Fonts Go to Select a font Click on the Quick Use icon corresponding to the selected font 1. Choose the style you want 2. Choose the character set you want 3. Add the link tag to your HTML page 4. Use the font with the font-family property in your CSS

Practice: Use Google Fonts 1. Select the Pacifico Google font 2. Use the Pacifico Google font for all your headings: h1, h2, etc. of your HTML/CSS project website.

Insert a Slideshow Examples of slideshows in websites.

Insert a Slideshow Free Javascript code for slideshow : Tip: Prior to insert the slideshow, you should resize your images so all have the same width and height.

Practice: Insert a Slideshow 1. Find four images related to your HTML/CSS project website. 2. Resize your images in Fireworks so they all have the same width and height. 3. Select the Presentational Slideshow code from Insert the Presentational Slideshow on one of your HTML/CSS project website 5. Customize the code to display your four images on the slideshow.