HTML OVERVIEW
In previous Lesson, we looked at how we can write our posts in html form! along with a snippet that introduced you to the basic concept of html...
Now that you've a basic understanding what html is in theory,today's lesson will take you through a mechanical appearance and structure of an html document! If you didn't go through our previous lesson on Writting blog posts in html,We would humbly ask you to return to our previous lesson,as in this tutorial will only keep the continuation on how to work with your htmls!...
HTML TAGS
As already said in Previous lesson, an html is a language used to structure our document sent to the web browser! To achieve this,an html uses tags...
What is a tag?
simply explained, "A tag is a method for structuring a document" for a tag to be present,it requires this "<" and this ">" characters! A tag contains at least the following :
- A tag name : A tag name is a name that calls for an use in a document! For example,anything that goes between "<" and ">" is a tag name!... Look at this for clarity:.in this case,body is a tag name!
- Tag attribute : A tag attribute is just the string of characters that describes a tag! tag attribute are so many,that we are not going to deal with them right now,but for you to capture the concept,look at this example: "< body class="" >"! In the example above,the string "class" is the explicit example of a tag attribute!
- An attribute value : An attribute also contain values... and these are what describes really what a tag is... In our previous example,a tag value would be for example,good! Example : "< body class="good" >" This is how an html is! For better understanding on html attributes,think of html tag as a person,and the attributes as adjectives! Then look at this : < person height="2m" >! In this example,a person is a tag,height is an attribute and thus 2m be an attribute value!
- Tag content : This is the content of the tag... a tag content is anything that goes between an opening and closing tag!
CLOSING AND OPENING TAGS
In actual scenario,tags come in two variants,Opening and Closing Tags
An opening tag is a completeness of a tag name,tag attribute and value! An opening tag looks like this : "< html >" ! A closing tag on the other hand may be defined as a tag that closes,or shows the completeness of a tag! a closing tag looks like this : ""
Anything that goes between opening and closing tag is called a tag content... The following example shows a complete tag!
"< body > hello < / body >"
AN HTML SKELETON
An html skeleton is a basic structure that makes html! an HTML skeleton looks like this :
< html >
< head >
< title >
< /title >
< /head >
< body >
......
< /body >
< /html >
HTML SKELETON DISCRIPTION
Now,let's discribe each of this tags one-by-one
DOCTYPE HTMLThis is an initial tag in html document! Most of the tutors who teaches on html don't like to explain much on this tag... This tag is so crucial as it describes to what document are we dealing with! This tag simply means Document type and it finishes by saying html,meaning,the type of document we're going to deal with is an HTML document!
< HTML >
This is the actual HTML tag in html. Note that,unlike the DOCTYPE HTML which can be left out in a document,this tag is always there! This tag holds all the document contents in html including body itself! Note that This tag's closing tag is found far most of your document,the bottom of the document...
< HEAD >
This is the head part of your document! This part contains the meta data about your page! It contains < title >... < /title >,< style > and other programmable web languages such as Javascript etc...
This part of HTML tag comes after the HTML itself! After all the contents are placed in head,as by syntax,you can see the closing tag of it at its end,the < /head > tag
< TITLE >
Now,here is a title... This is the part that contains the title of your document... For example,lets write a page of this site itself! It would have been as follows :
Now,as you can see from above code,the < title > defines the title of your website page... and its closing tag is < /title > Note that the title of your page is the name that is displayed in the browser bar as you are viewing the page's url< BODY >
Going along with our skeleton,we meets a body tag!
as the name implies,the body tag is the body of our page. It contains all the essential information that is written in our pages. It contains the headings,paragraphs and the like!
< H1 >
This tag is a heading of our body... It describes the content that goes after it,just as you do with usual document.
< P >Now,having written your heading,you will need some paragraphs that will render your document readable! The < p > tag describes that you need some paragraph... Loll,to have a paragraph on your document,just put a < P > tag on the place where you want to put it... The < /p > That comes after the contents of the < P > tag marks the end of your document paragraph declaration!
< /BODY > AND < /HTML >Now,having known of the HTML basic tags,you can see at the very end of your document this two tags!
The < /body > tag marks the end of your body contents,say closing the contents of the body! and the last is a < HTML > tag... as we said earlier that all the contents of html goes in the main < html > tag,this < /html > tag is the last of all your document contents! It simply tells the browser that our html document ends here
Reaching this step is the basic structure and syntax of all html documents...
In the next aticles,we will start writting some Intermediate HTMLs... Only keep following our articles! Would you have a question,or would need some help,the door is open. feel free to utter your word in a comment box below!
Presented by: AMIN MATOLA.
Amin Matola,is an experienced and passionate blogger!
He writes articles on blog contents.
He is a student at the JP2 Leadership and IT Institute.
He studied website and other IT related scenes.
Amin is also eagerly passionate programmer.
He likes browsing internet using self-built web browsers...
He is also Search Engine Optimisation(SEO) coscious...
No comments:
Post a Comment