Warning: include_once(/home4/barak/public_html/wp-content/sunrise.php): failed to open stream: No such file or directory in /home4/barak/public_html/wp-includes/ms-settings.php on line 38

Warning: include_once(): Failed opening '/home4/barak/public_html/wp-content/sunrise.php' for inclusion (include_path='.:/opt/php71/lib/php') in /home4/barak/public_html/wp-includes/ms-settings.php on line 38
Learning HTML Archives - Temp3.net Web DesignTemp3.net Web Design

Temp3.net Web Design

Website design, SEO and Marketing FREE Tips and Techniques

By

Structure of HTML Document - Part I

The usage of tags inherits the idea of tree structure in HTML document. Tags can be cascaded to create elaborate trees representing a single document. Going back to our previous example we can add an emphasis inside our paragraph as follows:


<p lang=“en-us” id=“hello-world”> 
	Hello <em> World! </em> 
</p>

Notice that the tag ‘em’ is used for emphasis, an italic font in most browsers. Also notice that the code is a bit more spread out. It is a good idea to pick up good code style habits from the start. Extra white space in HTML does not effect the document in the web browser. Coders tend to follow the style the of a tree, but that is not necessary for your code to work in a web browser. In HTML, white space is ignored by the browser. All HTML documents must be encapsulate with the main tag ‘html’. Something that looks like this:


<html>

	<p lang=“en-us” id=“hello-world”> 
		Hello <em> World! </em> 
	</p>

</html>

Before the first ‘html’ tag, normally appears a ‘doctype’ tag. This tag tells the browser what version of HTML it should expect. In older versions of HTML this was a long paragraph that developers normally copy pasted. The new standards, HTML5 shorten the need. It is my recommendation that if you are just starting with HTML go ahead and start with HTML5, but be aware of older versions.

HTML5 doctype:


<!DOCTYPE html> 

HTML4.01 had a number of options, one example you can find below. There are multiple versions in HTML4.01, for more examples please refer to HTML doctype reference.


<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

So if we go back now and revise our HTML sample code, we will end up with the following:


<!DOCTYPE html> 
<html>

	<p lang=“en-us” id=“hello-world”> 
		Hello <em> World! </em> 
	</p>

</html>


Getting comfortable with the structure of HTML is not a difficult task. It might take some getting used to, but it is not impossible. Further information about the structure of HTML document is soon to come. If you cannot wait until then, I suggest you read the Basic Structure of a Web Page. The next step in learning HTML is to move on to practice. Until now I have shown you HTML, but we have yet to write some and see the results in the browser. For this next step you will need only 3 things. A web browser, which I can assume you have. A text editor, any kind will do. Finally you will need patient. No one learns something new all at once. Proceed with your own pace.

As a final thought about text editors. You do not need anything fancy at this point. I am aware that many web developers and designers will recommend expansive software. The truth is that when you are starting off you do not need all that. There are free option for text editors that can do all you need at this point.

By

Starting with HTML

HTML stands for HyperText Markup Language. HTML is not a programming language per se, it is a markup language. If you want to learn about the differences and more about what programming languages are I suggest you read the article, Programming Languages for non-programmers. In a nutshell, markup means that the text in the file is encapsulated with instructions on how to behave. In the case of HTML, the behavior of the text is how it should appear. HTML markups are called tags. Think about the tags as a box bounding the text. Keep this bounding box on mind every time you need to work with HTML. Every tag comes in two pairs, an opening tag and a closing tag. An opening tag will contain a character or string between triangle braces. A closing tag will contain the same character or string but will begin with a single forward slash. For example:


<p> Hello World! </p>

The ‘p’ character indicates that “Hello World!” is a paragraph. We will examine more tags soon, but it is necessary to understand the nature of tags before we move forward. At a more closer look the character or sting inside the tag are called elements. Elements sometime come ‘naked’ as the example above. Elements may also contain attributes that can can provide more information about the element. Going back to the same example, we can add a language attribute describing the specific language of the text.


<p lang=“en-us”> Hello World! </p>

Notice that the closing tag does not need to contain extra information. Only the opening tag contains attributes to enrich the element. We can also add multiple attributes. Adding an ‘id’ attribute will name our paragraph. That way we can assign functionality to a specific a paragraph. We will use this later on in our quest through HTML.


<p lang=“en-us” id=“hello-world”> Hello World! </p>

If you are comfortable with the idea of tags, elements and attributers, we can move forward to the structure of an html document. Before rushing forward, note to those of in a rush. Learning any programming language takes time. This means time spent in trial an error. Writing code and observing the results. Set aside the time you require to learn a lesson at a time.

A note about HTML5. The new HTML5 standards introduces new tags, elements and attributes. However, the principles of the language remain the same. I will try to point out most of the differences, but at whole I will try to comfort with HTML5 standards.

A final note about what all this means in the greater scheme of things. Web browsers, of all kind convert HTML according to the tags and display them. Out of all the programming languages that run web services, it all comes down to HTML. That is what our browsers know how to translate into the beauty virtual net that makes the World Wide Web.

Things to take away:

  • Markup Langauge
  • Tags, Elements and Attributes

For further readings I suggest looking at the HTML tutorials from w3schools and looking over the HTML reference from sitepoint. Both are very good recourses that will help you, not only now, but any time you deal with HTML code.

Powered by WP Robot