Html basics

281 views

Published on

  • Be the first to comment

  • Be the first to like this

Html basics

  1. 1. m HTML Basics : INTRODUCTION Webpages are written in HTML - a simple scripting language. HTML is short for HyperText Markup Language. Hypertext is simply a piece of text that works as a link. Markup Language is a way of writing layout information within documents. Basically an HTML document is a plain text file that contains text and nothing else. When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. Since HTML documents are just text files they can be written in even the simplest text editor. A more popular choice is to use a special HTML editor - maybe even one that puts focus on the visual result rather than the codes - a so-called WYSIWYG editor ("What You See Is What You Get"). Some of the most popular HTML editors, such as FrontPage or Dreamweaver will let you create pages more or less as you write documents in Word or whatever text editor youre using. However, there are some very good reasons to create your own pages - or parts of them - by hand...HTML Basics : WHY LEARN HTML? It is possible to create webpages without knowing anything about the HTML source behind the page. There are excellent editors on the market that will take care of the HTML parts. All you need to do is layout the page.
  2. 2. However, if you want to make it above average in webdesign, it is strongly recommended that you understand these tags. The most important benefits are: You can use tags the editor does not support. You can read the code of other peoples pages, and "borrow" the cool effects. You can do the work yourself, when the editor simply refuses to create the effects you want. You can write your HTML by hand with almost any available text editor, including notepad that comes as a standard program with Windows. All you need to do is type in the code, then save the document, making sure to put an .html extension or an .htm extension to the file (for instance "mypage.html").HTML Basics : TAGS Basically, a computer sees an "A" as simply an "A" - whether it is bold, italic, big or small. To tell the browser that an "A" should be bold we need to put a markup in front of the A. Such a markup is called a Tag. All HTML tags are enclosed in < and >. Example: a piece of text as it appears on the screen. This is an example of bold text. HTML: the HTML for the above example: This is an example of <b>bold</b> text.
  3. 3. As you can see, the start tag <b> indicates that whatever follows should be written in bold. The corresponding end tag </b> indicates that the browser should stop writing text in bold.HTML Basics : PAGE STRUCTURE All normal webpages consist of a head and a body. Head Body The head is used for text and tags that do not show directly on the page. The body is used for text and tags that are shown directly on the page. Finally, all webpages have an <html> tag at the beginning and the end, telling the browser where the document starts and where it stops. The most basic code - the code you will use for any page you make, is shown below: <html> <head> <!-- This section is for the title and technical info of the page. --> </head> <body> <!-- This section is for all that you want to show on the page. - -> </body> </html> HEAD SECTION
  4. 4. The head section of the webpage includes all the stuff that does not show directlyon the resulting page.The <title> and </title> tags encapsulate the title of your page. The title is whatshows in the top of your browser window when the page is loaded.Right now it should say something like "Basics - Html Tutorial" on top of thewindow containing this text.Another thing you will often see in the head section is metatags. Metatags areused for, among other things, to improve the rankings in search engines.Quite often the head section contains javascript which is a programminglanguage for more complex HTML pages.Finally, more and more pages contain codes for cascading style sheets (CSS).CSS is a rather new technique for optimizing the layout of major websites.Since these aspects are way out of reach at this stage we will proceed withexplaining the body section. BODY SECTIONThe body of the document contains all that can be seen when the user loads thepage.In the rest of this tutorial you can learn in detail about all the different aspects ofHTML, including: Text o Formatting o Resizing
  5. 5. o Layout o ListingLinks o To local pages o To pages at other sites o To bookmarksImages o Inserting images (GIF and jpg) o Adding a link to an imageBackgrounds o Colors o Images o Fixed ImageTablesFrames
  6. 6. Forms Metatags Hexadecimal ColorsThe last page in this introduction will give you an overview of how to proceed withthe HTML tutorial (and beyond). HOW TO LEARN MOREThis introduction presented you with the very basics of HTML.In the rest of this tutorial you can study each of the different HTML tags in detail.To the upper right on all pages you will find the HTML tutorial menu.The links are arranged so you can approach this tutorial as an ongoing course.Each link will take you to a "chapter" - 5 to 10 pages - explaining the selected topicin depth.If you are completely new to HTML, you should start with the chapter about textand work your way through the links - ending with the chapter about hexadecimalcolors.Once you become familiar with HTML you could proceed to the javascriptsection, the java applet section or the Shockwave Flash section.For a complete overview of the tutorials and resources on this site you should lookat the sitemap. ALL HTML TAGS
  7. 7. NAME W3C HTML.X.X NS MSIE DESCRIPTIONA HTML40 HTML32 HTML20 NS3+ MSIE3+ anchor abbreviated form (e.g., WWW,ABBR HTML40 HTTP, etc.)ACRONYM HTML40ADDRESS HTML40 HTML32 HTML20 NS3+ MSIE3+ information on authorAPPLET HTML40 HTML32 NS3+ MSIE3+ Java appletAREA HTML40 HTML32 NS3+ MSIE3+ client-side image map areaB HTML40 HTML32 HTML20 NS3+ MSIE3+ bold text styleBASE HTML40 HTML32 HTML20 NS3+ MSIE3+ document base URIBASEFONT HTML40 HTML32 NS3+ MSIE3+ base font for the pageBDO HTML40 MSIE5+ I18N BiDi over-rideBGSOUND MSIE3+ background soundBIG HTML40 HTML32 NS3+ MSIE3+ enlarge text styleBLINK NS3+ blinking textBLOCKQUOTE HTML40 HTML32 HTML20 NS3+ MSIE3+ long quotationBODY HTML40 HTML32 HTML20 NS3+ MSIE3+ document bodyBR HTML40 HTML32 HTML20 NS3+ MSIE3+ forced line breakBUTTON HTML40 MSIE4+ push buttonCAPTION HTML40 HTML32 NS3+ MSIE3+ table captionCENTER HTML40 HTML32 NS3+ MSIE4+ shorthand for DIV align=centerCITE HTML40 HTML32 HTML20 NS3+ MSIE3+ citation font formatCODE HTML40 HTML32 HTML20 NS3+ MSIE3+ computer code fragmentCOL HTML40 MSIE3+ table columnCOLGROUP HTML40 MSIE3+ table column groupCOMMENT MSIE3+ comment ignored by the browserDD HTML40 HTML32 HTML20 NS3+ MSIE3+ definition descriptionDEL HTML40 MSIE4+ deleted textDFN HTML40 HTML32 MSIE3+ instance definitionDIR HTML40 HTML32 HTML20 NS3+ MSIE3+ directory listDIV HTML40 HTML32 NS3+ MSIE3+ generic language/style containerDL HTML40 HTML32 HTML20 NS3+ MSIE3+ definition listDT HTML40 HTML32 HTML20 NS3+ MSIE3+ definition termEM HTML40 HTML32 HTML20 NS3+ MSIE3+ emphasisEMBED NS3+ MSIE3+ embeds external object in HTMLFIELDSET HTML40 MSIE4+ form control groupFONT HTML40 HTML32 NS3+ MSIE3+ local change to fontFORM HTML40 HTML32 HTML20 NS3+ MSIE3+ interactive formFRAME HTML40 NS3+ MSIE3+ subwindowFRAMESET HTML40 NS3+ MSIE3+ window subdivisionH1 HTML40 HTML32 HTML20 NS3+ MSIE3+ headingH2 HTML40 HTML32 HTML20 NS3+ MSIE3+ headingH3 HTML40 HTML32 HTML20 NS3+ MSIE3+ headingH4 HTML40 HTML32 HTML20 NS3+ MSIE3+ heading
  8. 8. H5 HTML40 HTML32 HTML20 NS3+ MSIE3+ headingH6 HTML40 HTML32 HTML20 NS3+ MSIE3+ headingHEAD HTML40 HTML32 HTML20 NS3+ MSIE3+ document headHR HTML40 HTML32 HTML20 NS3+ MSIE3+ horizontal ruleHTML HTML40 HTML32 HTML20 NS3+ MSIE3+ document root elementI HTML40 HTML32 HTML20 NS3+ MSIE3+ italic text styleIFRAME HTML40 MSIE3+ inline subwindowILAYER NS4+ positioning contentIMG HTML40 HTML32 HTML20 NS3+ MSIE3+ Embedded imageINPUT HTML40 HTML32 HTML20 NS3+ MSIE3+ form control/fieldINS HTML40 MSIE4+ inserted textISINDEX HTML40 HTML32 HTML20 NS3+ MSIE4+ single line promptKBD HTML40 HTML32 HTML20 NS3+ MSIE3+ text to be entered by the user for use in web-based certificateKEYGEN NS4+ management systemsLABEL HTML40 MSIE4+ form field label textLAYER NS4+ positioning contentLEGEND HTML40 MSIE4+ fieldset legendLI HTML40 HTML32 HTML20 NS3+ MSIE3+ list itemLINK HTML40 HTML32 HTML20 NS4+ MSIE3+ a media-independent linkMAP HTML40 HTML32 NS3+ MSIE3+ client-side image mapMARQUEE MSIE3+ scrolling text fieldMENU HTML40 HTML32 HTML20 NS3+ MSIE3+ menu listMETA HTML40 HTML32 HTML20 NS3+ MSIE3+ generic metainformationMULTICOL NS3+ multiple column formatting ensures that a line of text does notNOBR NS3+ MSIE3+ wrap to the next line alternative text for embeddedNOEMBED NS3+ objects alternate content container for nonNOFRAMES HTML40 NS3+ MSIE3+ frame-based renderingNOLAYER NS3+ positioning content alternate content container for nonNOSCRIPT HTML40 NS3+ MSIE3+ script-based renderingOBJECT HTML40 NS4+ MSIE3+ generic embedded objectOL HTML40 HTML32 HTML20 NS3+ MSIE3+ ordered listOPTGROUP HTML40 option groupOPTION HTML40 HTML32 HTML20 NS3+ MSIE3+ selectable choiceP HTML40 HTML32 HTML20 NS3+ MSIE3+ paragraphPARAM HTML40 HTML32 NS3+ MSIE3+ named property valuePLAINTEXT NS3+ MSIE3+ text formatPRE HTML40 HTML32 HTML20 NS3+ MSIE3+ preformatted textQ HTML40 MSIE4+ sets apart a quotation in textS HTML40 HTML32 NS2+ MSIE3+ strike-through text styleSAMP HTML40 HTML32 HTML20 MSIE3+ sample program output, scripts, etc.
  9. 9. SCRIPT HTML40 HTML32 NS3+ MSIE3+ script statements SELECT HTML40 HTML32 HTML20 NS3+ MSIE3+ option selector specifies server-side JavaScript SERVER NS3+ statements SMALL HTML40 HTML32 NS3+ MSIE3+ small text style SPACER NS3+ inserts a space in a document SPAN HTML40 NS4+ MSIE3+ generic language/style container STRIKE HTML40 HTML32 NS3+ MSIE3+ strike-through text STRONG HTML40 HTML32 HTML20 NS3+ MSIE3+ strong emphasis STYLE HTML40 HTML32 NS4+ MSIE3+ style info SUB HTML40 HTML32 NS3+ MSIE3+ subscript SUP HTML40 HTML32 NS3+ MSIE3+ superscript TABLE HTML40 HTML32 NS3+ MSIE3+ table TBODY HTML40 MSIE4+ table body TD HTML40 HTML32 NS3+ MSIE3+ table data cell TEXTAREA HTML40 HTML32 HTML20 NS3+ MSIE3+ multi-line text field TFOOT HTML40 MSIE4+ table footer TH HTML40 HTML32 NS3+ MSIE3+ table header cell THEAD HTML40 MSIE4+ table header TITLE HTML40 HTML32 HTML20 NS3+ MSIE3+ document title TR HTML40 HTML32 NS3+ MSIE3+ table row TT HTML40 HTML32 HTML20 NS3+ MSIE3+ teletype or monospaced text style U HTML40 HTML32 NS3+ MSIE3+ underlined text style UL HTML40 HTML32 HTML20 NS3+ MSIE3+ unordered list instance of a variable or program VAR HTML40 HTML32 HTML20 NS3+ MSIE3+ argumentJavascript: ARRAY OBJECT Core Object NN IE ECMA Array Multidimensional variable 2+ 4+ ECMA 1 Methods NN IE ECMA concat() Combines two existing Array objects to one 3+ 4+ ECMA 1 join() Returns a string with elements from an Array 2+ 4+ ECMA 1 pop() Removes the last value from an Array. 3+ 5.5+ ECMA 1 push() Appends a value to the end of an Array. 3+ 5.5+ ECMA 1 reverse() Reverse the order of elements in an Array. 2+ 4+ ECMA 1 shift() Removes the first value from an Array. 3+ 5.5+ ECMA 1 slice() Returns a subset from an Array. 3+ 4+ ECMA 1
  10. 10. sort() Sorts an Array. 2+ 4+ ECMA 1 Adds new elements to an Array while removing oldsplice() 3+ 4+ ECMA 1 elements.toLocaleString() Returns a String with current locale format and separators. n/a 4+ ECMA 1toSource() String representing the source code of the object. 4+ n/a n/a Returns Array elements as string type separated bytoString() 2+ 4+ ECMA 1 commas.unshift() Inserts a value at the beginning of an Array. 3+ 5.5+ ECMA 1 Returns Array elements as string type separated byvalueOf() 2+ 4+ n/a commas.Properties NN IE ECMAconstructor Reference to the function that created an object. 2+ 4+ ECMA 1 Zero-based index of the match for array created by aindex 3+ 4+ n/a regular expression match. Original string used to match for array created by a regularinput 3+ 4+ n/a expression match.length Returns the length of an Array 2+ 4+ ECMA 1prototype Creates a new method for Array objects 2+ 4+ ECMA 1 BOOLEAN OBJECTCore Object NN IE ECMABoolean Variable representing true or false. 2+ 4+ ECMA 1Methods NN IE ECMAtoSource() String representing the source code of the object. 4+ n/a n/atoString() Returns boolean value as string type. 2+ 4+ ECMA 1valueOf() Returns an objects value as a Boolean type. 2+ 4+ ECMA 1Properties NN IE ECMAconstructor Reference to the function that created an object. 2+ 4+ ECMA 1prototype Creates a new method for Boolean objects 2+ 4+ ECMA 1 Boolean Core objectVariable representing true or false.Syntax:Syntax 1 var myBoolean = new Boolean()
  11. 11. Syntax 2 var myBoolean = new Boolean(booleanValue)Syntax 3 var myArray = booleanValueBrowser support:Microsoft Internet Explorer: 4+Netscape Browser: 2+Implementations:JavaScript 1.1 (by Netscape)JScript 2 (by Microsoft)ECMA Script 1 (ECMA Standard)Example:Example 1 : var myBoolean = false; alert(myBoolean);Example 2 : var myBoolean = false; var yourBoolean = true; if (myBoolean) alert(myBoolean is true); if (yourBoolean) alert(yourBoolean is true); DATE OBJECTCore Object NN IE ECMADate Date and time object. 2+ 3+ ECMA 1Methods NN IE ECMAgetDate() Date as an integer between 1 and 31. 2+ 3+ ECMA 1getDay() Day of week value: 0=Sunday, 1=Monday... 2+ 3+ ECMA 1getFullYear() 4 digit year of a Date object. 4+ 4+ ECMA 1getHours() Hours value of a Date object (0-23). 2+ 3+ ECMA 1getMilliseconds() Milliseconds value of a Date object (0-999) 4+ 4+ ECMA 1getMinutes() Minutes value of a Date object (0-59) 2+ 4+ ECMA 1getMonth() Month value of a Date object. (0=Jan, 11=Dec) 2+ 3+ ECMA 1getSeconds() Seconds value of a Date object. (0-59) 2+ 3+ ECMA 1
  12. 12. getTime() Milliseconds since 1970-1-1 of a Date object. 2+ 3+ ECMA 1getTimezoneOffset() Minutes between local and UTC (GMT) time. 2+ 3+ ECMA 1getUTCDate() Date value using UTC (GMT) time. (1-31) 4+ 4+ ECMA 1getUTCDay() Day of week using UTC (GMT) time. (0=Sunday) 4+ 4+ ECMA 1getUTCFullYear() 4 digit year using UTC (GMT) time. 4+ 4+ ECMA 1getUTCHours() Hours using UTC (GMT) time. (0-23) 4+ 4+ ECMA 1getUTCMilliseconds() Milliseconds using UTC (GMT) time. (0-999) 4+ 4+ ECMA 1getUTCMinutes() Minutes using UTC (GMT) time. (0-59) 4+ 4+ ECMA 1getUTCMonth() Month using UTC (GMT) time. (0-11). 4+ 4+ ECMA 1getUTCSeconds() Seconds using UTC (GMT) time. (0-59) 4+ 4+ ECMA 1getVarDate() Visual Basic compatible VT_DATE value. n/a 4+ n/agetYear() Year value of a Date object. 2+ 3+ ECMA 1parse() Milliseconds between parsed string and 1970-1-1 2+ 3+ ECMA 1setDate() Sets the date of the Date object. 2+ 4+ ECMA 1setFullYear() Sets the year value in a Date object. 4+ 4+ ECMA 1setHours() Sets the hours value in a Date object. 2+ 4+ ECMA 1setMilliseconds() Sets the milliseconds value in a Date object. 4+ 4+ ECMA 1setMinutes() Sets the minutess value in a Date object. 2+ 3+ ECMA 1setMonth() Sets the month value in a Date object. 2+ 3+ ECMA 1setSeconds() Sets the seconds value in a Date object. 2+ 3+ ECMA 1setTime() Sets the time value (milliseconds) in a Date object. 2+ 3+ ECMA 1setUTCDate() Sets the UTC date of a Date object. 4+ 4+ ECMA 1setUTCFullYear() Sets the UTC year value in a Date object. 4+ 4+ ECMA 1setUTCHours() Sets the UTC hours value in a Date object. 4+ 4+ ECMA 1setUTCMilliseconds() Sets the UTC milliseconds value in a Date object. 4+ 4+ ECMA 1setUTCMinutes() Sets the UTC minutess value in a Date object. 4+ 4+ ECMA 1setUTCMonth() Sets the UTC month value in a Date object. 4+ 4+ ECMA 1setUTCSeconds() Sets the UTC seconds value in a Date object. 4+ 4+ ECMA 1setYear() Sets the year value of a Date object. 2+ 3+ ECMA 1toDateString() Returns a date as a string value. n/a 5.5+ n/atoGMTString() String value of a Date objects GMT time. 2+ 3+ ECMA 1toLocaleDateString() Returns a date as a string value. n/a 5.5+ n/atoLocaleString() String value of a Date object, in local time format. 2+ 3+ ECMA 1toLocaleTimeString() Returns a time as a string value. n/a 5.5+ n/atoSource() String representing the source code of the object. 4+ n/a ECMA 1toString() String representation of a Date object 2+ 4+ ECMA 1toTimeString() Returns a time as a string value. n/a 5.5+ n/atoUTCString() Date converted to string using UTC. 4+ 4+ ECMA 1UTC() Milliseconds since 1970 using UTC time. 2+ 3+ ECMA 1valueOf() Milliseconds since 1970-1-1. 2+ 4+ ECMA 1Properties NN IE ECMAconstructor Reference to the function that created an object. 2+ 4+ ECMA 1prototype Creates a new method for Date objects 2+ 4+ ECMA 1
  13. 13. Date Core objectDate and time object.Syntax:Syntax 1 var myDate = new Date()Syntax 2 var myDate = new Date([parameters])Syntax 3 var myDate = new Date(dateString)Syntax 4 var myDate = new Date("month dd, yyyy")Syntax 5 var myDate = new Date("month dd, yyyy hh:mm:ss")Syntax 6 var myDate = new Date(yy, mm, dd)Syntax 7 var myDate = new Date(yy, mm, dd, hh, mm, ss)Syntax 8 var myDate = new Date("miliseconds") FUNCTION OBJECTCore Object NN IE ECMAFunction Creates a new function. 2+ 4+ ECMA 1Methods NN IE ECMAapply() Applies a method of another object to the current object. 4+ 5.5+ n/acall() Executes method of another object on current object. 4+ 5.5+ n/atoSource() String representing the source code of the function. 4+ n/a n/atoString() String representing the source code of the function. 2+ 4+ ECMA 1valueOf() String representing the source code of the function. 2+ 4+ ECMA 1
  14. 14. Properties NN IE ECMAarguments An array with the arguments passed to a function. 2+ 4+ ECMA 1arguments.callee The function body of the currently executing function. 2+ 5.5+ ECMA 1arguments.length Number of arguments passed to the function. 2+ 5.5+ ECMA 1caller Reference to the function that created an object. 3+ 4+ ECMA 1constructor Reference to the function that created an object. 2+ 4+ ECMA 1length Number of arguments expected by the function. 2+ 4+ ECMA 1prototype Creates a new method for Function objects. 2+ 4+ ECMA 1 Function Core objectCreates a new function.Syntax:Syntax 1 function functionName([argname1 [, ...[, argnameN]]]){ body}Syntax 2 functionName = new Function( [argname1, [... argnameN,]] body );Browser support:Microsoft Internet Explorer: 4+Netscape Browser: 2+Implementations:JavaScript 1.1 (by Netscape)JScript 2 (by Microsoft)ECMA Script 1 (ECMA Standard)Example:Example 1 : function myFunction(){ alert(I AM ALIVE); }Example 2 :
  15. 15. <html><head><title>Example page</title><script language="JavaScript">function myMessenger(message){alert(IMPORTANT MESSAGE: +message);}</script><body onLoad="myMessenger(PAGE IS LOADED)">Bla, bla, bla<a href="#" onClick="myMessenger(YOU HIT THE LINK!);">CLICK HERE</a></body>

×