Scribd
Upload
28 views

Unit 2

Uploaded by

Abhinav Jain
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
28 views

Unit 2

Uploaded by

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

Internet and Web Programming(CSE4001)

Dr. Kamlesh Chandravanshi


VIT, Bhopal
HTML - Overview

• 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
• HTML elements tell the browser how to display the
content
• HTML elements label pieces of content such as "this
is a heading", "this is a paragraph", "this is a link",
etc.
A Simple HTML Document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Example Explained

• The <!DOCTYPE html> this document is an HTML5 docume


declaration defines that nt
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML
page
• The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a
container for all the visible contents, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML5 - Overview

• HTML5 is the next major revision of the HTML standard superseding HTML

4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and

presenting content on the World Wide Web.

• HTML5 is a cooperation between the World Wide Web Consortium (W3C)

and the Web Hypertext Application Technology Working Group

(WHATWG).

• The new standard incorporates features like video playback and drag-and-

drop that have been previously dependent on third-party browser plug-ins

such as Adobe Flash, Microsoft Silverlight, and Google Gears.


Browser Support

• The latest versions of Apple Safari, Google Chrome,


Mozilla Firefox, and Opera all support many HTML5
features and Internet Explorer 9.0 will also have
support for some HTML5 functionality.
New Features

• HTML5 introduces a number of new elements and


attributes that can help you in building modern
websites. Here is a set of some of the most prominent
features introduced in HTML5.
• New Semantic Elements − These are like <header>, <footer>, and <section>.
• Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced
for <input> tag.
• Persistent Local Storage − To achieve without resorting to third-party plugins.
• WebSocket − A next-generation bidirectional communication technology for web
applications.
• Server-Sent Events − HTML5 introduces events which flow from web server to the web
browsers and they are called Server-Sent Events (SSE).
• Canvas − This supports a two-dimensional drawing surface that you can program with
JavaScript.
• Audio & Video − You can embed audio or video on your webpages without resorting to third-
party plugins.
• Geolocation − Now visitors can choose to share their physical location with your web
application.
• Microdata − This lets you create your own vocabularies beyond HTML5 and extend your
web pages with custom semantics.
• Drag and drop − Drag and drop the items from one location to another location on the same
webpage.
Backward Compatibility

• HTML5 is designed, as much as possible, to be


backward compatible with existing web browsers. Its
new features have been built on existing features and
allow you to provide fallback content for older
browsers.
HTML Editors

• HTML Using Notepad or TextEdit


• Step 1: Open Notepad (PC) or Open TextEdit (Mac)
• Step 2: Write Some HTML
• Step 3: Save the HTML Page (.htm or .html)
• Step 4: View the HTML Page in Your Browser
HTML Headings

• HTML headings are defined with


the <h1> to <h6> tags.
• HTML Paragraphs
• Example:
– <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
• HTML Links
– Example
– <a href="https://www.w3schools.com">This is a
link</a>
HTML Images

• HTML images are defined with the <img> tag.


• The source file (src), alternative text (alt), width,
and height are provided as attributes:
• <img src=“example.jpg" alt=“ex.com" width="104" h
eight="142">
– Ex2.htm
HTML Horizontal Rules

• The <hr> tag defines a thematic break in an HTML


page, and is most often displayed as a horizontal rule.
• The <hr> element is used to separate content (or
define a change) in an HTML page
– Example 5
• HTML Line Breaks
– Example 6
Background Color

• The CSS background-color property defines the


background color for an HTML element.
– Ex7
• Set background color for two different elements:
– Ex8
• Text Color
– Ex9
Fonts

• The CSS font-family property defines the font


to be used for an HTML element:
– Ex10
• Text Size
– Ex11
• Text Alignment
– Ex12
HTML Formatting Elements

• Formatting elements were designed to display special types


of text:
– <b> - Bold text
– <strong> - Important text
– <i> - Italic text
– <em> - Emphasized text
– <mark> - Marked text
– <small> - Smaller text
– <del> - Deleted text
– <ins> - Inserted text
– <sub> - Subscript text
– <sup> - Superscript text
HTML Links

• <a href="url">link text</a>


HTML Tables
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>

<h2>A basic HTML table</h2>


<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Reliance</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>Idea</td>
<td>Delhi</td>
<td>India</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>

</html>
HTML Design Form

• HTML Form is a document that stores information of


a user on a web server using interactive controls. An
HTML form contains different kinds of information
such as username, password, contact number, email
id, etc.
• The elements used in an HTML form are the check
box, input box, radio buttons, submit buttons, etc.
Using these elements the information of a user is
submitted on a web server.
The <form> Element

<form>
.
form elements
.
</form>
The <input> Element
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of
many choices)

<input type="checkbox"> Displays a checkbox (for selecting zero or


more of many choices)

<input type="submit"> Displays a submit button (for submitting the


form)

<input type="button"> Displays a clickable button


HTML5 Document

• The following tags have been introduced for better structure −


– section − This tag represents a generic document or application section. It
can be used together with h1-h6 to indicate the document structure.
– article − This tag represents an independent piece of content of a document,
such as a blog entry or newspaper article.
– aside − This tag represents a piece of content that is only slightly related to
the rest of the page.
– header − This tag represents the header of a section.
– footer − This tag represents a footer for a section and can contain
information about the author, copyright information, et cetera.
– nav − This tag represents a section of the document intended for navigation.
– dialog − This tag can be used to mark up a conversation.
– figure − This tag can be used to associate a caption together with some
embedded content, such as a graphic or video.
What is CSS

• CSS, or Cascading Style Sheets, is a language used to style


and enhance websites. It controls how HTML elements—
such as text, images, and buttons—are displayed on a
webpage. With CSS, you can adjust font sizes and colors, add
backgrounds, and manage the layout, transforming a basic
webpage into a visually appealing and user-friendly
experience. CSS also simplifies layout management across
multiple web pages by using external stylesheets stored in
CSS files.
Different Ways to Use CSS

• CSS has three ways to style the HTML:


– Inline: Add styles directly to HTML elements using
the style attribute (limited use).
– Internal: Place styles within a <style> tag inside
the HTML file, usually within the <head> section
– External: Create a separate CSS file with
a .css extension and link it to your HTML file using
the <link> tag.
CSS Box Model

• A CSS box model is a compartment that includes


numerous assets, such as edge, border, padding and
material.
• It is used to develop the design and structure of a web
page.
• It can be used as a set of tools to personalize the
layout of different components. According to the CSS
box model, the web browser supplies each element as
a square prism.
CSS Background

• CSS background property is used to define the


background effects on element. There are 5
CSS background properties that affects the
HTML elements:
– background-color
– background-image
– background-repeat
– background-attachment
– background-position

You might also like