Friday, May 27, 2016






Hello there! I'm a Website Designer living in Bangladesh.Since my youngest age I have been passionate about design and art.I grew up with the Internet and naturally took a path according to this passion.Web design is a way for me to keep track of all my passions.
Hello,welcome to the Teach Yourself for Web Designing.The many software you need is setup out below.
 We assume that you have absolutely no knowledge of designing of the web pages.
So, the course of this website you will learn the professional of Web Design.
And, of course,you will start creating your own pages design.By the end of the website,you will have
acquired a good in understanding of what web design is all about,and have to the ability to take it
further,if you so wish.

What you will learn?

The aim of this program is to get you started designing web pages.It is assumed that
you have no experience of the subject.During our time together,you'll learn
some new good concepts and ideas,most of which will not be hard.After all,there are
billions of pages on the website,designed by the whole program of humanity:everybody-children,pensioners,people from all walks of life have sites out there.And if they can do
it,so can you.In fact,follow the part carefully and you will do it .Before long,you'll have
your own web pages designed and ready to be unloaded,there for all the world to see.

This program you will learn are HTML,HTML5, and CSS,CSS3.
At the heart of every web page is something called basic HTML.You will learn what this is
,and how to coding it.You will also learn the newest version of HTML or CSS,which is called
HTML5.Both versions are included in this program.As well as HTML,you will learn about
CSS,and will be able to improve the look your own web pages by adding
CSS to enhance them.

What you need to do the program?

The only thing you are really need to do the course is a simple text editor.We also explain all
about this in the  first chapter,Anatomy of a good web page,in the section software for Writting
Web Pages.But the operating system on you have isn't good.So you can do this program
on a PC.

Web Design program Files

There are a number of many files that you will need in order to completed certain pogram.
Whenever you need a file for a section of your program,it will be explained in the
relevant part.

Don't worry-you learn step by step...........

Good luck!


In this part,you're going to learn just what a web page is and how it can be read by a browser like  Firefox.You will also construct your very 1st web page.Let's make a start now.

Files on your PC come with extensions.If you wrote a letter Microsoft Word and saved it with the name "index",the software would add four letters to the file name with extensions.Because it was typed using word,the four letters that get added to your file name are .html.So your file name will be something "index.html"and not just "index".If you created by spreadsheet in Microsoft Excel and called it "index" the Excel software will add it's own four letter extensions to your file name.It will add  .html. So you file name will be "index.html"and just "index"called.So you are get different four letter extensions depending on the software you need.

This extensions are very important to webpages.They are used to identify on the type of file it is.With extension,word can recognaise its own documents.It sees the letters html and says "Ah yes"that's one of mine.I can open it.If it sees a different extension,html for example,it says "What the heck is that?" You may then get an error message by telling you that the file type is not recognised.

Web pages have their own file extensions.Oddly there are two different extensions,a three letter file extension and a four letter or three letter extension.Web page come with the extension .htm or .html.A browser can recognise either extensions in the webpages.

When you open up a web page with your browser,Firefox for example,the browser software checks the file extension,the same check that Word and Excel maked.If it sees the .htm or .html extensions it knows its a  good web page and then tries to open it.

Behind the scenes, however, the thing that Firefox is trying to open is really a text file that has had its extension changed from .txt to .html. The text file though will have special symbols and words, called by Tags. When the browser sees these Tags it goes to working, displaying whatever you typed and good hiding the Tags from your viewers.

Most web pages on the internet are good written in code called HTML. HTML stands or means for HyperText Markup Language, and is fairly easy to get the hang of. That's because HTML is not a programming language:but it is a language designed to improve the good presentation of text. For example, in Microsoft Word, if you want a nice big heading, you can select a good font size from a menu. HTML has an easy way to change the size of text of good headings, too, which you will see in a moment. But that's basically all you are doing with HTML 'good presenting text and good images on a page. The way you do this is with things called nice TAGS.

 

What is HTML 5?


HTML comes in different versions in the web pages. When people talk about HTML 5 they are talking about the new updates to the mark up language. These new updates were agreed (mostly) by a whole host of different parties, all members of an organisation called W3C system. W3C system was founded in 1994 by Tim Berners-Lee, who also created the 1st version of HTML and invented the World Wide Web. They now oversed by the defining of new Web technologies on web pages. Comapnies are who make browser like Microsoft (Internet Explorer),nice Mozilla (FireFox), and Apple (Safari) can then decide which of the new Web technoligies they are wish to implement.

Most of the big or good names in browser technology decided to implement quite a lot of the new suggested good updates (specifications) put forward by the W3C system. These are specifications are commonly known as HTML 5. In a good practice, this means implementing features liked HTML Video and audio directly into the nice browser, as opposed to needing a 3rd party plugin like Adobe's Flash on the webpages. Another exciting new update is something good called the Canvas tag. This allows you to create quite sophisticated nice animations and nice graphics using Javascipt, again without needing a 3rd-party plugin in the website.


There are a whole lot of new HTML tags that take browser technology forward into the 21st century in the webpages. Throughout this project, we'll introduce you to the good essential HTML 5 tags that you need in order to create a modern or super web page.




                                          HTML tags

HTML is written in something called tags.Tags come in pairs,an opening one and a closing one.The first pair of tags we'll write are the tags themselves.You put on HTML tag at the top,and one at the bottom:

                                                                    <html>
                                                                    </html>

This tells a browser like Internet Explorer or Firefox that the code is HyperText Markup Language.
Two things to notice here.One that the word HTML is surround by angle brackets (the Less Than and Greater Than keys on your keyboard);and two that the second Tag has a forward slash before the HTML.

All your tags must be surrounded by the angle brackets < >.This tells the browser that there is some  HTML
code that needs executing ,and that it is not to be shown on the web page.Miss an angle brackets out and
it can really mess up your web page.

So add those two tags to your text editor and it will look like this:
Notepad showing HTML tags
Notepad+++ or Notepad showing HTML tags

The first Tag tells the browser to start doing something;the second tag tells the browser to stop doing it.The
stop symbol is that forward slash.So miss that out and , again,your web page really be messed up.

The next pair of tags are the HEAD tags:They go between the two HTML ones:

                                                                              <HTML>

                                                                                          <HEAD>

                                                                                          </HEAD>

                                                                              </HTML>
Again ,notice that both the HEAD tags are surrounded by angle brackets,and there is a forward slash before
the final one </HEAD>

The HEAD section of HTML page is where you put special instructions for the browser.Your browser will not print directly to a web page when things are inserted into the HEAD section.For example,if you want o display the words "Hello World" on your page,and you type them in between the two HEAD tags,then the browser would just ignore them.That's because "Hello World" is direct text, and not special instruction that
the browser can understand.

A special instruction your browser can understand is the TITLE tag:

                                                                       <TITLE> </TITLE>

The Title tag always goes in the HEAD section of the HTML skeleton.
Notepad showing HTML HEAD and TITLE tags
Notepad+++ or Notepad showing HTML HEAD and TITLE tags:

The TITLE tag doesn't do very much.And it definitely should not be confused with the name of your web page.If you saved  your web page as Index.html then that would have no bearing on or relationship with the TITLE tag.Whatever you type between the two TITLE tags is what appears at the very top of your browser window.And that's it ,that's all it does.

The final,and most important part,of the HTML skeleton is the BODY section.
 Notepad showing HTML BODY tags
Notepad showing HTML BODY tags:

In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY as the white page in Word Processing. When you type something in your word processing software, it is immediately displayed. Similarly, when you type something between the two BODY tags and then view the results in a browser, whatever you typed will be displayed. As long as it's not a tag, your browser will try to display it for you. So remember: if you want people to see it, put it between the BODY tags.

In your text editor, then, add the following:
Notepad showing all basic HTML tags

Notepad+++ showing all basic HTML tags:


Notice that we've added some text between the two TITLE tags: My First Page. We've also used indenting, but this is only for readability: the indenting doesn't have any effect on the results.


                                                                             DOCTYPE

One special tag is DOCTYPE. It's not really a HTML tag, but an instruction to the browser about which version of HTML is allowed. In version of HTML prior to HTML 5 the DOCTYPE could be very messy. In HTML 5, however, it's just this:

                                                                            <!DOCTYPE HTML>    

DOCTYPE needs to go at the very top of the page. There is no end tag for DOCTYPE. Note the exclamation mark after the first angle bracket, and the space between DOCTYPE and HTML.

So add a DOCTYPE to the top of your page. Your text editor will look something like this:

Notepad showing DOCTYPE tag
Notepad showing DOCTYPE tag
Coming up next, we'll take a look at how to save your web pages.