Beginners’ HTML – Part 1

HTML is by far the most popular language on the Web today. Without it, the Internet wouldn’t be anything like it is now. HTML can be thought of as the building blocks of the Internet – like the bricks and mortar of a house. So it’s a must for every Web developer to learn!

There are a number of different HTML standards to which people can choose to conform, but we’ll use HTML 4.01. This isn’t the newest standard, but it is the one which is the most widely adopted across the Internet

Getting Started

There are a few things you’ll need in order to learn HTML:

A text editor (e.g.: EditPlus, Notepad, etc. but not WordPad or Word)
A browser (e.g.: Internet Explorer, Opera etc)

You’ll code your HTML in your text editor, and then view it as it takes shape in your Web browser. I’ll be using EditPlus as my text editor, and Internet Explorer 5.5 for my browser throughout this tutorial, but you’re welcome to use whatever you’re comfortable with.

HTML is made up of a simple structure of ‘tags’ (enclosed in < and >) and text. The tags control the layout and appearance of the page, and are interpreted by the browser when the document is viewed. All tags are in the format “<name>” – and anything outside of the angular brackets is presumed to be text that you want the visitors to see. For every tag (with a couple of exceptions – but we’ll come to those later), there must be a closing tag. This is exactly the same as the opening tag, except with a “/” before the name of the tag, for example “</tag>“.

Every HTML page must conform to this basic layout:

<html> <head> <title>Title</title> </head> <body> content </body> </html>

Now this may appear confusing at first – so let’s go through it line by line:

<html> This is the opening tag of every HTML page - it tells the browser that the page uses HTML.
 
<head> This tells the browser that the header has started. The header contains information about the page that doesn't display in the main body of the browser window.

<title>Title</title>	The <title> tag tells the browser that the text that follows is the title of the page. It will appear in the title bar of the browser and also in the task bar (next to the start menu on Windows computers).

</head> This signifies the end of the header - anything that appears after this, and is not a tag, will be displayed to the user.

<body> This is the start of the main body of the page.

</body> The end of the main body of the page.

</html> The end of the entire Web page.

See? It’s not that hard after all! That is (or should be) the basic layout of every HTML page. That page is well-formed (with indenting) and fully compliant with that latest W3C standards.

Formatting and Structure

Now that you know what a basic HTML page looks like, it’s time to put some text in and see it all come together. So, load up your text editor and type (or cut and paste) the structure we looked at before into this blank page. Then add some text into the body of the page. It can be about whatever you like – format it as you would if you were typing into Word. Afterwards, you should have a page basically resembling this:

<html> 
  <head> 
    <title>My First Web Page</title> 
  </head> 
  <body> 
    Welcome to my first Web page! 
 
    The purpose of this Web page is to learn some HTML so that 
    perhaps I can make a really fantastic Web page 
    later on. 
 
    Please come back and visit soon, 
    James 
  </body> 
</html>

Now, save the file as “webpage.html” or something similar. If you use Notepad, you’ll need to put the file name in quotes (“filename.html”) for it to save correctly. Then double-click on the file in Windows Explorer â€“ it’ll open your chosen browser, probably Internet Explorer. But, rather than the nicely-formed, well-paragraphed text you typed earlier, all of the text will display on a single line. This is because HTML takes no notice of formatting within the code itself. You can get past this problem with some more HTML tags, namely these:

 This tag creates a paragraph of text, leaving a blank line before it.
  This is the line break tag – it starts a new line. This is our first example of a tag that doesn’t need a closing tag (i.e. there is no such thing as a  tag).

So, with the tags applied, your page should look something like this:

<html>  
  <head> 
    <title>My First Web Page</title> 
  </head> 
  <body> 
    <p> 
      Welcome to my first web page!   
    </p> 
    <p> 
      The purpose of this web page is to learn some HTML so that 
      perhaps I can make a really fantastic web page 
      later on. 
    </p> 
    <p> 
      Please come back and visit soon, 
      <br> 
      James 
    </p> 
  </body> 
</html>

Now, there are a few things you’ve probably spotted there. I’ve included both  and  tags to signify the start and end of the paragraphs. While this isn’t completely necessary, it is good practice to do so and means you will be fully compliant with future HTML standards. I’ve also indented the code for neatness, again something that certainly isn’t necessary but I always do it to make the code easier to read and modify.

Now you know how to construct a basic HTML page, how to add in line breaks, and which tags are required to create a normal Web page. The next step is to look at using different fonts and font sizes, as well as formatting the color of text in your pages.

Fonts and Text Formatting

Now that you can create a basic Web page, it’s time to make it look a little nicer. This could involve using your own fonts, colors and text sizes to make the page more attractive to the reader.

All font changes are done with the  tag. There are a number of attributes you can use with the  tag to control the appearance of the text. An attribute is contained within the tag itself (e.g. ). The tag is “font”, the attribute is “color” and its value is “red.” Attributes are used in many different tags, not just fonts.

There are a number of different tags you can use to specify various aspects of the font:

 This lets you specify the actual font that will be used. However, the font will only be displayed if it exists on the user’s computer, so choose a popular font that most visitors will have.
 This allows you to specify the color of the text. Most standard color names (eg red, blue etc) will work, though there are special codes that provide a wider range of colors. We’ll go into more detail on those later!
 This attribute lets you specify the size of the text. They are not the sizes you would use with your word processor, but special sizes – so you might have to experiment a little to get the size you want.

You can also use combinations of the attributes, for example:

<font face="Times New Roman" color="yellow" size="4">

So now let’s add some formatting into our page. Here’s the page as it is now, without any formatting:

<html> <head> <title>My First Web Page</title> </head> <body> Welcome to my first Web page! The purpose of this Web page is to learn some HTML so that perhaps I can make a really fantastic Web page later on. Please come back and visit soon, James </body> </html>

And with fonts and colors:

<html>   
  <head>  
    <title>My First Web Page</title>  
  </head>  
  <body>  
    <p>  
      <font size="4" face="Verdana, Arial" color="red">  
        Welcome to my first Web page!    
      </font>  
    </p>  
    <p>  
      <font face="Arial">  
        The purpose of this Web page is to learn some  
        HTML so that perhaps I can make a really  
        fantastic Web page later on.  
      </font>  
    </p>  
    <p>  
      <font face="Arial">  
        Please come back and visit soon,  
      </font>  
      <br>  
      <font color="blue" size="+1">  
        James  
      </font>  
    </p>  
  </body>  
</html>

Now you may notice a couple of unfamiliar things in that block of code. Firstly, the 7th line contains an unusual value for the font face:

<font face="Verdana, Arial">

This tells the browser to use Verdana as its first font option, but if Verdana is not installed on the viewer’s computer, then to try and use Arial instead. If neither Verdana nor Arial are on the user’s computer, then the browser’s default font will be used (often something like Times New Roman).

The second trick used is in the final font tag. I have used: . This tells the browser to make the font size one bigger than the normal font size. The default font size can vary across different browsers and computers, so it is best to use this technique (called relative size) to ensure that everyone gets the right size of text. You can specify +1 to make it bigger and -1 to make it smaller.

Our page is beginning to take shape now. However there are still a few things missing, such as bold and italics. You can set text to be bolded or italicized, with – you guessed it – more HTML tags!

 text  Bold
 text  Italics
 text  Underline

So here is the final page with everything added in:

<html>   
  <head>  
    <title>My First Web Page</title>  
  </head>  
  <body>  
    <p>  
      <font size="4" face="Verdana, Arial" color="red">  
        <u>  
          Welcome to my first Web page!    
        </u>  
      </font>  
    </p>  
    <p>  
      <font face="Arial">  
        The purpose of this Web page is to learn some  
        HTML so that perhaps I can make a really  
        fantastic Web page later on.  
      </font>  
    </p>  
    <p>  
      <font face="Arial">  
        Please come back and visit soon,  
      </font>  
      <br>  
      <font color="blue" size="+1">  
        <u><i>James</i></u>  
      </font>  
    </p>  
  </body>   
</html>

There is one other technique for changing the appearance of your pages that you should know about: Cascading Style Sheets, or CSS for short. CSS is an extremely powerful but fairly complex way of specifying all types of formatting. It is too in-depth to go into here in this tutorial, so I am going to point you in the direction of this tutorial to learn CSS.

The article is CSS is easy!, and is written by Kevin Yank. It should help you to grasp a basic understanding of CSS and hopefully use it in some of your pages. I have used the alternative to it (i.e.  tags) in this tutorial because CSS is not compatible with some older browsers (versions 3.0 and previous).

In the next part of this series, we’ll learn how to create links to other Web pages, and to other parts of our own pages.

Source Link: http://www.sitepoint.com/beginners-html-1/