HTML Comments

w7r.blogspot.com

Who Would Waste Their Time Commenting their HTML???

Turns out, not too many people comment their HTML code, which is a shame because it causes a hellish amount of problems for website and program developers alike. If you have never heard of a 'comment' then no need to worry. A comment is literally a.. COMMENT; however, the comment acts as notes to you and other web developers as to what the code in a specific region does.

Turn Links into Buttons with CSS

CSS Tags Decorate Stuff!

Using CSS you can turn dull links into attractive buttons. Let me show you how!

What an average link looks like...

Average link

Average link

What a link could look like...

Button link

Button link

By using CSS I am able to decorate the anchor tag! Before CSS buttons on websites were text in images between the anchor tags.

THIS WAS BAD. Loading images takes a significant amount of time, much more than the average visitor was willing to spend watching the page load. CSS is a way of decorating text based on selectors and classes which describe the style needed.

Thanks to CSS you don't have to compromise looks for speed. Take a look at some more examples of how CSS can decorate links to appear as buttons.

Don't Have the Time to learn CSS?

Although learning CSS would be ideal, there are many programs and websites that host programs to help you create buttons visually. The CSS for the buttons will be printed out to you once you reached a design you like! Try a CSS button creator now!

What a link could look like...

Button link 2

Button link 2 

The Parts of a CSS Button

• a:link - How non-visited links would appear.
• a:visited - How visited links would appear.
• a:hover - How links appear while the mouse hovers over them.
• a:active - How links appear while they are clicking.

How to Create Email Links with HTML

w7r.blogspot.com

Copying and pasting an email address into the "To:" prompt of an email can be surprisingly unpleasant especially when the email benefits the receiver and not the sender.

In a blog such as W7R it is important to allow users to email you with as little effort as possible (without the copying and pasting).

Email me!

Result: Email me!

About the Email Link Syntax

• The 'a' is the same anchor tag used with website links
• href is an HTML attribute of the anchor tag, 'a'
• After href comes an = sign and a destination in parenthesis
• The format for email destinations is mailto: + an email
• Replace AnEmailAddress@gmail.com with your own email
• </a> is a closing tag for an anchor

Bulleted Lists in HTML

w7r.blogspot.com

Bulleted Lists Quick Facts

• The HTML opening tag <ul> and its matching closing tag </ul> create bulleted lists
• The more formal name for bulleted lists is Unorganized Lists
• These quick facts are list items of an unorganized list.
• List item can contain
  • pictures
  • text
  • video
  • links
  and combinations of those mentioned (pretty much anything)
• Unorganized lists can have list items that contain unorganized lists lists inside them. Lists in lists are considered nested (previous list item)

Bulleted lists are called Unorganized lists and are used to display information that is to be treated equally (no rankings or order necessary).

Here is the source code for the Bulleted Lists Quick Facts!

HTML Entity [Case Sens.]	Symbol
>	>
&lt;	<

  

  The HTML opening tag <ul> and its closing tag </ul>  create bulleted lists 
  
  
The more formal name for bulleted lists is Unorganized Lists
  
  
These quick facts are list items of an unorganized list.
  
List item can contain
    

      
pictures
      
text
      
video
      
links
    
 and combinations of those mentioned (pretty much anything)
  
  
Unorganized lists can have list items that contain unorganized lists lists inside them. Lists in lists are considered nested (previous list item)
  

• Numbered Lists in HTML

Numbered Lists in HTML

w7r.blogspot.com

The HTML element, ol, or Organized List is used to list items that come in a particular order. When order matters, such as a list of the top 10 songs on billboard, then you would use a Organized List.

Image Source

Race Results

1. Pacman
2. Speedy "Pinky"
3. Shadow "Blinky"
4. Bashful "Inky"
5. Pokey "Clyde"

<h4>Race Results</h4>
<ol>
  <li>Pacman</li>
  <li>Speedy "Pinky"</li>
  <li>Shadow "Blinky"</li>
  <li>Bashful "Inky"</li>
  <li>Pokey "Clyde"</li>
</ol>

About the HTML Tags ol and li

• <ol> starts a organized list
• <li> starts a list item
• </li> closes a list item
• </ol> ends the organized list

• Bulleted Lists in HTML

Comparison Table HTML Code

w7r.blogspot.com

Copy and Paste This to Your Site!

The table is on top of the source code that I used to create the table. So feel free to copy and paste that code to your blog posts or website to save yourself the time and trouble.

Object A	Both A and B	Object B
difference 1 difference 2 difference 3 difference 4	similarity 1 similarity 2 similarity 3 similarity 4	difference 1 difference 2 difference 3 difference 4

 
Object A
 
Similarities
 
Object B
 




difference 1
difference 2
difference 3
difference 4





similarity 1
similarity 2
similarity 3
similarity 4





difference 1
difference 2
difference 3
difference 4

HTML Force Links to Open in New Tab

Sometimes, as a blog writer, it seems counter-productive for you to provide links to other websites and blogs that have similar or better content then your own; however, contrary to ones intuition, providing useful links from your site can build up an audience as well as a new post could.

In other words, sharing your resources with your audience will only benefit your blog or site. A thought crossed my mind after adding more links and resources to my blog. The thought was that when many people read content on the web clicking links to get more indepth information is inevitable, but most viewers do not intend to leave your page. So, I wanted the links on my site that appear in articles and posts to open in a new tab by default.

The knew there must be a way to force links to open in a new tab because you can right click any link and select "Open in new tab". So, after a google or two it was clear that one of the easiest ways to do this was by hiding the bar, instead of actually removing it all together. By using an attribute for the HTML anchor tag, <a>. Here's the original HTML code for a link to google (The first link would open and make you leave this page, but the 2nd link would open the page in a new tab.)

<a href="http://www.google.com/"> Go To Google </a>

Go To Google

<a href="http://www.google.com/" target="_blank"> Go To Google (new tab)</a>

Go To Google (new tab)

HTML: Creating Links

Creating Links with HTML

Let's begin with an example of a link coded in HTML. *open in a new window to avoid leaving this page!   Open me in a new window! 

 The link above sent you to my youtube page.

Here is the HTML code I used to create the link.

 <a href="http://www.youtube.com/user/w7rdotblogspot/videos">Open me in a new window!</a>


There are 4 basic parts to this code

1. The tags <a> and </a>       ~These are anchor tags.
2. The attribute href       ~This is an attribute of the anchor tag.
3. The site URL      ~Location for the site the link will take the user to
4. Pain text       ~What the user sees on the webpage

Try running the following sample HTML text (Online HTML Compiler)

<html>
<head>
</head>
<body>
Google is a good site. Isn't it?
<a href="http://google.com"> >>Google<< </a>
</body>
</html>