HTML Tutorial Introduction-Part 2
By kripkrip420
 | Amazon Price: $26.50 List Price: $49.99 |
 | Amazon Price: $165.99 List Price: $179.00 |
 | Amazon Price: $24.79 List Price: $49.99 |
Introduction and Welcome
Welcome Back!
Hello there and welcome back to my HTML tutorial. If you haven't already, please take a look at my first tutorial "HTML Tutorial Introduction-Part 1". This is the very first tutorial on the subject, and, if you are just starting to learn, I recommend you begin here.
I also have some suggested software. Adobe Dreamweaver is by far the best (in my opinion) html and more (it can also be used for css, xhtml, php, javascript, etc) editor on the market.
It does come with a hefty price tag (depending on your financial standpoint. To be honest, I think the modest Amazon price (see the very bottom for a link to the product on Amazon) of $139.00 is fantastic and very fair for what this software does! ) however, I do recommend it for use in designing your website.
It will probably cut down your world load by 50% or more. It has a lot of great features and I hope to set up a video showcasing those features. For now, you can probably find something on Youtube to help guide your decision.
I make no money by recommending this software from Adobe. I simply think it is the best and I work with it everyday. If you have any questions, please feel free to send me a message. Thank you!
 | Amazon Price: $0.99 |
 | Amazon Price: $0.99 |
 | Amazon Price: $19.95 |
Introducing Some More Elements!
The head and title Elements
The head and title elements are essentially information elements. They give whomever is viewing your page information about it.
Note that none of this information will be directly displayed on the page itself. The title element will display the title across the top of your tab or, if you run Windows 7, in your task-bar. Instead of reading a few words about what it does, let me show you. After all, a picture is worth a thousand words.
It is important to choose an appropriate title, not just for the people who view your page, but also for search engines such as Google. Google uses your title, along with many other important factors, to discover your web-page and display it in their search results.
Try picking something catchy but don't over do it. Google also pays attention to over advertising, so be careful with that!
As you can see from the images above, the title element is extremely useful. It puts in perspective what your user is looking at.
It is very useful when a user has multiple tabs open in a browser, so again, be unique and make your title stand out! Not only that, but if someone bookmarks your page, the title will be displayed on the bookmark as default.
When searching for your site in their bookmarks manager, users will likely use a short excerpt from your title in the search to help locate your page. Be descriptive!
The only way that it won't be your title that is bookmarked in their bookmarks is if the user manually changes the name of the bookmark themselves.
Obviously, you have no control over this, however, make your website name catchy as well! It is likely that if they rename it to anything else, it will be this.
The Meta Tag/Element
Note that both the <head> and <meta> elements are contained within <html> element. I am showing them first because they are a tad bit important and should be written with care!
The meta tag is rather unique. This will only be a brief introduction to the meta tag as it has a variety of uses I plan to cover in later lessons.
For introductory purposes, our meta tag will be located withing the head element. It will be used to tell the browser some extra information about our web-page. For this instance, we will use it to designate which character set we are using.
<head> <title>Basic Webpage</title> <meta charset="utf-8"/> </head>
As you can see from above, the character set we are designating is known as 'UTF-8'. This character set is very important and it is imperative that you use the meta tag to designate this character set in every web-page you create!
You can see that the meta element is of the unique sort. It has no closing tag and all the information (the attribute and the value) are contained within one tag and so is the forward slash.
Why is UTF-8 So Important?
Have you ever opened up a web-page with unknown characters in seemingly random order that make no sense and don't even appear to be any sort of language? Then you have likely opened up a web-page that does not have UTF-8 designation.
If you remove the UTF-8 character set designation from your web-pages, it will appear the same to you. However, a user from another nation that may be using a different character set to view web-pages in their language will likely get a very nasty surprise.
To them, your web-page will look foreign and full of symbols with no order.
With the UTF-8 character set designation, your web-page will remain readable to viewers from across the world, whether or not they speak or read English.
This is because the UTF-8 character set is capable of handling almost any language and most users will be able to read your web-page.
In fact, UTF stands for UCS Transformation Format and UCS stands for Universal Character Set. Universal being the key word here. For now, this is all you will need the meta tag/element for.
Note that elements such as the meta elements are known as "self-closing elements" for obvious reasons.
There are other elements we can contain within the head element but they will be omitted from this lesson.
The html Element
You may have already seen this element already. It is pretty straightforward. Before we get on to the html element, let me first tell you a bit more about tags. Tags have the following properties;
- All tags start with < and end with >.
- Some text is enclosed withing the above brackets.
- Within a tag is a tag name and, possibly, one or more attributes.
When looking at the html tag, let's break it down into sections. Let us first look at the opening tag.
Example HTML Opening Tag
<html lang="en">
The first thing you notice is the opening bracket. After that, we have the html designation. This is the tag name.
Note that the attribute here is optional and may actually be different than what you may use in the future. The attribute listed here is 'lang' followed by the value 'en'.
This tells the browser what the HTML markup or base language will be written in. In this case, it is English.
The 'lang' attribute designates the language that the markup will be written while the value 'en' specifies that language.
Not all HTML opening tags will contain this information. This is entirely up to the designer.
Purchasing a program such as Adobe Dreamweaver, although expensive, may be a good investment. It will help get you more acquainted with all the elements and their attributes. Now, on to the closing tag.
Closing HTML Tag
</html>
This tag, and tags like it, are all rather similar and easy to figure out. All you have to do to close an element is finish with it's appropriate closing tag.
In this case, it's </html>. With nearly any other closing tag, the text will end with an angled bracket < followed by a forward slash / and then the remaining designating text (html in our case).
Almost all of your HTML markup will be contained within the HTML element (aside from the DOCTYPE element). We will now move onto those.
The Body Element
Above, I said that most everything you write in terms of HTML markup will be contained within the html element. Perhaps, I should be a bit more specific.
The body element (although contained within the HTML element) will contain almost all the markup you write including images, headings, paragraphs, quotations, etc.
From here, you may be able to draw the conclusion that the HTML element is actually the element that contains nearly all markup, but that is up for debate.
Anyways. There is nothing more that I can really tell you about this element, so I guess that pretty much sums it up. Below, you will see an example of how it is used.
Example of Body Element Use
<html lang="en"> <head> <title>Basic Webpage</title> <meta charset="utf-8"/> </head> <body> <h1>Welcome to xyz</h1> <p> blab blagdsg juseless text ghskjdhfs g</p> </body> </html>
Notice how I arranged the markup in a visually appealing and ordered way. This is not nessecary and you can get by without doing this, however, I must recommend doing it in such a mannerism.
This is due to the fact that it is easier to read and locate elements. This makes future updating a lot easier.
Let's Create Your First Very Own Website! (Technically Webpage)
Now that you have the very basics down, you are ready to create your first webpage! This is very exciting! Most people don't even know how to do this! So, let's begin!
Step by Step Process for your First Website!
Step 1: Open Your Text Editor or Markup Editor
Obviously, the first thing you need to do is open your text editor. This can be as simple as notepad or as complicated a software as Adobe Dreamweaver. Again, If you are an enthusiast and want to cut your workload in half at least, I recommend buying Dreamweaver. It will make the entire process of building a website a whole lot easier!
Step 2: Start With Doctype and Head Elements!
Now it is time to enter your first bit of code. The following example will be illustrated using Dreamweaver.
<--! Note that the extra markup within the meta element and other elements is not necessary at this point. It is nice to have, and you may place it within your page if you wish, but, right now, it is not required.-->
Step 3: Enter the Body Element
This is a rather simple step. Do what the below image and code show.
On Your Way!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
Step 4: Enter Supplement Elements Within the Body Element
Although we have not yet talked about the paragraph <p> and heading (<h1><h2><h3>...) elements, they are straightforward to use.
The paragraph element is used for just that, inputing paragraphs. The heading elements are used for accentuating important text and dividing the page into specific subsections.
There are six different heading elements (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) and they work in descending order, with <h1> being the strongest and boldest heading element.
They must all be ended with closing tags. The below image and code are examples of what you may input into these elements.
Insert Whatever Text You Wish in Place of Mine!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<h1>Welcome to XYZ!</h1>
<p>XYZ is the website to go to for all your XYZ needs! It will fulfill your wildest dreams and desires. All I need is your credit card number and $39.99 and you will be well on your way!</p>
<h2>Is This a Scam?</h2>
<p>Of course not! We are completely legit! Don't believe me? That's okay! With a payment of $39.99, you will know I am telling the truth!</p>
</body>
</html>Step 5: Save Your Document and View in Your Browser!
Now that you have created your first simple web-page, you are ready to view it in your browser (you won't be able to view it as a website because, for that, you require a domain name and web hosting, but more on that later.).
Save the document as enternamehere.html. The extension .html signifies that the document is a HTML document and that it should be opened with your default web browser.
Save it in its own specific folder (I named mine "Website Development") and double click to see what it would look like online! And there you have it! Your very first web-page! Congratulations!
Your First Web-page!
Well Done!
Well, you did it! You finished your first web-page! More tutorials will be uploaded soon! Thanks for reading! If you found this tutorial helpful, please vote up and designate it as helpful, or funny or whatever and leave a comment! Thank you! Below are some recommend pieces of software and reading!
Recommended Software
| Amazon Price: $173.99 List Price: $179.00 |
 | Amazon Price: $28.99 List Price: $54.99 |
 | Amazon Price: $169.35 List Price: $399.00 |
Recommended Books!
 | Amazon Price: $15.03 List Price: $29.99 |
 | Amazon Price: $19.95 List Price: $39.99 |
 | Amazon Price: $18.00 List Price: $34.99 |
 | Amazon Price: $21.19 List Price: $39.99 |
 | Amazon Price: $20.50 List Price: $39.99 |
Comments
No comments yet.
