Scribd
Upload
3 views

Unit Three HTML & XML

This document covers the fundamentals of web authoring, focusing on HTML and XML, including their syntax, tags, and applications. It explains the differences between HTML and XML, highlighting their respective purposes in web development and data transport. Additionally, it provides insights into creating and managing web content, as well as the advantages and limitations of using these markup languages.

Uploaded by

haymanotbayu1
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

Unit Three HTML & XML

This document covers the fundamentals of web authoring, focusing on HTML and XML, including their syntax, tags, and applications. It explains the differences between HTML and XML, highlighting their respective purposes in web development and data transport. Additionally, it provides insights into creating and managing web content, as well as the advantages and limitations of using these markup languages.

Uploaded by

haymanotbayu1
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

UNIT 3

WEB AUTHORING
Chapter objective
At the end of this unit, students will be able to:
 Explain how to use an extensible markup
language(HTML & XML)
 Analyze an HTML & XML document.
 Describe basic HTML & XML tags.
 Apply the syntax rules of HTML & XML documents
 Create simple HTML & XML documents.
 Compare and contrast hypertext markup language
HTML & XML.
 Understand how to publish a website.
Introduction to HTML
Internet
 Is a network of network
 Was originally formed 1970.
 Literally network called ARPA net (Advanced Research Project
Agency Network) as part of the united states department of defense .
Terminology
Online:- saying that they are using online.
WWW:- Tim Berners lee,aphysicst in switherland,invented the world
wide web.
 As a way to organized and access information on the internet.
Web browser:- is a program that runs on users computers.
 Allows them to view and interact with the webpage.
HYPERTEXT: Allows users to move from one web page to
another by using a mouse to click on a special hypertext links.
URL:- Stands for Uniform Resource Locator.
 To visit a website ,user type the URL, which is the site address,
into a web browser.
Web Server:- is a computer that stores a website and is
responsible for servicing requests for viewing that website.
ISP :- IP stands for Internet Service Provider, a company whose
business is to provide internet connections to paying customers.
HTTP/HTTPS:-a communicate protocol is simply a set of rules
that a computers use to communicate over network.
HTML:- is the language used to write most websites on the
WWW.
XML:- stands for Extensible Markup Language is an alternative
language for writing webpages.
 Provides a standout format for the movement of data in and
between applications.
 File usually requires some other applications to interpret the data
and display it in useful format.
HTML Tags
<html>: the root element of the DOM, and it contains all of the other
elements in the code.
<head>: contains metadata about the web page, such as the title and
any linked CSS or JavaScript files.
<title>: contains the title of the web page, which will be displayed in
the web browser's title bar or tab
<body>: contains the main content of the web page, which will be
displayed in the web browser's window
The opening tag: This consists of the element name, wrapped in angle
brackets. It indicates the start of the element and the point at which the
element's effects begin.
The closing tag: This is the same as the opening tag, but with a forward
slash before the element name. It indicates the end of the element and the
point at which the element's effects stop.
The content: This is the content of the element, which can be text, other
elements, or a combination of both.
The element: The opening tag, the closing tag, and the content together
make up the element.
Types of HTML tags
In HTML, tags can be classified into various types based on their
functionalities and purposes. Here are the main types of tags in HTML:
 Structural Tags Formatting Tags
 Heading Tags Interactive Tags
 Paragraph Tags Media Tags
 List Tags Table Tags
 Hyperlink Tags Semantic Tags
 Image Tags Meta Tags
 Formatting Tags Comment Tags
Html Structural Tags
<html>
<head>
<title> This is web design and development students
</title>
</head>
<body>

</body>
</html>
<h1> to <h6> (Heading Tags in HTML)
 These are heading elements, where <h1> represents the
highest level of heading (main heading), and <h6>
represents the lowest level (subheading). They are used
to define the hierarchy of the content.
<p>
 The paragraph element represents a block of text or
content. It is used to group text into separate paragraphs.
<ul>, <ol>, and <li> (List Tags)
These elements are used to create lists.
 <ul> represents an unordered list
 <ol> represents an ordered list
 <li> represents each list item
HyperLink tags
 Links are created using the anchor tag <a>,
allowing users to navigate between different
pages or resources on the web.
Image tags
 The image tag <img> is used to insert images into
web pages, enhancing visual appeal and
conveying information through graphics
Formatting Tags
 Tags like <strong> and <em> are used to
emphasize text, making it bold and italic,
respectively.
HTML Tags for Interactive Elements
 HTML provides several interactive elements that allow you to
create dynamic and interactive features on a web page. These
elements enable user input, data submission, and interactions
with web applications.
<form>
 The <form> tag is used to create a form on a web page, allowing
users to input data and submit it to the server for processing.
Forms are the foundation for various user interactions.
<input>
 The <input> tag is used within a form to create various types of
input fields, such as text fields,password, checkboxes, radio
buttons, buttons, and more.
<textarea>
 The <textarea> tag is used to create a multi-line text input field,
allowing users to enter longer text or comments.
<label>
 The <label> tag is used to associate a label with a form
element, making it more accessible and user-friendly.
<button>
 The <button> tag is used to create clickable buttons on a
web page. It can trigger actions, such as submitting a form
or executing JavaScript functions.
<select> and <option>
 The <select> tag is used to create drop-down lists, and the
<option> tag is used to define the options within the drop-
down list.
<fieldset> and <legend>
 The <fieldset> tag is used to group related form elements
together, and the <legend> tag provides a caption or title for
the fieldset.
<File select box>:-is allow user to browse for a
local file and send it as an attachement with
the form data
Tags for HTML for Media
 HTML provides tags for embedding various types of media
content directly into web pages. These embedded media tags
allow you to include multimedia elements such as videos, audio
files, and external content like maps or documents.
<img>
 The <img> tag is used to embed images into a web page. It
allows you to display pictures and graphics directly on the page.
<audio>
 The <audio> tag is used to embed audio files, such as music or
sound effects, into a web page. It supports various audio formats
like MP3, WAV, and Ogg.
<video>
 The <video> tag is used to embed videos into a web page. It
supports various video formats like MP4, WebM, and Ogg, and
allows you to add controls for playback.
<iframe>
 The <iframe> tag is used to embed external content
from another website or source. It allows you to
display content like maps, videos, or social media
posts directly on your page.
<embed>
 The <embed> tag is used to embed multimedia
content, such as audio, video, or plugins, directly into a
web page.
<object>
 The <object> tag is used to embed external media
objects or plugins into a web page. It is often used to
display interactive content created with technologies
like Flash.
The <meta> tag HTML
 Metadata is data (information) about data.
 <meta> tags always go inside the <head> element, and
are typically used to specify character set, page
description, keywords, author of the document, and
viewport settings.
 Metadata will not be displayed on the page, but is
machine parsable.
 Metadata is used by browsers (how to display content
or reload page), search engines (keywords), and other
web services.
 There is a method to let web designers take control
over the viewport (the user's visible area of a web
page), through the <meta> tag.
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
The comment tag
 Is used to insert comments in the source code. Comments are not
displayed in the browsers.
 You can use comments to explain your code, which can help you
when you edit the source code at a later date. This is especially
useful if you have a lot of code.
Introduction to XML
What is XML?
 Is a software- and hardware-independent tool
for storing and transporting data.
 Stands for eXtensible Markup Language.
 Is a markup language much like HTML.
 Was designed to store and transport data.
 Was designed to be self-descriptive.
 XML also makes it easier to expand or upgrade
to new operating systems, new applications, or
new browsers, without losing data.
Key Features of XML

1. Self-Descriptive
 XML is self-descriptive, meaning that the data is wrapped
in tags that describe the data.
For example:
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
 In this example, the tags <to>, <from>, <heading>,
and <body> describe the data they enclose.
2. Extensible
 XML does not have predefined tags. Instead,
users can define their own tags and document
structure. This flexibility allows XML to be used
in various applications without compatibility
issues.
3.Platform-Independent
 XML stores data in plain text format, making it
software- and hardware-independent. This feature
simplifies data sharing, transport, and availability
across different systems.
Applications of XML

1.Data Exchange
 XML acts as a universal translator, enabling data
exchange between different systems. It is widely
used in web services like SOAP to facilitate
seamless information sharing over the internet.
2.Document Management
 XML is used to store and organize documents in
industries like publishing, healthcare, and law.
Standards like DocBook and DITA provide a
structured framework for managing documents.
3.Configuration and Customization
 XML is often used to create organized lists of options and
preferences in applications, allowing users to customize
their experience without needing to know coding.
Advantages and Limitations
Advantages
I. Human-Readable: XML's tag-based syntax is easy to read
and understand, promoting collaboration among
developers.
II.Interoperability: XML bridges the communication gap
between different systems, ensuring seamless data
exchange.
III.Flexibility: XML can handle a wide range of data types
and structures.
Limitations

I.Verbosity: XML can be verbose, leading to larger


file sizes and increased bandwidth usage.
II.Complexity: Managing namespaces, schemas,
and other XML-related concepts can be complex.
III.Parsing Overhead: Parsing XML documents can
be resource-intensive, impacting application
performance.
HTML vs. XML
 HTML (Hyper Text Markup Language) is used to create web pages and web applications. It is
a markup language. By HTML we can create our static page. It is used for displaying the data
not to transport the data.
 XML:-is a versatile markup language designed for carrying and storing data. It allows users to
define their custom tags, making it highly flexible.

<!DOCTYPE html> <?xml version = "1.0"?>


<html> <contactinfo>
</head> <address category = "college">
<title>GeeksforGeeks</title> <name>G4G</name>

<body> <College>Geeksforgeeks</College>
<h1 style="color: green;"> </h1> <mobile>2345456767</mobile>
<p>A Computer Science portal for </address>
geeks </p> </contactinfo>
</body>
</html>
HTML XML
It was written in 1993 It was released in 1996
HTML stands for Hyper Text Markup XML stands for Extensible Markup
Language. Language.
HTML is static in nature XML is dynamic in nature
It was developed by WHATWG It was developed by Worldwide Web
Consortium.
It is termed as a presentation language It is neither termed as a presentation nor a
programming language.
HTML is a markup language. XML provides a framework to define
markup languages.
It has an extension of .html and .htm It has an extension of .xml
HTML is not Case sensitive. XML is Case sensitive.
HTML tags are predefined tags. XML tags are user-defined tags.
There are limited number of tags in XML tags are extensible.
HTML.
HTML does not preserve white spaces. White space can be preserved in XML.
HTML tags are used for displaying the XML tags are used for describing the data
data. not for displaying.
In HTML, closing tags are not necessary In XML, closing tags are necessary.
HTML is used to display the data. XML is used to store data
HTML does not carry data it just displays XML carries the data to and from the
it database
HTML offers native object support. IN XML, the objects are expressed by
conventions using attributes.
HTML document size is relatively small XML document size is relatively large as
the approach of formatting and the codes
both are lengthy.
An additional application is not required DOM(Document Object Model) is
for parsing of JavaScript code into the required for parsing JavaScript codes and
HTML document. mapping of text.
Some of the tools used for HTML are: Some of the tools used for XML are:
Visual Studio Code Oxygen XML
Atom XML Notepad
Notepad++ Liquid Studio
Sublime Text and many more. and many more.

You might also like