WEB TECHNOLOGIES
HTML
HTML
■ HTML stands for Hyper Text Markup Language.
■ HTML is the standard markup language for creating Web
pages HTML describes the structure of a Web page.
■ HTML consists of a series of elements(tag).
■ HTML elements tell the browser how to display the content.
■ HTML uses predefined tags.
■ HTML in not a case sensitive.
■ HTML is based on an older language called Standard Generalized
Markup Language, or SGML, which defines the data in a document
independently of how the data will be displayed.
■ HTML document can be read and displayed by many different browsers
running on different types of computers – platform independent!
· HTML defines the structure and layout of the elements on a Web page
with a variety of tags.
■ Each tag may have a set of attributes that modify the appearance or layout
of the visual element contained by the tag.
■ HTML is a programming language that allows you to tell the browser
what you want it to display and how you want it to be displayed, in simple
terms, it is a Webpage.
■ <!DOCTYPE html>
■ <html>
■ <!-- Head Section content -->
■ <head>
■ <!-- Page title -->
■ <title>Home Page</title>
■ </head>
■ <!-- Body Section content -->
■ <body>
■ <!-- Used to display heading content -->
■ <h1>Welcome to Muffakham Jah College of Engineering and Technology</h1>
■ <h2>Computer Science and Artificaial Intelligence </h2>
■ <!-- Used to display paragraph content -->
Output :
■ Attributes:
• You can add attributes to tags to enhance your page.
• Added attributes go inside the brackets of the opening tag(example:
<p align=center> would center the paragraph)
■ About HTML file Structure:
· HTML files .htm or .html extensions
· Name your files to describe their functionality file name of your
home page should be [Link]
■ Common Tags (Elements):
· Always include the <HTML>…</HTML> tags
· Comments placed inside <!--…--> tags
· HTML documents
HEAD section.
Info about the document.
Info in header not generally rendered in display window.
TITLE element names your Web page.
BODY section
■ Page content Includes text, images, links, forms, etc.
■ Elements include backgrounds, link colors and font faces P
element forms a paragraph, blank line before and after
Structure of HTML Tag (Element) Alignment
■ Text Styling:
•Underline style<U>…</U>
•Align elements with ALIGN attribute right, left or center
•Close nested tags in the reverse order from which they were opened
•Emphasis (italics) style<EM>…</EM>
•Strong (bold) style<STRONG>…</STRONG>
•<B> and <I> tags deprecated Overstep boundary between content and
presentation
• Logical Styles:
<EM>, <STRONG> a add emphasis to text
<BIG>, <SMALL> a increase or decrease text size
<SUB>, <SUP> a subscript or superscript
■ Physical styles:
<B>, <I>, <U> a Bold, Italics, and Underline text
<FONT SIZE=# FACE= ―name‖ COLOR=―colorName or #rgb‖
> E.g., <FONT SIZE=+2 FACE = ―arial‖ COLOR = ―darkblue‖>
■ eXtensible Mark up Language (XHTML) :
To describe the general form and layout of documents.
An XHTML document is a mix of content and controls.
In XHTML tag names, attributes, and values are case sensitive and
values must be enclosed by
■ double quotes.
• In XHTML all elements must have both beginning and ending tags.
• Controls are tags and their attributes
Tags often delimit content and specify something about how the
content should be arranged in the document.
Attributes provide additional information about the content of a tag.
• Tools for creating XHTML documents
XHTML editors - make document creation easier and Shortcuts to typing tag
names, spell-checker,
• Plug ins
Integrated into tools like word processors,
XHTML editors
• Filters
Convert documents in other formats to XHTML
■ Advantages of both filters and plug-ins:
• Existing documents produced with other tools. can be converted to XHTML
documents.
■ Disadvantages of both filters and plug-ins:
• XHTML output of both is not perfect - must be fine tuned.
• XHTML may be non-standard.
■ URL (Uniform Resource Locator) in HTML
■ URL is used to create a link in a web document.
■ Two Types of URL:
1. Absolute URL
• Absolute URL contains all the information necessary to identify files
on the internet (Example: in postal service, for sending letter to the
destination it necessary to have full information like, name, address,
city etc.,)
• Likewise, an absolute URL contains the protocol, hostname, filename,
which are all essential to link the web document.
■ Example:
i. [Link]
1. Relative URL
• Relative URL contains the only the folder name and filename or even just the
file name.
• Browser does not need protocol address or server name to identify the file in
the web.
• Relative URL to refer the documents in relation to the originating document.
■ Two types of Relative URL:
i. Document – Relative URL.
• Document Relative URL is used to relate the HTML document in the
same folder, just providing the
■ name, It contains only the folder name and file name.
i. Server – Relative URL
• Server relative URL is relative to the server root.
Anchors and Links
■ The <a> tag defines a hyperlink, which is used to link from one
page to another.
■ The most important attribute of the <a> element is
the href attribute, which indicates the link's destination.
By default, links will appear as follows in all browsers:
■ An unvisited link is underlined and blue.
■ A visited link is underlined and purple.
■ An active link is underlined and red.
■ HTML 5 features
■Audio and Video : <Audio> and <Video> tags are the two major addition to HTML5. It allows
developers to embed a video or audio on their webpage. HTML5 video can use CSS and CSS3 to
style the video tag.
■ Navigation : <nav> tag helps in defining a set of navigation links.
■ It helps create a section of a webpage that contains navigation links. Header and Footer :The
<header> element represents a container for introductory content.
■ A <header> element typically contains:
• One or more heading elements (<h1> - <h6>)
• logo or icon
■ The <footer> element defines a footer for a document or section.
■ A <footer> element typically contains:
• Authorship information
• Copyright information
• Contact information
• Sitemap
■ Figure and figcaption:<figure> and <figcaption> elements use to insert
an image with its caption.
■ Progress :The <progress> tag use to check the progress of a task during the
execution.
■ Section :The <section> element defines specific sections and subsections in
the document.
■ Canvas : <canvas> element is used to draw graphics via Java Script. It
supports a two-dimensional drawing surface.
■ Drag and drop − Drag and drop the items from one location to another
location on the same webpage.
Tables : HTML tables allow web developers to arrange data into rows and
columns .
■ The <table> tag defines an HTML table.
■ An HTML table consists of one <table> element and one or
more <tr>, <th>, and <td> elements.
■ The <tr> element defines a table row.
■ the <th> element defines a table header.
■ and the <td> element defines a table cell
Common table tags
The HTML <table> tag is used for defining a table. The table tag
contains other tags that define the structure of the table.
■Simple program on table
■<table>
■<tr>
■<th>No.</th>
■<th>Full Name</th>
■<th>Position</th>
■<th>Salary</th>
■</tr>
■<tr>
■<td>1</td>
■<td>Bill Gates</td>
■<td>Founder Microsoft</td>
■<td>$1000</td>
■</tr>
■<tr>
■<td>2</td>
■<td>Steve Jobs</td>
■<td>Founder Apple</td>
■<td>$1200</td>
■</tr>
■ <tr>
■ <td>3</td>
■ <td>Larry Page</td>
■ <td>Founder Google</td>
■ <td>$1100</td>
■ </tr>
■ <tr>
■ <td>4</td>
■ <td>Mark Zuckeberg</td>
■ <td>Founder Facebook</td>
■ <td>$1300</td>
■ Lists:
■ HTML lists allow web developers to group a set of related items in lists.
■ Types of lists:
• Ordered lists
• Unordered lists
• Description(Definition) Lists
■ Ordered lists:
■ <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
Each list item starts with the <li> tag.
■ Example
[Link] item
[Link] item
[Link] item
■ <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
■ ordered list:
■ Program on ordered list:
<html>
<body>
<p> V SEMESTER SUBJECTS</p>
<ol type="A">
<li>SOFTWARE ENGINEERING</li>
<li>DATABASE MANAGEMENT SYSTEM</li>
<li>ARTIFICIAL INTELLIGENCE</li>
<li>AUTOMATA LANGUAGE AND COMPUTATION</li>
<li>FORECASTING TECHNIQUES</li>
<li>WEB TECHNOLOGIES</li>
</ol>
</body>
</html>
■ Unordered list:
■ <ul> tag defines an unordered list. Each list item starts with
the <li> tag. The list items will be marked with bullets
(small black circles) by default.
■ Example:
• Item
• Item
• Item
• Item
• Item
■ Program on unordered list:
<html>
<body>
<p> V SEMESTER SUBJECTS</p>
<ul type="square">
<li>SOFTWARE ENGINEERING</li>
<li>DATABASE MANAGEMENT SYSTEM</li>
<li>ARTIFICIAL INTELLIGENCE</li>
<li>AUTOMATA LANGUAGE AND COMPUTATION</li>
<li>FORECASTING TECHNIQUES</li>
<li>WEB TECHNOLOGIES</li>
</ul>
</body>
</html>
