web page hosting: Tags in HTML Conclusion

First web page For the beginning copy next HTML cod in notepad. Assure that the operation is right executed or the page will not function.

The second page You may need time and more attempts so that you get used with this rules, so you should keep trying with the next web page. Copy this cod in notepad, like you did with the first page.

My first web page !

My second web page !
Welcome.

Very soon I will make a page which is going to be so cool!

The upper code , is all you need t o create a base web page.Now you can save the document in notepad selecting from File menu the Save As option. In the new opened window, select All Files. We will give a name to the file, for example "index.html", without using the quotation marks. Check twice before you push the Save button. I will ask you to try to remember where you have saved the file because we will work with this file a bit later. HTML is the basic language for creating web pages on a website. It would be best to learn this by having a web page hosting to experiment with. Tags in HTML Now that you have already created your web page, we should examine some segments of "index.html" file. Certainly you have seen that there is a model in the arrangement of the commands , some words are surrounded of "<" and ">", these are HTML tags. An example of HTML tag is . The tag tell s to the browser, where the content of the web page begins. is an example of tag who should exist in every web page.

After you have assured that everything is going along with the anterior indications. you can save the document. You could try to save it with the same name as the one before, "index.html".You may be asked if y ou want to save the document over the previous, select Ok, we won`t need any more the other document.When you are done, go on and r ead the next tutorial. Conclusion In the previously example has been introduced some new tags. We will try to give a definition to them, so that we can start in the next lesson, the real realHTML TUTORIAL. The tags of which i was talking about are : , , <h2> and <p> . The example in discussion: <html> <head> <title>My page!
Welcome.

Very soon I will make a page which is going to be so cool!

Base tags in HTML Lets take a look at the co d. A web page has in composition two base elements. If you try to create a page without those two tags, you will have problems. Web`s page content will be here

This tag is immediately after and is used to indicate to the browser, useful information like : page`s title , content ( used by the old searching engines) and many others

First tag is called < and is that which tells to the browser that it had started a HTML cod. The second tag, , tells to the browser that from there it had started the visible part or page`s content.

Is situated between <head> and </head>. This tag is the one who give to the page the name. The name will be showed in t he browser, usually in the upper left side. In the previously example the title was " My page !" and it will be showed as the browser`s title.<br /> <br /> How to close a HTML tag You may have observed already other two similar tags at the end of the document, </body> and </html>. These tag are for closing.</body>, lets the browser know that page`s content is over, and </html> that the HTML document is done. Slash "/" is situated before tag`s name and it tells to the browser that he wants yo stop the current function. So <tag> is used to start a funct ion, and </tag> to stop it .<br /> <br /> <h2> This is the title that appears in the page, before of the content and it will be bigger then the content`s character. <h2> means that is the second sized character between the other six already existent. <h1> is the biggest character and <h6> is the smallest.<br /> <br /> Tag`s order - very important The order of opening and closing a tag is very important.If a tag is opened in an other, for example body is writte n open in html then that tag (body) is the one who needs to be closed before the second tag (html). We have closed first body because it was the first one written. This is the rule: opening and closing a tag applies at all the other HTML tag documents.<br /> <br /> <p> Is the tag that marks the opening and the closing of an paragraph.So when you start a paragraph assure yourself that you used <p> in the beginning and </p> and in the end. Keep learning - HTML Tutorial<br /> <br /> 1<br /> <br /> Now that you have understood the base of the HTML labels and how these work, you can go on an start reading section HTML Tutorial . Here you will learn all the tags and the HTML attributes, how to use them and how to build a functional web page . HTML - Hyper Text Markup Language Welcome to the ZiZix tutorials sect ion . Here you can learn the basic of HTML. After learning this tutorial you will be able to make your own web pages.<br /> <br /> Save the document from the File/Save As menu. Select All Files and name the new created file "index.html".Hit Save.Now open the file in a browser so that you have the possibility to refresh the page (F5). If you did everything well you will be able to see your web page wh ite ! <head> element The <head> element is the one that is n ext. While you put in between html and body everything should be just fi ne."Head" has no visible function, so we will talk about this aspect in the next tutorials. Even though i want to mention that <head> can of fer to the browser very useful informations.You can introduce here other cods like Javascript or CSS. For the moment we will let the notions like that with the exception of the act that we introduce the next element from the list, but first lets take a look without him:<br /> <br /> If you are already familiar with XML,then HTML will seem easy to learn. I recommend you, not to read this tutorial from head to tale but t o spend a quarter or a half hour after reading several lessons, and practice. Preparing for learning HTML Creating documents in HTML is not difficult. To start, you need only a notepad and dedication. If you are new in the field and you have not yet read readBeginner's Guide , I suggest you spend a few minutes reading it.<br /> <br /> <html> <head> </head> </html><br /> <br /> Web Pages Web pages are very useful. This explains some of the arguments: The simplest way to spread information on the Internet Another form to increase your business You can tell the world that you have something to say on a personal page<br /> <br /> If you save the document and try to refresh the initial page from the browser you will not see any difference. Just have a little patience, because next we will study some visible elem ents.<br /> <br /> Words to remember Tag - used to specify the regions of the HTML document, which a browser will read later.Tags will look like this: <tag> Element - is a complete tag, having an opening <tag> and a closing </ tag>. Attribute - is used to change the value of an element in HTML. Usually an element has several attributes. So far just remember that a tag is a command that the browser will execute, an element that is a complete tag and an attribute Customize and change an element in HTML.<br /> <br /> <title> element So that every thing goes well you must put the title tag inside the head tag. what you write between those two title tags ( <title> and ) will be seen as browser`s name, usually in the upper right side. Next we have the source code: My first web page!

The following tutorials For the following tutorials you can use the navigation menu on the left to browse what you are interested in, or you can read it from cover to cover pressing the button "Next >>", located in t he bottom of the page. HTML Elements HtML elements have many ranks.All you see : paragraphs, ZiZix`s banner, the navigation links from the left side and the right side , all are elements of this page. An element has three parts : an opening tag, e lement`s content and an closing.
- the tag that opens a paragraph Element`s content - the paragraph itself.
- the closing tag. ***Note: All the web pages will have at least the base elements: html, head, title and body.

Now save the file and open it in your browser. You will be able to see the title in the upper left or right side as like the majority of the browsers. You can put any name you want, just remember that the descriptive names are the ones that are easier to find later. element The body element is the one that defines the beginning of the itself page`s content (titles, paragraphs, photos, music and any all the others).As you can see in the menu from the left, we debate one by one all these content elements. For now all you need to keep in your mind is that body covers all the content of the page. My first web page! Hey guys! Here we will put the content later !

element... An HTML document will always begin and end with a tag and respective . This is the standard structure of an HTML. Please open a Notepad and copy the next cod :

Now see what you have done, and after i invite you to see what is in t he next section. Html tags - Introduction

2

THe "class" and "id" attributes in HTML These two attributes are mostly the same. They have no straight role in the formatting of the elements b ut they are useful behind the scene with the help of CSS. We will talk their role at the right time when we study their syntax and their function in CSS. The idea is that when you want to set a class of tags for being used later with the help of CSS, you can make the difference between two identical tags but with different attributes. Take a look at the next example :

A browser read absolutely all you write in the HTML document. Tags have three parts as I said before, the opening, closing and content. As you will learn there are hundreds of HTML tags. Absolutely all the elements that will be displayed by a browser need a tag or two.

Content
Paragraph

Tags are written in small letters. This is the standard of writing in XHTML, and Dynamic HTML. Above are some examples of tags in HTML.

Paragraph type 1, italic

Paragraph type 2, bold
Display

acts as a capsule on the content.
paragraph

Title (heading)< h2> italic

Paragraph type 1, italic Paragraph type 2, bold

bold

HTML - The "name" attribute "name" is a bit different from "id" and "class". If you give a name to an element this one becomes a script variable fo r Javascript, ASP and PHP. Something that is very often meet in formulations and other interactive text fields.

Exceptions - tags that do not require closing tag There are some tags that do not meet the model shown above.The reason is that in fact these tags do not have content. Due to this f act we will use a modified manner of writing these tags. The simplest example is "linebreak"

Display

This tag is combining the two tags, opening and closing.This way is more efficient to use. Line break is used to tell the browser that we want to get down a line below, but not closing paragraph. Following this example, other tags have been modifi ed to be write in a simpler and quicker way.

This attribute has no effect over the display of the text box, even if in the background it plays a very important role. HTML - "title" attribute This attribute is used rarely . He adds a title (a pop-up) to every element`s content. This attribute should not be fo rgotten. You can name almost everything however you want. The visualization appears when you need to stop with your mouse for a few second above the content.

-- Image Tag -
-- Line Break Tag - -- Input Field -Display

A random title
Display

-- Line Break --

A random title As you can see the browser is able to reproduce the image as long as we provide the location using the attribute "scr". More about this in the next tutorial. HTML attributes The attributes are used to personalize tags. What do i mean ? Somehow , someday you want to resize a image or a table or to change a font color. All these are possible with the help of the attributes. The most tags have their own attributes. We will talk about this as we include in our talking a new tag. But now we will talk about a set of generic attributes which can be used with the majority of the tags. Attributes are putted between the angular brackets (<>) of the opening tag.

Pass with your mouse over the upper title so that you see the magic o f the"title" attribute.This attribute will give yo your site a bit of interaction for those who visit you. Do not pass over this detail. HTML - "align" attribute If you want to align in a diffe rent way some elements of your page then you have at your disposition the "align" attrib ute. You can align to the left, right or the center of the page almost every element. By default elements will align to the left, excepting when it is specified an other alignment.

3

Centered title

height

Numerical value

Specifies the height of an tabl

title

Defined by user

"pop-up" a title for an eleme

Display Centered title Paragraph's attribute
The paragraph is a base element in text edit ing.The tag for a paragraph is
. He places a empty line above and under the text to make it evident, and the browser will take it as it is.

Other examples:
Title aligned to the left

Centered title

Title aligned to the right
Display

The paragraph is a base element in ...

This places a empty line above and ... < /p>

Title aligned to the left Centered title Title aligned to the right

Display The paragraph is a base element in te xt editing.The tag for a paragraph is < He places a empty line above and under the text to make it evident, and t h browser will take it as it is

The default values for the attributes Most of the tags are attributed standard attributes. This means that if you do not specify an other attribute, the browser will do it for you. For example a paragraph will align by himself to the left, excepting when you specify in an other way; the same is with a table. As long as you practice you will understand many more things about the default values of some tags.

HTML - Paragraph, justify Paragraphs can be edited almost the same easy way as in a text editor. The next example is made with the help of the justify attribute

Generic attributes You must keep in your mind that attributes are used to design the elements of a web page. I have put here together some of the most commune attributes used in HTML :

Attribute

Options

Function

align

right, left, center

Horizontal alignment

valign

top, middle, bottom

Vertical alignment

Display The paragraph is a base element in te xt editing.The paragraph is a base element in text editing.The tag for a paragraph is
. his one places a em line above and under the text to make it evident, and the browser will take as it is. HTML - Centered paragraph
Display

bgcolor

numerical, hexadecimal, or RGB value

A background behind an element.

background

URL

An image behind an element.

The paragraph is a base element in te xt editing.The paragraph is a base element in text editing.The tag for a paragraph is
. his one places a empty line above and under the text to make it evident, and the browser will take it as it is.

In this example every line of the paragraph has been centered in the middle of the giving back line.

id

Defined by user

Names an element which will be used with CSS. HTML - The paragraph aligned to the right, right

class

Defined by user

Classifies un element which will be used with CSS

Display

width

Numerical value

Specifies the width of a table, image or table box.

4

The paragraph is a base element in te xt editing.The paragraph is a base element in text editing.The tag for a paragraph is
. his one places a em line above and under the text to make it evident, and the browser will take as it is.

All the lines of the paragraph had been arranged, in the upper example, to the right. HTML - Titles 1:6 (Headings) In HTML, a title is exactly what it looks : a real title or a subtitle.When you put a text in a tag
, the text will be bolded, and the dimension of the letter will be the sam e with the number of the heading. The titles can have dimensions form 1 to 6 , where 1 is the smallest dimension and 6 the biggest dimension.

A line break is different from the other tags that we have s een before. The place we put it in the source cod of the document, will end the line and it will go down with a line , letting a space which is smaller the the one from the paragraph. In the paragraph is used , as you can see, in the next example.
Charles Brownstone
Florida Street No 1
New York, USA

Headings

are

great

for

titles

and subtitles

Display Charles Brownstone Florida Street No 1 New York, USA As well it can be used for pointing out a signature , for example at the end of a letter.

Display

Thank You,

Charles Brownstone
Vice-President
Display Thank You,

Charles Brownstone Vice-President HTML - Horizontal Rule Use
to create a horizontal line. THis tag is similar with line break.

You can see that every title has a linebreak before and after. Every time you put a heading, the browser will give automatically a space in the line before it and after as well.

Use
With
Caution

HTML - Practical example Lets take now an easy example and practice it for a bit so that t he information will be understood totally. It would be recommended for you to get used to these terms before we go on.
HTML - Titles 1:6 (Headings) A title in HTML is exactly what it looks : a real title, or a ...

A title in HTML is exactly what it looks : a real titl e, or a ...

Display

Display

Use

HTML - Titles 1:6 (Headings) A title in HTML is exactly what it looks : a real title or a subtitle.When you put a text in a tag
, the text will be bolded, and the dimension of the letter will be the same with the number of the heading. The titles can have dimensions form 1 to 6 , where 1 is t he smallest dimension and 6 the biggest dimension.

With Caution

The horizontal line can be useful in differ ent circumstances, like you can A title in HTML is exactly what it looks : a real title or a subtitle.When you see in the next example : a footn ote. put a text in a tag
, the text will be bolded, and the dimension of the
letter
1. "The Hobbit", JRR Tolkein.
will be the same with the number of the heading. The titles can have 2. "The Fellowship of the Ring" JRR Tolkein.
dimensions form 1 to 6 , where 1 is t he smallest dimension and 6 the biggest dimension. Display Line break

5

1. "The Hobbit", JRR Tolkein. 2. "The Fellowship of the Ring" JRR Tolkein.

Display

As you can see, everything that this tag does is to draw a horizontal line separating different parts of the content or it just decorates the page. Use it with skill and it will give unexpected results. HTML - Lists HTML has three types of lists.
shows a ordinate list while
a disorderly one, and for making a definition list is used
. Use the attributes type and start for making a list in order with your requests.
- unsorted list, bullets
- ordered list, umbers
- definition list.

Small letters

Capital letters

Roman numbers with small letters

Roman numbers wi capital lett

A job Money Other city




Unsorted list It makes a unsorted list with the help of the
tag. The disordered lists are splinted in many types : squares, bullets, and circles. The standard value gave by the majority of t he browsers are bullets.

HTML - The ordered list Use
tag for starting a ordered list. if you put
(list item) between

Shopping list

milk

cheese

eggs

sugar

Objectives

To find a job

To take a lots of money

To move in an other city

View the example

Display I have put together in the next example how it looks the other types of unsorted lists.

Objectives To find a job To take a lots of money To move in an other city

View the example

You can start your list with any number you want just specifying it with the help of the start attribute.

HTML - The definition list As well you can make definition lists using the
tag. This list will give the word above de definition. It is indicated t o bold the word so t hat it will be more evident.

Objective

To find a job

To take a lots of money

To move in an other city

Quieso

Spanish word for cheese .

Ordenador

Spanish word for Computer

Display

View the example

Objectives To find a job To take a lots of money To move in an other city

HTML - Formatting elements As you put as many texts as you can in your page, you will need new elements of formatting your page as you want and need. In attribute's tutorial we have talked about ways of adding style to your wanted elements. This formatting tags can make elements bold italic underlined cut and not only

This element is not doing anything out of common but is pretty useful sometimes.

Example of Bold Text

Example of Emphasized Text

Example of Strong Text

Example of Italic Text

Example of ^{superscripted Text}

Example of _{subscripted Text}

Example of ~~struckthrough Text~~

Example of Computer Code Text

HTML - Other types of ordered lists Excluding the upper example there are other for types of ordered lists.In the place of the arabian numbers you can use roman numbers or as well letters but in both cases it can be used only small letters o r capital letters. Use the type attribute if you want to modify the type of the numbering

Display

6

Example of Bold Text Example of Emphasized Text Example of Strong Text Example of Italic Text superscripted Text Example of Example of subscripted Text Example of struckthrough Text Example of Computer Code Text

bgcolor="#FFFFFF"

The "F" letter is the maximum value whom the system can take. When a browser sees this cod it will show the white color.In case you want to find out the numerical value of this color we have the next formula: (15 * 16) + (15) = 255

HTML - How to use the formatting tags These tags should be used with moderation. What i am trying to say is that is indicated to use them for bolding or tilt a word or paragraph. When you want to use them for example in a whole paragraph, the best is to use CSS . Anyway this in just an advice, after all the decision is yours and you can use them in correlation with how your experience indicates you. HTML - Color codes There are three different ways of defining a color. The easiest way is to name the color in english. For example: black, white, red, green and blue. I have put together the names of the color which are supported in HTML

The formula is very simple. We take the first value of the "F" or 15 and is multiplied with 16 and we add to the second value 15. The result is 255, the maximum value whom a primary color can have. bgcolor="#CC7005" CC(RR - Red) (12 * 16) + (12) = 204 70(GG - Green) (7 * 16) + (0) = 112 05(BB - Blue) (0 * 16) + (5) = 5

HTML - The RGB color system This color cod is not recommended because Internet Explorer is the only browser which supports RGB values in HTML. RGB is a shortcut from : Red, Green, Blue. Every single color of these can take any value between 0 (which doesn't matter) and 255 (the fu ll proprieties of that color). I have put together in the way of how you write RGB colors. If you use a browser which is not Internet Explorer you will have no result.

True colors The hexadecimal system is very used for creating pages. This is compatible with the majority of the browsers, in t his way the displayed colors for a web page will not be changed. As an assurance, use the colors true colors like : "#0011EE", "#44HHFF", or "#117788". This type of colors will not be changed in a browser. Here we have a list of the true colors We recomand to stick to these 216 "web-safe". However, 8-bit color displays were much more common when the 216-color palette was developed than they are now. Anyway, it has been discovered that only 22 of the 216 colors in the web-safe palette are reliably displayed without inconsistent remapping on 16-bit computer displays. We atached here a table with thise 22 realy safe colors: HTML - Font and Basefont The tag is used for modifying the type of a text, the size and the color. Use "size", "color" and "face" attributes to personalize yo ur text and the tag to set the color, size and the style of a whole text. Mostly the "font" and "basefont" tags are not used m uch because is used CSS to establish a text`s attributes.

HTML - The hexadecimal color system The hexadecimal system is pretty hard at firs t look but with all this we assure you that once with the time passing, and with a bit of practice, you will understand it fully. The hexadecimal color system is the standard system for all the web browsers. Is confident and compatible not only in web applications. The hexadecimal system is a representation of 6 color characters. First two characters (RR) represents the red value, and the next two (GG) are green, and the last two (BB) are blue. bgcolor="#RRGGBB"

The Font Size Set the size of your font. There are accepted values between 1 (the smallest) and 7(the biggest).The standard value of a text is 3.

HTML - Color cod - Breaking the cod The next table shows , more precisely, how the letters are integrated in the hexadecimal system, making the combination possibilities bigger. Decimal 0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

This is font size 5
Display

HEX This is font size 5 0

1

2

3

4

5

6

7

8

9

A

B

C

D

E

F The font color Set the color of the text

In this way the possibilities are bigger and the system can have 16 values. An example of hexadecimal cod would be:

font color="#990000">This text is hexcolor #990000
This text is red

7

This text is hexcolor #990000 This text is red

Customize

Font Face Pick a letter style using the "facefont" tag. You can choose any font you have installed, but choose the font with care because the user on your page can`t see the font if he hasn`t got installed your font.He will see t he default font meaning TImes New Roman. The solution would be to choose many fonts who look the same.

your font to achieve a desired look.

HTML - Hypertext Reference / href The "href" attribute names the connection to an other web page. Actually is the place where it will be sent the user who clicks on the link. Links can be : intern - to specifically places from the page(anchors)> locals - to other pages from the same domain globals - to other domains, outside the site

This paragraph has had its font...

Internal - href="#anchorname" Local - href="../img/foto.jpg" Global - href="http://www.tutorialehtml.com/"

HTML - HTML - Text links To set the beginning and the end of a anchor it can be used . Choose the type of the attribute that you need then put it inside the tag. Example:

This paragraph has had its font formatted by the font tag!

Basefont With the help of the "basefont" tag y ou can establish the default value of the font in your web page.We recommend to specify a "basefont" in case you will use the font in HTML. What is next is an model.

Zizix Tutorials< Display




Zizix Tutorials

HTML - Link targets The "target" attribute tells to the browser if it needs to open a new page in a new window or in the same window.

This paragraph has had its font formatted by the basefont tag! This paragraph has had its font formatted by the basefont tag! This paragraph has had its font formatted by t he basefont tag!

target="

With all these, "basefont" is somehow exceeded. In the close future is possible that it won`t work with it anymore but with the help of CSS.

_blank"

Opens a new window

_self"

Opens a page in the same window

_parent"

Opens a new page in a superior frame of the link

_top"

Opens a new page in the same browser canceling al frames

Attributes

Attribute=

"Value"

Description

size=

"Num. Value 1-7"

Size of your text, 7 is biggest

color=

"rgb,name,or hexidecimal"

Change font color

face=

"name of font"

Change the font type

The next example shows how a new page can be opened in a window of the browser. In this way we can remain on the tutorial`s page and open a new navigation page. Google Display

The beginning "by the book" Google
Customize your font to achieve a desired look.
HTML - Anchor

8

Is used to link two sections of the same page. In this way we need to give a name to those sections, but for this is indicated to take a look at the next example.

start page, but is as well accepted any other page, eventually a special page made in this purpose.

HTML - Hypertext Reference / href

HTML - Text links

HTML - E-mail text

HTML - Entity/Symbol In HTML, "entity" is a fancy name for "symbol". Some symbols as copyright, trademark and many others, some of them are available on your keyboard, need a special writing.

Next, we need to make a code to the link by putting before the a nchor`s name Go to top Learn about text links Learn about e-mail addresses

Start with the ampersand sign -& After that we will write the name of the sign - copy At the end a semicolon - ;

Display

Copyright

Go to the beginning Learn about text links Learn about e-mail addresses

Use © to make - © - Copyright Symbol

HTML - E-mail link To make an e-mail link is very simple.If you want someone to write you an email the best thing to do it would be to put at its disposition a link with your email and a pre-established subject.

Multiple spaces and <> As I said in the lesson about paragraphs, a browser will recognize a single space, indifferent of how many you put in a HTML code. But there is a entity which can be introduced to show more then one space.

Questions here Display

In this phrase there had been introduced more spaces.
Display

Questions here

In this phrase there had been introduced

In case the subject is not enough and yo u want yo add something else to the email`s content, you can do it with the help of the next code:

more spaces.

To make commands in HTML you use the "more" and "less" symbols.For being showed in the browser you should use a entity.

Questions here Display Questions here

Less then- <
More then- >
Head tag -
Display Less then- < More then- > Head tag -

HTML - Download links A download links looks like a normal link text. The problem kicks in when we want to add a photograph.The best solution it is to use a thumbnail with a link, but we will talk more about this problem in the next lesson.

Now take a break and practice a bit with this symbols. A bigger list of these you find it HERE. As you will observe in this table, it can be used as well a numerical value replacing the standard name of the symbol. HTML - Creating links of email type Creating links of email type is very simple. It must be mentioned that Text Document when you put a email`s link on a public page, is very easy for a expert to find it and use it later to send spam messages. A different way, which lowers the risk of spam, is the implementation of HTML - Default link/Base link an e-mail form in the content of your page. use the tag in the interio r of the element to set a base HTML - E-mail links link. This is necessary in case you have somewhere a link which doesn`t If you want someone to write you an email the best way is to put a link work or in case the destination it doesn`t exist anymore.The base link with your email and a pre-established subject. sends the user to the specified address. Usually it sends the user to the

9

Questions here Display

The fact that storing the image on an alternative server, presents a great advantage if the space provided for your domain is a limited one

HTML - "alternative" attribute for images Attribute "alt" is used to display text instead of image in case your browser for some reason can not display the picture or when a user has the "ShowImage" option unselected.

Questions here

In case the subject is not enough and you want yo add something else in the email`s content , you can do it wi th the help of the next code:

Display

Questions here Display HTML - the height and width of an imag e To determine the height and width of an image is used and "height" attributes "width". Logical, no!

Questions here HTML - Inserting images The images are very important in a web page. It is therefore important to use them in the right way. Insert images using the tag .

Display

Display HTML - horizontal and vertical alignment of an image For this we will use the attributes align and valign. The options offered by these attributes are: 1. Align (horizontal) right left center 2. Valigh (vertical) top bottom center Example:

HTML - img src "src" is shortcut for "source". This attribute is used to indicate the photography location. As explained in the links Tutorial you can use any URL to point to the file.

Local source

Description

src="image.jpg"

the picture is located on the same level as .html file

This is the first paragraph ...

This is the second paragraph...

This is the third paragraph...
Display

src="../image.jpg"

the picture is located in previous level as .html file.

src="../img/image.jpg"

the picture is located in the "img" folder in a previous level as .html file

You may also address the full URL. For example scr="http://www.tutorialehtml.com/img/image.jpg. The URL pattern is not recommended because in case you change the domain you will have to change as well the addresses of all photos. Or if the image is stored on another domain: scr="http://www.domeain.com/image.jpg.

10

This is the first paragraph, This is the first paragraph,This is the first paragraph,This is the first paragraph,This is the first paragraph. This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the same second paragraph, This is the same second paragraph, This is the seco nd paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph, This is the second paragraph. This is the third paragraph, This is the third paragraph, This is the third paragraph, This is the third paragraph, This is the thir d paragraph.

HTML - Using images as links This is only an introduction, we will talk more about this in the next tutorial. The images are very useful as links and can be formed as fallows

Display HTML - Forms Forms are one of the most important tools used by a webmaster to gather important information about an internet user, information's such as e-mail, name, address, phone or any other kind of info. Based on the necessity the information can even be stored on a file, you can make statistics, register forms or subscriptions to the information presented in your web page, and many others.

The image above will send to the home page. You can change it to your start page and here you have a pictur e with a link to your start page HTML - Thumbnails Thumbnails are miniature version (less kilobytes) of i mages that have a much higher quality. To create a thumbnail, save the image in a lower quality then the original one. then link this small image to the original high quality image. Display

HTML - Text fields Before getting into detail, we have to expose a little a form's basics. Text fields have got a few attributes t hat have to be mentioned since the beginning: type - establishes the text field's type. For example: text, sending, or password. name - gives the field a name for further reference at a later date. size - sets the size of the field. maxlenght - the maximum value of characters that can be typed.
Name:

HTML - Image links With image`s help you can give a bit of life to a web page. Transforming an image in al ink is not however hard.You just need to introduce the source of the image in the interior of the tag link.

Display Top of Form

Name: Password: Bottom of Form

Display

DO NOT use this code. Data from the form will not be encrypted and will not be safe in terms of security. In most of the cases by default most of the browsers adds a border to the image used as a link, for being easy to differentiate it from a normal image. So that you would not have problems of different viewing because of the browser we can set the border to a defined value.

HTML - Email forms Let's add the send button now, shall we? Generally, the send button should be the last and to have the attribute named as 'Send', 'Submit', or something around that. We also need to specify a destination of the data entered in the form, as well as the transfer mode. This can be done by adding the following form attributes: method - We will use the "post" method. This sends the form with the information inserted without displaying the user's details. action - This will be used to specify the URL where the information will be sent.

Display

Name:

HTML - Thumbnails The thumbnails are versions in miniature(a lot less kB) of some images which in reality are bigger and with a better quality.To make a thumbnail, save the image in a poor quality and in small dimensions. Then make this image a link which will lead at the initial image of big dimension.

Display

11

Top of Form Shades of gray Name: Black and white Password:

Email Myself

Send

Bottom of Form

Bottom of Form HTML - Another types of list f orms Another model of list form is the following, in which the user selects a certain line that will be sent as the chosen option.

Just change the e-mail address to a real one for it to work! HTML - Radio Buttons The radio buttons are very popular, useful and easy to use. The most used example would be a question with more than one answer choice. The must be known attributes are the following: value - specifies what will be sent in the case in which a user select s a certain button. Only a single value will be sent. name - decides which button set does the selected button belong to.

Musical preferences

What type of shoes you wear ?
Color: Dark Light
Size: Small Average Big

Display Top of Form Musical preferences

Display Top of Form What type of shoes you wear ? Color:

Dark

Light Email Yours elf

Size:

Small

Average

Big

Bottom of Form

Email Myself

Another form model is the 'drop-down' menu. This will be displayed as a field, which will then show a list when a c lick is made on it.

Bottom of Form In the case in which you will replace the email address with yours you will receive an email with: 'size=(choose) color=(choose)'. HTML - Checkbox Using checkboxes the user has got the possibility of choosing one, two or more answer variants. The name and value attri butes are used the same as for the radio buttons.

What color shoes you prefer?

Simple Black
Simple White
Shades of gray
Black and white

Display Top of Form What color shoes you prefer?

Level of education?
Display Top of Form Email Yourself

Level of education? Bottom of Form HTML - Upload form First of all it must be ment ioned that this form is only the interface, the visible part with which the user will be able to work with. To make a complete upload form PHP and PERL knowledge and skills, not to mention javascript.

Simple Black Simple White

12

An upload form is composed of many parts. We will start by establishing the size of the file t hat we will upload. This thing is done using a hidden field. After that, we will create the f ield in which the user will be a ble to write the address of the file or will be able to browse for it in an 'explore' window.

Row 1 Cell 1

Row 1 Cell 2

Row 2 Cell 1

Row 2 Cell 2

The content will be placed within the table's rows. A row represents what is between and . The border attribute e stablishes the length of the table's edge.

Display

HTML - Asymmetrical tables To form asymmetrical tables we will use 'rowspan' to cross more than one line and 'colspan' to cross more than one columns. Also, if we want that the first line to serve as titles line for all the columns we will use the tag. These will be written with bold l etters as we will see in the following example:

HTML - Text zones, comments Generally, text zones are used to send comments. Blogs and forums are the main web pages that are using t hese kind of options. Nevertheless, there are many sites that are using these text zones to find out their user's opinion on a certain matter. To create a text zone we will first specify the rows and cols attributes within the tag. 'Rows' will establish the height of the field, and 'cols' its length, in means of characters. In the following example there are 5 lines of 20 characters each. Also, we must specify the attributes of the warp tag, those being: wrap= 1. "off" 2. "virtual" 3. "physical"<br /> <br /> <table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table><br /> <br /> <form method="post" action="mailto:youremail@email.com"> <textarea rows="5" cols="20" wrap="physical" name="comments"> Write a comment

Display Column 1

Column 2

Column 3

Row 1 Cell 2

Row 1 Cell 3

Row 2 Cell 2

Row 2 Cell 3

Display Top of Form Row 1 Cell 1

Email Y ours elf

Row 3 Cell 1

Bottom of Form Also, it must be mentioned that everything you will write will be shown within the text zone. HTML - Tables Tables can be difficult at first, but with a little patience and practic e you will se that things are not always how they seem to be. The tag is used to open a table. Within this tag we will find two others typical tags, (the table lines) and
(the table column). But the best explanation is always an example:

HTML - Spacing the cells With the help of the 'cellpadding' and 'cellspacing' attributes we will establish the distance between the cells. 'Cellspacing' establishes the size of the edge, and 'cellpadding' the distance between the edge and the content. In the following example a litt le bit of color has also been added.

Row 1 Cell 1 Row 1 Cell 2


Display

Column 1 Column 2



Display

13

First of all we put into practice an example of a table of scores coloring a table to highlight certain aspects.

See this example in a new window.

To better make the difference we will erase the edge from the previous example.

Column 1 Column 2



Display

Green Bay 30

New England 11

Display


An example of a paragraph on a gray background:

T paragraph tag has...


The distance between the cells and the edge's size will be interpreted in pixels by the browser. Using this 'law' a value o f 10 means actually 10 pixels. This attribute is not the only one that uses as unit of measure the pixels, but we will learn about the ot hers as we progress through the next tutorials. HTML - Bgcolor The Bgcolor attribute is used to establish the the background color of an paragraph, table or any other parts of the HTML. It is recommended the moderate usage of this tag. It is also recommended establishing the background colors and the text styles or links, with the help of CSS. We will explain in more details how that can be done in a later CSS tutor ial. <"numetag" bgcolor="Value"> This is a model of how the bgcolor attribute will be used within a tag.

Display

See this example in a new window. HTML - Background Beside a solid color for the background, you might as well use an image. To do this thing follow the example carefully:

This table has a background image

We set the color...

Display

Display


HTML - Adding color to the tables The following example shows you how to color a table in many colors, using the 'bgcolor' attribute.

HTML - Repeated background (tile) We were lucky in the first example that both the table and the image had the same size. But there are situations where the table is larger than the image, and then the image will multiply itself endlessly.

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

This table has a background image

Display

Display


HTML - Font and background together

14

HTML - Patterned Backgrounds Repeating an image has got another application as you will see in the the following example. This browser's function of repeating the image endlessly can be used as an advantage and that is, we can create a very small image (with the help of Photoshop or Corel Paint Shop PRO), for example 4x4 pixels. This image can be a certain model that will repeat endlessly. The image :

View this example in a new window

The image was enlarged to be viewed more clear.

This table has a background patterned image

Display

frameset - the tag that establishes the characteristics of the frames, the individual frames will be defined within it. frameset cols="#%, *" - "Cols" establishes the height that each frame will have. In the previous example we have established that the first f rame (menu) will occupy 30% of the shown area, and we used the " * " sign to indicate the browser that the rest in the rest of the page will be shown the content. frame src="" - the address of the files that will be displayed as menu and content. HTML - Frame - Adding a banner or a title Use the following code: frameset rows="#%, *" - "rows" establishes the height of each frame that will be displayed. In the previous example we have c hosen that the first frame will be 20%, and the rest of the space that has remained will be divided between menu.html and content.html

HTML - Transparent background color Another method of using the repeated image is the transparent background. So prove this we will use a '.gif' image. Placing this image in the background has to be done in the same manner as in the previous example.

HTML - Frame - Borders and Spaces You must have noticed that between frames there are some gray lines that most of the time are not wanted. Erasing them is possible using the frameborder and framespacing tags. These attributes will be intro duced under the frameset tag. **Note: Frameset and frameborder is the same attribute. There ar e some browsers that do not recognize both of them, just one of it. That being said, our advice is to use both of them for more security.

This table has a red transparent background image

Display

HTML - Color chart To help you we have made a table with the c ode of every color in the hexadecimal system. For a tutorial of how these have to be used in the HTML system read thebackground tutorial . HTML - Frames Frames are used to show more than one html doc uments in one window. That means you will have a content-less, that will have the role of showing the browser what pages must be displayed. Since PHP and CSS have been introduced, this technique has been used less and l ess.

frameborder"#" - The 0 value means there will be no border border="#" - modifies the border's thickness (used by Netscape) framespacing="#" - modifies the border's thickness (used by I nternet Explorer) Here's a practical example:

HTML - Frames, Credit's page Generally, frames are used to display a menu in a part and the content in another part. When someone will click a l ink from the menu another page will open in the content part. We will exemplify this using the following code:

HTML - "Frame name" and " Frame target" To maintain the menu in its actual position and that when we click on the contact page to open, for example, instead of the content page, we will name every frame and we will specify the place where it will open using the 'base target' tag. Here is our code for the page:

Display

15

width. The more you will be more specific in establishing these attributes and not only these, the less bugs you will have.

Noresize and scrolling You can personalize the frame further more using the noresize and scrolling no resize - does not let the frame to change its dimension ba sed on the user's screen. scrolling="(yes/no)" - allows, or does not allow, using the scroll in a frame. HTML - Layouts A layout does not have many options. On the ot her side, a table is very useful. In a table you can add almost every element, even another table.

Banner goes here

Links! Links! Links!

Content goes here

Study this code a little bit, organize it so that you will be able to understand it. Copy it in a new document to see it. HTML - Comments are often used in the HTML codes. That is why it is important not to be pointed out to the browser to avoid showing them.

There are many reasons we can add a comment within a html script. A note or a reminder, a specification or a clarification. Javascript comments An unfinished element

Tables inside tables!

Try copying this into a notepad fil e, then save it as .html and see what happens!

The comment will be placed between the "" tags. This way, we will be able to leave a note to remember on a later time what the code was for, or if something is still needed to be introduced in there. Display

HTML - Standard layout A standard layout is composed of a banner in t he upper part of the page, a menu in the left part, and t he content zone in the middle o r in the right. This is the most classic layout for a web site, and, in my opinion, a representative model.

Place a banner here

Links!

Links!

Links!

Content goes here

This is just an example of the things you can comment in a script. In time, you will learn that these comments are very useful for a better understanding of the code at a later date. Any text, or characters, symbols or anything else placed between the opening tag "" will not be shown by the browser. HTML - Unfinished script Comments are very useful when you work at a script but you leave it unfinished. Putting it between the two tags () will be interpreted as a comment by the browser and t herefore will not be shown.

Display When you have finished the code and you will need to show it all you will need to do is to erase the two tags and the browser will show the wanted script.

See this example in a new window

This is a basic approach. As you will see i f you use these layouts in your web page, it will become very complex as yo u add more content. Nevertheless, it is very important that you specify the height and the

16

Display

<meta http-equiv="refresh" content="10; url=http://www.tutorialehtml.com" /> Redirect is easily done by changing the address of the web page with the one you want it redirected to. The application is welcomed when you buy a new domain and the redirection of the users to the new page is wanted.

HTML - Javascript comments Comments are also used in javascript. We will talk about this in another tutorial though, dedicated to that subject. These comments will have a different goal than the informative one though. tags The meta tag is used to generate additional info to the search engine. These information will not be unless that user will select view 'Source' from the 'View' menu where he will have access to the HTML part of the page.

<meta http-equiv="refresh" content="5; url=http://www.etutoriale.ro"

Meta keywords In the meta tag you can add words o r keywords. Here will be put the most important words that can target to your web site. It is recommended that you do not abuse these tags, because usi ng keywords that have no link to the web site's content, neither the search engines nor the users will gain any profit. Here is a moderate example of using the meta tag <meta name="keywords" content="Tutorials, zizix, HTML, web, resources, webmaster " /> This example is based on this page's profile. As you can see, the name specifies what kind of meta tag will be used. Also, the comma that is used to separate the wor ds from each other has to be specified, something trivial but something that many forget once they have to do it

Inserting Javascript and Vbscript in HTML Javascript and Vbscript are often used in a HTML page code to give more liveliness to the page, or just for one of the many applications of t hese scripts. Using these scripts you can create dynamic animations of some photos, an animated menu with amazing effects and so on. Also, one of the most important applications is that of validating a form before sending it. This will make the user spend c onsiderably less time in the case the user has wrongly completed the fields, and a r eload of the page being needed. In this part we will only talk about the method of inserting the script into HTML Note: Most of the time it is much easier to just download from someone else than to write these scripts. Of course, that is just possible only if the author has given his/her agreement. Inserting Javascript in HTML Inserting a javascript code is done very easily using the script tag. Here is an example: <script type="text/javascript">

Meta description This tag helps you to describe your web site. A maximum of two sentences will be used to complete the content of this tag. <meta name="description" content="A web site resource for those willing to learn HTML and webmasters " /> As you can see, the name specifies what kind of meta tag will be used. Also, the comma that is used to separate the wor ds from each other has to be specified, something trivial but something that many forget once they have to do it.

For the javascript codes the 'text/javascript' value will be given to the type attribute. Inserting Vbscript in HTML Inserting a vbscript code is done i n the same way as the javascript code is done, only that you replace the 'text/javascript' with 'text/vbscript'. Here is the example: <script type="text/vbscript">

Revised tag in meta It is used to specify the latest bringing up to date of the web site. <meta name="revised" content="1/08/2008" />

It is always recommended to insert a comment along with the javascript and vbscript codes. That will warn the browsers that do not support that kind of script, or browsers that have javascript and vbscript disabled. Inserting codes for music in HTML Some time ago it was quite complicated to insert music or sounds o n a web page. Now, that problem is solved, adding sounds being quite simple.

Refresh and redirect in meta Refreshing is done with the help of the http-equiv="refresh" attribute The purpose of this tag is to reload the page and to display new info in the case of a bringing up to date. A very useful application for a forum, for example.

17

loop - establishes whether the file will be replayed after it is finished. Can have the true or false value.

playcount - this establishes how many times the file will be replayed. For example playcount="2" means it will be replayed two times and after it will stop. It is recommended that both height and width to be directly proportional to avoid problems. To hide the player the value of t he hidden attribute (which is false at the moment) will be replaced by true. This t hing is done if you are absolutely that the user does not wish to stop the sound.

Inserting a You Tube video You can do that very easy, because You Tube has on every page the needed HTML code.

Controlling and manipulating the player Let's have a look on the above example: autostart - establishes whether the sound will start immediately after the web page is loaded. Can have the true or false value. loop - establishes whether the sound will be replayed forever. Can have the true or false value. volume - can have any value from 1 to 100. You can play a little with these at tributes to better memorize and understand them, and also be aware that a higher volume may be annoying for the user. Inserting HTML codes for video A video file can be inserted in a html page in two ways. The first way would be using the tag. This tag does not need an ending/finishing tag. It works, mostly, the same as a tag for an photo works

Truth is that everything you see is quite chaotic, but the good part is that you only have to copy it from the You Tube, and paste it, and you will have your video. good luck !!! HTML - The input tag The input tag does not need an ending tag and can have numerous attributes: text password radio checkbox reset submit HTML - Text fields and passwords ...of which you have certainly completed a lot of, over the time, on the Internet.

Also, you can insert a video file using a link Display film name

film name

Write something in the boxes above to note the difference. HTML - Checkboxes Ideal for offering the user the option of selecting more than one answers

Supported extensions for the embed tag These are: .swf - made by Macromedia Flash .wmv - Microsoft Windows Media Video .mov - Quick Time Movie, belongs to Apple .mpeg - created by Moving Pictures Expert Group. The most used are .mpeg and .swf, because of the compact format.

Attributes of the embed tag autostart - establishes whether the file will run automatically after the page is loaded. Can have the true or false value hidden - establishes whether the buttons are hidden or not. Can have the true or false value. volume - can have any value from 0 to 100

HTML - Radio And I am not meaning a music radio, but a little circle which offers the possibility of choosing only one answer for a single question.

18

Display HTML - Another attribute is value Using this attribute we will make possible the writing of the information in our fields, information which the user can erase or not. This application is quite useful, especially when a php scri pt is integrated which recognizes a visitor and keeps the o ptions chosen by the said user.

HTML - Submit buttons Here, we will have to give a value to the submit attribute, this being the text that will be shown on the ge nerated button.

1234

Zizix

Submit

HTML Tutorials Next step>>

HTML - Maxlength Maxlength is one of the most useful attributes of the text fields, because it does not allow the user to type more bigger number of characters than intended.

HTML - Reset Buttons Here, same as with the submit button, we will have to give a value, that being the text that will be s hown on the generated button. This button is extremely useful in the cases in which the user completes the majority of the forms with wrong information.

The Result

Reset

Delete All

In case you want to introduce more than 5, 15 and 25 characters in the above fields, this thing will not be possible because of the restriction applied by 'maxlength'. HTML - Password The password fields are a special category o f the input tag. Still, writing them is as simple as writing a normal text field.

HTML Input fields - Note It must be specified that those fo rms and buttons will not fully act without the help of a php or javascript fi les that will execute the wanted action once one of these buttons is pressed. In the next tutorial we will go more in depth with the shown attributes and you will also show some things that we have not yet mentioned. HTML - Text Fields Text fields are encountered as forms. Those are processed with the help of a programming language, most of the times ASP, PERL or PHP. Additional attributes that are used for formatting the text fields are: size value maxlength We will exemplify each of them.

And the result is a field in which the text is hidden under asterisk s, stars squares or black circles, this depending on t he browser's interpretation.

HTML - The text field size The size attribute establishes the text field's l ength. The standard length of a text field is usually between 20-25 characters, but it can vary depending on the forms or the text field's purpose.

Password fields in HTML - Note As you can see, there is no big dif ference between the structure of a normal text layer and the structure of a field that contains a password. It must be mentioned that these password fields are not encrypted, and using them without any safety measures as it was presented above is not recommended.

The Result

19

Encrypting these fields is done with another programming languages such as php or JavaScript. HTML - Checkbox Checkboxes, as we said in a previous tutorial, are part of the applications that the input tag offers. What is different from the previous tutorial is that we will look more into the subject this time.

Choose citizenship Rumanian: English: Spanish:

Checkbox - Creating the lists The checkboxes come in the help of t he user, easing up the choosing simultaneously of more than one answer.

Specifying a name for the category of which the form is part of we will let the browser know how to make the difference between more than one radio forms, therefore allowing the choosing of a single answering variant for each
Chouse your favorite colors .
form Blue:
Yellow:

Choose citizenship
Red:
Rumanian: Green: English: Spanish:
Choose sex
Man: Woman:

Chouse your favorite colors . Blue: Yellow:

Choose citizenship

Red:

Rumanian: Choose sex

Green:

Man:

Checkbox - Default selected boxes ' Checkboxes also offer the possibility of being already checked in order to ease up the user's work in some situations. This thing is done with the help of the checked attribute, with the yes value.

English:

Spanish:

Woman:

HTML - Radio buttons selected 'by default' Same as with the checkboxes, the radio buttons can be selected to ease the user's work up.

choose citizenship

Chouse your favorite colors .
Rumanian: Blue: />
Spanish: Yellow:
Red:
Display Green: Choose citizenship Chouse your favorite colors .

Rumanian:

Blue:

English:

Yellow:

Spanish:

Red:

Any of the options can be selected, not necessarily the first. Also, it is good to use this method of selecting certain buttons with moderation and only when the required information is not of major importance. It is possible that the user, out of comfo rtableness or inattention, to choose the already selected option without it being the correct one for him in that case. HTML - Text areas Text areas of this kind are used for comments, blogs, memos or any other purpose that requires an expression space. To create a text area we will need an opening and ending tag like this:

Green: You can try to play with this applicatio n a little. It is quite sim ple but very useful in my opinion. HTML - Radio Buttons The radio buttons are used to allow the user to choose one of the listed options. To be able to make this type of form we will firstly need to give a name to every field.
Choose citizenship
Rumanian: English: Spanish:

Text area! Display

Display

20

Text area - text areas, size To change the standard size of a text area we will use columns and lines, with their HTML usage, cols and rows. Those will have numerical values. The bigger their value will be, the bigger the text area will be.

Text area - The 'readonly' attribute Depending of the value of this attribute, the user is able (or not) to change the content of the text area. The readonly attribute can have the 'yes' or 'no' values.

Text area! Text area! Text area!

As you can see this te xt cannot be modified. In the case in w hich the 'no' value would be chosen the opposite result would be obtained.

Display

As you can see this text cannot be modified. In the case in which the 'no' value would be chosen the opposite result would be obtained. Even though it cannot be modified, it can be highlighted and copied with CTRL-C or right click/copy. Text Area - The 'disabled' attribute The disabled attribute is not much different from readonly. The text will be shown in gray, disabling at the same time the possibility of modifying the text that text area contains. The disabled attribute is not much different from readonly. The text will be shown in gray, disabling at the same time the possibility of modifying the text that text area contains.

Text areas - The ' wrap' attribute This attribute of the tag will establish the way in which t he text will react when it will reach the end of the line. Wrap will have one of the three values: hard, soft, o ff. Hard - will place an enter at t he end of every line and will send the text in the same format it was introduced. Soft - will place an enter at the end of every line, but unlike the Hard one it will send the text in a free format. Off - this will not format the text in any way, letting the text in a single continuous line. The Hard/Soft attribute <textarea cols="20" rows="5" wrap="hard"><br /> <br /> Hard - will place an enter at the end of every line and will send the text in the same format it was introduced.

You will have to practice a bit with these attributes in order to get better. Good luck! HTML - Upload form The upload is a very practical form to allow the users to put photos, films or any other kind of files on the server. To create an upload form we will only have to establish the file value to the tag.

; The Attribute off <br /> <br /> Off - this will not format the text in any way, letting the text in a single continuous line.

21

Upload - Max file size To limit the size of some of the files uploaded on the webhosting server we will use a hidden field.

New York Bucharest Madrid

< input type="file" />

It is to be understood that this at tribute will not work with a drop down list. HTML - Submit Buttons The submit buttons are another use of the tag. Those will show a typical button, which will perform the action of sending the form.

The value chosen in the example above was 500. That means that f iles over 500 kb will not be allowed for upload. A value of 100 would mean 100kb, one of 1000 would mean 1000kb (1MB) and so on. HTML - 'Drop down' lists and selection forms The 'drop down' lists are one of the most practical types of lists. You probably already came across them all over the internet, but without knowing they had a name so fancy.

Submit Send

Continue

As you can see we made a variation of sending buttons, changing the value of the value attribute. This can be modified depending on the necessities. Submit - The sending For a submit button to work correctly it is needed its placing in the
tag and also of a few other attributes. Those will be method and action. Also, we will need a file in PHP, PERL or ASP, to fully complete this action. Another option would be to set the value of the action attribute as mailto, followed by an e-mail address, and the form will be sent to the e-mail address.

The browser will automatically show the first option. This thing can be changed with the help of the 'selected' attribute though.

Name: Last Name:

Bucharest

Top of Form HTML - Selection forms We will use the size attribute to c hange a drop down list to a select ion form

Name: Last Name:

Send email

Bottom of Form Just change [email protected] email with your order form that will be functional. HTML - Reset The reset buttons are used for bigger forms usually, in case the user has mistyped the majority of the information introduced, therefore wanting to erase the entire introduced text.

New York Bucharest Madrid

HTML - Multiple selections In the case in which the user wants to choose more than one of the resented, we will make it easier with the help of the multiple attribute.

Display Reset

22

Delete

Clear form

HTML- The reset button action For the reset button to be functional will be needed to introduce it in the
tag. You can read the tutorial about HTML Forms for more examples.
Top of Form

Delete

Bottom of Form Try to insert a little text and click "Delete" button in the example above. HTML - Hidden fields Hidden fields will not be shown by the browser. Those are necessary when when we have to deal with forms and databases in My SQL or SQL, but it does not limit to that. We will use the hidden fields to send additional information to the database, compared to the information sent by the user.

This fragment of a code will not show anything because the browser treats it as information that must not be shown. HTML - Other attributes We will use the attributes name or id to establish a name for our hidden field. We exemplified above three models of hidden fields that could be of use especially if you have a web page where the user will have to login in order to have access to certain information. The 'admin' field is used to verify someone's rank, 1 being administrator, and 0 nonadministrator. 'Hidden fields' are used when we have to deal with informatio n that we want to put down in more than one form, not willing for the user t o have to insert the information many times.

23

Report "web page hosting: Tags in HTML Conclusion"

Your name

Email

Reason

Description

Copyright © 2024 IDOC.TIPS. All rights reserved.
About Us | Privacy Policy | Terms of Service | Copyright | Contact Us | Cookie Policy

Sign In

Email

Password

Remember me Forgot password?

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close

web page hosting: Tags in HTML Conclusion

Recommend Documents

My first web page !

Welcome.

Welcome.

A random title

Centered title

Title aligned to the left

Centered title

Title aligned to the right

Headings

are

great

for

titles

and subtitles

Shopping list

Objectives

Objective

HTML - Hypertext Reference / href

HTML - Text links

HTML - E-mail text