HTML has always been around to be the foundation of a Website. Today, it's often just that, a Corner Stone to which you might base your Website off of. In the previous article, we have gotten a basic picture of what we want our Website to be. We have learned that the key to a Successful Website lies in the Target Audience.
For someone that has an interest in Travel and Ancient Architecture, my Target Audience might be just that, people who have an interest in Architecture. I mean, who can resist the lure of Pyramids, Temples, and Old Churches? There is something about the style, the structure, that makes it a Lost Art.
Enough of the rambling, let's dive into our first set of Code shall we? It's easy, I promise. The first Tag that you will learn to use is the <HTML> Tag. Note: it is not necessary to Capitalize the Tag, Web Browsers can read the Tags just fine. The <HTML> Tag tells the Web Browser that what it is reading, is an HTML Document. That means that it will display all the information between the Start Tag <HTML> and the End Tag </HTML>. It is important to remember to Close or End your Tags with a </> Forward Slash. You can start by opening up a Text Editor such as Notepad or Notepad++. Always remember to save your document as an index.html file.
<html>
</html>
Now, we're going to add the Header Tag. Header Tags are often used to help identify the website, within these tags are usually the Title Tag the Header Data. Header Data often comes in the form of an Image, which often times makes it harder for Search Engines to Index the Website. Tip, if you want better Search Engine Indexing, optimize your website Header to include your Website Motto with keywords geared towards your Target Audience.
<html>
<header>
</header>
</html>
Simple enough right? Next, we're going to add in a Title Tag. Title Tags are what shows up at the top of your Web Browser and helps to identify the Website. It's also helpful in Search Engine Results, to help Rank your Website with Keywords. Keywords are what the Search Engine, such as Google, looks for to rank your Website. Let's add that Title Tag...
<html>
<header>
<title>Awesome Ancient Architecture</title>
</header>
</html>
Now, let's add a Banner to that Website as well as that Motto Text below the Banner Image. In the text below, we have added a few new tags that are relatively easy to remember. You may notice the <br> or Break Tag. This Tag is used to bring down the line of Text underneath the Image. Otherwise, the Text would be aligned to the right of the Image. Above that, we have the Image Tag or Image Source Tag. The Alternate Tag inside of the Image Source Tag, is used to help Search Engines Index your Website.
<html>
<header>
<title>Awesome Ancient Architecture</title>
<img src="aaabanner.png" alt="Awesome Ancient Architecture">
<br>
Bridging the World of the Old and New.
</header>
</html>
Pretty easy so far right? When you add a Banner or any File to your work, you'll want to make sure that your index.html File, as well as any images, videos, etc, that are associated with it, are stored within the same Folder. It is often best practices to create a Specific Folder at the start of your Project to house all of the Documents that you will be working with.
Next, let's work with the Paragraph Tag or the <p></p> Tag. The Paragraph Tag is a simple way for your to structure your text within your document. Especially if you want groups of text to appear in different areas of your Website. It's not forget to use the Break Tag to separate our work. We'll start with an introduction. But first, we must introduce the Body Tag or the <body></body> Tag. This Tag is where all your Text for your Website will appear, as well as all of the Video Content, Images, and anything not included in the Header Tag.
<html>
<header>
<title>Awesome Ancient Architecture</title>
<img src="aaabanner.png" alt="Awesome Ancient Architecture">
<br>
Bridging the World of the Old and New.
</header>
<body>
<p>Welcome to the wonderful world of Travel and Ancient Architecture.
Here, you will find Videos, Images, and Information, on Temples, Pyramids,
and Old Churches of the Medievil Times and beyond. If you enjoy what you
see here, don't forget to share our site with your friends. After all,
Knowledge is Power and it's meant to be shared.</P>
</body>
</html>
Well, this is what the final product looks like. I think we've touched quite a bit in the way of Getting The Basics in Stage Two. I hope you will continue to join me in this series/mini series titled Learn HTML Today. If this article has helped you in any way, please be sure to share the article on your Social Networks. Don't forget to to follow us on Google+. Facebook is coming soon.
The following is a simple promotion that gives you the opportunity to win items by getting referrals to come and sign up for their Website. The Product Selection is decent and currently, I'm in run for a Recon Jet Sports Head Camera/Glasses. Definitely worth looking into.
Sign up below and do a free trial, then refer 28 others to do the same and then get a free iPad in return. Tip, Prepaid Credit Cards do wonders. Been wanting to try out Netflix? Now is your chance to try it and refer others to do the same.
No comments:
Post a Comment