HTML TUTORIAL

HTML Tutorial for beginners - Learn HTML to develop your website in simple and easy steps starting from basic to advanced concepts with examples including ...

Advertisement

Friday, March 29, 2019

WELCOME TO THE HTML TUTORIAL - LESSON 8

Rishi Pandey March 29, 2019

WELCOME TO THE HTML TUTORIAL






FIRST | NEXT | PREVIOUS | LAST

Lesson No.8 – Adding Images to our Pages



Well, text is very important, but it can only take you so far. I'm sure that up until now, if anyone has seen your pages they're asking "Where are the pictures?". Yeah, I know Uncle Bob is dying to see the latest picture of you and the family on your website, so this lesson is about adding images to your pages.

Putting images on a web page is simple. It's probably even simpler than it was for you to get the certain image onto your computer! The <IMG>, or Image tag is used when we want an image on our web page. When we use <IMG>, we do'nt need to close it with a </IMG>. To tell the browser where to load this image from, we use the SRC, or source, attribute. It looks alot like this:



<IMG SRC="mwh.jpg"
">



And it loads on to the page, just like this:








Note that we can use relative linking just like with in the <A> tag, like SRC="../jussmall.gif" if the image was in the directory above the current one, or SRC="pictures/mwh.jpg" if the image was in the pictures directory.



Because some browsers do'nt load images, and some people turn them off, we need a way to show them what this image is. The solution? The ALT attribute! ALT is an optional (but highly recommended) attribute. When a browser does'nt load an image, or when they are turned off, the text in ALT will be shown instead. In our <IMG> tag it's used a little like this:




<IMG SRC="mypic.gif" ALT="Check this out - It's a picture of me!">




Need more control over your image's positioning? Try using the ALIGN attribute in it! The ALIGN attribute can be used to put an image in the left, right, middle, top, or bottom of a page. Is this more choices than you're used to? Let me explain. If we add ALIGN="top" to our <IMG> tag, the browser will align the top of our image to the top of the current line. ALIGN="bottom" aligns the image to the bottom of the current line, and ALIGN="middle" aligns our image to the middle of the current line. Aligning our image to the left or right aligns it to the left margin, or right margin of the page. Got it? Ok, here's a little pop quiz. What will the following code do?




<IMG SRC="myimg.jpg" ALT="My image!" ALIGN="left">




If you said it adds the image myimg.jpg to the current page with alternate text "My image" and left aligns it, you're wrong! Heh heh, just a joke, you're correct ;).



All right! The image looks great but...Hey! What's this border doing around my picture? Oh yeah! We forgot about the BORDER attribute!


The BORDER attribute takes a number as an argument. This number will be the width of the border around your image. Quick, how do we get rid of the border with the BORDER attribute? Easy, we just set <IMG SRC="myimg.gif" BORDER="0">!



Yuuup, we've got an image on the page. But wait: why does the browser wait to load the image before displaying the rest of the page? Well, the browser does'nt automatically know how big your image is. You can give it this information (and make your pages load faster!) with the WIDTH and HEIGHT attributes. We give to the WIDTH and HEIGHT attributes the width and height of our image in pixels. So it looks like this:




<IMG SRC="newimg.gif" ALT="A new image" HEIGHT=120 WIDTH=200>



Another benefit of specifying the WIDTH and HEIGHT in the <IMG> tag is that you can make sure that the proper space is left for your image, even if the viewer has images turned off.



Is the space around your image a little cramped? Try adding the HSPACE and VSPACE attributes to your <IMG> tag. These attributes add horizontal and vertical spacing around your image.



Want an image for the background of your page? Try adding the BACKGROUND attribute to the <BODY> tag. It's used a little like the SRC attribute to the <IMG> tag. Here's and example:




<BODY BACKGROUND="mybackground.gif">




This would take mybackground.gif, and tile it in the background of our page. Be warned though, use the wrong background image and your viewers may be straining to see your text!



Think you're an HTML wizard? Ok hotshot, how do we make images into clickable links? Easy...surround them with an anchor tag! For example:




<A HREF="lesson9.html">


<IMG SRC="mwhnext.jpg">



</A>


Results in this (click on it!):







FIRST | NEXT | PREVIOUS | LAST


Created by Techlinics




Saturday, March 23, 2019

WELCOME TO THE HTML TUTORIAL - LESSON 1

Rishi Pandey March 23, 2019



FIRST | NEXT | PREVIOUS | LAST

WELCOME TO THE HTML TUTORIAL

Lesson No.1 – Introduction


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.

FIRST | NEXT | PREVIOUS | LAST

WELCOME TO THE HTML TUTORIAL - LESSON 7

Rishi Pandey March 23, 2019

WELCOME TO THE HTML TUTORIAL






FIRST | NEXT | PREVIOUS | LAST

Lesson No.7 – Creating Lists



We've just about learned everything there is to know about text formatting, but there's still one very important thing that we have to learn: Lists.


Lists are everywhere. We post them on our refrigerators and take them to the grocery store. Lists are a very efficient way to organize information. Naturally, HTML has a few tags to help you make lists. HTML has not 1, not 2, but 3 different types of lists that you can add to your pages! They are the ordered, unordered, and definition lists.



Ordered lists are exactly what the name implies: lists that follow a numerical order. Ordered lists begin with the <OL> tag and end with a </OL> tag. When we want to put an item into this list, we need to put a <LI>, or list item tag before that item.


Here's an example of the ordered list syntax:



What do I need from the store today?<p>



<OL>


<LI>Bread


<LI>Cheese


<LI>Milk


<LI>Butter


</OL>




And heres how it looks to our viewers:



What do I need from the store today?




  1. Bread

  2. Cheese


  3. Milk

  4. Butter





Sure thing, but what if we do'nt want our list items to be numbered? That's when we use Unordered Lists. These are also called Bulleted Lists. Bulleted lists begin with the <UL> tag, and end with the </UL> tag. They look exactly like ordered lists, except the item numbers are replaced with special characters called bullets. Here's an example of how bulleted lists are used:



The Tutorial Underground is:<p>




<UL>


<LI>Cool!


<LI>Free!


<LI>Informative!


</UL>




And here's how it would look to Joe Browser (our viewer!):



The Tutorial Underground is:





  • Cool!

  • Free!

  • Informative!




Think that's cool? Try adding the TYPE attribute to the UL tag! With the TYPE attribute, we can change the type of bullet that we want to use! The TYPE attribute takes three arguments: "disc", "square" or "circle". So our new <UL> tag with a circle bullet would look like this: <UL TYPE="circle">. The TYPE attribute can also be used in the <OL> tag to change from numbers to letters (capital[TYPE="A"] or small[TYPE="a"]), or roman numerals (uppercase[TYPE="I"] or lowercase[TYPE="i"]). If we want to make an ordered list with uppercase roman numerals, it looks like this:




<OL TYPE="I">



The <LI> tag also has an attribute: VALUE. With the VALUE attrbute, we can change the value of a list item! Take a guess, what result would the following code result in:




<OL TYPE="A">


<LI VALUE="2">Think hard now!


</OL>




If you guessed "B. Think hard now!" you're right? Why? Check out the combination of the TYPE and VALUE attributes!



Heres a little trick: we can start an ordered list with any number (or letter, if we use TYPE) with the START attribute. It looks like this:




<OL START="3">


<LI>This is item number 3!

</OL>




And to our viewers at home, it looks like this:





  1. This is item number 3!




The last list that we can use is the Definition List. Definition lists are normally used when we need to define terms. The definition list starts with the <DL> tag and ends with the </DL> tag. Each term to be defined in a definition list uses the <DT> or Definition Term tag. Every definition in a definition list needs a <DD>, or I do'nt know what DD stands for :) tag in front of it. It probably looks alot like this:




<DL>


<DT>HTML <DD>Hypertext Markup Language


<DT>XML <DD>eXtensible Markup Language


</DL>




Our friend Joe Browser see's it like this:





HTML
Hypertext Markup Language
XML
eXtensible Markup Language




Note that you can create really cool effects if you use the formatting tags inside of lists. It's really neat when you have Bold terms and Italic definitions (in my opinion anyway)!



Great! Now we can list all our family members and their cats on our page! What's next?



FIRST | NEXT | PREVIOUS | LAST



Created by Techlinics

WELCOME TO THE HTML TUTORIAL - LESSON 6

Rishi Pandey March 23, 2019

WELCOME TO THE HTML TUTORIAL






FIRST | NEXT | PREVIOUS | LAST

Lesson No.6 – Working with Fontst



Yeah, HTML is good. We've gotten pretty deep into text control, but there's still more ahead so let's trudge on.




We can control the font in HTML using, what else, the <FONT> tag! We can use the <FONT> tag to control size using the SIZE attribute. The SIZE attribute is used like this:




<FONT SIZE="x">


This text font size x.


</FONT>




Where x is a number, from 1 to 7. The size that the formatted text is depends on the viewers preference settings and screen resolution. Generally though, 1 is really small and 7 is really big. Just in case you're curious, the default font size is 3. There is also a tag called the <BASEFONT> tag, which only can take the SIZE attibute, bute is made to change the size of the text on the entire page.




We can also add color to our text using the <FONT> tag. Color is added to text using, duh, the COLOR attribute to the <FONT> tag. We use the COLOR attribute the same way as the SIZE attribute:




<FONT SIZE="4" COLOR="blue">


This is colorful text in font size 4!


</FONT>




To our page's viewers, it would look like this:






This is colorful text in font size 4!





The COLOR attribute can use these standard colors: black, white, green, red, yellow, blue, aqua, fuchsia, gray, lime, maroon, purple, navy, olive, silver or teal. What? You need more control? Then I suggest you learn the hexadecimal color codes. Hex color codes are used like this:




<FONT COLOR="#0033FF">


This text is purple.


</FONT>




For more information on Hex color codes, I suggest you try this site.




The last attribute to <FONT> we'll learn in this lesson is FACE. By defining a font's face, you can control the appearance of that font. The FACE attribute is used like this:



<FONT FACE="arial" size="5" color="blue">


This text is a stunning arial size 5 in blue!


</FONT>



To the viewer, it would look like this:






This text is a stunning arial size 5 in blue!




Yes, this is great, but there's a catch: for the viewer to see this font change he needs to have the font on his computer. How does it get there? Different computer's come with different font's installed. For example, the Arial font is used on PCs, but Macs use a similar font called Helvetica. We can get around this by asking for backup choices in our FACE attribute. This is done like this:




<FONT FACE="arial,helvetica">


This text is either Arial or Helvetica.


</FONT>



This will show up as arial on computers that have arial installed, or helvetica if they do'nt have arial but do have helvetica. If they do'nt have either, the font does'nt change. However, you can specify as many back up choices as you want.




Yeah, simple text is great, but what if we need to put some special characters into our page? Well, once again HTML to the rescue! The format for this is & followed by the Numeric Code of the special character, or the mnemonic entity of that character, followed by a ;. Here's a list of the important special characters:




Character Numeric CodeMnemonic EntityCharacter Name

" #34 quot Quotation mark

& #38 amp Ampersand


< #60 lt Less Than sign

> #62 gt Greater Than sign

¢ #162 cent Cent sign

£ #163 pound Pound sterling

¦ #166 brkbar Broken Vertical bar


§ #167 sect Section sign

© #169 copy Copyright

® #174 reg Registered trademark

° #176 deg Degree sign

± #177 plusmn Positive or Negative


² #178 sup2 Superscript two

³ #179 sup3 Superscript three

· #183 middot Middle dot

¹ #185 sup1 Superscript one

¼ #188 frac14 Fraction one-fourth


½ #189 frac12 Fraction one-half

¾ #190 frac34 Fraction three-fourths

Æ #198 AElig Capital AE ligature

æ #230 aelig Small ae ligature

É #201 Eacute Accented capital E


é #233 eacute Accented small e

× #215 Multiply sign

÷ #247 Division sign



Hey! Here's a little secret: to change the Background color of our web page, simply insert the BGCOLOR attribute into your <BODY> tag. It's used like this:



<BODY BGCOLOR="color or hex number code">




A little review: How would we put the copyright sign (©) on your website? If you answered & followed immediately by #169;, you're correct! You deserve to go on to the next lesson...!

FIRST | NEXT | PREVIOUS | LAST



WELCOME TO THE HTML TUTORIAL - LESSON 5

Rishi Pandey March 23, 2019

WELCOME TO THE HTML TUTORIAL






FIRST | NEXT | PREVIOUS | LAST

Lesson No.5 – More on Formatting your Text



Hey! We're really getting somewhere! By now i'll bet that you've got a very informative page with a beautiful link to someplace (this site? please?! awww....) on it. That's great, but i'll bet you're hungry to make it look even more beautiful than it already is (or maybe your boss demands it!). Well, read on!

Do you like your name to stand out on your pages? I do! On every page i make sure that little v is in boldface. How did I do this? HTML has some special tags that allow us to change the way our text is shown. The one i just used is the <B> or boldface tag. You can also make text in italics with the <I> or italics tag. Similarly, you can underline text with the <U> or underline tag. These tags need both an opening tag and a closing tag, so the format is <I, B, or U>text to be formatted</I, B, or U>.

In addition to these regular formatting tags, theres lots of special formatting tags. Heres a list of them

Special formatting tags


<SMALL> - Small text

<BIG> - Big text

<SUPER> - Superscript

<SUB> - Subscript

<STRIKE> - Strikethrough text (text with a line through it)

<TT> - Monospaced (typewriter style) text

<PRE> - Preserves all format and line breaks in source HTML

Yep, text formatting is great! Now here's how to align your text.

When you align your text, it lines up with that portion of the window. So left aligned text (the default)is lined up with the left side of the window just like using a word processor and clicking the left align button.

However, there is no align tag. What HTML has is what's called an attribute. An attribute is an argument that is put into a tag to change the way that tag works. The align attribute can be put into many different tags to format paragraphs, or blocks of text (pictures too-more on this later). So if we wanted to make a paragraph aligned to the center of our window, we'd just add the align attribute to the <P> tag at the beginning of that paragraph. So it would look like this:

<P ALIGN="center">

Hi, this paragraph is aligned to the center. This was accomplished by using the align attribute.

There is also a way to format whole blocks of text. The way we do this is by using the <DIV>, or division tag. The division tag really does'nt do anything without the align attribute. In fact, it's useless with no attributes!



The <DIV> tag is used like this:


And here's how it would show up in the browser window:


Hi, this paragraph is aligned to the center. This was accomplished by using the align attribute.




There is also a way to format whole blocks of text. The way we do this is by using the <DIV>, or division tag. The division tag really does'nt do anything without the align attribute. In fact, it's useless with no attributes!




The <DIV> tag is used like this:




<DIV ALIGN="left">


This is the text to be left aligned.

<P>

I can align lots of text with the division tag!


</DIV>



If we put this into our web page, it shows up in a browser like this:





This is the text to be left aligned.


I can align lots of text with the division tag!




The align tag can also be used in headers. If you want your header to be eye catching, align="center" it!

All this stuff is great, but i bet you're worrying about the small margin space in your pages. Well, that can be fixed with one easy tag: the <BLOCKQUOTE> tag! Simply put a <BLOCKQUOTE> right under that <BODY> tag, and a </BLOCKQUOTE> right above the </BODY>, and you'll have beautiful margins in your page with minimal work!

Now you should be an expert in text format and alignment. Take a few minute to absorb what you've just learned, and surf to the next lesson.

FIRST | NEXT | PREVIOUS | LAST



WELCOME TO THE HTML TUTORIAL - LESSON 4

Rishi Pandey March 23, 2019

WELCOME TO THE HTML TUTORIAL






FIRST | NEXT | PREVIOUS | LAST

Lesson No.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.

If you want a link that people can click on to send email to, you just add mailto: before your email address. So it would look like this:

<A HREF="mailto:mymail@mailaddress.com">Mail me!</A> Cool? Ok great! Let's move on to the next lesson!

FIRST | NEXT | PREVIOUS | LAST



WELCOME TO THE HTML TUTORIAL - LESSON 3

Rishi Pandey March 23, 2019

WELCOME TO THE HTML TUTORIAL






FIRST | NEXT | PREVIOUS | LAST

Lesson No.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>Rishipandeycool Homepage</TITLE>

</HEAD>

<BODY> Welcome to Rishipandeycool Web Page!

Hi, My name is Rishi. 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.

Thanks for visiting my page!

Yours Truly,

-Rishi Pandey

</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:

Welcome to Rishipandeycool Web Page! Hi, My name is Rishi. 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. Thanks for visiting my page! Yours Truly, -Rishi

Yes? Oh my god! 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>Rishipandeycool Homepage</TITLE>

</HEAD>

<BODY>

Welcome to Rishipandeycool Web Page!<p>

Hi, My name is Rishi. I built this web page because I love coding in HTML! I could do it all day long!<p>

I am a lover of programming languages, and love to design and produce web content.<p>

Thanks for visiting my page!<p>

Yours Truly,<BR>

-Rishi Pandey

</BODY>

</HTML>

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 Rishipandeycool Web Page!</H2>. Note that i removed the <p> tag, since header are already paragraph spaced!

Go ahead and make your page, save it with a ".html" extension at the end (HTML pages all need either .htm or .html extensions) open it with your browser and meet me at the next lesson!

FIRST | NEXT | PREVIOUS | LAST



WELCOME TO THE HTML TUTORIAL - LESSON 2

Rishi Pandey March 23, 2019

WELCOME TO THE HTML TUTORIAL






FIRST | NEXT | PREVIOUS | LAST

Lesson No.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 Rishipandeycool WebPage!

Hi, My name is Rishi. 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.

Thanks for visiting my page!

Yours Truly,

-Rishi

Go ahead and think up a few paragraph's like this, and meet me at the next lesson.

FIRST | NEXT | PREVIOUS | LAST



Subscribe to: Comments (Atom)

Recent Posts

Posts

Contact Form

Name

Email *

Message *