Showing posts with label Web Design. Show all posts
Showing posts with label Web Design. Show all posts

Wednesday, 8 November 2017

How to Purchase a Google Domains


Google Domains, if you are new, is a domain registration service where you can buy new domain names or transfer your existing domains from another registrar into the Google service. There’s no official announcement yet but Google Domains are now available in India without you having to use any hacks or proxy servers.

I own about a dozen-odd domains and they have been mostly purchased through Gandi, GoDaddy, Dreamhost, and BigRock. Last week, I purchased a new domain reverse.photos through Google Domains and, like most other Google products, loved the overall experience.

Everything is tied to your main Google account so there’s one less set of credentials to remember and the account is already secured with 2-factor authentication.

Google Domain includes intelligent and powerful search that will not only suggest domain names based on exact keyword matches but related words too. So a search for “blue widgets” will check the availability of “blue widgets” as well as “color widgets”, “white widgets” and “blueplugins”.
How to Purchase a Google Domains
Google Domains aren’t cheap. The average 1-year domain registration fee is certainly higher than what other companies offer but a big advantage is that they do not charge you extra money for making your postal address and phone number private in the public WHOIS database.

There’s no transfer fee if you decide to move your web domain from another registrar to Google Domains but, as per ICANN rules, you’ll have to extend the registration period of your domain for an additional year. This additional year is added to your domain’s existing registration.

The most convenient feature, however, is shared domain management. Just like you can allow external users to access your shared Google Doc, you can add collaborators to domains registered through Google Domains and they can manage the domain on your behalf. You’ll continue to remain the owner of the domain but others can manage the DNS settings or renew the domain on your behalf.

How to Purchase a Google Domains

Google Domains offer a simplified, hassle-free interface for managing domains, includes privacy by default, the pricing is straight-forward and the domain be easily integrated with G Suite (Google Apps) for email. It might be worth considering when you are out to buy a domain for your next million dollar idea.

Thanks for landing on this post, If you like my post then give your opinion and feedback in comment box.

Thursday, 28 September 2017

How to Host your Websites on Google Drive


If you are looking for a place to quickly host your websites but don’t have access to any web server, Google Drive is a great alternative. You can use Google Drive to host basic websites or even complex JavaScript based web apps. You may upload and publish any kind of static content* on your website including HTML pages, images, CSS, icons, audio & video files including podcasts.

How to Host your Websites on Google Drive

FREE WEB HOSTING WITH GOOGLE DRIVE



If you are using the old Google Drive, you can easily host websites on Drive. First upload your website files to a folder inside Google Drive, set the sharing permissions of that folder as public, open the index.html file in the Google Docs viewer and then click the “Preview” link to get the URL of your website.

However if you have migrated to the new Google Drive, you’ll be disappointed to learn that Google has dropped the web hosting feature. You can still create public folders inside Drive but the option to publish that folder as a website is gone.

No worries as there’s still an easy workaround that will let you publish your websites on to Google Drive in a single step.

FROM DESKTOP TO GOOGLE DRIVE IN ONE STEP

Step:-1.) Just put all your website file in a zip file – or you may use this zip file
Step:-2.) click here to upload that zip file to your Google Drive.
Step:-3.) Once the file has uploaded, the tool will generate the public URL of your website in the same step.

If you are using the tool for the first time, you may have to click the “Authorize” button since the script needs permission to upload that zip file to your Google Drive.

Internally, this little Google Script is doing all the hard work for you. When you click upload, the app creates a folder inside your Google Drive.

Step:-4.) Changes the sharing permissions to public (anyone can view, you can edit) and then generates the googledrive.com URL using the ID of the new folder.

Also Read:-
There are a few things you need to know before hosting websites on Google Drive. One, you need to have an index.html as that file will be served when someone tries to access the homepage of your site. Second, Google Drive websites have a URL structure like googledrive.com/host/ and there’s no way to change the default URL.
If you are hosting a website on Google Drive but wish to serve it under your own custom domain, that’s not possible yet but you can follow a workaround.

The trick is easy – you just have to wrap your Google Drive website URL inside an IFRAME tag as shown in the following snippet:

<html>
 <head>
  <style>
    body { margin:0; padding:0; }
    iframe { position: absolute; height: 100%; width: 100%; }
  </style>
  <title>Google Drive Website</title>
 </head>    
 <body>
   <iframe src="https://googledrive.com/host/ABCD/" frameborder="0"></iframe>
 </body>
</html>
The height and width attributes of the IFRAME tag should be set to 100% for the Google Drive website to occupy the entire screen. The only downside is that the URL in the address bar won’t change if you open a different page of the website since you are now browsing inside an embedded page.

Google Drives serves your website over HTTPS and thus can also be used for hosting custom Facebook Pages since Facebook requires that custom pages are only served over secure HTTP.

[*] Google Drive cannot be used for serving dynamic pages like those generated through PHP scripts on a WordPress website.

Thanks for landing on this post, If you like my post then give your opinion and feedback in comment box.



Tags:- #How to Host your Websites on Google Drive, #Google drive host, #Free google hosting, #Host website in free of cost, #Host website in Google, #Computer tips tricks, #host website on google drive 2017, #google drive web hosting alternatives, #how to host a website for free with domain name, #google web hosting for small business, #how to host your website on google for free, #how to host your website on google, #google drive hosting website, #google drive hosting 2017, #How to host a website with Google Drive, #Google Drive web hosting platform, host your website on google drive 2017, google drive host website, #google drive host static website

Saturday, 22 July 2017

Build a Web Page Monitor with Google Docs using ImportXML



RSS feeds have completely changed the way we consume information on the web. You no longer have to visit The New York Times or CNN every hour of the day to check news headlines because the feed reader is doing that for you behind the scenes.

The only problem is that not all web content is available via feeds. For instance, Amazon, eBay and Google Product Search (Froggle) are good places to find discount deals on books and electronic gadgets but unfortunately, none of these shopping sites publish feeds.

MONITOR HTML WEB PAGES WITH GOOGLE DOCS

Problem: Let’s say you are looking for some discount deals on iPod Nano. An option here is that you open Google Products page and search for iPod Nano. If you don’t find the right price, repeat the same cycle next day. This may sound easy but imagine doing this for ten other products on five different shopping sites. Tedious, right?

Solution: What we can do here is build a simple spreadsheet in Google Docs that will monitor prices across all these search pages and will present them in a table so you don’t just track prices but also compare them at the same time.

To get started, you need access to Google Docs and some basic knowledge of XPath. Don’t let this scare you – XPath is a simple way to access information contained inside HTML web pages. For instance, if you want to know about all URLs that are mentioned on any web page, the XPath expression would be //a[@href]. Some more examples:

//strong means all the items in the web page with strong html tags

//@href means all the items in the web page with href element, i.e., the URLs in that page.

If you feel that writing XPath expressions is a tricky job, get the XPath checker add-on for Firefox that will help you easily determine the XPath of any element on a web page.

SCRAP WEB PAGES WITH GOOGLE DOCS USING IMPORTXML AND XPATH

This is the search page for ‘ipod nano’ inside Google Products. As you may noticed already, the result title is formatted with CSS class “ps-large-t” while the the product price using the class “ps-larger-t” – you can easily find these class names via Firebug or   from the HTML source.



Now we’ll create a table inside Google spreadsheet that will have the name, price and URL that will link to that product listing in Google Docs. You can use the same approach to get product data from other sites like Amazon, eBay, Buy.com, etc.

Here’s how the final spreadsheet looks like – all this is live data and will update automatically if the corresponding information is updated on Google Products.



GET EXTERNAL DATA IN GOOGLE DOCS WITH IMPORTXML

There’re built-in spreadsheet functions to help you easily import external data into Google Docs. One such useful function is ImportXML that, like ImportHTML, can be used for screen-scrapping.

The syntax is =ImportXML("web page URL", "XPath Expression")

Coming back to the spreadsheet, in order to fetch the price of ‘ipod nano’, we type the following formula:

=ImportXML("google.com/products?q=<strong>ipod+nano</strong>",
                "//b[@class='ps-larger-t']")
You may replace ‘ipod nano’ with any other product name like ‘harry+potter’, ‘nikon+d60’, etc.

To enter this function into Google Docs, click an empty cell, press F2 and paste. See this Google Docs movie:



Similarly, for the product name, we use this formula:

=ImportXML("www.google.com/products?q=ipod+nano",
                "//a[@class='ps-large-t']")
And for the URL (product hyperlink), the formula is:

=ImportXML("http://www.google.com/products?q=ipod+nano",
                "//a[@class='ps-large-t']//@href")
You need to concatenate this with ‘http://www.google.com’ since Google Products uses relative URLs. This can be easily fixed by adding another column with the formula

=HYPERLINK("http://www.google.com/"&amp;B3,"click here")
SUBSCRIBE TO WEB PAGE CHANGES VIA FEEDS


You don’t have to check this Google Docs Spreadsheet manually to see if prices have since yesterday – just select publish     followed by “Automatically re-publish when changes are made” and subscribe to the document in your favorite RSS reader.

Friday, 21 July 2017

Turn Your Sketches into CSS Based Websites

Most online WYSIWYG editors offer a Microsoft Word style interface where you can add text, tables, images, etc. and the editor will then generate the corresponding HTML code without you having to learn any of the programming languages.

CREATE CSS BASED WEB TEMPLATES ONLINE


WYSIWYG editors will generally write the code using HTML tables but if you are looking to create a pure CSS based layout, where the presentation styles are separate from the actual content, you should check out Drawter.

Think of Drawter as a white canvas where you can actually “draw a web page” using your mouse. For instance, if you want your website to have a fixed-size header, a left sidebar and maybe a footer, you can simply drag-n-draw these areas on the canvas using the <div> tag and generate the code.




Each tag in Drawter is presented as a separate layer and you can draw one layer over the another. For instance, you can put the <p> layer over <div> which can also contain the <img> layer to hold images or <h1> for headlines. Obviously, you need to have some understanding of HTML and CSS in order to use these tools.

Saturday, 17 June 2017

A Simple Trick to Highlight the External Links on a Web Page

Some popular websites – including Mashable, The Huffington Post and TechCrunch – include too many internal links in their stories (hyperlinks pointing back to their own website)  and it often becomes difficult to determine the links that are pointing to external websites.

You have to hover your mouse over a link and look at the status bar of your browser to know where that link is pointing to. That’s lot of work.

HIGHLIGHT EXTERNAL LINKS USING FAVICON IMAGES


Before: This is the original page on TechCrunch


After: The same page but the external hyperlinks are now highlighted

If you wish to quickly highlight all the external hyperlinks on a page, just drag the following bookmarklet link to your browser’s bookmarks toolbar.


Now when you are on a web page that looks cluttered with links, just click this bookmarklet button and it will add favicons next to all external hyperlinks on that page while the styling of internal links is left untouched.

The bookmarklet will also add underlines to external links  making it easier for you to distinguish between external and internal links. And in case you wish to revert to the original style of hyerlinks, just hit the refresh button (Ctrl + R) in your browser.

her's the bookmarklet source code (de-obfuscated) in case you wish to modify the link styling. The favicons for corresponding websites are automatically generated using this simple Google hack.

// Highlight External Links by Way2Trick
// Published on 06/17/2017

// Find the domain name of the current page
var host = window.location.host;

// Use Google's Favicon Generator
var goog = "http://www.google.com/s2/favicons?domain=";

// Find all hyperlinks on a web page
var links = document.getElementsByTagName("a");

for (i=0; i&lt;links.length; i++) {

  var link = links[i];

  // Skip all internal links where the href is the same as the domain host
  // Also skip non HTTP links like FTP, MAILTO, etc.

  if(link.href.match("^https?://") &amp;&amp; !link.href.match(host)) {

    var domain = link.href.split("/");

    // Apply some CSS styles to the external hyperlinks
    link.style.background = "url(" + goog + domain[2] + ") center left no-repeat";

    link.style.fontWeight = "bold";

    link.style.fontSize = "105%";

    link.style.padding="5px 5px 5px 20px";    

    link.style.textDecoration="underline";

  }   
}

Thursday, 1 June 2017

How to Design a Good Program

Hello Friends.,. Have you ever designed a program, but when you were done, it didn't look or work quite the way you wanted it to?  This article will help you to design a well-flowing program that people will love!!
How to Design a Good Program


Steps:-

1. Think of what you want your program to do. Write this down on a piece of paper.
2. Now think of any common tools that the user might use, such as buttons, links, radio buttons, etc. Only write down the ones that would be more frequently used.
3. Draw a rectangle on a piece of paper.

This represents the window that the program runs in. Now, draw a draft of what the GUI will look like. A common set-up is as follows: Tool bar(s) on top, status bar(s) on bottom, and workspace in the middle. Make the workspace so that it is easy to use and understand. If you don't like how something looks, change it.
4. Ask a friend (preferably one who has an interest in programming) if this program looks inviting to use.

If they say no, ask them what they would change. Consider their ideas.
5. Now, use a programming language that you are comfortable with to write the code for your program.

If you are using a program such as Visual Studio, where you deign the interface separately, design the interface first.
6. Now, publish a Beta Version of your software that you can ask your friends to try.

Ask them what they liked and disliked about the software.
7. Now, go back to your draft.

Erase anything that needs to be moved, removed, or changed, and move, remove, or change it. Remember, just because your friend(s) didn't like something, doesn't mean you have to change it.
8. Go back and edit your code again.

Keep repeating steps 5-8 until you really like how your program looks and works.

 

Tips

  • Don't release your Beta version to the whole world, because then you won't get the feedback you deserve. Instead, just ask those who you know.
  • Don't get frustrated. If you need to, put the project away for a few days and come back to it.

 

Warnings

  • If you do put away the project temporarily, don't put it away for too long, because then you won't be motivated to start it again.

Things You'll Need

Two pieces of blank white or lined paper.
A pencil. (Not a pen or marker!)
Beta testers (recommended)
Tolerance for mistakes

How to Write an HTML Page | How to use HTML | Make a HTML page

Four Parts:     Setting Up a Document    Formatting Text    Adding Links and Images    Learning More and Putting Your Page Online

HTML (HyperText Markup Language) is a basic language for developing web-pages. It was created to be an easy and flexible coding language. Just about every page on the Internet was developed with some form of this code (ColdFusion, XML, XSLT). HTML is easy to pick up, but can keep you learning for a long time if you're interested in its complete functions. To add more color and excitement to your web pages, you can learn basic CSS as soon as you're comfortable with a basic HTML page.

Part 1 of 4: Setting Up a Document

How to Write an HTML Page | How to use HTML | Make a HTML page




1.) Open a simple text editor.

NotePad is a good option that can be downloaded for free. You can write HTML with most text editing software, but more complex software with automatic formatting can make it harder to organize your HTML page.
  • TextEdit is not recommended, as it will often save the file in a format your browser may not recognize as HTML.
  • You can also use an online HTML editor. Specialized HTML editing programs are not recommended for beginners.
How to Write an HTML Page | How to use HTML | Make a HTML page



2.) Save a file as a web page.

Select FileSave As in the top menu. Change the file format to "Web Page," ".html" or ".htm". Save it in a location where you can easily find the file.
  • There is no difference between these three options.

How to Write an HTML Page | How to use HTML | Make a HTML page



3.) Open the file in a web browser.

Double click the file, and it should automatically open as a blank web page in your browser. Alternatively, you can open a browser, such as Firefox or Internet Explorer, and use FileOpen File to select the document.
  • This web page is not online. It can only be viewed on your computer.


How to Write an HTML Page | How to use HTML | Make a HTML page


4.) Refresh the web page to see saved changes.

Type this into your blank document: <strong>Hello</strong>. Save the document. Refresh the blank web page in your browser, and you should see the word "Hello" appear at the top of the page in bold. Anytime you want to test your new HTML during this tutorial, save the .html document, then refresh your browser window to see how the HTML is interpreted.
  • If you see the words "<strong>" and "</strong>'' appear in your browser, your file isn't being properly interpreted as HTML. Try a different text editing program or a different browser.


How to Write an HTML Page | How to use HTML | Make a HTML page


5.) Understand tags.

HTML instructions are written in "tags" that tell the browser how to interpret and display your web page. They are always written between angle brackets <like these>, and are not displayed on the web page. You've already used them in the example above:
  • <strong> is a "start tag" or "opening tag". Anything written after this tag will be defined as "strong text" (usually indicated in bold on a web page).
  • </strong> is an "end tag" or "closing tag," which you can identify from the / symbol. This shows where the strong text stops. Most tags (though not all) need an end tag to function, so remember to include it.
How to Write an HTML Page | How to use HTML | Make a HTML page



6.) Set up your document.

Delete everything in your HTML document. Begin again with the following text, exactly as written (ignoring the bullet points). This HTML code tells the browser what type of HTML you'll be using, and that all your HTML will be contained within the <html> and </html> tags.
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <html>
  • </html>


How to Write an HTML Page | How to use HTML | Make a HTML page


7.) Add head and body tags.

HTML documents are divided into two sections. The "head" section is for special information, like the title of the page. The "body" section includes the main content of the page. Add these both to your document, remembering to include end tags. The new text to add is in bold:
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <html>
  • <head>
  • </head>
  • <body>
  • </body>
  • </html>


How to Write an HTML Page | How to use HTML | Make a HTML page


8.) Title your page.

Most tags that go in the head section are not important to learn as a beginner. The title tag is easy to use, though, and will determine what shows up as the name of your browser window or on the browser tab. Put the title start and end tags inside the head tags, and write any title you like between them:
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <html>
  • <head>
  • <title>My first HTML page.</title>
  • </head>
  • <body>
  • </body>
  • </html>


Part 2 of 4: Formatting Text

How to Write an HTML Page | How to use HTML | Make a HTML page




1.) Add some text to your body section.

For this section, we'll be working only within the body tags. The other text will still be there in your document, but we'll save some space by not repeating it every time in this guide. Write anything you like between the <body> and </body> tags, and it will appear as the first content on your web page. For example:
  • <body>
  • I'm following the Way2trick  guide to write an HTML page.
  • </body>
How to Write an HTML Page | How to use HTML | Make a HTML page



2.) Add headers to your text.

Organize your page with header tags, which instruct the browser to display text between them in a larger size. These are also used by search engine bots and other tools to determine what your page is about and how it is organized. <h1> </h1> is the largest header, and you can create smaller headers all the way down to <h6> </h6>. Try them out on your page:
  • <body>
  • <h1>Welcome to My Web Page.</h1>
  • I'm following the Way2trick guide to write an HTML page.
  • <h3>My goals today:</h3>
  • <h5>Completed goals:</h5>
  • Learn how to use headers.
  • <h5>Uncompleted goals:</h5>
  • Learn more text formatting tags.
  • </body>
How to Write an HTML Page | How to use HTML | Make a HTML page




3.) Learn more text formatting tags.

You've already seen the "strong" tag, but there are many more ways to format your text. Play around with these, or with multiple tags around the same string of text. Always remember to add the end tag afterward!
  • <strong>Important text, displayed as bold in browsers.</strong>
  • <em>Emphasized text, displayed as italics in browsers.</em>
  • <small>Slightly smaller text than usual. This automatically scales if used in a heading. </small>
  • <del>Text that is no longer applicable, displayed with a strike-through line.</del>
  • <ins>Text that has been inserted later than the rest, displayed as an underline.</ins>
How to Write an HTML Page | How to use HTML | Make a HTML page



4.) Arrange your text on the page.

You might have noticed that hitting the "enter" key isn't enough to get your text to display on a different line. These tags can help you form paragraphs and line breaks, or arrange your text in other ways:
  • <p> Short for "paragraph," this will keep all text between these tags in one paragraph, and separate it out from text above and below it.</p>
  • <br> This will create a line break. Do not include an end tag for this, since it's not altering any other content. Use this for poems or address lines, not to separate paragraphs.
  • <pre>If you need to display text very precisely, this tag will set the text inside to a fixed-width font (each letter exactly the same width), and let you create spaces and line breaks as you would for normal typing instead of with tags.</pre>
  • <blockquote>This defines text that has been quoted from a source.</blockquote> You can describe the source afterward with the <cite>cite tag</cite>.
How to Write an HTML Page | How to use HTML | Make a HTML page



5.) Add invisible comment text.

Comment tags are not visible on the web page. They allow you to write notes to yourself in the HTML document, without interfering with the content. <!--- Write your comment inside the tag. ---> Do not add an end tag.
  • Tags that stand by themselves and do not use end tags are called "empty tags."


How to Write an HTML Page | How to use HTML | Make a HTML page


6.) Put it all together.

The best way to remember these tags is to use them in your own web page. Here's an example using tags from each of the steps you've learned so far. Try to predict what it would look like in a browser, than copy-paste it to your document and find out.
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <html>
  • <head>
  • <title>My first HTML page.</title>
  • </head>
  • <body>
  • <h1>Welcome to My Web Page.</h1>
  • I hope you enjoy the site!<p><strong>I made it just for you.</strong>
  • <h2>Part One: How I Discovered HTML</h2>
  • <!---Note to self: remember that "h1" is a larger header than "h2"--->
  • I've been learning HTML for <del>one</del> <ins>two</ins>hours now, so I'm an expert.
  • </body>
  • </html>

Part 3 of 4: Adding Links and Images



How to Write an HTML Page | How to use HTML | Make a HTML page


 1.) Learn about attributes.

Tags can have extra information written inside them, called "attributes." These show up as extra words within the tag itself, in the form of attribute-name="specific value". For example, just about any HTML tag can have the title attribute:
  • <p title="Introduction">Introductory paragraph goes here.</p> gives the paragraph a title, "Introduction," which appears when you mouse over the paragraph in the web page.


How to Write an HTML Page | How to use HTML | Make a HTML page


2.) Link to another web page.

Use the <a> </a> tag to create a hyperlink to any other web page. Insert the URL of the web page to link to using the href attribute. Here's an example that links to the page you're reading now:

<a href=" http://way2trick.blogspot.com/2015/11/how-to-write-html-page.html
">Visitors to your website can click this text to follow the link.</a>

How to Write an HTML Page | How to use HTML | Make a HTML page


3.) Add an id attribute to tags.

Another attribute that just about any HTML tag can use is the "id" element. Inside any tag, write id="example" or use any name that does not include spaces.This won't have any visible effect, but we'll use it in the next step.
  • For example, add this to your document: <p id="example">This paragraph will be used as an example to show how the id attribute works.</p>


How to Write an HTML Page | How to use HTML | Make a HTML page


4.) Link to an element with a certain id.

Now we can use the hyperlink tag, <a> </a>, to link to another spot on the same page. Instead of a URL, we'll use the # symbol, followed by the id value we're linking to. For example, <a href="#example">This text will link to the paragraph with the id "example."</a>
  • All HTML values are case-insensitive. "#EXAMPLE" and "#example" will link to the same place.
  • If your page is short enough to display all at once, you might not notice anything happen when you click the link in your browser. Resize the window until a scroll bar appears, then try again.

How to Write an HTML Page | How to use HTML | Make a HTML page


5.) Add an image.

The <img> tag is an empty tag, meaning no closing tag is necessary. All the information the browser needs to display the image will be added using attributes. Here's an example that will display the Way2trick logo, followed by a description of each attribute:
  • <img src="http://pad2.whstatic.com/skins/owl/images/Way2trick_logo.png" style="width:324px;height:84px" alt="Way2trick. logo">
  • The src=" " attribute tells the browser where to find the image. (Note that it's generally considered rude to display an image from someone else's site – and the image will disappear if that site ever goes offline.)
  • The style=" " attribute can do many things, but most importantly it's used to set the width and height of the image in pixels. (You can instead use the separate width=" " and height=" " attributes, but this can lead to weird resizing problems if you are using CSS.)
  • The alt=" " attribute is a brief description of the image, which the user will see if the image fails to load. This is considered a requirement, since it's used by screen readers for blind visitors.

Part 4 of 4: Learning More and Putting Your Page Online


How to Write an HTML Page | How to use HTML | Make a HTML page


1.) Validate your HTML.

HTML validation checks for errors in your code. If your web page isn't displaying correctly, validation can help you find the mistake causing problems. It can also teach you more about HTML, by identifying code that looks fine on your display, but isn't recommended due to updates in the HTML standard. Using invalid HTML doesn't make your site unusable, but it can cause problems or inconsistent display in different browsers.
  • Try a free online validation service from W3C or search for another HTML 5 validator online.


How to Write an HTML Page | How to use HTML | Make a HTML page


2.) Learn more tags and attributes.

There are many more HTML tags and attributes, and many places to learn them:
  • Try w3schools and HTML Dog for more tutorials and comprehensive lists of tags.
  • Find a web page you like the look of, and use your browser's "View Page Source" function to see the HTML for yourself. Copy-paste it into your own document and play with it to see how it works.
How to Write an HTML Page | How to use HTML | Make a HTML page


3.) Put your web page online.

Choose a web hosting service, and you can upload as many HTML pages as you like to your personal web domain. To do this, you'll need to use FTP uploading software, but many web hosts provide this service as well.
  • When linking to pages or images on your own site, you do not need to use the full address. For example, if your domain name is www.superskilledhtmlcoder.com, then <a href="/journal/monday.html">the text inside these tags</a> will link to the address "www.superskilledhtmlcoder.com/journal/monday.html"

How to Write an HTML Page | How to use HTML | Make a HTML page


4.) Add style with CSS.

If your HTML page is looking a little bare-bones, try learning some basic CSS to add color, different fonts, and greater control over element placement. Linking a CSS "stylesheet" to the HTML page lets you make powerful changes quickly, automatically adjusting the style of all text within a certain tag. You can play around with a basic stylesheet here, or delve into a more detailed tutorial at HTML Dog's CSS guide.

How to Write an HTML Page | How to use HTML | Make a HTML page


5.) Add JavaScript to your page.

JavaScript is a programming language used to add more function to your HTML pages. JavaScript commands are inserted between the start and end tags <script> </script>, and can be used to add interactive buttons, calculate math problems, and much more. Learn more from the w3c examples.


Tips:-

  • The doctype used in this tutorial is "loose HTML 4.0.1 transitional", an easy format for beginners to use.  Use (<!DOCTYPE html>) instead for the browser to interpret it as strict HTML 5 formatting, which is the recommended (though less commonly used) standard.

Warnings:-

  • HTML is intended to hold content in a universal format. It is not meant to control the presentation of your web page, such as the background color and precise placement of elements. While there are tags that let you control these things, using CSS is highly recommended to create a more controllable, consistent web page.

Things You'll Need:-

A simple text editor, such as NotePad or TextEdit
A web browser, such as Internet Explorer or Mozilla Firefox
(Optional) An HTML editor such as Adobe Dreamweaver, Aptana Studio, or Microsoft Expression Web

Related Posts Plugin for WordPress, Blogger...

Labels

404 AdBlock Add-on Airtel GPRS Trick Airtel SMS Trick Alexa Amazon Amazon Kindle Amazon Prime Android Android 8 Android Oreo antivirus Apple Apple Mac ASCII Audacity Audio Authotkey Backup Balance Transfer in Vodafone Battery Bing Blogger Blogging Bookmarklet Browser Camera Chromebook clock Cloud colors command lines Computer Computer Tricks configuration Contact Creative Commons Credit Card CSS devolop DIY Doodle DOS Download Dropbox E-Mail eBook Email Email Attachment Embed Encryption English Error Evernote Eyes Facebook Facebook Tricks Feedburner Flipkart Font Foursquare Free Internet Free sms trick in Vodafone G Mail Gadget Game Getty Images GIF Gists Github Google Google AdSense Google Analytics Google Apps Google Chrome Google Contacts Google Currents Google DNS Google Docs Google Drive Google Earth Google Font Google Forms Google Images Google Map Google Photos Google Play Store Google Plus Google Print Google Reader Google Script Google Sheets Google Spreadsheet Google Translate GPRS Setting GPS Hacking Health App HelloFax Hindi Hoodie HTML Icons idea Image Editing Images IMEI Indian Railways Infographics Instagram Internet Internet Explorer Internet Tricks iOS iPad iPhone IRCTC iTunes iTV JavaScript JioCinema JioTV Junglee Kindle Language Translation Laptop Laptop. TV Life Time FREE GPRS Life-Style Link Linkedln Linux logo Make Money Online Microdoft Powerpoint Microdoft Word Microsoft Office Microsoft Outlook Mobile Mosaic Music Name Networking nexus Notepad OCR Online Shopping Open DNS OS Outlook Password PDF Petya Phillips Hue Lights Photogtraphy Pixel Play Station Podcasts Pokemon Pokemon Go Polls Print Productivity Proxy Server Pushbullet QR Code Ransomware Reddit Reliance Hack GPRS Reliance Jio RGB Ringtone Router RSS Safe Mode Samsung Galaxy S Scrabble Screen Capture Screen Sharing Screencast Secrets Security Send free sms from PC SEO Sierra Skype Slideshare SMBv1 SMS Snapchat Snapdeal Social Media Solution Sound Device Speech Recognition Sql Steam Sync Synology NAS Tata Docomo GPRS trick Teleprompter Torrent Trick Tricks TV Twitter UltraISO Unicode Unknown Extension Unlimited 2GB Unlimited 3GB Unlimited GPRS USB USB Security Key Video Editing virtual desktop Virus attack VLC Vodafone 110% working trick for GPRS Vodafone 3g Vodafone GPRS VPN wallpapers WannaCry Web Design Web Domain Website Wget Whatsapp WiFi Wikipedia Windows Windows 10 Windows 10 S Windows KN Windows Tricks windows updates Winows N Wolfarm Alpha WordPress XBox YouTube Zip
Twitter Delicious Facebook Digg Stumbleupon Favorites More