what is html
DESCRIPTION
HTMLTRANSCRIPT
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 "