Showing posts with label HTML and CSS. Show all posts
Showing posts with label HTML and CSS. Show all posts

Sep 30, 2013

Google Launches Web Designer, A Visual Tool For Building Interactive HTML5 Sites And Ads

Google today announced the launch of Web Designer, a new tool for building interactive HTML5 sites and ads. The company first hinted at this launch in June, but had been quiet about it ever since. Web Designer, which Google calls a “professional-quality design tool,” is now officially in public beta and available for download for Mac and Windows.
web_designer_betaAs Google notes in today’s announcement, Web Designer was developed to allow advertisers to easily create HTML5 ads for mobile and desktop. Until recently, Google argues, advertisers “didn’t have the tools they needed to easily develop content fit for today’s cross-screen experiences” and Web Designer aims to be the tool to create these experiences.

While this ad pedigree shines through across Web Designer (the default layouts are for DoubleClick rich media ads and AdMob mobile ads, for example), there is nothing in the tool that would prevent you from building interactive single-page sites and animations for other purposes, as well. Some of the features, however, are currently only available for ads, though Google says it plans to expand these tools for other purposes in the future.
8-4-advanced_view_8At its core, Web Designer is a visual tool, but you can also delve right into the JavaScript and CSS to fine-tune different aspect of your site. Indeed, Web Designer allows you to manipulate all of your code directly in a built-in editor and lets you quickly preview your creations in every browser you have installed on your machine.
The tools come with all the usual visual design tools you’re probably familiar with. Some of the more interesting ones Google has developed for Web Designer include a pen tool for free drawing, as well as a timeline for managing your animations. Web Designer also features the ability to create 3D content using the power of CSS3, as well as a set of pre-built components for galleries, maps and embedded YouTube videos.
For animations, one of the core features of the application, Web Developer features a Quick mode for building animations scene by scene and an advanced mode that gives designers more control over each of the elements on the page.

Courtesy: techcrunch
By: Unknown On 10:27 AM
Continue Reading

Sep 28, 2013

How to Learn HTML Online for Free! Part - 06 "Paragraphs and headings"

By: Unknown On 12:23 PM
Continue Reading

Sep 26, 2013

How to Learn HTML Online for Free! Part - 05 "Paragraphs in the body"

We have set up a lot of the basic things for your HTML file for you. This is so you won't get mad at us for too much repetition—please learn it well!
We have learned about opening and closing tags. When we put content between the tags, the entire bit is called an element.
element = <opening tag> + content + <closing tag>
Notice we have both title tags now, but we need <body> tags. The content in the body is what will be visible on the actual page. The body goes inside the html tags, but not inside the head tags, like this:
<html>
    <head></head>
    <body></body>
</html>
 
Instructions:
  1. Between the title tags, give your page a name. It can be anything!
  2. Underneath the closing </head> tag, put in the opening and closing <body> tags.
  3. Inside the body, let's create paragraphs! Each paragraph requires opening and closing tags: <p> and </p>. We put content in between the tags.
  4. Between the <body> tags, create two paragraphs and write content in each paragraph. (This will require 2 pairs of <p> tags).
By: Unknown On 8:02 AM
Continue Reading

Learn HTML online for free - Part 04 "Make the head"

Everything in our HTML file will go between the opening <html> and closing </html> tags.
There are always two parts to the file: the head and body. Let's focus on the head.

a. It has an opening and a closing tag.
b. The head includes important information about the webpage, such as its title.
c. The title is the words we see in the tab (for example, the title of this page is "Introduction to HTML").
Instructions:
  1. Add a <head> opening and </head> closing tag. See the Hint for more.
  2. Between the <head> tags, add in opening <title> and closing </title> tags.
  3. In between the <title> tags, write the title of your webpage: Bad to the Bonez Webpage Inc. You'll be able to see the title at the top of your browser window: click and open in a new tab to see!
  4. Press Save & Open it on your browser!
By: Unknown On 7:56 AM
Continue Reading

Sep 25, 2013

Learn HTML online for free - Part 03 "Basic terminology"

To learn more HTML, we should learn how to talk about HTML. Already you have seen we use <>s a lot.
  1. Things inside <>s are called tags.
  2. Tags nearly always come in pairs: an opening tag and a closing tag.
  3. Example of opening tag: <html>
  4. Example of closing tag: </html>
You can think of tags as being like parentheses: whenever you open one, you should close it. Tags also nest, so you should close them in the right order: the most recently opened tag should be the first one closed, like in the example below.

<first tag><second tag>Some text!</second tag></first tag>
 
The last exercise taught us how to set up our HTML file. Everything we do now will go between <html> and </html>.

Practice makes perfect! One more time:

Instructions:
  1. Put in the <!DOCTYPE HTML> tag.
  2. Put in the <html> opening and closing tags.
  3. Between the <html> tags, write whatever you like.
  4. Save and open it on your browser. 
By: Unknown On 7:00 PM
Continue Reading

Learn HTML online for free - Part 02 "HTML and CSS"


HTML stands for HyperText Markup Language. Hypertext means "text with links in it." Any time you click on a word that brings you to a new webpage, you've clicked on hypertext!

A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more. HTML is the markup language we'll be learning.

What makes webpages pretty? That's CSS—Cascading Style Sheets. Think of it like skin and makeup that covers the bones of HTML. We'll learn HTML first, then worry about CSS in later courses.
The first thing we should do is set up the skeleton of the page.

a. Always put on the first line. This tells the browser what language it's reading (in this case, HTML).
b. Always put on the next line. This starts the HTML document.
c. Always put on the last line. This ends the HTML document.

Instructions:
  1. Go ahead and put the three lines mentioned above into test.html, which is now blank.
  2. In between the second and last line (between the and the ), feel free to write whatever message you like. 
By: Unknown On 3:33 PM
Continue Reading

Learn HTML Online for Free! Part - 01 (Why learn HTML?)

Every webpage you look at is written in a language called HTML. You can think of HTML as the skeleton that gives every webpage structure. In this course, we'll use HTML to add paragraphs, headings, images and links to a webpage.
In the editor to the right, there's a tab called test.html. This is the file we'll type our HTML into. See the code with the <>s? That's HTML! Like any language, it has its own special syntax (rules for communicating).
Save your test.html file, the results tab will act like an Internet browser (e.g. Chrome, Firefox, Internet Explorer). A browser's job is to transform the code in test.html into a recognizable webpage! It knows how to lay out the page by following the HTML syntax.
Instructions
  1. Open notepad and create a test file filename.html file.
  2. Change the text on line 2 (the bit between <strong> and </strong>) to anything you like!
  3. Save your test.html file and open it on your browser.
  4.  
  5.  
By: Unknown On 10:23 AM
Continue Reading
Subscribe to: Posts (Atom)
Powered by Blogger.

 

© 2013 Technology Update News!. All rights resevered. Designed by BDpython

Back To Top