HTML

What does HTML stand for?

HTML stands for HyperText Markup Language.



What is HTML?

HTML is a markup language used to create web pages. The web developer uses "HTML tags" to format different parts of the document. For example, you use HTML tags to specify headings, paragraphs, lists, tables, images and much more. HTML is a subset of Standard Generalized Markup Language (SGML) and is specified by the World Wide Web Consortium (W3C).
OK, lets get straight into it.

Getting started

When you create a web page you will usually do something like this:
  1. Create an HTML file
  2. Code some HTML
  3. View the result in your browser
  4. Repeat the previous 2 steps until you're satisfied with the result

Create an HTML file

An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed to a .txt extension).
  1. Open up your computer's normal plain text editor (this will probably be "Notepad" if you're using Windows or "SimpleText" if you're using Macs). You could use a specialized HTML editor such as DreamWeaver or FrontPage if you prefer.
  2. Create a new file (if one wasn't already created)
  3. Save the file as html_tutorial_example.html

Type some HTML code

Type the following code:

<html>
<head>
<title>webdesigning360.blogspot.com</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>

View the result in your browser

Either...
  1. Navigate to your file then double click on it
...OR...
  1. Open up your computer's web browser (for example, Internet Explorer, Firefox, Netscape etc).
  2. Select File > Open, then click "Browse". A dialogue box will appear prompting you to navigate to the file. Navigate to the file, then select "Open".

Explanation of code

OK, before we get too carried away, I'll explain what that code was all about.
We just coded a bunch of "HTML tags". These tags are what tells the browser what to display and where. You may have noticed that for every "opening" tag there was also a "closing" tag, and that the content we wanted to display appeared in between.
All HTML documents should at least contain all of the tags we've just coded and in that order. The <html> tag is kind of a container that all other tags sit inside. The <head> tag contains information that is not normally viewable within your browser, although the <title> tag is an exception to this. The contents of the <title> tag are displayed in the browser's title bar (right at the very top of the browser). The <body> tag is the main area for your content. This is where most of your code will go.

Common HTML elements

There are many HTML elements that can be used in a web page. Some of the common elements are:
  • Comments
  • Headings
  • Bold/italic text
  • Hyperlinks
  • Images
  • Lists
  • Tables
  • Forms
This section of this HTML tutorial will incorporate all of the above elements.
Using the previous file html_tutorial_example.html, add the following code anywhere between the <body> tag and the </body> tag.

Comments in HTML

Comments are a part of the HTML code and is used to explain the code. This can be helpful for other HTML coders when trying to interpret someone elses code. It can also be useful for yourself if you have to revisit your code in many months, or even years time. Comments aren't displayed in the browser - they are simply there for the programmer's benefit.
You write comments like this:
<!-- Write your comment here --> Comments always start with <!-- and end with -->. This tells the browser when a comment begins and ends.




HTML Basic tags, their uses and how to create a webpage?

Just like "follow the bouncing ball", power up Notepad and start with this...
<html>
</html>
Each one of those is called a tag. There is a starting tag and a closing tag. To make a closing tag just add a / to the starting tag. Most, but not all tags have a closing tag. Think of tags as enclosing a bit of text for the browser to interpret. The browser will interpret everything between <html> and </html> as an HTML document. Different tags are interpreted different ways by the browser. Let's proceed...
Every HTML document needs a pair of head tags.
<html>
<head>
</head>
</html>
The only thing we have to concern ourselves with in the head tags (for now) are the title tags.
<html>
<head>
<title></title>
</head>
</html>
And the bulk of the page is going to be within the body tags.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Oh, and one more thing, give your document a title, and put something in the body.
<html>
<head>
<title>webdesigning360.blopspot.com!</title>
</head>
<body>
Welcome to web design.
</body>
</html>
Now save it, not as a text document, but as a html document. Save it as page1.html in a new folder somewhere. If yer a little fuzzy about how to do this then here's what you do...
In your Notepad window click File then Save As.
You will be presented with the Save As dialog box. Make a new folder by clicking the New Folder icon in the Save As dialog box.
The New Folder icon will look something like this --> New Folder icon
Name the new folder whatever you want. Then double click on it to open it. Now you're ready to save the file into the the new folder you just made. Where it says File name: type in page1.html Where it says Save as type: make sure it says All Files(*.*)
Hit return and you're done!
Congratulations! You are the proud parent of a fully functional Web Page! You could upload it to a server and the whole world can see your creation! If you are using Internet Explorer, the file you made might look something like this...
HTML file icon
(if your icon is a little different, it's no biggie)
You should be able to double click on it now and see the results of your handiwork.
Now, it's common for people to get stuck here at saving the file. If you get stuck, just be patient. When you save it, remember where you saved it. and make sure you save it with the file extension .html
Next order of business is to start putting some neato stuff in your page.
The best way to use this tutorial is to run Notepad and two instances of your web browser. One browser window containing this tutorial and the other containing your new page. Just toggle between the three windows. You can open a second instance of your browser in one of two ways...
1) Find the icon of the html file you just made (page1.html) and double click on it. Or...
2) In your browser, click on File/Open File (or something similar to that) and browse to the file (page1.html).
Here your result show as
 


Three quick points before we go on to the next lesson:
  1. What you made is a skeleton HTML document. This is the minimum required information for a web document and all web documents should contain these basic components.
     
  2. The document title is what appears at the very top of the browser window.
     
  3. Of all the things on your web page, the title is what search engines consider most when ranking a page. Choose your titles carefully, and keep them brief.







0 comments :

Subscribe to: Posts ( Atom )