Embed Size (px)
DESCRIPTION
Complete tutorial of HTML
Citation preview
First web pageFor the beginning copy next HTML cod in notepad. Assure that the operationis right executed or the page will not function.
<html><head></head><body> <h2>My first web page !</h2></body></html>
The upper code , is all you need to 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 HTMLNow 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 <body>. The <body> tag tells to the browser, where the content of the web page begins.<body> is an example of tag who should exist in every web page.
Base tags in HTMLLets take a look at the cod. A web page has in composition two base elements. If you try to create a page without those two tags, you will have problems.
<html><body>Web`s page content will be here</body></html>
First tag is called <<html> and is that which tells to the browser that it had started a HTML cod. The second tag, <body> , tells to the browser that from there it had started the visible part or page`s content.
How to close a HTML tagYou 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 function, and </tag> to stop it .
Tag`s order - very importantThe order of opening and closing a tag is very important.If a tag is opened in an other, for example body is written open in html then that tag (body) is theone 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. The second pageYou 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, likeyou did with the first page.
<html><head><title>My second web page ! </title></head><body><h2>Welcome.</h2><p>Very soon I will make a page which is going to be so cool!</p></body></html>
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 you 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 read the next tutorial.ConclusionIn 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 realHTML TUTORIAL. The tags of which i was talking about are : <head>, <title> , <h2> and <p> .The example in discussion:
<html><head><title>My page! </title></head><body><h2>Welcome.</h2><p>Very soon I will make a page which is going to be so cool!</p></body></html>
<head>This tag is immediately after <html> and is used to indicate to the browser, useful information like : page`s title , content ( used by the old searching engines) and many others
<title>Is situated between <head> and </head>. This tag is the one who give to the page the name. The name will be showed in the 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.
<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.
<p>
1
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 TutorialNow 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 LanguageWelcome to the ZiZix tutorials section . Here you can learn the basic of HTML. After learning this tutorial you will be able to make your own web pages.
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 to spend a quarter or a half hour after reading several lessons, and practice.
Preparing for learning HTMLCreating 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 readBeginner's Guide, I suggest you spend a few minutes reading it.
Web PagesWeb 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
Words to rememberTag - 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.
The following tutorialsFor 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 the bottom of the page.HTML ElementsHtML elements have many ranks.All you see : paragraphs, ZiZix`s banner, thenavigation links from the left side and the right side , all are elements of this page.An element has three parts : an opening tag, element`s content and an closing.<p> - the tag that opens a paragraphElement`s content - the paragraph itself.</p> - the closing tag.***Note:All the web pages will have at least the base elements: html, head, title and body.
<html>element...</html>
An HTML document will always begin and end with a <html> tag and respective</html>. This is the standard structure of an HTML.
Please open a Notepad and copy the next cod :
<html></html>
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 white !
<head> elementThe <head> element is the one that is next. While you put in between html and body everything should be just fine."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 offer 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:
<html><head> </head> </html>
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 elements.
<title> elementSo 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 </title>) will be seen as browser`s name, usually in the upper right side. Next we have the source code:
<html><head><title> My first web page!</title></head></html>
Now save the file and open it in your browser. You will be able to see the titlein 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.
<body> elementThe 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.
<html><head> <title> My first web page!</title></head>
2
<body> Hey guys! Here we will put the content later ! </body></html>
Now see what you have done, and after i invite you to see what is in the next section.Html tags - IntroductionA 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.
<openingtag>Content</closingtag> <p>Paragraph</p>
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.
<body> acts as a capsule on the content.<p>paragraph</p><h2>Title (heading)< h2><i>italic</ i><b>bold</b></body>
Exceptions - tags that do not require closing tagThere 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 fact we will use a modified manner of writing these tags.The simplest example is "linebreak"
<br/>
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 modified to be write in a simpler and quicker way.
<img src="../img/image.jpg" /> -- Image Tag --<br /> -- Line Break Tag --<input type="text" size="12" /> -- Input Field --
Display
-- Line Break --
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.
THe "class" and "id" attributes in HTMLThese two attributes are mostly the same. They have no straight role in the formatting of the elements but 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 :
<p id="italicparagraph">Paragraph type 1, italic </p><p id="boldparagraph">Paragraph type 2, bold </p>
Display
Paragraph type 1, italicParagraph type 2, 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 for Javascript, ASP and PHP. Something that is very often meet in formulations and other interactive text fields.
<input type="text" name="TextField" />
Display
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" attributeThis attribute is used rarely . He adds a title (a pop-up) to every element`s content. This attribute should not be forgotten. 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.
<h2 title="I am a title attribute!!">A random title</h2>
Display
A random title
Pass with your mouse over the upper title so that you see the magic of 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
3
If you want to align in a different way some elements of your page then you have at your disposition the "align" attribute. 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.
<h2 align="center">Centered title </h2>
Display
Centered title
Other examples:<h2 align="left">Title aligned to the left </h2><h2 align="center">Centered title </h2><h2 align="right">Title aligned to the right </h2>
DisplayTitle aligned to the leftCentered titleTitle aligned to the right
The default values for the attributesMost 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.
Generic attributesYou must keep in your mind that attributes are used to design the elements ofa 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
bgcolor numerical, hexadecimal, or RGB value A background behind an element.
background URL An image behind an element.
id Defined by user Names an element which will be used with CSS.
class Defined by userClassifies un element which will beused with CSS
width Numerical value Specifies the width of a table, image or table box.
height Numerical value Specifies the height of an table,
title Defined by user "pop-up" a title for an element
Paragraph's attribute <p>The paragraph is a base element in text editing.The tag for a paragraph is <p>.He places a empty line above and under the text to make it evident, and the browser will take it as it is.
<p> The paragraph is a base element in ... </p><p> This places a empty line above and ... </p>
DisplayThe paragraph is a base element in text editing.The tag for a paragraph is <p>.He places a empty line above and under the text to make it evident, and the browser will take it as it is
HTML - Paragraph, justifyParagraphs 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
<p align="justify">The paragraph is a base element in ...</p>
DisplayThe paragraph is a base element in text editing.The paragraph is a base element in text editing.The tag for a paragraph is <p>. his one places a empty line above and under the text to make it evident, and the browser will take it as it is.
HTML - Centered paragraph
<p align="center">The paragraph is a base element in ...</p>
DisplayThe paragraph is a base element in text editing.The paragraph is a base element in text editing.The tag for a paragraph is <p>.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.
HTML - The paragraph aligned to the right, right
<p align="right">The paragraph is a base element in ... </p>
DisplayThe paragraph is a base element in text editing.The paragraph is a base element in text editing.The tag for a paragraph is <p>. his one places a empty line above and under the text to make it evident, and the browser will take it as it is.
All the lines of the paragraph had been arranged, in the upper example, to the right.
4
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 <h1> , 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 the smallest dimension and 6 the biggest dimension.
<body><h1>Headings</h1><h2>are</h2><h3>great</h3><h4>for</h4><h5>titles</h5><h6>and subtitles</h6></body>
Display
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.
HTML - Practical exampleLets take now an easy example and practice it for a bit so that the information will be understood totally. It would be recommended for you to get used to these terms before we go on.
<h2 align="center">HTML - Titles 1:6 (Headings) </<p> A title in HTML is exactly what it looks : a real title, or a ... </p><p> A title in HTML is exactly what it looks : a real title, or a ... </p>
DisplayHTML - Titles 1:6 (Headings)A title in HTML is exactly what it looks : a real title or a subtitle.When youput a text in a tag <h1> , the text will be bolded, and the dimension of the letterwill be the same with the number of the heading. The titles can have dimensionsform 1 to 6 , where 1 is the smallest dimension and 6 the biggest dimension.
A title in HTML is exactly what it looks : a real title or a subtitle.When youput a text in a tag <h1> , the text will be bolded, and the dimension of the letterwill be the same with the number of the heading. The titles can have dimensionsform 1 to 6 , where 1 is the smallest dimension and 6 the biggest dimension.
Line breakA line break is different from the other tags that we have seen 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.
<p>Charles Brownstone <br />Florida Street No 1 <br />New York, USA <br /></p>
DisplayCharles 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.
<p>Thank You,<br /><br /><br />Charles Brownstone <br />Vice-President</p>
DisplayThank You,
Charles Brownstone Vice-President
HTML - Horizontal RuleUse <hr/> to create a horizontal line. THis tag is similar with line break.
<hr/>Use<hr/><hr/>With<hr/>Caution<hr/>
Display
Use
With
Caution
The horizontal line can be useful in different circumstances, like you can see in the next example : a footnote.
<hr /><p>1. "The Hobbit", JRR Tolkein.<br />2. "The Fellowship of the Ring" JRR Tolkein.</p>
Display
1. "The Hobbit", JRR Tolkein.2. "The Fellowship of the Ring" JRR Tolkein.
5
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 - ListsHTML has three types of lists. <ol> shows a ordinate list while <ul> a disorderly one, and for making a definition list is used <dl>. Use the attributes type and start for making a list in order with your requests.<ul> - unsorted list, bullets<ol> - ordered list, umbers<dl> - definition list.
HTML - The ordered listUse <ol> tag for starting a ordered list. if you put <li></li> (list item) between
<h4 align="center">Objectives</h4><ol><li>To find a job </li><li>To take a lots of money </li><li>To move in an other city</li></ol>
DisplayObjectivesTo find a jobTo take a lots of moneyTo move in an other city
You can start your list with any number you want just specifying it with the help of the start attribute.
<h4 align="center">Objective</h4><ol start="4" ><li>To find a job </li><li>To take a lots of money </li><li>To move in an other city</li></ol>
Display
ObjectivesTo find a jobTo take a lots of moneyTo move in an other city
This element is not doing anything out of common but is pretty useful sometimes.
HTML - Other types of ordered listsExcluding 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 or capital letters. Use the type attribute if you want to modify the type of the numbering
<ol type="a"><ol type="A"><ol type="i"><ol type="I">
Display
Small Capital Roman Roman
letters lettersnumbers with small letters
numbers with capital letters
A jobMoneyOther city
A jobMoneyOther city
A jobMoneyOther city
A jobMoneyOther city
Unsorted listIt makes a unsorted list with the help of the <ul> tag. The disordered lists are splinted in many types : squares, bullets, and circles. The standard value gave by the majority of the browsers are bullets.
<h4 align="center">Shopping list </h4><ul> <li>milk</li><li>cheese</li><li>eggs</li><li>sugar</li></ul>View the example
I have put together in the next example how it looks the other types of unsorted lists.
<ul type="square"><ul type="disc"><ul type="circle">View the example
HTML - The definition listAs well you can make definition lists using the <dl> tag. This list will give the word above de definition. It is indicated to bold the word so that it will be more evident.
<dl><dt><b>Quieso</b></dt> <dd>Spanish word for cheese .</dd><dt><b>Ordenador</b></dt><dd>Spanish word for Computer </dd></dt>View the example
HTML - Formatting elementsAs 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
<p>Example of <b>Bold Text</b></p><p>Example of <em>Emphasized Text</em></p><p>Example of <strong>Strong Text</strong></p><p>Example of <i>Italic Text</i></p><p>Example of <sup>superscripted Text</sup></p><p>Example of <sub>subscripted Text</sub></p><p>Example of <del>struckthrough Text</del></p><p>Example of <code>Computer Code Text</code></p>
DisplayExample of Bold TextExample of Emphasized TextExample of Strong TextExample of Italic TextExample of superscripted Text
Example of subscripted Text
Example of struckthrough Text
6
Example of Computer Code Text
HTML - How to use the formatting tagsThese 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 codesThere 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
HTML - The RGB color systemThis 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 full 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.
HTML - The hexadecimal color systemThe hexadecimal system is pretty hard at first 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"
HTML - Color cod - Breaking the codThe 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
HEX
0 1 2 3 4 5 6 7 8 9 A B C D
In this way the possibilities are bigger and the system can have 16 values.An example of hexadecimal cod would be:
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
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) = 20470(GG - Green)(7 * 16) + (0) = 112 05(BB - Blue)(0 * 16) + (5) = 5
True colorsThe hexadecimal system is very used for creating pages. This is compatible with the majority of the browsers, in this 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 colorsWe 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 BasefontThe <font> tag is used for modifying the type of a text, the size and the color. Use "size", "color" and "face" attributes to personalize your text and the <basefont> tag to set the color, size and the style of a whole text.Mostly the "font" and "basefont" tags are not used much because is used CSS to establish a text`s attributes.
The Font SizeSet 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.
<p><font size="5">This is font size 5</font></p>
Display
This is font size 5
The font colorSet the color of the text
font color="#990000">This text is hexcolor #990000</font><br /><font color="red">This text is red</font>
This text is hexcolor #990000This text is red
Font FacePick a letter style using the "facefont" tag. You can choose any font you haveinstalled, but choose the font with care because the user on your page
7
can`t see the font if he hasn`t got installed your font.He will see the default font meaning TImes New Roman. The solution would be to choose many fonts who look the same.
<p><font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph has had its font...</font> <p>
This paragraph has had its font formatted by the font tag!
BasefontWith the help of the "basefont" tag you 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.
<html> <body><basefont size="2" color="green"><p>This paragraph has had its font...</p><p>This paragraph has had its font...</p><p>This paragraph has had its font...</p></basefont></body> </html>
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 the basefont tag!
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.
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 beginning "by the book"<p><font size="7" face="Georgia, Arial" color="maroon">C</font>ustomize your font to achieve a desired look.</p>
Customize your font to achieve a desired look.
HTML - Hypertext Reference / hrefThe "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 domainglobals - to other domains, outside the site
Internal - href="#anchorname"Local - href="../img/foto.jpg"Global - href="http://www.tutorialehtml.com/"
HTML - HTML - Text linksTo set the beginning and the end of a anchor it can be used <a></a>. Choose the type of the attribute that you need then put it inside the tag.Example:
<a href="http://www.tutorialehtml.com" target="_blank" >Zizix Tutorials</a>
Display
Zizix Tutorials
HTML - Link targetsThe "target" attribute tells to the browser if it needs to open a new page in a new window or in the same window.
target="_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 all the frames
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.
<a href="http://www.google.com/" target="_blank" >Google </a>
Display
HTML - AnchorIs 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.
<h1>HTML - Hypertext Reference / href<a name="top"></a></h1><h2>HTML - Text links<a name="text"></a></h2><h2>HTML - E-mail text<a name="email"></a> </h2>
Next, we need to make a code to the link by putting before the anchor`s name
<a href="#top">Go to top </a><a href="#text">Learn about text links </a><a href="#email">Learn about e-mail addresses </a>
Display
Go to the beginning
8
Learn about text linksLearn about e-mail addresses
HTML - E-mail linkTo make an e-mail link is very simple.If you want someone to write you an emailthe best thing to do it would be to put at its disposition a link with your email and a pre-established subject.
<a href="mailto:[email protected]?subject=Questions " >Questions here</a>
Display
Questions here
In case the subject is not enough and you want yo add something else to the email`s content, you can do it with the help of the next code:
<a href="mailto:[email protected]?subject=Questions&body=Write here if you have questions " >Questions here </a>
Display
Questions here
HTML - Download linksA 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.
<a href="http://www.tutorialehtml.com/htmlT/text.zip">Text Document</a>
HTML - Default link/Base linkuse the <base> tag in the interior of the <head> element to set a base link. This is necessary in case you have somewhere a link which doesn`t work or in case the destination it doesn`t exist anymore.The base link sends the user to the specified address. Usually it sends the user to the start page, but is as well accepted any other page, eventually a special page made in this purpose.
<head><base href="http://www.tutorialehtml.com/"></head>
HTML - Entity/SymbolIn 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.
Start with the ampersand sign -&After that we will write the name of the sign - copyAt the end a semicolon - ;
Copyright
Use © to make - © - Copyright Symbol
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.
<p> In this phrase there had been introduced more spaces.<p>
Display
In this phrase there had been introduced more spaces.
To make commands in HTML you use the "more" and "less" symbols.For being showedin the browser you should use a entity.
<p>Less then- < <br/> More then- > <br />Head tag - <head> </p>
DisplayLess then- < More then- > Head tag - <head>
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 typeCreating links of email type is very simple. It must be mentioned that 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 an e-mail form in the content of your page.
HTML - E-mail linksIf you want someone to write you an email the best way is to put a link with your email and a pre-established subject.
<a href="mailto:[email protected]?subject=Questions " >Questions here</a>
Display
Questions here
In case the subject is not enough and you want yo add something else in theemail`s content , you can do it with the help of the next code:
<a href="mailto:[email protected]?subject=Questions&body=Write here if you have questions " >Questions here </a>
Display
Questions here
HTML - Inserting images
9
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 <img/>.
<img src="../img/image.jpg" />
Display
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
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.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 imagesAttribute "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.
<img src="http://example.com/folder/image.jpg" alt="Blue image "/>
Display
HTML - the height and width of an imageTo determine the height and width of an image is used and "height" attributes "width". Logical, no!
<img src="../img/image.jpg" alt="Blue image " width="100" height="50" />
Display
HTML - horizontal and vertical alignment of an imageFor this we will use the attributes align and valign. The options offered by these attributes are:1. Align (horizontal)right left center2. Valigh (vertical)top bottom centerExample:
<p>This is the first paragraph ...</p><p><img src="../img/image.jpg" align="left">This is the second paragraph... </p><p>This is the third paragraph...</p>
DisplayThis 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 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 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 third paragraph.
HTML - Using images as linksThis 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
<a href="http://www.tutorialehtml.com"><img src="../img/image.jpg"> </a>
Display
The image above will send to the home page. You can change it to your start page and here you have a picture with a link to your start page
HTML - ThumbnailsThumbnails are miniature version (less kilobytes) of images 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.
<a href="../img/fereastra.jpg"> <img src="../img/tumb_fereastra.jpg"> </a>
10
Display
HTML - Image linksWith 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.
<a href="http://www.tutorialehtml.com"><img src="../img/image.jpg"></a>
Display
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.
<a href="http://www.tutorialehtml.com"><img src="../img/image.jpg" border="0"></a>
Display
HTML - ThumbnailsThe 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.
<a href="../img/fereastra.jpg"> <img src="../img/tumb_fereastra.jpg"> </a>
Display
HTML - FormsForms 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.
HTML - Text fieldsBefore getting into detail, we have to expose a little a form's basics. Text fields have got a few attributes that 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.<form method="post" action="mailto:[email protected]">Name: <input type="text" size="10" maxlength="40" name="name"> <br />Password: <input type="password" size="10" maxlength="10" name="password"></form>
DisplayTop of Form
Name:
Password: Bottom of Form
DO NOT use this code. Data from the form will not be encrypted and will not be safe in terms of security.
HTML - Email formsLet'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.
<form method="post" action="mailto:[email protected]">Name: <input type="text" size="10" maxlength="40" name="name"> <br />Password: <input type="password" size="10" maxlength="10" name="password"><br /><input type="submit" value="Send"> </form>
DisplayTop of Form
Name:
Password:
Bottom of Form Just change the e-mail address to a real one for it to work!
HTML - Radio ButtonsThe 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 selects a certain button. Only a single value will be sent.name - decides which button set does the selected button belong to.
<form method="post" action="mailto:[email protected]">What type of shoes you wear ? <br />Color: <input type="radio" name="color" value="dark">Dark<input type="radio" name="color" value="light">Light <br />Size:<input type="radio" name="size" value="small">Small
11
Send
<input type="radio" name="size" value="average">Average<input type="radio" name="size" value="big">Big <br /><input type="submit" value="Email Myself"> </form>
DisplayTop of FormWhat type of shoes you wear ?
Color: Dark Light
Size: Small Average Big
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 - CheckboxUsing checkboxes the user has got the possibility of choosing one, two or more answer variants. The name and value attributes are used the same as for the radio buttons.
<form method="post" action="mailto:[email protected]"><p> What color shoes you prefer? </p> <p><input type="checkbox" name="shoes" value="black">Simple Black <br/><input type="checkbox" name="shoes" value="white">Simple White <br/><input type="checkbox" name="shoes" value="gray">Shades of gray <br/><input type="checkbox" name="shoes" value="black&white ">Black and white<br/><input type="submit" value="Email Myself"></p> </form>
DisplayTop of FormWhat color shoes you prefer?
Simple Black
Simple White
Shades of gray
Black and white
Bottom of Form
HTML - Another types of list formsAnother model of list form is the following, in which the user selectsa certain line that will be sent as the chosen option.
<form method="post" action="mailto:[email protected]">Musical preferences<select multiple name="music" size="4"><option value="emo" selected>Emo</option> <option value="metal/rock" >Metal/Rock</option> <option value="hiphop" >Hip Hop</option> <option value="ska" >Ska</option> <option value="jazz" >Jazz</option> <option value="country" >Country</option> <option value="classical" >Classical</option> <option value="alternative" >Alternative</option> <option value="oldies" >Oldies</option> <option value="techno" >Techno</option> </select>
<input type="submit" value="Email Yourself"> </form>Display
Top of FormMusical preferences
Bottom of Form Another form model is the 'drop-down' menu. This will be displayed as a field, which will then show a list when a click is made on it.
<form method="post" action="mailto:[email protected]">Level of education?<select name="education"> <option>Choose</option><option>High school </option> <option>Collage</option><option>Doctorate</option><input type="submit" value="Email Yourself"> </select> </form>
DisplayTop of Form
Level of education? Bottom of Form
HTML - Upload formFirst of all it must be mentioned 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.An upload form is composed of many parts. We will start by establishing the size of the file that we will upload. This thing is done using a hidden field. After that, we will create the field in which the user will be able to write the address of the file or will be able to browse for it in an 'explore' window.
<input type="hidden" name="MAX_FILE_SIZE" value="100" /> <input name="file" type="file" />
Display
HTML - Text zones, commentsGenerally, text zones are used to send comments. Blogs and forums are the main web pages that are using these 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 <textarea> 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:
12
Email Myself
Email Myself
EmoMetal/RockHip HopSka
Email Yourself
Email Yourself
wrap=1. "off"2. "virtual"3. "physical"
<form method="post" action="mailto:[email protected]"> <textarea rows="5" cols="20" wrap="physical" name="comments">Write a comment</textarea> <input type="submit" value="Email Yourself"> </form>
DisplayTop of Form
Bottom of Form
Also, it must be mentioned that everything you will write will be shown withinthe text zone.HTML - TablesTables can be difficult at first, but with a little patience and practice you will se that things are not always how they seem to be. The <table> tag is used to open a table. Within this tag we will find two others typical tags, <tr> (the table lines) and <td> (the table column). But the best explanation is always an example:
<table border="1"><tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr></table>
Display
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 <td> and </td>. The border attribute establishes the length of the table's edge.
HTML - Asymmetrical tablesTo form asymmetrical tables we will use 'rowspan' to cross more thanone 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 <th> tag. These will be written with bold letters as we will see in the following example:
<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>
Display
Column 1 Column 2 Column 3
Row 1 Cell 1
Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1
HTML - Spacing the cellsWith 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 little bit of color has also been added.
<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table>
Display
See this example in a new window.
To better make the difference we will erase the edge from the previous example.
<table border="1" cellpadding="10"bgcolor="rgb(0,255,0)"><tr><th>Column 1</th><th>Column 2</th></tr><tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr></table>
Display
See this example in a new window.
The distance between the cells and the edge's size will be interpreted in pixels by the browser. Using this 'law' a value of 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 others as we progress through the next tutorials.HTML - BgcolorThe 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
13
Email Yourself
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 tutorial.<"numetag" bgcolor="Value">This is a model of how the bgcolor attribute will be used within a tag.
<body bgcolor="Silver"><p>We set the color...</p></body>
Display
See this example in a new window.
HTML - Adding color to the tablesThe following example shows you how to color a table in many colors, using the 'bgcolor' attribute.
<table><tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr><tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr><tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr><tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr><tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr><tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr></table>
Display
See this example in a new window.
HTML - Font and background togetherFirst of all we put into practice an example of a table of scores coloring a table to highlight certain aspects.
<table bgcolor="#000000"><tr><td bgcolor="#009900"><font color="#FFFF00" align="right">Green Bay</font></td><td><font color="#FFFFFF">30</font></td></tr><tr><td bgcolor="#0000FF"><font color="#DDDDDD" align="right">New England</font></td><td><font color="#FFFFFF">11</font></td></tr></table>
Display
See this example in a new window.
An example of a paragraph on a gray background:
<table bgcolor="#777777"><tr><td><p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00"> This paragraph tag has... </font></p></td></tr></table>
Display
See this example in a new window.
HTML - BackgroundBeside a solid color for the background, you might as well use an image. To do this thing follow the example carefully:
<table height="100" width="100" background="../img/image.jpg" > <tr><td>This table has a background image </td></tr> </table>
Display
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.
<table height="100" width="100"background="../img/image.jpg" ><tr><td>This table has a background image </td></tr> </table>
Display
HTML - Patterned BackgroundsRepeating 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 :
The image was enlarged to be viewed more clear.<table height="100" width="150"background="../../img/pattern.jpg" > <tr><td>This table has a background patterned image</td></tr></table>
Display
HTML - Transparent background colorAnother 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.
<table background="../../img/transparent.gif" >
14
<tr><td>This table has a red transparent background image</td></tr></table>
Display
HTML - Color chartTo help you we have made a table with the code 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 - FramesFrames are used to show more than one html documents 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 less.
HTML - Frames, Credit's pageGenerally, frames are used to display a menu in a part and the content in another part. When someone will click a link from the menu another page will open in the content part.We will exemplify this using the following code:
<html> <head></head><frameset cols="30%,*"><frame src="menu.html"><frame src="content.html"></frameset></html>
Display
View this example in a new window
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 frame (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 beshown the content.frame src="" - the address of the files that will be displayed as menu and content.
HTML - Frame - Adding a banner or a titleUse the following code:
<html><head></head><frameset rows="20%,*"><frame src="title.html"><frameset cols="30%,*"><frame src="menu.html"><frame src="content.html"></frameset> </html>
frameset rows="#%, *" - "rows" establishes the height of each frame that will be displayed. In the previous example we have chosen 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 - 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 introduced under the frameset tag.**Note: Frameset and frameborder is the same attribute. There are 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. frameborder"#" - The 0 value means there will be no borderborder="#" - modifies the border's thickness (used by Netscape)framespacing="#" - modifies the border's thickness (used by Internet Explorer)Here's a practical example:
<html><head></head><frameset border="0" frameborder="0" framespacing="0" rows="20%,*"><frame src="title.html"><frameset border="0" frameborder="0" framespacing="0" cols="30%,*"><frame src="menu.html"><frame src="content.html"> </frameset> </html>
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:
<html><head><base target="content"></head><frameset rows="20%,*"><frame name="title" src="title.html"><frameset cols="30%,*"><frame name="menu" src="menu.html"><name="content" src="content.html"></frameset></html>
Noresize and scrollingYou can personalize the frame further more using the noresize and scrolling
<html><head></head><frameset border="2" frameborder="1" framespacing="2" rows="20%,*"><frame src="title.html" noresize scrolling="no"><frameset border="4" frameborder="1" framespacing="4" cols="30%,*"><frame src="menu.html" scrolling="auto" noresize><frame src="content.html" scrolling="yes" noresize></frameset> </html>
no resize - does not let the frame to change its dimension based on the user's screen.scrolling="(yes/no)" - allows, or does not allow, using the scroll in a frame.HTML - LayoutsA layout does not have many options. On the other side, a table is very useful.In a table you can add almost every element, even another table.
<table id="shell" bgcolor="black" border="1" heigh="200" width="300"><tr><td> <table id="inner" bgcolor="white" heigh="100" width="100"><tr><td>Tables inside tables!</td></tr></table> </td></tr></table>
15
Try copying this into a notepad file, then save it as .html and see what happens!
HTML - Standard layoutA standard layout is composed of a banner in the upper part of the page, a menu in the left part, and the content zone in the middle or in the right. This is the most classic layout for a web site, and, in my opinion, a representative model.
<table cellspacing="1" cellpadding="0" border="0" bgcolor="black" id="shell" height="250" width="400"><tr height="50"><td colspan="2" bgcolor="white"> <table title="Banner" id="banner" border="0"> <tr><td>Place a banner here</td></tr> </table></td></tr> <tr height="200"><td bgcolor="white"> <table id="navigation" title="Navigation" border="0"> <tr><td>Links!</td></tr><tr><td>Links!</td></tr> <tr><td>Links!</td></tr></table> </td><td bgcolor="white"> <table title="Content" id="content" border="0"> <tr><td>Content goes here</td></tr> </table> </td></tr></table>
Display
See this example in a new window
This is a basic approach. As you will see if you use these layouts in your web page, it will become very complex as you add more content. Nevertheless, it is very important that you specify the height and the width. The more you will be more specific in establishing these attributes and not only these, the less bugs you will have.
<table id="shell" title="Shell" height="250" width="400" border="0" bgcolor="black" cellspacing="1" cellpadding="0"> <tr height="50"><td bgcolor="white"><table title="banner" id="banner"><tr><td>Banner goes here</td></tr></table></td></tr> <tr height="25"><td bgcolor="white"><table title="Navigation" id="navigation"><tr><td>Links!</td> <td>Links!</td> <td>Links!</td></tr></table></td></tr> <tr><td bgcolor="white"><table title="Content" id="content"> <tr><td>Content goes here</td></tr></table> </td></tr></table>
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--!>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 commentsAn unfinished elementThe comment will be placed between the "<!--" and "-->" 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.
<!--The beginning of the code that shows a photo-->
<img src="../img/banner.gif" width="150" height="50" /><!--The end of the code that shows a photo-->
Display
This is just an example of the things you can comment in a script. In time, youwill 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 openingtag "<!--" and the ending tag "-->" will not be shown by the browser.
HTML - Unfinished scriptComments are very useful when you work at a script but you leave it unfinished. Putting it between the two tags (<!-- code -->) will be interpreted as a comment by the browser and therefore will not be shown.
<!-- <input type="text" size="12" /> -- Input Field -->
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.
<input type="text" size="12" />
Display
HTML - Javascript commentsComments 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.<?php include("../../en/pannels/468x60ad.php"); ?><Meta> tagsThe 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 keywordsIn the meta tag you can add words or 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 using 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
<head><meta name="keywords" content="Tutorials, zizix, HTML, web, resources, webmaster " /></head>
This example is based on this page's profile.
16
As you can see, the name specifies what kind of meta tag will be used. Also, the comma that is used to separate the words from each other has to be specified, something trivial but something that many forget once they have to do it
Meta descriptionThis tag helps you to describe your web site. A maximum of two sentences will be used to complete the content of this tag.
<head><meta name="description" content="A web site resource for those willing to learn HTML and webmasters " /></head>
As you can see, the name specifies what kind of meta tag will be used. Also, the comma that is used to separate the words from each other has to be specified, something trivial but something that many forget once they have to do it.
Revised tag in metaIt is used to specify the latest bringing up to date of the web site.
<head><meta name="revised" content="1/08/2008" /></head>
Refresh and redirect in metaRefreshing 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.
<head><meta http-equiv="refresh" content="10; url=http://www.tutorialehtml.com" /></head>
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.
<head><meta http-equiv="refresh" content="5; url=http://www.etutoriale.ro" /></head>
Inserting Javascript and Vbscript in HTMLJavascript 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 these 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 considerably less time in the case the user has wrongly completed the fields, and a reload of the page being needed.In this part we will only talk about the method of inserting the script into HTMLNote: 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 HTMLInserting a javascript code is done very easily using the script tag. Here is an example:
<script type="text/javascript"><!--script***Here will be the the javascript code***--></script>
For the javascript codes the 'text/javascript' value will be given to the type attribute.
Inserting Vbscript in HTMLInserting a vbscript code is done in 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"><!--script***Here will be the the javascript code***--></script>
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 HTMLSome time ago it was quite complicated to insert music or sounds on a web page.Now, that problem is solved, adding sounds being quite simple.
<EMBEDSRC="sound.mid" hidden="false" autostart="false" loop="false" volume="60" HEIGHT=60 WIDTH=144/>
It is recommended that both height and width to be directly proportional to avoid problems.To hide the player the value of the hidden attribute (which is false at the moment) will be replaced by true. This thing is done if you are absolutely that the user does not wish to stop the sound.
Controlling and manipulating the playerLet's have a look on the above example:
<EMBEDSRC="sound.mid" hidden="false" autostart="false" loop="false" volume="60" HEIGHT=60 WIDTH=144/>
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 attributes to better memorize and understand them, and also be aware that a higher volume may be annoying for the user.Inserting HTML codes for videoA video file can be inserted in a html page in two ways. The first way would beusing the <embed/> tag. This tag does not need an ending/finishing tag. It works, mostly, the same as a tag for an photo works
17
<embed src="example.mpeg" autostart="false" HEIGHT=60 WIDTH=144/>
Also, you can insert a video file using a link
<a href="example.mpeg">film name </a>
film name
Supported extensions for the embed tagThese 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 tagautostart - establishes whether the file will run automatically after the page is loaded. Can have the true or false valuehidden - establishes whether the buttons are hidden or not. Can have the true or false value.volume - can have any value from 0 to 100loop - 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.
Inserting a You Tube videoYou can do that very easy, because You Tube has on every page the needed HTML code.
<! -- Here will start the You Tube code --><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/UAq8qHNWMNw&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param> <embed src="http://www.youtube.com/v/UAq8qHNWMNw&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object><! -- Here will end the You Tube code -->
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 tagThe input tag does not need an ending tag and can have numerous attributes:textpasswordradiocheckboxresetsubmit
HTML - Text fields and passwords...of which you have certainly completed a lot of, over the time, on the Internet.
<input type="text" /><input type="password" />
Display
Write something in the boxes above to note the difference.
HTML - CheckboxesIdeal for offering the user the option of selecting more than one answers
<input type="checkbox" /><input type="checkbox" /><input type="checkbox" />
HTML - RadioAnd I am not meaning a music radio, but a little circle which offers the possibility of choosing only one answer for a single question.
<input type="radio" /><input type="radio" /><input type="radio" />
Display
HTML - Submit buttonsHere, we will have to give a value to the submit attribute, this being the text that will be shown on the generated button.
<input type="submit" value="Submit" /><input type="submit" value="Next step >>" />
HTML - Reset ButtonsHere, same as with the submit button, we will have to give a value, that being the text that will be shown 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.
<input type="reset" value="Reset" /><input type="reset" value="Delete All " />
18
Submit
Next step>>
HTML Input fields - NoteIt must be specified that those forms and buttons will not fully act without the help of a php or javascript files 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 FieldsText 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:sizevaluemaxlengthWe will exemplify each of them.
HTML - The text field sizeThe size attribute establishes the text field's length. 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.
<input type="text" size="5" /><input type="text" size="15" /><input type="text" size="25" />
The Result
HTML - Another attribute is valueUsing 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 script is integrated which recognizes a visitor and keeps the options chosen by the said user.
<input type="text" size="5" value="12345" /><input type="text" size="15" value="Zizix" /><input type="text" size="25" value=" HTML Tutorials " />
HTML - MaxlengthMaxlength 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.
<input type="text" size="5" maxlength="5" /><input type="text" size="15" maxlength="15" /><input type="text" size="25" maxlength="25" />
The Result
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 - PasswordThe password fields are a special category of the input tag. Still, writing themis as simple as writing a normal text field.
<input type="password" size="5" maxlength="5" /><input type="password" size="10" maxlength="10" />
And the result is a field in which the text is hidden under asterisks, stars squares or black circles, this depending on the browser's interpretation.
Password fields in HTML - NoteAs you can see, there is no big difference 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 usingthem without any safety measures as it was presented above is not recommended.Encrypting these fields is done with another programming languages such as php or JavaScript.HTML - CheckboxCheckboxes, 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.
Checkbox - Creating the listsThe checkboxes come in the help of the user, easing up the choosing simultaneously of more than one answer.
<p>Chouse your favorite colors .</p>Blue: <input type="checkbox" name="colors" value="blue"/><br />Yellow: <input type="checkbox" name="colors" value="yellow" /><br />Red: <input type="checkbox" name="colors" value="red"/><br />Green: <input type="checkbox" name="colors" value="green" />
Chouse your favorite colors .
Blue:
Yellow:
Red:
Green:
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.
19
Reset
Delete All
12345
Zizix
HTML Tutorials
This thing is done with the help of the checked attribute, with the yes value.
<p>Chouse your favorite colors .</p>Blue: <input type="checkbox"checked="yes"name="colors" value="blue" /><br />Yellow: <input type="checkbox" name="colors" value="yellow" /><br />Red: <input type="checkbox" name="colors" value="red" /><br />Green: <input type="checkbox" checked="yes"name="colors" value="greene" />
Chouse your favorite colors .
Blue:
Yellow:
Red:
Green: You can try to play with this application a little. It is quite simple but veryuseful in my opinion.HTML - Radio ButtonsThe 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.
<p>Choose citizenship </p>Rumanian: <input type="radio" name="citizenship" />English: <input type="radio" name="citizenship" />Spanish: <input type="radio" name="citizenship" />
DisplayChoose citizenship
Rumanian:
English:
Spanish: Specifying a name for the category of which the form is part of we willlet 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 formAdvanced example:
<p>Choose citizenship </p>Rumanian: <input type="radio" name="citizenship" />English: <input type="radio" name="citizenship" />Spanish: <input type="radio" name="citizenship" /><p>Choose sex</p>Man: <input type="radio" name="sex" />Woman: <input type="radio" name="sex" />
Choose citizenship
Rumanian: English: Spanish: Choose sex
Man: 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.
<p> choose citizenship</p>Rumanian: <input type="radio" name="citizenship"checked="yes"English: <input type="radio" name="citizenship" />Spanish: <input type="radio" name="citizenship" />
DisplayChoose citizenship
Rumanian:
English:
Spanish: 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 comfortableness or inattention, to choose the already selected option without it being the correct one for him in that case.HTML - Text areasText 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:
<textarea>Text area!</textarea>
Display
Text area - text areas, sizeTo 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.
<textarea cols="50" rows="2">Text area!</textarea><textarea cols="40" rows="5">Text area!</textarea><textarea cols="20" rows="10">Text area!</textarea>
Display
20
Text areas - The 'wrap' attributeThis attribute of the <textarea> tag will establish the way in which the text will react when it will reach the end of the line.Wrap will have one of the three values: hard, soft, off. Hard - will place an enter at the 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 theHard one it will send the text in a free format.Off - this will not format the text in any way, letting the textin a single continuous line.The Hard/Soft attribute
<textarea cols="20" rows="5" wrap="hard">Hard - will place an enter at the end of every line and will send the text in the same format it was introduced.</textarea>
;The Attribute off
<textarea cols="20" rows="5" wrap="off">Off - this will not format the text in any way, letting the text in a single continuous line.</textarea>
Text area - The 'readonly' attributeDepending 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.
<textarea cols="20" rows="5" wrap="hard"readonly="yes">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.</textarea>
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.
<textarea cols="20" rows="5" wrap="hard"disabled="yes">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.</textarea>
You will have to practice a bit with these attributes in order to get better. Good luck!HTML - Upload formThe 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 <input type=" "> tag.
<input type="file" />
Upload - Max file sizeTo limit the size of some of the files uploaded on the webhosting server we will use a hidden field.
<input type="hidden" name="MAX_FILE_SIZE" value="500" />< input type="file" />
The value chosen in the example above was 500. That means that files 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 formsThe '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.
<select><option>New York </option><option>Bucharest</option><option>Madrid</option></select>
The browser will automatically show the first option. This thing can be changed with the help of the 'selected' attribute though.
<select><option>New York </option>
21
<option selected="yes">Bucharest</option><option>Madrid</option></select>
HTML - Selection formsWe will use the size attribute to change a drop down list to a selection form
<select size="3"><option>New York </option><option>Bucharest</option><option>Madrid</option></select>
HTML - Multiple selectionsIn 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.
<select multiple="yes" size="3"><option>New York </option><option>Bucharest</option><option>Madrid</option></select>
It is to be understood that this attribute will not work with a drop down list.HTML - Submit ButtonsThe submit buttons are another use of the <input> tag. Those will show a typical button, which will perform the action of sending the form.
<input type="submit" value="Submit" /><br /><input type="submit" value="Send" /><br /><input type="submit" value="Continue" /><br />
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 sendingFor a submit button to work correctly it is needed its placing in the <form> 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.
<form method="post" action="mailto:[email protected]" >Name:<input type="text" name="Name" size="15" maxlength="15" />Last Name:<input type="text" name="Last name" size="25" maxlength="25" /><input type="submit" value="Send email" /></form>
Top of Form
Name:
Last Name:
Bottom of Form Just change [email protected] email with your order form that will be functional.HTML - ResetThe 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.
<input type="reset" value="Reset" /><input type="reset" value="Delete" /><input type="reset" value="Clear form " />
Display
HTML- The reset button actionFor the reset button to be functional will be needed to introduce it in the <form> tag. You can read the tutorial about HTML Forms for more examples.
<form action="myphp.php" method="post"><input type="text" size="15" maxlength="15" /><input type="text" size="25" maxlength="25" /> <input type="reset" value="Delete" /></form>
Top of Form
Bottom of Form Try to insert a little text and click "Delete" button in the example above.HTML - Hidden fieldsHidden 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.
<input type="hidden" />
22
Bucharest
New YorkBucharestMadrid
New YorkBucharestMadrid
Submit
Send
Continue
Send email
Reset
Delete
Clear form
Delete
This fragment of a code will not show anything because the browser treats it as information that must not be shown.
HTML - Other attributesWe will use the attributes name or id to establish a name for our hidden field.
<input type="hidden" id="age" name="age" value="25" /><input type="hidden" id="DOB" name="DOB" value="01/01/70" /><input type="hidden" id="admin" name="admin" value="1" />
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 non-administrator.'Hidden fields' are used when we have to deal with information that we want to put down in more than one form, not willing for the user to have to insert the information many times.
23
![[Wiley] learn html and css - [w3 schools]](https://img.dokumen.tips/doc/110x75/58abea511a28ab504e8b5259/wiley-learn-html-and-css-w3-schools.jpg)
