31
Review of last Session Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML is the language that web servers understand, all web pages are created using HTML. You can get lots of HTML code from the Internet You can get lots of HTML code from the Internet One of the most useful is a Marquee, which is a scrolling banner. One of the most useful is a Marquee, which is a scrolling banner. Go to Go to http://www.quackit.com/html/codes/html_marquee_code.cfm to get the code. to get the code. Copy the code for a scrolling Copy the code for a scrolling text marquee. text marquee. Paste the code into your HTML element Paste the code into your HTML element

Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Embed Size (px)

Citation preview

Page 1: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session Adding custom htmlAdding custom html

HTML is the language that web servers understand, all web pages are created using HTML.HTML is the language that web servers understand, all web pages are created using HTML. You can get lots of HTML code from the InternetYou can get lots of HTML code from the Internet One of the most useful is a Marquee, which is a scrolling banner.One of the most useful is a Marquee, which is a scrolling banner. Go to Go to http://www.quackit.com/html/codes/html_marquee_code.cfm to get the code. to get the code. Copy the code for a scrollingCopy the code for a scrolling

text marquee. text marquee.

Paste the code into your HTML elementPaste the code into your HTML element

Page 2: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session Adding custom html cont.Adding custom html cont.

To change the text click in the HTML box and change the text with your ownTo change the text click in the HTML box and change the text with your own

Most of the parameters can be configure, font colour, background, speed etc.Most of the parameters can be configure, font colour, background, speed etc. Look at the Look at the links page on the course website for more sites. The marquee generator allows you to look and change these page on the course website for more sites. The marquee generator allows you to look and change these

options.options. To get id of the bottom “advert” edit the text to change the “HTML lessons” to a couple of spacesTo get id of the bottom “advert” edit the text to change the “HTML lessons” to a couple of spaces

Page 3: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session Adding custom html cont.Adding custom html cont.

You can also add a video by embedding it into a HTML element.You can also add a video by embedding it into a HTML element. Go to YouTube and find a video you like (or upload your own)Go to YouTube and find a video you like (or upload your own) Click on the “share” button and the click the “embed” buttonClick on the “share” button and the click the “embed” button Below the buttons is a box with the HTML Code in it.Below the buttons is a box with the HTML Code in it.

Copy this code and paste it in a HTML elementCopy this code and paste it in a HTML element The Video is now embedded onto your web pageThe Video is now embedded onto your web page

Page 4: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session Adding a BlogAdding a Blog

Blogs are interactive web pages that are Blogs are interactive web pages that are meant to be constantly updated and allow meant to be constantly updated and allow visitors to comment on the content.visitors to comment on the content.

It is a page you update every time you want It is a page you update every time you want to tell your customers somethingto tell your customers something

It is also good to keep adding fresh material It is also good to keep adding fresh material so that search engines upload new data.so that search engines upload new data.

To add a blog, go to the pages tab and click To add a blog, go to the pages tab and click on the “Add Blog” button, then click on the on the “Add Blog” button, then click on the “edit page” button“edit page” button

Page 5: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website Starting your first Blog (Starting your first Blog (Video)) Write a Blog PostWrite a Blog Post

To create a new post for your blog, use To create a new post for your blog, use the New Post button at the top of the blog the New Post button at the top of the blog itself. itself.

Page 6: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session Your blog post has a title and a content area. Your blog post has a title and a content area. The title should generally be short - no more than The title should generally be short - no more than

a sentence long or so. a sentence long or so. The content area includes a basic paragraph The content area includes a basic paragraph

element which you can either edit or delete. element which you can either edit or delete.

Page 7: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session Adding content to a blog post works the same way Adding content to a blog post works the same way

as adding content to a regular page - just drag as adding content to a regular page - just drag elements into the post and edit them to add elements into the post and edit them to add content. content.

Page 8: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session Once you've added your content you can Once you've added your content you can

categorize the post - these categories will appear categorize the post - these categories will appear on your sidebar, making it easier for visitors to on your sidebar, making it easier for visitors to your blog to find posts that cover certain topics. your blog to find posts that cover certain topics. Categories can be whatever you like and it isn't Categories can be whatever you like and it isn't necessary to use them. necessary to use them.

Page 9: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session Now you can Publish the post to your live site Now you can Publish the post to your live site

(which will make it instantly available) or Save to (which will make it instantly available) or Save to Drafts to edit / publish it later. Drafts to edit / publish it later.

Page 10: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session If you save the post as a draft, it'll be accessible to you through If you save the post as a draft, it'll be accessible to you through

a drafts area at the top of the blog page from within the editor a drafts area at the top of the blog page from within the editor (along with any other drafts you've saved). Just click the link to (along with any other drafts you've saved). Just click the link to the post from this drafts area to edit it further and save / the post from this drafts area to edit it further and save / Publish. Publish.

Every new post you Publish will appear at the very top of the Every new post you Publish will appear at the very top of the page, pushing older posts further down the page. After you've page, pushing older posts further down the page. After you've added seven or eight posts to the page, older posts will be added seven or eight posts to the page, older posts will be moved off the main page to still accessible archive pages. moved off the main page to still accessible archive pages.

Page 11: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session The Blog SidebarThe Blog Sidebar

Your blog includes a fully customizable Your blog includes a fully customizable sidebar. This sidebar includes four sidebar. This sidebar includes four sections by default, which can be edited sections by default, which can be edited and deleted like any other element. and deleted like any other element.

But you can easily add more content by But you can easily add more content by dragging elements to the sidebar.  dragging elements to the sidebar.  There is a "Blog Sidebar" category that There is a "Blog Sidebar" category that is meant to be used only with the is meant to be used only with the sidebar, but you're welcome to use sidebar, but you're welcome to use elements from any of the categories. elements from any of the categories.

Page 12: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session Manage Blog CommentsManage Blog Comments

We turn on comments by We turn on comments by default for every blog post you default for every blog post you create, and visitors to your blog create, and visitors to your blog can comment on any posts can comment on any posts you've made unless you turned you've made unless you turned comments off under your Blog comments off under your Blog Settings. These comments Settings. These comments appear underneath each appear underneath each individual post in the order in individual post in the order in which they were added: oldest which they were added: oldest at the top, newest at the at the top, newest at the bottom. This order cannot bottom. This order cannot currently be changed. currently be changed.

Page 13: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Review of last SessionReview of last Session Manage Blog Comments - contManage Blog Comments - cont

We notify you of these comments via the email address We notify you of these comments via the email address associated with your account (you can change this to a associated with your account (you can change this to a different address for the blog under settings). The different address for the blog under settings). The comments can be read directly on your site or under comments can be read directly on your site or under the Blog Comments area for the blog in your account.the Blog Comments area for the blog in your account.

You can access this Blog Comment section? Go to the You can access this Blog Comment section? Go to the main page of your account, click the More button to main page of your account, click the More button to the right of the site and select Blog Comments. the right of the site and select Blog Comments.

Page 14: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website Adding buying buttonsAdding buying buttons

Go to the Settings tab and select E-commerce Go to the Settings tab and select E-commerce SettingsSettings

Set up your paypal or Google account settingsSet up your paypal or Google account settings Now drag one of the E-Commerce Revenue Now drag one of the E-Commerce Revenue

Elements to a page.Elements to a page. There are 4 different types, try each one to see There are 4 different types, try each one to see

which one suits youwhich one suits you Just click inside the block to edit text and Just click inside the block to edit text and

parameters.parameters.

Page 15: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website Adding buying buttons –cont Adding buying buttons –cont

There is a configuration menu to set some There is a configuration menu to set some of the parameters of your element.of the parameters of your element.

You can replace the imageYou can replace the image Change which of the display styles you are Change which of the display styles you are

usingusing Change the buying button styleChange the buying button style Hide the imageHide the image Hide the descriptionHide the description Change the positionChange the position

Page 16: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website Sign up for a google accountSign up for a google account

Having a google account allows you to Having a google account allows you to add your website easily to the google add your website easily to the google search enginesearch engine

It integrates with YouTubeIt integrates with YouTube You can you Google Analytics You can you Google Analytics

(advanced)(advanced) You can use Google Webmaster Tools You can use Google Webmaster Tools

(advanced)(advanced)

Page 17: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website Sign up for a google accountSign up for a google account

Go to the Google search engine page Go to the Google search engine page and in the right hand top corner is a and in the right hand top corner is a sign in buttonsign in button

Click on this to and then click on Click on this to and then click on “sign up for a new Google Account” “sign up for a new Google Account”

Page 18: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website Sign up for a google account – contSign up for a google account – cont

Fill in the form and click “Next Step”Fill in the form and click “Next Step”

Page 19: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website Sign up for a google account – contSign up for a google account – cont

then it asks you if you want to add your photo then it asks you if you want to add your photo (I never do but its up to you) and click “Next Step”(I never do but its up to you) and click “Next Step”

Now click “Get Started”Now click “Get Started”

Page 20: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website creating and adding a video slideshowcreating and adding a video slideshow

In the Google search page top menu click on In the Google search page top menu click on “More” and then “YouTube”“More” and then “YouTube”

This will bring you to the YouTube siteThis will bring you to the YouTube site Click on your name in the right hand cornerClick on your name in the right hand corner Click on “Video Manager”Click on “Video Manager” Click on “Create Channel”Click on “Create Channel”

Page 21: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website creating and adding a video slideshowcreating and adding a video slideshow

Set up your username (you can use your Set up your username (you can use your google one)google one)

Un-tick the boxes below and click on Un-tick the boxes below and click on NextNext

Now just click on “All Done”Now just click on “All Done”

Page 22: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website creating and adding a video slideshowcreating and adding a video slideshow

Click on your name at the R/H top andClick on your name at the R/H top andGo to Video ManagerGo to Video Manager

In the L/H corner there is a button labelledIn the L/H corner there is a button labelled“Upload”. Click on this and select “Upload”. Click on this and select

““Creator tools”Creator tools”

Page 23: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website creating and adding a video slideshowcreating and adding a video slideshow

We are going to use “One true media” to create our video Slideshow. Scroll down until you come to it and click on “Create Video” We are going to use “One true media” to create our video Slideshow. Scroll down until you come to it and click on “Create Video”

Scroll down to the bottom of the next page and click onScroll down to the bottom of the next page and click on“sign in with your Google account”“sign in with your Google account”

Page 24: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website creating and adding a video slideshowcreating and adding a video slideshow

Click on the buttonClick on the button

Now Click on the large greenNow Click on the large greenbutton to upload your photosbutton to upload your photosor Videosor Videos

Note you can only have 30 sec ofNote you can only have 30 sec offree video, unless you payfree video, unless you pay

When the photo’s have finishedWhen the photo’s have finisheduploading click “Done”uploading click “Done”

Page 25: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website creating and adding a video slideshowcreating and adding a video slideshow

Page 26: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website creating and adding a video slideshowcreating and adding a video slideshow

Once you have finished creating and editing your videoOnce you have finished creating and editing your videoclick “Publish to YouTube”click “Publish to YouTube”

Page 27: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website creating and adding a video slideshowcreating and adding a video slideshow

There is also a website called Kizoa that allows you to create There is also a website called Kizoa that allows you to create a video slideshow. Go to a video slideshow. Go to http://www.kizoa.com/

You will need to sign up for a free account, but the it works You will need to sign up for a free account, but the it works very similar to One true media, but you can have longer very similar to One true media, but you can have longer shows.shows.

When you have finished creating your video slideshow then When you have finished creating your video slideshow then click on the “Add to blog” button on the bottom of the screen, click on the “Add to blog” button on the bottom of the screen, and it gives you the HTML code to embed on your website. and it gives you the HTML code to embed on your website.

Copy the code and just past it in a HTML element.Copy the code and just past it in a HTML element.

Page 28: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website

Page 29: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create your own WebsiteCreate your own Website

Alternately there is a free MS programs called Photo Story

Go to http://www.microsoft.com/download/en/details.aspx?id=11132

To download.

You can then upload the video you have created to YouTube or Vimeo and embed it on your website.

Page 30: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Create Your Own WebsiteCreate Your Own Website Backing your site upBacking your site up

Go to the settings tabGo to the settings tab Select Archive/Un publishSelect Archive/Un publish

Select Select

Page 31: Review of last Session Adding custom html Adding custom html HTML is the language that web servers understand, all web pages are created using HTML. HTML

Build Your Own WebsiteBuild Your Own Website Backing your site up cont.Backing your site up cont.

Click on SaveClick on Save Your site will be saved on your hard Your site will be saved on your hard

drive in a Zip format.drive in a Zip format.