how to HTML learning gull tutorial
Lesson 1
Welcome to the HTML tutorial!
Soon you shall be on your way to building great Webpages and vast Websites, but first lets go over a thing or two about what a "Web Page" is, how they work, and what we can do with them.
For this tutorial you will need:
An Internet ready Computer
A Web Browser
Because you are reading this on a Web Page, I will assume that you have both of these things.
Let's jump right in to the Introduction!
In the beginnings of the Internet, it was very hard to exchange data. So with great vision, Tim Berners-Lee created a way to connect text on the Internet through Hypertext Links (References to other text on the Internet). This was'nt a new idea, but his Hypertext Markup Language (HTML) was very popular, and caught on better than other developer's projects.
HTML was not a "Programming Language" per se, but rather a Scripting Language that marks up the page with formatting commands. Your Web Browser then reads these commands and shows the accessed page on your screen.
Due to the popularity of the Web, some programmers wrote Web Browsers that could view graphics, and a wide range of content. Thousands of people started to create web pages, which ranged from personal "homepages" to business information pages.
Today, millions of people access the web. There is now a diverse medium of content on the web. Before going on to the next lesson, I suggest that you go out and view many pages that are out there on the Web. As you are viewing them, to view the HTML that they are made of click View|Source, if you're using Microsoft Internet Explorer or View|Document Source with Netscape Navigator.
Lesson 2: Structure and Method
I'll bet you're thinking "Structure and Method? What is this... some kinda textbook???" Well, no, in this lesson you'll be learning about the Structure of HTML and the Method that is used to make them.
HTML is not coded with some special "HTML tool", and you do'nt even need some special program to make HTML pages, like Microsoft FrontPage (In fact, I discourage their use until you know the ins and outs of HTML code). All that you DO need is a simple text editing program like Notepad.
You're probably thinking "Wait just one second, you're telling me I can code up another Yahoo! with my puny little Notepad? Yes! That's part of the beauty of HTML! How do we do this? Keep reading!
When you make a Web page the first thing you need to do is gather your content. For our first page ever, we'll be making a informative page about ourselves. For example, here is mine:
Welcome to waqar Web Page!
Hi, My name is waqar . I built this web page because I love coding in HTML! I could do it all day long!
I am a lover of programming languages, and love to design and produce web content.
Lesson 3: Basic Tags and Formatting
So you're probably thinking "Okay, I knew that stuff. Teach me something I don't know." Okay, be patient. I think this lesson will give you your fill.
HTML is a language that is coded with tags. They are called tags because they tag parts of a webpage for formatting in a browser. HTML tags are very easy to spot in web page source. They are the things shown that start with a < and end with a >. Most HTML tags have an opening tag (<tag>) to start formatting text and a closing tag (</tag>) to end the formatting.
There are some HTML tags that are absolutely necessary in an HTML page. Those tags are as follows:
<HTML>' and </HTML>': Usually put at the top (<HTML>) and bottom (</HTML>) of an HTML page. This tag tells the browser that this page is an HTML page.
<HEAD> and </HEAD>: This is where information about the entire page is placed.
<TITLE> and </TITLE>: This tag needs to be put between the <HEAD> and </HEAD>. This tag gives a name for your page. The name won't be shown in the the text of the page, but rather in the top of the browser window.
<BODY> and </BODY>: This tag defines the body portion of the page. Later we will learn how to use the <BODY> tag to add background colors, text colors, and margins.
Now that we know the required tags, I'm going to put my text that I gathered in the last lesson in the proper web page format.
<HTML>
<HEAD>
<TITLE>Justin's Homepage</TITLE>
</HEAD>
Yours Truly,
Waqar
</BODY> </HTML> But wait 1 second! I typed that, and opened it with my browser, and it does'nt come out like that! What? Does it come out like this:
Yes? Ohmygod! We forgot the formatting tags!
The <p> tag can add paragraph spacing to your page. The <BR> tag adds a single line break to your page.
These tags do not need a <p> and </p>, or <BR> and </BR>, unlike the other tags.
So now our page is coded like this:
<HTML>
<HEAD>
<TITLE>Justin's Homepage</TITLE>
</HEAD>
<BODY>
I am a lover of programming languages, and love to design and produce web content.<p>
Great! We have format! Now i'll bet you want that first line to be large, right? This can be accomplished by what's called a "header". The header is made by putting in <Hx> "header text goes here" </Hx>, where the "x" is a number from 1-6, the bigger the number the bigger the header. So in our page it looks like <H2>Welcome to Justin's Web Page!</H2>. Note that i removed the <p> tag, since header are already paragraph spaced!
Lesson 4: Adding Links
Great! We have a functional page of text! Are you satisfied? No? Well, me either. Ok, let's expand our page by adding some links to other web pages on it!
The ability to link to other web pages is exactly what makes HTML hypertext. Hyper means outside of, and when you link to another web page, you link outside of your own page.
Linking to another page is easy. In fact, you only need to use one tag! This tag is the <A>, or anchor tag. The <A> tag uses the HREF argument to specify the site to link to. So it looks like this <A HREF="http://mylink.com">This is my link!</A>. Note the This is my link! part in between the <A> and </A>. This is the part where you enter the text that'll show up in the browser. This text is underlined in some browsers. When Joe Surfer click on this text it'll take you to the link in <A HREF>, which is http://www.mylink.com in this case.
But wait, sometimes it's easier still! Sometimes you might want to do relative linking. This is when one page on your site links to another page on the same site. So if you're in http://mysite.com/index.html and want to link to http://mysite.com/page2.html you'd simply add a relative link. The format in this case would be <A HREF="page2.html">Go to page2</A>. The browser will then look in the current directory for that page.
If you want to get a page one directory up from the current one, you simply insert a ../ before the filename of the page. For example, if you're in http://mysite.com/newstuff/main.html and need to link to http://mysite.com/index.html, this is what you'd do:
<A HREF="../index.html">Go to the index</A>. You can add as many ../'s as you want to get to progressively higher directories.
Next lesson in next post
Thanks for watching
Welcome to the HTML tutorial!
Soon you shall be on your way to building great Webpages and vast Websites, but first lets go over a thing or two about what a "Web Page" is, how they work, and what we can do with them.
For this tutorial you will need:
An Internet ready Computer
A Web Browser
Because you are reading this on a Web Page, I will assume that you have both of these things.
Let's jump right in to the Introduction!
In the beginnings of the Internet, it was very hard to exchange data. So with great vision, Tim Berners-Lee created a way to connect text on the Internet through Hypertext Links (References to other text on the Internet). This was'nt a new idea, but his Hypertext Markup Language (HTML) was very popular, and caught on better than other developer's projects.
HTML was not a "Programming Language" per se, but rather a Scripting Language that marks up the page with formatting commands. Your Web Browser then reads these commands and shows the accessed page on your screen.
Due to the popularity of the Web, some programmers wrote Web Browsers that could view graphics, and a wide range of content. Thousands of people started to create web pages, which ranged from personal "homepages" to business information pages.
Today, millions of people access the web. There is now a diverse medium of content on the web. Before going on to the next lesson, I suggest that you go out and view many pages that are out there on the Web. As you are viewing them, to view the HTML that they are made of click View|Source, if you're using Microsoft Internet Explorer or View|Document Source with Netscape Navigator.
Lesson 2: Structure and Method
I'll bet you're thinking "Structure and Method? What is this... some kinda textbook???" Well, no, in this lesson you'll be learning about the Structure of HTML and the Method that is used to make them.
HTML is not coded with some special "HTML tool", and you do'nt even need some special program to make HTML pages, like Microsoft FrontPage (In fact, I discourage their use until you know the ins and outs of HTML code). All that you DO need is a simple text editing program like Notepad.
You're probably thinking "Wait just one second, you're telling me I can code up another Yahoo! with my puny little Notepad? Yes! That's part of the beauty of HTML! How do we do this? Keep reading!
When you make a Web page the first thing you need to do is gather your content. For our first page ever, we'll be making a informative page about ourselves. For example, here is mine:
Welcome to waqar Web Page!
Hi, My name is waqar . I built this web page because I love coding in HTML! I could do it all day long!
I am a lover of programming languages, and love to design and produce web content.
Lesson 3: Basic Tags and Formatting
So you're probably thinking "Okay, I knew that stuff. Teach me something I don't know." Okay, be patient. I think this lesson will give you your fill.
HTML is a language that is coded with tags. They are called tags because they tag parts of a webpage for formatting in a browser. HTML tags are very easy to spot in web page source. They are the things shown that start with a < and end with a >. Most HTML tags have an opening tag (<tag>) to start formatting text and a closing tag (</tag>) to end the formatting.
There are some HTML tags that are absolutely necessary in an HTML page. Those tags are as follows:
<HTML>' and </HTML>': Usually put at the top (<HTML>) and bottom (</HTML>) of an HTML page. This tag tells the browser that this page is an HTML page.
<HEAD> and </HEAD>: This is where information about the entire page is placed.
<TITLE> and </TITLE>: This tag needs to be put between the <HEAD> and </HEAD>. This tag gives a name for your page. The name won't be shown in the the text of the page, but rather in the top of the browser window.
<BODY> and </BODY>: This tag defines the body portion of the page. Later we will learn how to use the <BODY> tag to add background colors, text colors, and margins.
Now that we know the required tags, I'm going to put my text that I gathered in the last lesson in the proper web page format.
<HTML>
<HEAD>
<TITLE>Justin's Homepage</TITLE>
</HEAD>
Yours Truly,
Waqar
</BODY> </HTML> But wait 1 second! I typed that, and opened it with my browser, and it does'nt come out like that! What? Does it come out like this:
Yes? Ohmygod! We forgot the formatting tags!
The <p> tag can add paragraph spacing to your page. The <BR> tag adds a single line break to your page.
These tags do not need a <p> and </p>, or <BR> and </BR>, unlike the other tags.
So now our page is coded like this:
<HTML>
<HEAD>
<TITLE>Justin's Homepage</TITLE>
</HEAD>
<BODY>
I am a lover of programming languages, and love to design and produce web content.<p>
Great! We have format! Now i'll bet you want that first line to be large, right? This can be accomplished by what's called a "header". The header is made by putting in <Hx> "header text goes here" </Hx>, where the "x" is a number from 1-6, the bigger the number the bigger the header. So in our page it looks like <H2>Welcome to Justin's Web Page!</H2>. Note that i removed the <p> tag, since header are already paragraph spaced!
Lesson 4: Adding Links
Great! We have a functional page of text! Are you satisfied? No? Well, me either. Ok, let's expand our page by adding some links to other web pages on it!
The ability to link to other web pages is exactly what makes HTML hypertext. Hyper means outside of, and when you link to another web page, you link outside of your own page.
Linking to another page is easy. In fact, you only need to use one tag! This tag is the <A>, or anchor tag. The <A> tag uses the HREF argument to specify the site to link to. So it looks like this <A HREF="http://mylink.com">This is my link!</A>. Note the This is my link! part in between the <A> and </A>. This is the part where you enter the text that'll show up in the browser. This text is underlined in some browsers. When Joe Surfer click on this text it'll take you to the link in <A HREF>, which is http://www.mylink.com in this case.
But wait, sometimes it's easier still! Sometimes you might want to do relative linking. This is when one page on your site links to another page on the same site. So if you're in http://mysite.com/index.html and want to link to http://mysite.com/page2.html you'd simply add a relative link. The format in this case would be <A HREF="page2.html">Go to page2</A>. The browser will then look in the current directory for that page.
If you want to get a page one directory up from the current one, you simply insert a ../ before the filename of the page. For example, if you're in http://mysite.com/newstuff/main.html and need to link to http://mysite.com/index.html, this is what you'd do:
<A HREF="../index.html">Go to the index</A>. You can add as many ../'s as you want to get to progressively higher directories.
Next lesson in next post
Thanks for watching
Comments
Post a Comment