What is HTML?HTML is a language for describing web pages. HTML stands forHyperTextMarkupLanguage HTML is not a programming language, it is amarkup language A markup language is a set ofmarkup tags HTML usesmarkup tagsto describe web pagesHTML TagsHTML markup tags are usually called HTML tags HTML tags are keywords surrounded byangle bracketslike HTML tags normallycome in pairslike and The first tag in a pair is thestart tag,the second tag is theend tag Start and end tags are also calledopening tagsandclosing tagsHTML Documents = Web Pages HTML documentsdescribe web pages HTML documentscontain HTML tagsand plain text HTML documents are alsocalled web pagesThe purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

My First Heading

My first paragraph.

Example Explained The text between and describes the web page The text between and is the visible page content The text between and is displayed as a heading The text between and is displayed as a paragraphWhat You NeedYou don't need any tools to learn HTML at W3Schools. You don't need an HTML editor You don't need a web server You don't need a web site

Editing HTMLHTML can be written and edited using many different editors like Dreamweaver and Visual Studio.However, in this tutorial we use a plain text editor (like Notepad) to edit HTML. We believe using a plain text editor is the best way to learn HTML.

HTML HeadingsHTML headings are defined with the to tags.ExampleThis is a headingThis is a headingThis is a headingHTML ParagraphsHTML paragraphs are defined with the tag.ExampleThis is a paragraph.This is another paragraph.HTML LinksHTML links are defined with the tag.ExampleThis is a linkHTML ImagesHTML images are defined with the tag.Example

HTML ElementsAn HTML element is everything from the start tag to the end tag:Start tag *Element contentEnd tag *

This is a paragraph

This is a link

*The start tag is often called theopening tag. The end tag is often called theclosing tag.

HTML Element Syntax An HTML element starts with astart tag / opening tag An HTML element ends with anend tag / closing tag Theelement contentis everything between the start and the end tag Some HTML elements haveempty content Empty elements areclosed in the start tag Most HTML elements can haveattributesTip:You will learn about attributes in the next chapter of this tutorial.

Nested HTML ElementsMost HTML elements can be nested (can contain other HTML elements).HTML documents consist of nested HTML elements.

HTML Document Example

This is my first paragraph.

The example above contains 3 HTML elements.

HTML Example ExplainedThe element:This is my first paragraph.The element defines a paragraph in the HTML document.The element has a start tag and an end tag .The element content is: This is my first paragraph.The element:

This is my first paragraph.

The element defines the body of the HTML document.The element has a start tag and an end tag .The element content is another HTML element (a p element).The element:

This is my first paragraph.

The element defines the whole HTML document.The element has a start tag and an end tag .The element content is another HTML element (the body element).

Don't Forget the End TagSome HTML elements might display correctly even if you forget the end tag:This is a paragraphThis is a paragraphThe example above works in most browsers, because the closing tag is considered optional.Never rely on this. Many HTML elements will produce unexpected results and/or errors if you forget the end tag .

Empty HTML ElementsHTML elements with no content are called empty elements.
is an empty element without a closing tag (the
tag defines a line break).Tip:In XHTML, all elements must be closed. Adding a slash inside the start tag, like
, is the proper way of closing empty elements in XHTML (and XML).HTML Attributes HTML elements can haveattributes Attributes provideadditional informationabout an element Attributes are always specified inthe start tag Attributes come in name/value pairs like:name="value"Attribute ExampleHTML links are defined with the tag. The link address is specified in the href attribute:ExampleThis is a linkAlways Quote Attribute ValuesAttribute values should always be enclosed in quotes.Double style quotes are the most common, but single style quotes are also allowed.HTML Tip: Use Lowercase AttributesAttribute names and attribute values are case-insensitive.However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.Newer versions of (X)HTML will demand lowercase attributes.HTML Attributes ReferenceA complete list of legal attributes for each HTML element is listed in our:Complete HTML ReferenceBelow is a list of some attributes that are standard for most HTML elements:AttributeValueDescription

classclassnameSpecifies a classname for an element

idIdSpecifies a unique id for an element

stylestyle_definitionSpecifies an inline style for an element

titletooltip_textSpecifies extra information about an element (displayed as a tool tip)

HTML Tag ReferenceW3Schools' tag reference contains additional information about these tags and their attributes.You will learn more about HTML tags and attributes in the next chapters of this tutorial.TagDescription

Defines an HTML document

Defines the document's body

to Defines HTML headings

Defines a horizontal line

Defines a comment

HTML Line BreaksUse the
tag if you want a line break (a new line) without starting a new paragraph:ExampleThis is
a para
graph with line breaksThe
element is an empty HTML element. It has no end tag.
or
In XHTML, XML, elements with no end tag (closing tag) are not allowed.Even if
works in all browsers, writing
instead works better in XHTML and XML applications.HTML Output - Useful TipsYou cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space.HTML Text FormattingThis text is bold

This text is big

This text is italic

This is computer output

This issubscriptandsuperscriptHTML Text Formatting TagsTagDescription

Defines bold textDefines big textDefines emphasized textDefines italic textDefines small textDefines strong textDefines subscripted textDefines superscripted textDefines inserted textDefines deleted textHTML "Computer Output" TagsTagDescriptionDefines computer code textDefines keyboard textDefines sample computer codeDefines teletype textDefines a variableDefines preformatted textHTML Citations, Quotations, and Definition TagsTagDescriptionDefines an abbreviationDefines an acronymDefines contact information for the author/owner of a documentDefines the text directionDefines a long quotationDefines a short quotationDefines a citationDefines a definition termThe HTML Tag Should NOT be UsedThe tag is deprecated in HTML 4, and removed from HTML5.The World Wide Web Consortium (W3C) has removed the tag from its recommendations.In HTML 4, style sheets (CSS) should be used to define the layout and display properties for many HTML elements.The example below shows how the HTML could look by using the tag:ExampleThis paragraph is in Arial, size 5, and in red text color.This paragraph is in Verdana, size 3, and in blue text color.Styling HTML with CSSCSS was introduced together with HTML 4, to provide a better way to style HTML elements.CSS can be added to HTML in the following ways: inseparate style sheet files(CSS files) in thestyle elementin the HTML head section in thestyle attributein single HTML elementsUsing the HTML Style AttributeIt is time consuming and not very practical to style HTML elements using the style attribute.The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.However, in this HTML tutorial we will introduce you to CSS using the style attribute. This is done to simplify the examples. It also makes it easier for you to edit the code and try it yourself.HTML Style Example - Background ColorThe background-color property defines the background color for an element:ExampleThis is a headingThis is a paragraph.HTML Style Example - Font, Color and SizeThe font-family, color, and font-size properties defines the font, color, and size of the text in an element:ExampleA headingA paragraph.HTML Hyperlinks (Links)A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document.When you move the cursor over a link in a Web page, the arrow will turn into a little hand.Links are specified in HTML using the tag.The tag can be used in two ways:1. To create a link to another document, by using the href attribute2. To create a bookmark inside a document, by using the name attributeHTML Link SyntaxThe HTML code for a link is simple. It looks like this:Link textThe href attribute specifies the destination of a link.ExampleVisit W3Schoolswhich will display like this:Visit W3SchoolsClicking on this hyperlink will send the user to W3Schools' homepage.Tip:The "Link text" doesn't have to be text. It can be an image or any other HTML element.HTML Links - The target AttributeThe target attribute specifies where to open the linked document.The example below will open the linked document in a new browser window or a new tab:ExampleVisit W3Schools!HTML Links - The name AttributeThe name attribute specifies the name of an anchor.The name attribute is used to create a bookmark inside an HTML document.Note:The upcoming HTML5 standard suggest using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.Bookmarks are not displayed in any special way. They are invisible to the reader.ExampleA named anchor inside an HTML document:Useful Tips SectionCreate a link to the "Useful Tips Section" inside the same document:Visit the Useful Tips SectionOr, create a link to the "Useful Tips Section" from another page:Visit the Useful Tips SectionHTML Images - The Tag and the Src AttributeIn HTML, images are defined with the tag.The tagis empty, which means that it contains attributes only, and has no closing tag.To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.Syntax for defining an image:The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.The browser displays the image where the tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.HTML Images - The Alt AttributeThe required alt attribute specifies an alternate text for an image, if the image cannot be displayed.The value of the alt attribute is an author-defined text:The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).HTML Images - Set Height and Width of an ImageThe height and width attributes are used to specify the height and width of an image.The attribute values are specified in pixels by default:Tip:It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).HTML Image TagsTagDescriptionDefines an imageDefines an image-mapDefines a clickable area inside an image-mapHTML TablesTables are defined with the tag.A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). td stands for "table data," and holds the content of a data cell. A tag can contain text, links, images, lists, forms, other tables, etc.Table Examplerow 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2How the HTML code above looks in a browser:row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2HTML Tables and the Border AttributeIf you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.To display a table with borders, specify the border attribute:Row 1, cell 1Row 1, cell 2HTML Table HeadersHeader information in a table are defined with the tag.All major browsers will display the text in the element as bold and centered.Header 1Header 2row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2How the HTML code above looks in your browser:Header 1Header 2row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2HTML Table TagsTagDescriptionDefines a tableDefines a table headerDefines a table rowDefines a table cellDefines a table captionDefines a group of columns in a table, for formattingDefines attribute values for one or more columns in a tableGroups the header content in a tableGroups the body content in a tableGroups the footer content in a tableHTML Unordered ListsAn unordered list starts with the tag. Each list item starts with the tag.The list items are marked with bullets (typically small black circles).CoffeeMilkHow the HTML code above looks in a browser: Coffee MilkHTML Ordered ListsAn ordered list starts with the tag. Each list item starts with the tag.The list items are marked with numbers.CoffeeMilkHow the HTML code above looks in a browser:1. Coffee2. MilkHTML Definition ListsA definition list is a list of items, with a description of each item.The tag defines a definition list.The tag is used in conjunction with (defines the item in the list) and (describes the item in the list):Coffee- black hot drinkMilk- white cold drinkHow the HTML code above looks in a browser:Coffee- black hot drinkMilk- white cold drinkHTML List TagsTagDescriptionDefines an ordered listDefines an unordered listDefines a list itemDefines a definition listDefines an item in a definition listDefines a description of an item in a definition listHTML FormsHTML forms are used to pass data to a server.A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.The tag is used to create an HTML form:.input elements.HTML Forms - The Input ElementThe most important form element is the input element.The input element is used to select user information.An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more.The most used input types are described below.Text Fields defines a one-line input field that a user can enter text into:First name:
Last name: How the HTML code above looks in a browser:Top of FormFirst name:Last name:Bottom of FormNote:The form itself is not visible. Also note that the default width of a text field is 20 characters.Password Field defines a password field:Password: How the HTML code above looks in a browser:Top of FormPassword:Bottom of FormNote:The characters in a password field are masked (shown as asterisks or circles).Radio Buttons defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: Male
FemaleHow the HTML code above looks in a browser:Top of FormMaleFemaleBottom of FormCheckboxes defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices. I have a bike
I have a carHow the HTML code above looks in a browser:Top of FormI have a bikeI have a carBottom of FormSubmit Button defines a submit button.A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:Username: How the HTML code above looks in a browser:Top of FormUsername:Bottom of FormHTML Form TagsTagDescriptionDefines an HTML form for user inputDefines an input controlDefines a multi-line text input controlDefines a label for an input elementDefines a border around elements in a formDefines a caption for a fieldset elementDefines a select list (drop-down list)Defines a group of related options in a select listDefines an option in a select listDefines a push buttonHTML FramesWith frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.The disadvantages of using frames are: Frames are not expected to be supported in future versions of HTML Frames are difficult to use. (Printing the entire page is difficult). The web developer must keep track of more HTML documentsThe HTML frameset ElementThe frameset element holds one or more frame elements. Each frame element can hold a separate document.The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.The HTML frame ElementThe tag defines one particular window (frame) within a frameset.In the example below we have a frameset with two columns.The first column is set to 25% of the width of the browser window. The second column is set to 75% of the width of the browser window. The document "frame_a.htm" is put into the first column, and the document "frame_b.htm" is put into the second column: Note:The frameset column size can also be set in pixels (cols="200,500"), and one of the columns can be set to use the remaining space, with an asterisk (cols="25%,*").HTML Frame TagsTagDescriptionDefines a set of framesDefines a sub window (a frame)Defines a noframe section for browsers that do not handle framesSyntax for adding an iframe:The URL points to the location of the separate page.Iframe - Set Height and WidthThe height and width attributes are used to specify the height and width of the iframe.The attribute values are specified in pixels by default, but they can also be in percent (like "80%").ExampleIframe - Remove the BorderThe frameborder attribute specifies whether or not to display a border around the iframe.Set the attribute value to "0" to remove the border:ExampleUse iframe as a Target for a LinkAn iframe can be used as the target frame for a link.The target attribute of a link must refer to the name attribute of the iframe:ExampleW3Schools.comHTML iframe TagTagDescriptionDefines an inline sub window (frame)Color ValuesHTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB).The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255 (in HEX: FF).HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign.Color ValuesColorColor HEXColor RGB#000000rgb(0,0,0)#FFFFFFrgb(255,255,255)Source: http://www.w3schools.comWhat is XML? XML stands for EXtensible Markup Language XML is a markup language much like HTML XML was designed to carry data, not to display data XML tags are not predefined. You must define your own tags XML is designed to be self-descriptive XML is a W3C RecommendationThe Difference Between XML and HTMLXML is not a replacement for HTML.XML and HTML were designed with different goals: XML was designed to transport and store data, with focus on what data is HTML was designed to display data, with focus on how data looksHTML is about displaying information, while XML is about carrying information.XML Does Not DO AnythingMaybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information.The following example is a note to Tove, from Jani, stored as XML:ToveJaniReminderDon't forget me this weekend!The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body.But still, this XML document does not DO anything. It is just information wrapped in tags. Someone must write a piece of software to send, receive or display it.With XML You Invent Your Own TagsThe tags in the example above (like and ) are not defined in any XML standard. These tags are "invented" by the author of the XML document.That is because the XML language has no predefined tags.The tags used in HTML are predefined. HTML documents can only use tags defined in the HTML standard (like , , etc.).XML allows the author to define his/her own tags and his/her own document structure.XML is Not a Replacement for HTMLXML is a complement to HTML.It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to transport data, while HTML is used to format and display the data.My best description of XML is this:XML is a software- and hardware-independent tool for carrying information.XML Separates Data from HTMLIf you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML each time the data changes.With XML, data can be stored in separate XML files. This way you can concentrate on using HTML for layout and display, and be sure that changes in the underlying data will not require any changes to the HTML.With a few lines of JavaScript code, you can read an external XML file and update the data content of your web page.XML Simplifies Data SharingIn the real world, computer systems and databases contain data in incompatible formats.XML data is stored in plain text format. This provides a software- and hardware-independent way of storing data.This makes it much easier to create data that can be shared by different applications.XML Simplifies Data TransportOne of the most time-consuming challenges for developers is to exchange data between incompatible systems over the Internet.Exchanging data as XML greatly reduces this complexity, since the data can be read by different incompatible applications.XML Simplifies Platform ChangesUpgrading to new systems (hardware or software platforms), is always time consuming. Large amounts of data must be converted and incompatible data is often lost.XML data is stored in text format. This makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data.XML Makes Your Data More AvailableDifferent applications can access your data, not only in HTML pages, but also from XML data sources.With XML, your data can be available to all kinds of "reading machines" (Handheld computers, voice machines, news feeds, etc), and make it more available for blind people, or people with other disabilities.XML is Used to Create New Internet LanguagesA lot of new Internet languages are created with XML.Here are some examples: XHTML WSDL for describing available web services WAP and WML as markup languages for handheld devices RSS languages for news feeds RDF and OWL for describing resources and ontology SMIL for describing multimedia for the webAn Example XML DocumentXML documents use a self-describing and simple syntax: Tove Jani Reminder Don't forget me this weekend!The first line is the XML declaration. It defines the XML version (1.0) and the encoding used (ISO-8859-1 = Latin-1/West European character set).The next line describes theroot elementof the document (like saying: "this document is a note"):The next 4 lines describe 4child elementsof the root (to, from, heading, and body):ToveJaniReminderDon't forget me this weekend!And finally the last line defines the end of the root element:You can assume, from this example, that the XML document contains a note to Tove from Jani.Don't you agree that XML is pretty self-descriptive?XML Documents Form a Tree StructureXML documents must contain aroot element. This element is "the parent" of all other elements.The elements in an XML document form a document tree. The tree starts at the root and branches to the lowest level of the tree.All elements can have sub elements (child elements): ..... The terms parent, child, and sibling are used to describe the relationships between elements. Parent elements have children. Children on the same level are called siblings (brothers or sisters).All elements can have text content and attributes (just like in HTML).Example:The image above represents one book in the XML below: Everyday Italian Giada De Laurentiis 2005 30.00 Harry Potter J K. Rowling 2005 29.99 Learning XML Erik T. Ray 2003 39.95 The root element in the example is . All elements in the document are contained within .The element has 4 children: ,< author>, , .All XML Elements Must Have a Closing TagIn HTML, some elements do not have to have a closing tag:This is a paragraphThis is another paragraphIn XML, it is illegal to omit the closing tag. All elementsmusthave a closing tag:This is a paragraphThis is another paragraphNote: You might have noticed from the previous example that the XML declaration did not have a closing tag. This is not an error. The declaration is not a part of the XML document itself, and it has no closing tag.XML Tags are Case SensitiveXML tags are case sensitive. The tag is different from the tag .Opening and closing tags must be written with the same case:This is incorrectThis is correctNote:"Opening and closing tags" are often referred to as "Start and end tags". Use whatever you prefer. It is exactly the same thing.XML Elements Must be Properly NestedIn HTML, you might see improperly nested elements:This text is bold and italicIn XML, all elementsmustbe properly nested within each other:This text is bold and italicIn the example above, "Properly nested" simply means that since the element is opened inside the element, it must be closed inside the element.XML Documents Must Have a Root ElementXML documents must contain one element that is theparentof all other elements. This element is called therootelement. ..... XML Attribute Values Must be QuotedXML elements can have attributes in name/value pairs just like in HTML.In XML, the attribute values must always be quoted.Study the two XML documents below. The first one is incorrect, the second is correct: Tove Jani Tove JaniThe error in the first document is that the date attribute in the note element is not quoted.Entity ReferencesSome characters have a special meaning in XML.If you place a character like "