Monday, March 31, 2014

11. HTML in Blogger

Brendan Smith

Brendan Smith


Brendan Smith




















12. HTML Script using all Header tags



13. Reserved

15. HTML Script using underline, italic and bold tags



16. Reserved

17. HTML Script using the subscript tag



<html>
<body>

<p>Chemical formula for Ammonium Phosphate: (NH<sub>4</sub>)<sub>3</sub>PO<sub>4</sub></p>

</body>
</html>


18. Tables

HTML Script

<html>

<head>
<style>
table,th,td
{
border:1px solid blue;
font-family:arial;
font-weight:bold;
color:red;
}
</style>
</head>

<body>
<table style="width:300px">
<tr>
  <td>New Zealand</td>
  <td>53</td>
  </tr>
<tr>
  <td>United States</td>
  <td>15</td>
</tr>
<tr>
  <td>Germany</td>
  <td>4</td>
</tr>
</table>

</body>
</html>









I have changed the border colour from black to blue and the font to bold arial.
Font and border colours have been changed to red and blue.
The information has also been changed to show the amount of visitors to my blog and their countries.

19. Popular Movies of 2012 on IMDB

HTML Script

<html>

<head>
<style>
table,th,td
{
border:1px solid blue;
font-family:arial;
font-weight:bold;
color:red;
}
</style>
</head>

<body>
<table style="width:450px">
<tr>
  <td>1. The Dark Knight Rises</td>
  <td><center>8.6<img src="http://www.gettyicons.com/free-icons/103/pretty-office-3/png/256/star_full_256.png" width="51" height="51"></center></td>
  <td><center><img src="http://ia.media-imdb.com/images/M/MV5BMTk4ODQzNDY3Ml5BMl5BanBnXkFtZTcwODA0NTM4Nw@@._V1_SX214_.jpg" width="92" height="127"></center></td>
  </tr>
<tr>
<tr>
  <td>2. The Hobbit: An Unexpected Journey</td>
  <td><center>8.1<img src="http://www.gettyicons.com/free-icons/103/pretty-office-3/png/256/star_full_256.png" width="51" height="51"></center></td>
  <td><center><img src="http://ia.media-imdb.com/images/M/MV5BMTcwNTE4MTUxMl5BMl5BanBnXkFtZTcwMDIyODM4OA@@._V1_SX214_.jpg" width="92" height="127"></center></td>
</tr>
  <td>3. The Avengers</td>
  <td><center>8.2<img src="http://www.gettyicons.com/free-icons/103/pretty-office-3/png/256/star_full_256.png" width="51" height="51"></center></td>
  <td><center><img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw@@._V1_SY317_CR0,0,214,317_.jpg" width="92" height="127"></center></td>
</tr>
<tr>
  <td>4. Brave</td>
  <td><center>7.2<img src="http://www.gettyicons.com/free-icons/103/pretty-office-3/png/256/star_full_256.png" width="51" height="51"></center></td>
  <td><center><img src="http://ia.media-imdb.com/images/M/MV5BMzgwODk3ODA1NF5BMl5BanBnXkFtZTcwNjU3NjQ0Nw@@._V1_SY317_CR0,0,214,317_.jpg" width="92" height="127"></center></td>
</tr>
<tr>
  <td>5. The Amazing Spider-man</td>
  <td><center>7.2<img src="http://www.gettyicons.com/free-icons/103/pretty-office-3/png/256/star_full_256.png" width="51" height="51"></center></td>
  <td><center><img src="http://ia.media-imdb.com/images/M/MV5BMjMyOTM4MDMxNV5BMl5BanBnXkFtZTcwNjIyNzExOA@@._V1_SX214_.jpg" width="92" height="127"></center></td>
</tr>
</table>

</body>
</html>











































20. A table with atleast 5 rows and 2 columns

<html>

<head>
<style>
table,td,th
{
border:1px solid blue;
font-family:arial;
font-weight:bold;
color:red;
}
</style>
</head>

<body>

<h2>5 Amazing Man-Made Underwater Discoveries</h2>

<table style="width:1550px">
<tr>
  <th>German Bomber Thought To Be Extinct</th>
  <td>The Dornier 17 was a German bomber in World War II that took part in the
  Battle of Britain and the Blitz, despite production being stopped in the 1940s.
  Even though over 2,000 were built, none survived past 1952, when the last were
  cut up by the Finnish air force. However, a Dornier 17 that was shot down on
  August 26, 1940, by an RAF Defiant fighter plane was discovered by divers on
  Goodwin Sands, near Kent, UK in 2008. The plane had been shot down by
  Pilot Officer Desmond Hughes and his gunner, Sergeant Fred Gash, during a raid
  to lure the fighters into the air. Described as being in “remarkable condition,”
  the Dornier 17 was raised from the sea in 2013 by the RAF museum in North London
  as part of a £600,000 project. The two-year restoration will take place at the RAF
  Museum’s site in Cosford, Shropshire, UK.</td>
  <td><center><img src="http://i1.wp.com/listverse.com/wp-content/uploads/2014/04/1-german-bomber.jpg" width="208" height="138"></center></td>
  </tr>
<tr>
<tr>
  <th>The Uluburun Shipwreck</th>
  <td>The Uluburun shipwreck was found accidentally by a sponge diver in 1982 off the
  southwestern coast of Turkey. Dating from the 14th century B.C., the vessel is made
  of cedar and is one of the world’s oldest seagoing ships. Aboard the ship, among
  other cargo, were 10 tons of copper, Egyptian jewelry, ivory, the oldest intact glass ingots,
  and an Italian sword. The discovery has allowed historians to learn a lot more about trade
  in the Mediterranean. The diverse cargo on board shows that the Mediterranean was the site
  of a lot more trading than originally thought. Such is the wealth of knowledge gained from
  the ship that Scientific American voted it one of the 10 greatest archaeological discoveries
  of the 20th century. It was recovered over a period of 10 years in three-month-long excavations
  and was the deepest ship fully recovered at the time—it took a staggering 22,413 dives to bring up
  the entire Uluburun. Today, the Uluburun resides in the Bodrum Museum in southern Turkey.</td>
  <td><center><img src="http://i2.wp.com/listverse.com/wp-content/uploads/2014/04/2-ulubrulum.jpg" width="208" height="138"></center></td>
</tr>
  <th>Two Cars That Could Solve 40-Year-Old Cases</th>
  <td>In September 2013, police divers testing new sonar equipment in an Oklahoma lake discovered
  two cars that had been underwater for 40 years. The police initially came to the conclusion that
  the cars had been stolen then simply dumped in the lake. When the cars were opened, a darker and
  more mysterious reason for their presence came to light—each car held three skeletons.
  The bodies inside one of the cars, a 1969 Chevrolet Camaro, are believed to belong to three
  teenagers who were last seen over 40 years ago: Jimmy Allen Williams, 16, who owned the car,
  and his 18-year-old friends, Thomas Michael Rios and Leah Gail Johnson.
  They had supposedly been heading to a football game the night they disappeared.
  The second car, a 1950s Chevrolet, is believed to have had the bodies of three missing adults
  who were also last seen over 40 years ago: Nora Duncan, 58, her friend Alvi Porter, 69,
  and their friend Cleburn Hammock. It will take a few years for forensic experts to identify
  the skeletons with complete certainty, but after 40 years, the find gives tantalizing hope for
  closure to the families of those missing.</td>
  <td><center><img src="http://i2.wp.com/listverse.com/wp-content/uploads/2014/04/3-cars.jpg" width="208" height="138"></center></td>
</tr>
<tr>
  <th>The SS Mahrattas</th>
  <td>Goodwin Sands, off the coast of Kent, has been no stranger to shipwrecks; the Sands
  are the narrowest part of the English Channel, the world’s busiest shipping lane.
  There are 1,000 recorded shipwrecks in the area, with many more potentially remaining undiscovered.
  Two such ships form one of the strangest stories of nautical disasters—the two SS Mahrattas.
  The first SS Mahratta was launched in 1891 and ran aground in 1907 after taking the wrong course.
  After the locals had helped themselves to her cargo, the wind caused the ship to list and sink.
  The second SS Mahratta was launched in 1917 and ran aground in Goodwin Sands in 1939.
  When salvage crews found the ship, they discovered it resting above the first Mahratta.
  What makes this story even more incredible is that both ships were on the same route from Calcutta
  to London. In 2008, a ferry struck one of the two in bad weather.
  It is unknown which of the two Mahrattas was responsible.</td>
  <td><center><img src="http://i0.wp.com/listverse.com/wp-content/uploads/2014/04/4-mahratta.jpg" width="208" height="138"></center></td>
</tr>
<tr>
  <th>An F-4 Fighter Jet</th>
  <td>Buried in the sands off the coast of the Philippines in Subic Bay, 40 meters (130 ft) underwater,
  is an F-4 Phantom fighter jet. When divers found the wreck, the lack of crash damage raised the
  obvious question: How did it get there? The sea floor in the region is no stranger to
  airplanes; plenty of planes belonging to Allied and Japanese forces fought in the region during
  World War II. But the discovery of a relatively modern fighter jet—the F-4s were in production
  from 1958 to 1981—is rare indeed. One theory is that the plane was simply pushed off
  an aircraft carrier. Until more recent times, it was common for aircraft that were damaged
  to be stripped of all useful parts and pushed off the side of their aircraft carrier to free up
  deck space. Of course, scuttling a multi-million-dollar fighter jet is frowned upon today, but those
  were different times. Another possible theory is that it was a victim of the fire aboard the
  USS Forrestal in 1967 during the Vietnam War, which resulted in damage to seven F-4 Phantoms.
  The truth may never be known, but it’s an interesting mystery.</td>
  <td><center><img src="http://i1.wp.com/listverse.com/wp-content/uploads/2014/04/5-f-4.jpg" width="208" height="138"></center></td>
</tr>
</table>

</body>
</html>



21
21.1
22HTML list method of 6 different HTML tags

<!DOCTYPE html>
<html>
<body>

<h2>6 Different HTML Tags</h2>
<ul>
  <li>Table</li>
  <li>Head</li>
  <li>Br</li>
  <li>Body</li>
  <li>P</li>
  <li>Video</li>
</ul>

</body>
</html>













<!DOCTYPE html>
<html>
<body>

<h2>Circle Bullets List of 6 Different HTML Tags</h2>
<ul style="list-style-type:circle">
 <li>Table</li>
 <li>Head</li>
 <li>Br</li>
 <li>Body</li>
 <li>P</li>
 <li>Video</li>
</ul>

<h2>A Nested List</h2>
<ul>
  <li>Table</li>
  <li>Head
    <ul>
    <li>Br</li>
    <li>Body</li>
    </ul>
  </li>
  <li>P</li>
  <li>Video</li>
</ul>

</body>
</html>















Monday, March 3, 2014

9. HTML Editors

Notepad++

"Fast, Versatile, Fully Customizable! LOVE IT!"

Pros
I make my living with it. It does everything I want it to do - from coding html, php, javascript, auto-syncing with the server, search and replace through multiple files (very fast), countless plugins, easily customizable... I can't say enough. Loads quick, very very rarely crashes. Take the time, learn it's ins and outs. Customize it for you. Consider using it with Texter (auto complete 3rd party tool) for the ultimate coding platform.
Cons
Would like a slightly more advanced FTP plugin. The NPPFTP plugin is good, but would love to have a bulk file upload option.
Review on CNET By luminaia

What do I think of notepad++?
Notepad++ is a brilliant lightweight text editor ideal for creating an html script due to its ease of use, speed & low system load.
Html may be defined as the input language which is very helpful when it comes to writing html as the tags are a different colour to all other text which allows for quicker detection & correction of any errors made during writing the script.
Notepad++ is also my favourite because you are able to run an html script directly from within the gui by navigating to run and launching in your preferred browser.
A shortcut may also be used to launch the script from within the gui if it is preferred.



NoteTab Light
"Terrific"

This is "as far as HTML is concerned" the perfect editor for me. I hate having to put in a lot of basic things by hand and this cuts all those corners for me, allowing me to get to the fun stuff.
It has a capture mode for web addresses, allowing you to add it into the document automatically when highlighting, or copying the address, now that's cool.
If you like smileys, this has enough smiley syntax for near anyone. There is really just too much to put into a review, so I suggest trying it out. This is the light version and I doubt many of us would be able to tell by the features.
It seems you can save as near any type of document you can think of which is an added bonus, not to mention it handles far more lines of text than notepad.
It's going to take a while to truly dig in to this program (I've only scratched the surface, if that) but currently, I agree with the masses, a definite 5 star.
Review on Snapfiles By Gimpguy

What do I think of NoteTab Light?
NoteTab Light is perfect for html and I even find it preferable to notepad++ because NoteTab is a program that focuses more on html based content rather than other programming languages.
NoteTab has many useful tools, one of which I find particularly helpful is the 'HTML-AutoReplace' feature as it allows you to double click on tags(in the sidebar) which will then place them into your html code.
CSS tags may also be placed in.
This feature not only allows you to save a lot of time but also eliminates the chance of making an error in your tags.




10. Benchmark Browser Test
Do you think this is a fair assessment? Yes I believe the tests done by Tom's Hardware to be reliable and free from bias.
Does it include all the features important to web users? Yes, the vast majority of web content has been tested with each browser.
Did it change your opinion of your most-used browser? No, it didn't change my opinion of my favourite browser. Personally I find Google Chrome to be a lot more efficient than Firefox at starting up and loading pages, among other things.

Tuesday, February 25, 2014

Tuesday, February 18, 2014

2: What is HTML?
HTML stands for Hypertext Markup Language
HTML is a set of Tags with opening and closing symbols which are intended for use with a web browser, such as chrome.

An example of an HTML Script


<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

3: Define Tag, Element and Attribute


Tag: A tag is the opening and/or closing of an HTML script, eg <p> to open and </p> to close.


Element: An HTML Element is everything from the start tag to the end tag, eg <p>My first paragraph.</p>


Attribute: Attributes are what is within the tag and they help provide additional information about the element, an example of this is <p>.

<p> is used to define a Paragraph.


4: Hello World!

Typing <p> Hello world! </p> into a notepad and saving it as an html file results in a web browser(chrome in this case) displaying the text "Hello world!" when opened.








5: Tab Titles 

The following text in an HTML script makes the text "My First Page" appear in the tab title.

<html>

  <head>
    <title>My First Page</title>
  </head>
</html>








6: Replacing "My First Page" with my name


<html>

  <head>
    <title>Brendan Smith</title>
  </head>
</html>







6b: Same as 7

6a: Very Simple HTML Script

<!DOCTYPE html>
<html>
<body>

<h1>Brendan Smith</h1>

<p>This is a body paragraph.</p>

</body>
</html>

<!DOCTYPE html>












6d, e & f: Comments

<!DOCTYPE html>
<html>
<body>

<!-- Comments are made by using ! in the opening tag and are not required in the end tag -->
<p>This is a paragraph.</p>
<!-- Comments are helpful for debugging lines of HTML code as you may quickly change them to and from a comment -->
<!-- Comments are also helpful to keep track or make a note of your HTML coding -->

</body>
</html>