Scribd
Upload
17 views28 pages

Web Science Chapter 4

The document provides an introduction to HTML and XML, detailing their purposes, structures, and key features. HTML is a markup language used to create and structure web content, while XML is designed for storing and transporting data with a focus on self-descriptiveness. The document also outlines the differences between HTML and XML, as well as the syntax and elements used in both languages.

Uploaded by

you8814711
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views28 pages

Web Science Chapter 4

The document provides an introduction to HTML and XML, detailing their purposes, structures, and key features. HTML is a markup language used to create and structure web content, while XML is designed for storing and transporting data with a focus on self-descriptiveness. The document also outlines the differences between HTML and XML, as well as the syntax and elements used in both languages.

Uploaded by

you8814711
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

HTML and XML

Chapter 4
Introduction to HTML
• Files that travel across the largest network in the world, the Internet, and
carry information from a “server” to “client” that requested them are called
“webpage”.
• The language used to develop webpage is called Hyper Text Markup
Language (HTML).
• HTML stands for HyperText Markup Language.
• It is the standard language used to create and structure content on the web.
• HTML is a markup language, not a programming language, meaning it
annotates text to define how it is structured and displayed by web browsers.
• It forms the building blocks of all websites and is complemented by CSS for
style and JavaScript for interactivity.
• HTML was created by Tim Berners Lee at European Laboratory for
Particle Physics (CERN) in late 1980’s.
• In 1992, Marc Anderson Created MOSAIC, first graphic interface for
HTML documents at UIUC. (University of Illinois at Urbana
Champaign)
HTML Features
• It is simple and an open standard
• It is fairly easy to learn
• It is good at presenting text and graphic in a reasonably decent layout
• Its files are tiny.
• It allows the view of information online through the use of interactive
form.
• Its browsers are cheap or free, very powerful; with a combination of
third party add-ins and server side content support, a vast range of
information is being delivered through HTML language
• HTML document browser interfaces are easy to build into existing
products because of the simplicity of HTML
• HTML pages allow link to any other publicly accessible page simply by
entering the address
• There are some specialized structures in HTML, but they are mostly
used to effect a certain formatting look
• It permits a variety of other enhancement other than internal and
external hyperlinks
• It is interactive
Structure and syntax
• <!DOCTYPE HTML>: The <!DOCTYPE html> declaration is placed at the
beginning of the document. It tells the browser that the document follows
HTML5 standards, ensuring consistent rendering across browsers.
• <html> Tag: The <html> tag wraps the entire document, serving as the root
element of an HTML page. It typically includes the lang attribute to specify the
language of the content.
• <head> Section: The <head> section contains metadata, scripts, styles, and
other information not displayed directly on the page but essential for
functionality and SEO.
• <body> Section: The <body> section contains all the visible content of the web
page, including text, images, videos, links, and more. This is where you’ll add the
main elements to display on the page.
HTML forms
• HTML Forms use the <form> tag to collect user input through various
interactive controls.
• These controls range from text fields, numeric inputs, and email fields
to password fields, checkboxes, radio buttons, and submit buttons.

• Syntax:
• <form>
• <!--form elements-->
• </form>
• Form Elements
• The HTML <form> comprises several elements, each serving a unique
purpose.
• For instance, the <label> element defines labels for
other <form> elements.
• On the other hand, the <input> element is versatile and can be used
to capture various types of input data such as text, password, email,
and more simply by altering its type attribute.
Elements Descriptions
<label> It defines labels for <form> elements.

It is used to get input data from the form in various types such as text, password, email, etc
<input>
by changing its type.

<button> It defines a clickable button to control other elements or execute a functionality.

<select> It is used to create a drop-down list.

<textarea> It is used to get input long text content.

<fieldset> It is used to draw a box around other form elements and group the related data.

<legend> It defines a caption for fieldset elements


Elements Descriptions
<datalist> It is used to specify pre-defined list options for input controls.

<output> It displays the output of performed calculations.

<option> It is used to define options in a drop-down list.

<optgroup> It is used to define group-related options in a drop-down list.


Commonly Used Input Types in
HTML Forms
Input Type Description

<input type=”text”> Defines a one-line text input field

<input type=”password”> Defines a password field

<input type=”submit”> Defines a submit button

<input type=”reset”> Defines a reset button

<input type=”radio”> Defines a radio button

<input type=”email”> Validates that the input is a valid email address.

Allows the user to enter a number. You can specify min, max, and step attributes
<input type=”number”>
for range.
Commonly Used Input Types in
HTML Forms
Input Type Description

<input type=”checkbox”> Used for checkboxes where the user can select multiple options.

<input type=”date”> Allows the user to select a date from a calendar.

<input type=”time”> Allows the user to select a time.

<input type=”file”> Allows the user to select a file to upload.


key attributes that can be used with
the <form> element:
• action: This attribute specifies where to send the form-data when a
form is submitted. The value of this attribute is typically a URL.
• method: This attribute defines the HTTP method used to send the
form-data. The values can be “get” or “post”.
• target: This attribute specifies where to display the response received
after submitting the form. The values can be “_blank”, “_self”,
“_parent”, “_top”, or the name of an iframe.
• enctype: This attribute is used when method=“post”. It specifies how
the form-data should be encoded when submitting it to the server.
The values can be “application/x-www-form-urlencoded”,
“multipart/form-data”, or “text/plain”.
• autocomplete: This attribute specifies whether a form should have
autocomplete on or off. When autocomplete is on, the browser
automatically completes values based on values that the user has
entered before.
• novalidate: This Boolean attribute specifies that the form-data should
not be validated on submission.
Introduction to XML
• XML stands for extensible Markup Language
• XML is a markup language like HTML
• XML is designed to store and transport data
• XML is designed to be self-descriptive.(you define your own tags
designed specifically for your needs.)

• Basically XML does not do anything.


• XML is just information wrapped in tags. Users must require a piece of
software to send, receive, store, or display it.
Differences between XML and
HTML
• XML is designed to carry data emphasizing on what type of data it is.
• HTML is designed to display data emphasizing on how data looks
• XML tags are not predefined like HTML tags.
• HTML is a markup language whereas XML provides a framework for
defining markup languages.
• HTML is about displaying data,hence it is static whereas XML is about
carrying information,which makes it dynamic.
Structure of XML
• Prolog (optional): The prolog appears at the beginning of the XML document and
contains metadata about the document itself, such as the XML version and the
character encoding (e.g., <?xml version="1.0" encoding="UTF-8"?>)
• Root Element: Every XML document must contain a single root element that encases
all other elements. The root element provides a container for all data in the document
to enforce a hierarchical structure
• Elements: Elements are the building blocks of XML documents, denoted by tags. An
element can contain text, other elements, or a mix of both. Elements are used to
encase data points in a document, and typically consist of a start tag, content, and an
end tag (e.g., <name>John Doe</name>).
• Attributes: Attributes provide additional information about elements. They are
included within the start tag of an element and usually come in name/value pairs (e.g.,
<postcode id="12345"/>).
• Hierarchical structure
• Parent and child elements:
• Elements nested within other elements create parent-child relationships. This
structure allows XML to represent complex data relationships naturally (e.g., a
Person element might contain FirstName, LastName, and ContactDetails as
child elements).
XML document structure
• XML documents are formed as element trees.
• An XML tree starts at a root element and branches from the root
to child elements.
• All elements can have sub elements (child elements):
•
• <root>
<child>
<subchild>.....</subchild>
</child>
</root>
• Rule 1: Its standard format consists of an XML prolog which contains both
XML Declaration and XML DTD (Document Type Definition) and the body. If
the XML prolog is present, it should always be the beginning of the
document. The XML Version, by default, is 1.0, and including only this forms
the shortest XML Declaration. UTF-8 is the default character encoding and
is one of seven character-encoding schemes. If it is not present, it can result
in some encoding errors.

• Syntax of XML Declaration:

• <?xml version="1.0" encoding="UTF-8"?>


• <!DOCTYPE website [
• <!ELEMENT website (name,company,phone)>
• <!ELEMENT name (#PCDATA)>
• <!ELEMENT company (#PCDATA)>
• <!ELEMENT phone (#PCDATA)>
• ]>

• <website>
• <name>GeeksforGeeks</name>
• <company>GeeksforGeeks</company>
• <phone>011-24567981</phone>
• </website>
• Rule 2: XML Documents must have a root element (the supreme
parent element) and its child elements (sub-elements). To have a
better view of the hierarchy of the data elements, XML follows the
XML tree structure which comprises of one single root (parent) and
multiple leaves (children).
<?xml version="1.0" encoding="UTF-8"?>
• <website>
• <company category="geeksforgeeks">
• <title>Machine learning</title>
• <author>aarti majumdar</author>
• <year>2022</year>
• </company>
• <company category="geeksforgeeks">
• <title>Web Development</title>
• <author>aarti majumdar</author>
• <year>2022</year>
• </company>
• <company category="geeksforgeekse">
• <title>XML</title>
• <author>aarti majumdar</author>
• <year>2022</year>
• </company>
• </website>
• Rule 3: All XML Elements are required to have Closing and opening
Tags(similar to HTML).

• <message>Welcome to GeeksforGeeks</message>
• Rule 4: The opening and closing tags are case-sensitive. For
Example, <Message> is different from <message> from above
example.
• <Person>
• <First_Name>John</First_Name>
• <Last_Name>Doe</Last_Name>
• <DOB>1968-11-24</DOB>
• <State></State>
• <Postcode id=""/>
• </Person>
XML parser
• The XML DOM (Document Object Model) defines the properties and
methods for accessing and editing XML.
• However, before an XML document can be accessed, it must be
loaded into an XML DOM object.
• All modern browsers have a built-in XML parser that can convert text
into an XML DOM object.
• <html>
<body>

<p id="demo"></p>

<script>
var text, parser, xmlDoc;

text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

parser = new DOMParser();


xmlDoc = parser.parseFromString(text,"text/xml");

document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>

</body>
</html>
• Output
• Everyday Italian

You might also like