Beginners Blog : HTML

Showing posts with label HTML. Show all posts

Wednesday, July 23, 2014

Actions and Events 2

onmouemove: when the pointer of the mouse move this will occur
onmouseout: this will happen when the mouse pointer is out of the element
onmouseup:when a user releases a mouse button over an element
onunload: this is just like the onload function but its opposite because this will occur when the page didnt load for some reasons
onerror: if something was wrong with your code this function will be called or if image didnt load for example because of losing internet or any other reason
onselect: the event occurs when the user select some text (for and textarea)
onfocus: just by its name when the elements get focused the event will happen
onscroll: when you scroll your page down or up a function or even will be called

this is the most used events handlers that you can use in our page there are some others but we'll see them only when we will need them.

Actions and Events

When we click on the button we need something to happen and some code to execute we have some special functions we can use them when a button clicked or a key pressed lets see some of them now

OnClick function: this function can be used when you click on your mouse on Button,text,link.....kinda all HTML elements lets see this example:

Onkeypress: this will call out function everytime we press a key on the keyboard and we usually use this in the Text Boxes for example if we wont a immediate validation lets see this :

onload: this can be used only in the <body> tag this will call the function only when the page finish loading of all its contents

onblur: this is a good way for validation this will call the function when we click on the text box and then click out of the text box i mean it calls when the text box lose focus

onmouseover: you can know this by its name this will call the function when the mouse is over our HTML element we can use this on images when the user move the mouse over the image we can make it bigger and we'll see this later.
onkeydown: the events will occurs while the user is pressing a key
ondbclick: this will call function when you click double click on the element
onmouseenter: the events will occurs when the mouse enter the element

there's much more events which we'll see in the next article ,Have a nice day guys

HTML 5 ,New Tags

Hi,we'll talk about a few new tags and elements of HTML 5:

this tag is used to make a highlight on text and you can change its color but the default color is yellow lets see this example :
<mark> this tag is used to make a highlighted text its so easy to use and its default color is yellow:

and it'll look like this:

<progress> this tag is good one if you want to show the progress of special thing you doing for example in our Sign up form if it has more than one step we can show this to make a good style about how much we did to finish the steps :

and it'll be :

<details> if you make a big article and you want to make like a summary of it you can use this tag it'll be like a additional information for your article example:

and it'll be like this :

as you can see the HTML 5 has made a new tags which make it easy and simple to use

Monday, July 21, 2014

Introduction

Hi guys for about 26 articles we've talked about HTML but we didnt say what version we were using it was HTML 4 it was good it has some special features more than the previous versions but it came in 1999 and the internet changed a lot since then.

HTML 5 designed to replace HTML 4 which has been using for a long time what make HTML 5 so special :

it was designed to make a lot of things without using additional plugins or writing a lot of code for example the audio or video article we talked about they used the tag <embed> to show the non-HTML content but now its simply to use the <video> or <audio> tags and it can do the same thing but in a very simple and easy way
its a good platform for animation and graphics .
good way to make a very complicated web applications
2D Drawings
Error handling should is easier
and sure its based on HTML 4 so no new coding syntax .

this was an introduction and we'll start to learn more about its in the next article hope you'll like it

Saturday, July 19, 2014

Audios and Videos

all of us wants to make our websites more active and more entertainment and sure whats is more fun than music and videos you can show your audience and website users the songs you may like maybe it'll be away to increase the number of your website readers "not all readers like this especially when the music play automatically when they open your website"

for including audios and videos in our webpages we should use a specific tag which is <embed>

whats <embed> ?

this tag is used to be a container of non-HTML content just like music,videos,flashs.....etc all these stuff aren't HTML elements or objects thats why we should use <embed> to implement them in our webpage and just like any tag in HTML it has some attributes for exampe:

width :its the width of the audio/video controllers "play/pause buttons....etc"

2. height:the height of audio/video controllers

3. src : its the URL of your audio/video

Lets see this example:

and it'll looks like this :

one important thing that you should know that not all browsers support this if it didn't work in your browser then you must upgrade it and its even works on internet explorer hahahh imagine

Spaces,New Lines and Lines

when we want to write an article in your website its very important to use these things the spaces nad new lines.....etc but in html there's kinda a problem which is that for example for spaces if we want to make more than one space its not allowed why? because just like most of programming languages "even that html isnt a programming language" it ignore the spaces we make by clicking the "space button in the keyboard" so for example if we did this

it'll be only on space and even for new lines in paragraph maybe when we open the browser it wont make a new line where we wont so there's a specific tag for this and for making a line too

</br> this tag is used to make a new line when you make your article or anything you want to make it start from a new line you should do this lets see this example:

and it'll looks like this :

2.<hr> this tag is for drawing a line in your webpage lets use the previous example :

and it'll looks like this :

3. spaces there isnt a tag to make spaces but if you want to make a space it'll be using this "&nbsp" it doesnt have any meaning but its used to make a spaces lets see this example :

and it'll looks like this :

hope you like it

Friday, July 18, 2014

Sign up Form

Sign up example

Now we all know whats text boxes in html and how to use them and we learn about more inputs just like Buttons,Check Boxes,.....etc

All these are used in different things for different purposes but if we want to make a page to allow our users to sign up to our website just like the facebook one or any other sign up page its not that hard anymore so lets Do it:

lets open sublime or notepad
first of all i want to make a table which has a 2 columns and each column has 4 or 5 rows why because its more beautiful to do it in a nice way
lets write this:

<html>

<head>

</head>

<body>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label>Email</label>

</td>

<td>

</td>

</tr>

<tr>

<td>

<label>Gender</label>

</td>

<td>

<input type="radio">Male

<input type="radio">Female

</td>

</tr>

<tr>

<td>

<label>Birthday</label>

</td>

<td>

</select>

<option>Month</option>

</select>

</select>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

<td>

<input type="checkbox" >i agree the using ..........

</td>

</tr>

</table>

</body>

</html>

3.it should looks like this :

4.i hope you like it guys and if there's any question please ask me :) and dont forget to press ctrl+s to save it and dont forget the ".html" too

Thursday, July 17, 2014

More Inputs

Saying Thanks is enough for me :)

Now most of you know whats inputs and we saw the buttons and the text boxes and we didnt talk much about the check boxes or the radio buttons there's one big diffrenece between Radio buttons and check boxes

Check Boxes can have multiply values for example we use it to know what topics our customer like about our website so he can select more than one
Radio Buttons can have only one value for example in the Facebook sign up page in the Gender part you cant take Male and Female at the same time :D sure you cant so you can only take one of them.

lets see this example and we'll do our steps again:

open sublime or notepad
lets write this code:

<html>

<head>

</head>

<body>

<tr>

<input type="checkbox">like

<input type="checkbox">love

<input type="checkbox">eat

</td>

</tr>

<tr>

<input type="Radio">Male

<input type="Radio">Female

</td>

</tr>

<tr>

<h3>Now we'll see a new thing which is a drop down menu we all will need it in our website</h3>

<select> */this tag mean make a new drop down list just like the days and months in facebook signup page

<option>Support</option>

</select>

</td>

</tr>

</table>

</body>

</html>

3. press ctrl+s and save your file name and dont forget the ".html"
4. open it with your internet browser

All these inputs are very important in our website to get the users information and data and later we'll learn how to use them and store them in DataBase.

Wednesday, July 16, 2014

Inputs

as we all know that all websites has inputs and output but whats inputs its the way where you can add your information about everything from log in to sign up or a survey but how the owners of the website can get these information you must add thats what we'll talk about today

Text Boxes: its the most used thing all over the websites you can never see a website without a text box or how they'll get your info it wont mean anything if they couldnt get your information and store it so how to use it or make one in our website lets see :)

<html>
<head >
</head>
<body>
<h1> hi please enter your username</h1>
<input type="text" width="50px">
</body>
</html>

thats a very simple and easy example you can see its not difficult to make a text box in our website so what are the other types

Buttons
Check Boxes
Radio Buttons
much more :p

you can try them all just change its type and sure later we'll learn how to get values from these inputs but for now lets not to rush :D

Marquee

its a nice tag that make a moving text just like how in tv news how you can see the news title moving in the bottom of the screen and most of websites use it to put a links of their new topics and articles

its very easy to use it so lets see it :)

<html>

<head>

</head>

<body>

<marquee behavior="scroll" direction="right"><a href="http:\\google.com>Google</a><h1>***</h1><a href="http:\\facebook.com\baseldex">My Facebook</a></marquee>

</body>

</html>

*********************************

Marquee proprieties:

behavio: it means how you want your marquee to act for example for scroll it'll go from the right to the left and then appear again from the right so whats other behavior:

Slide: this will make the marquee move and stop at the end of the web page or the div
Alternate: this is very nice one because it'll go from the right to the left then to the right the marquee wont disappear it'll be in the webpage "you should try it if you didnt get it :D"
Scroll: we talked about this in our example but its has some other values which is values and this will determine from where the marquee will go or will come from so we should use its Directions:

Up
Left
Right
Down

you can put whatever you want in your marquee and i'm sorry i dont know what does it mean "the translating of it" but if you didnt get it now please just use it and i'm sure you'll like it and know what does it mean

Thank you Guys i hope you like my tutorials :)

lets practice

Hey guys you all should know that you must work and practice by your won you shouldnt wait anyone to tell you how to do it go and Google it you'll find millions of examples.
lets start with this example its a Random example and very simple one :
<html>
<head>
</head>
<body>
<table width="100%" border="1">

<tr>

<h1> Welcome to my Blog</h1>

</td>

this will make our page divided into 3 parts the biggest one is in the middle as you can see its table which has 1 row and this row has 3 columns there's three <td> tags and one <tr> tag

</td>

<ol>

<li>

<a href="google.com">Google it</a>

</li>

<li>

<a href="facebook.com/baseldex">My profile page on Facebook</a>

</li>

</ol>

<td>

</tr>

</body>
</html>

Tuesday, July 15, 2014

Divs and Spans

Whats divs and spans and whats the difference between them

the div and span are kinda the same but how can we know how to use div or span first of all lets know what are the divs and spans

Divs: they used to make sections of our webpage that means if you want to make a space of your webpage to use it to show some pics its good to use div so when we use div tag it make a new section of the webpage body so for example :

<html>

<head>

</head>

<body>

<div>

<p>hello</p>

</div>

<p> this text will not be near to the "hello" or at least in a different location</p>

<body>

</html>

divs are commonly used to make multi sections of website each section has its tags and objects

and <div> just like every tag in html it has Id,class,name......etc

spans i said that spans are kinda the same yeah because they make a new section too but whats the difference between them the difference is that spans DONT make space after the tag closed so if we write it in paragraph it'll be in the same paragraph for example :

<html>

<head>

red.

{

color:red;

}

</style>

</head>

<body>

<p> hello <span class="red"> welcome to my webpage</span> thanks for visiting</p> */ this will make the paragraph in the same line nothing will change only the color of whats inside the span

</body>

</html>

But divs wont make it in the same line because it'll make a new line so if we do it like this :

<html>

<head>

</head>

<body>

<p> hello <div> Welcome to my blog</div> thanks for visiting </p> */ the webpage will be like this:

hello Welcome to my blog

thanks for visiting

</body>

</html>

its not that big difference but as i see that the most web developers use the div more so its all up to you since you know what does each of them means

thank you guys for being here hope you like my tutorials

if you have any questions please leave a comment or email me

"Recommended Me :D"

Enough CSS, Lets see Lists

i think its enough for now for beginners to know more about css now its time for you to go and search for more stuff about styles you know now how to use them its not a problem anymore so if you know the key nothing will be difficult anymore but if you have any problem i dont mind to give more stuff about css and styles so for now lets start with something new which is lists they are very important if we want to show some of our products or information about our website
Lists:

lists has 2 types ordered lists and un-ordered list the difference between them that the ordered list is like a list with numbers 1,2,3.....etc but the ordered list is just a dot points just like what i'm using now.
just like always lets do it in a example :

<html>
<head>
</head>
<body>
<ul> */this tag is used to initialize an un-ordered list
<li> */this tag means list item the dot and the sentence with it
Hi this is un-ordered list
</li>
</ul>
</body>
</html>

its the same of ordered list but you should change the tag it'll be <ol> and the <li> stay the same
i hope you get it well :)

Friday, July 11, 2014

Paragraph and Labels

later we'll know that there isnt that big difference between labels and paragraphs but now we'll use each of them in different way for labels lets imagine you want to make a page for login you want for sure to put text boxes to get information from users but how the user will know each text whats it about i mean there will be a text box for first name and another for last name and we should write that in our page but will we use paragraph to do this job sure no thats why we should use labels and labels are the text in for example the desktop applications its the text that only appear but it doesnt do anything just like this one in the pic

the "File name" is a Label even if you click on it millions of times nothing will happen.
Paragraph maybe even if we click on it nothing will happen but we can change this later anyway what makes paragraph different is we can add some features to it just like the alignment it means where is our text we can put it in the middle or left or right and another thing just like the same letters size or the difference between each letter dont worry we'll talk about all this one by one .
lets see how to use them:
<html>
<head>
<link rel="shortcut icon" href="MyIcon.ico">
<title>My Page</title>
</head>
<body>
<table>
<tr>
<td>
<Label>Hello<Label>
<p>Hiiiii</p>
<h1>as we said before you'll know the difference between these two things later :)</h1>
</td>
</tr>
</table>
</body>
</html>
hey guys you can like my facebook page : https://www.facebook.com/4Tech.tech

Tables

Tables are very important to make our page more professional it allow us to make it easy how to recognize our web page tables used to make parts of the page each part you can use it as you want first of all i want to know if any of you has any question i know some of you come and read my tutorials but i'll be thankful if you write any comment to encourage me :)

lets start with our lesson today:

<html>

<head>

<title>My page</title> */ this for out web page title

</head>

<body>

<table>

<tr> */this is very important each table has rows and columns the <tr> tag is used to declare a row which has number of columns

<td> */ this tag is used to initialize a columns into our row we can use as much as we want but its wrong to put a row inside a row

</td>

</tr>

<table>

</body>

</html>

Note:"you can declare a new table in one of the columns it works fine but rememeber if you want your objects to be in the place where you want you should put between the <td> tags thats very important .

Titles and images

Hey
today i'll talk about how to make title on your web page its the text will be in the top of the tab in your browser its very easy dont worry guys and we all here are beginners so we'll learn from each other
here we go:
<html>
<head>
<title>My Page</title> */ this tag is used in head to make title to the web page
</head>
<body>
hello
</body>
</html>
now we'll talk about images sure web page without images is nothing and it'll be very boring so how to include images in your website first of all we should save the pic in the same folder of our html file if we dont want to put the whole url of the pic i mean if it was in the same folder we just have to put the name of the pic for example "xxxx.jpg" but if it was in another folder we should do it like this "D:\mypics\pic1.jpg"
now there's a specific tag to declare an image this tag is <img>
now how to use this tag :
<html>
<head>
<title>My Page</title> */ this tag is used in head to make title to the web page
</head>
<body>
hello
<img src="pic1.jpg"> */src it means the source of your pic or the url or the address of the pic
</body>
</html>
Thank you guys for reading :)
now we have a facebook page it'll be amazing if you join me there too and i need admins to help me and share me my passion to help all beginners around the world to become experts my mission is to give them the first steps then i'll give them the books,websites,videos and tutorials to continue their way to become a professional :).
visit us https://www.facebook.com/4Tech.tech

Thursday, July 10, 2014

My website icon

hey i'm back again :)
lets start with new thing
how to put an icon on your web page just like in every website so here we go
first we want to get our pic the one we want to put in the top the tab in the browser you should put it near to the html file you just saved like we did before if anyone here didnt know how please go back to the first lesson you can know how .
lets start then ;)
<html>
<head>
<link rel="shortcut icon" href="xxx.ico"> */first of all rel means what is that link and href is like the Url so
you should put the url of your pic in the href part
</head>
<body>
<h4>hope you like it</h4>
</body>
</html>

H1 Tag

Hi
in the previous lesson i've talked about some of html tags today i'm going to talk about others in our webpage we need to make some titles and few main parts so how to make it in html its very easy look at his example :

<html>

<head>

//as i said before we'll use this part later :)
</head>

<body>

<h1>hello</h1> */this tag <h1> it makes the font size kinda big there's h1,h2,h3,h4,h5,h6 you can use them as you want

</body>
</html>

if any of you has any question just write a comment or send an email
Baselnatour27@gmail.com

Your First Web Page

hi today i'm going to talk about how to make a small and a very simple website here we go first lets open our notepad and click file then save as an then you can chose any name you want but after you name is put "xxx.html" thats to make the computer to recognize the file as a web page or you can simply just press ctrl+s and do the same first of all we should know that html is not a programming language we can call it tags language since every tag has its job lets start with the first tag which is HTML this tag is used to start the web page we write it like this
<html> and every html tag has body and head just like human body lol anyway lets go to the head its where we put the links and scripts and we'll talk about all that later lets start with the body here we go in the body we can put anything we want and its the real part of our web page

<html>

<head>

</head>

<body>

Hello world

</body>

</html>

you can try it at home its not WWE lol :D thanks for reading. if there's any questions please contact with me on this email
baselnatour27@gmail.com

Note:"i know this seems to be old and maybe stupid for most of you but maybe there's alot of people who dont know that so :)"

Wednesday, July 23, 2014

Monday, July 21, 2014

Introduction

Saturday, July 19, 2014

width :its the width of the audio/video controllers "play/pause buttons....etc" 2. height:the height of audio/video controllers 3. src : its the URL of your audio/video

and it'll looks like this : one important thing that you should know that not all browsers support this if it didn't work in your browser then you must upgrade it and its even works on internet explorer hahahh imagine

hope you like it

Friday, July 18, 2014

Sign up example

Now we all know whats text boxes in html and how to use them and we learn about more inputs just like Buttons,Check Boxes,.....etc

All these are used in different things for different purposes but if we want to make a page to allow our users to sign up to our website just like the facebook one or any other sign up page its not that hard anymore so lets Do it:

Thursday, July 17, 2014

Saying Thanks is enough for me :)

Wednesday, July 16, 2014

Tuesday, July 15, 2014

thank you guys for being here hope you like my tutorials

if you have any questions please leave a comment or email me

Friday, July 11, 2014

Thursday, July 10, 2014

width :its the width of the audio/video controllers "play/pause buttons....etc"

2. height:the height of audio/video controllers

3. src : its the URL of your audio/video

and it'll looks like this :

one important thing that you should know that not all browsers support this if it didn't work in your browser then you must upgrade it and its even works on internet explorer hahahh imagine