HTML Learning center for beginners and intermedite programmers

Monday, July 29, 2013

HTML: Tutorial 3 images

Ok we now know how to make a website with heading,text,and links. What other elements are we missing? Images!! A website with text and links would be boring, so lets now go make our website a little more exciting.
Use the file Learn2.html for this project , if you don't have the file then open your text editor and text in this basic code.
<html>
<body>

</body>
<html>
Now the code to add images is <img src""> The name of the image you will be using will be placed inbetween the " " brackets. Ok for this tutorial just right click and download this image rename it Mario.png

Yes we will be using super mario for this excercise. Now download the image, make sure you named it Mario.png and place the image in the same folder as your html project. Now type this code
<html>

<body>

<h1> Learn Links </h1>

<p> How to add links </p>

<a href="http://www.androidfreegamesapps.forumotion.com">Click here</a>
<p> Now add images <p>

<img src="Mario.png">

</body>
</html>

Save your project as Learn3.html ,now your project should look like this

Code breakdown:The name of the image file was Mario.png . You put the Mario.png between the " " brackets. So the code for the image was <img src="mario.png"> .

Ok congratulations now you can make a good looking website. You have completed 3 lessons already and you haven't even broken a sweat yet. Next we will expand on how to make an image the size you want and how to make an image a link Lesson 4 Click here for lesson 4

HTML : Tutorial 2 Links

Now that we learn the basics to building a heading and paragraph. Now that we covered the basic's of heading and paragraph , lets look into another basic component that every website has links. The web is built on inward and onward links that connect individual webpages that combine into the internet. Ok enough talk lets start!!
As always start out with the basic template

<html>
<body>

</body>
</html>

Now lets add a header and a small paragraph. Also we will add a link which I will explain how it works after you have typed it and save the file as learn2.html .

<html>
<body>
<h1> Learn Links </h1>

<p> How to add links </p>

<a href="http://www.androidfreegamesapps.forumotion.com">Click here</a>

</body>
</html>
Now double click on the Learn2.html after you saved it. It should look like this

Notice the link is high lighted in purple and when you click on it, you get taken to a new page. If it didn't work just comb over your code very carefully to make sure you typed it right and you didnt forget to close tags <> </> . Now to explain the code.
<a href="" tells the browser your putting in a link. The link goes inbetween the " " brackets. Now after you put the link inbetween the " " brackets you type > to close that portion. Now after the > you type the words that you want to show up in place of the link on the screen. After you place the words then you close the tags by putting </a> .

<a href=" the website goes here" > thats the 1st part that declares the website you want to point to.
>your text here</a> This is were you declare what text you want in place of the link. Later on I will teach you how to put an image instead of a text. Thats it great job and if you didn't understand anything please leave a comment or read the lesson over. Lesson 3 here Click here for lesson 3

Sunday, July 28, 2013

Introduction to HTML:Tutorial 1

Hi I welcome you to the HTML learning center. I know how hard it is to find solid resources to learn HTML,CSS,Javascript,and HTML5 . I remember searching hard finding a small tutorial here or there but not fully understanding what I was learning. Thats why I decided to make these tutorials, so not only do you learn what the code is but how it works.
    What is HTML? HTML is the markup language that powers internet browsers. What you see on a webpage and how you interact with it. Most webrowser technology is a combination of HTML,CSS,Javascript, and HTML5.
    Why should I learn HTML 1st? HTML is the starting point and if you do not understand HTML 1st learning the other languages CSS,Javascript,and HTML 5 will be very difficult.HTML is the wrapper for Javascript and CSS so learning HTML is vital.
    OK when can we start? Right now!!

What do I need? If your on a Mac text wrangler will be your best bet. You can use text edit but some modifications will be needed.

If your on a PC then notepad++ will be your best option. Both are free downloads, after you have downloaded the editor you needed, proceed to lesson one.

Open your text editor and type this

<html>
<body>

</body>
</html>

This is the start point for any HTML program. The <html> tag on top points to the browser telling the browser that this is a HTML program. The <body> tag is where the script for you program belongs. In the future we will be adding other starting tags but for now this is all we need. If you notice the <html> on top but on the bottom its </html>. The / inside the brackets means the closing of a statement. You will also notice the body tag has it also. Now lets continue and type in the rest...

<html>
<body>

<h1>My first HTML program </h1>
<p>Hello World</p>

</body>
</html>

Now the <h1>
tag represents the header file. This will show up on your screen in bold letters. The header file tells the web search engine that's the title of your topic. The <p> is your paragraph tag. This tells the start point of your paragraph. Now go ahead and save the file as

Learn1.html

After saving the file double click the file and it will open up your webrowser. It should look like this.

Ok this is your 1st lesson, great job!! I hope you understood not only the code but why it was used. Practice a little more on your own before heading to part 2. Click here for part 2