Unit 4 Web
Uploaded by
garoga9692Unit 4 Web
Uploaded by
garoga9692Unit 4
• Creating and Saving an HTML5 document using Notepad
These are the following steps to create and save an HTML document.
The steps are given below.
1) Open Notepad:
a) On the start menu, search for Notepad In Windows.
b) Click on the open option on the right side to open the
Notepad editor.
2) Write HTML Code
a) After opening the Notepad, you can write any HTML code.
b) An example is shown below:
<!DOCTYPE html>
<html>
<body>
<h1>HELLO</h1>
<h2>HIE</h2>
</body>
</html>
3) Save the HTML page
a) Once the code is written, you can click on Files and then
Save or directly press Ctrl+S.
b) Once you click on Save you will get an option to write the
name of the file with an extension.
c) Write the name of the file followed by the .html extension
and save the file encoding as UTF-8.
d) Your HTML file is now created and will be visible in the place
where you saved it.
e) You can double-click on the saved HTML file to view it on
your browser.
• Fundamentals of HTML5
HTML (Hypertext Markup Language) is the standard markup
language for creating and structuring web pages. It provides a set
of elements or tags that define the structure and content of a web
page. Here are some fundamental concepts and elements in HTML:
1) Root Elements
In HTML, the root element is the top-level element that encloses all
the content on a web page. The root element for HTML documents is
`<html>`. Here's a brief explanation of the root elements and their role
in an HTML document:
1. `<!DOCTYPE html>` Declaration:
▪ While not an element within the HTML document itself, the
`<!DOCTYPE html>` declaration is placed at the very
beginning to specify the document type and version of
HTML. It informs the browser that the document is written in
HTML5.
2. `<html>` Element:
▪ The `<html>` element is the root element of an HTML
document. All other elements are nested within it. It
contains two main sections: `<head>` and `<body>`.
▪ Example:
<!DOCTYPE html>
<html>
<head>
<!-- Head section content goes here -->
</head>
<body>
<!-- Body section content goes here -->
</body>
</html>
3. `<head>` Element:
▪ The `<head>` element contains meta-information about the
HTML document, such as the title, character set, linked
stylesheets, and metadata. It doesn't directly contribute to
the visible content of the page.
▪ Example:
<head>
<title>Your Title Here</title>
<!-- Other head section elements go here -->
</head>
4. `<body>` Element:
▪ The `<body>` element contains the main content of the HTML
document, including text, images, links, and other elements
that are visible in the browser.
▪ Example
<body>
<h1>Hello, World!</h1>
<p>This is a sample HTML document.</p>
<!-- Other body section elements go here -->
</body>
These root elements provide the basic structure for an HTML
document. The `<html>` element encapsulates the entire content, and
within it, the `<head>` and `<body>` elements serve specific purposes
for organizing information and presenting it in the browser.
2) Metadata Elements
In HTML5, metadata elements are used to provide information about
the HTML document itself. This information is not directly displayed
on the web page but is crucial for browsers, search engines, and other
tools. Here are some key metadata elements in HTML5:
1. `<meta>` Element:
▪ The `<meta>` element is used to define metadata about an
HTML document. It is commonly used to set the character
encoding, viewport settings for responsive design, and other
information.
▪ Example (setting character encoding):
<meta charset="UTF-8">
• Example (viewport settings for responsive design):
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
• The `charset` attribute specifies the character encoding, and the
`viewport` meta tag is often used to control the page's
dimensions and scaling on different devices.
2. `<title>` Element:
• The `<title>` element is used to define the title of the HTML
document. The text within this element typically appears in the
browser's title bar or tab.
• Example:
<title>My Web Page</title>
3. `<base>` Element:
• The `<base>` element specifies the base URL/target for all
relative URLs in a document. It is helpful when you want to set
a default URL for all links and forms in the document.
• Example:
<base href="https://www.example.com/" target="_blank">
• In this example, all relative URLs will be resolved relative to
"https://www.example.com/" and links will open in a new tab.
4. `<link>` Element:
• The `<link>` element is used to link external resources to the
HTML document. It is commonly used to link stylesheets,
favicons, and other resources.
• Example (linking a stylesheet):
<link rel="stylesheet" href="styles.css">
• This example links an external CSS stylesheet to the HTML
document.
5. `<style>` Element:
• The `<style>` element can be used to embed CSS (Cascading
Style Sheets) directly within the HTML document.
• Example:
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
</style>
• This example sets some basic styles for the document directly
within the HTML file.
These metadata elements help define important information about
the HTML document, control its presentation, and enhance its
compatibility with various devices and browsers.
3) Section Elements
HTML5 introduces a set of semantic sectioning elements that help
structure the content of a web page in a more meaningful way. These
elements provide clarity to both browsers and developers about the
organization of content. Here are some key sectioning elements in
HTML5:
1. `<header>` Element:
• The `<header>` element represents introductory content or a
group of navigational links. It typically contains headings,
logos, and other elements related to the document or section
it belongs to.
• Example:
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
2. `<nav>` Element:
• The `<nav>` element represents a section of navigation links,
such as menus or tables of contents.
• Example:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
3. `<section>` Element:
• The `<section>` element represents a generic section of
content. It is often used to group related content together
and can have its own heading.
• Example:
<section>
<h2>Section Heading</h2>
<p>This is some content within the
section.</p>
</section>
4. `<article>` Element:
• The `<article>` element represents a self-contained piece of
content that could be distributed and reused independently,
such as a news article or blog post.
• Example:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
5. `<aside>` Element:
• The `<aside>` element represents content that is tangentially
related to the content around it, such as a sidebar or a pull
quote.
• Example:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
<aside>
<p>Related information or links.</p>
</aside>
</article>
6. `<footer>` Element:
• The `<footer>` element represents the footer of a section or a
page. It often contains metadata, copyright information, or
links to related resources.
• Example:
<footer>
<p>© 2023 My Website</p>
</footer>
These semantic sectioning elements help create a clearer document
structure, making it easier for both developers and assistive
technologies to understand the content and its relationships. Using
these elements appropriately enhances the accessibility and
maintainability of web pages.
4) Heading Elements
In HTML5, you can use the `<h1>` to `<h6>` elements to define
headings. These elements represent six levels of section headings,
with `<h1>` being the highest (most important) and `<h6>` being the
lowest.
Here's an example of how you can use heading elements in HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML5 Headings</title>
</head>
<body>
<h1>This is a Heading Level 1 (H1)</h1>
<p>This is some content under H1.</p>
<h2>This is a Heading Level 2 (H2)</h2>
<p>This is some content under H2.</p>
<h3>This is a Heading Level 3 (H3)</h3>
<p>This is some content under H3.</p>
<h4>This is a Heading Level 4 (H4)</h4>
<p>This is some content under H4.</p>
<h5>This is a Heading Level 5 (H5)</h5>
<p>This is some content under H5.</p>
<h6>This is a Heading Level 6 (H6)</h6>
<p>This is some content under H6.</p>
</body>
</html>
The `<h1>` element is used for the main heading of the page, and subsequent
heading levels (`<h2>`, `<h3>`, and so on) are used to represent subsections or
nested headings. It's important to use heading elements in a hierarchical and
meaningful way to structure your content properly for both users and search
engines.
5) Flow Elements
In HTML5, flow elements are elements that contribute to the
document's main content flow. These elements are used to structure
and organize the content of a webpage. Here are some common flow
elements in HTML5:
1. Paragraph (`<p>`):
<p>This is a paragraph.</p>
2. Heading (`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`):
<h1>Main Heading</h1>
<h2>Subheading</h2>
3. Anchor (`<a>`):
<a href="https://www.example.com">Visit Example.com</a>
4. List (`<ul>`, `<ol>`, `<li>`):
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
5. Images (`<img>`):
<img src="image.jpg" alt="Description of the image">
6. Form elements (`<form>`, `<input>`, `<textarea>`, `<select>`):
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="Submit">
</form>
7. Tables (`<table>`, `<tr>`, `<td>`, `<th>`):
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>
8. Inline elements (`<span>`, `<strong>`, `<em>`, `<a>`):
<p>This is <strong>strong</strong> and this is
<em>emphasized</em>.</p>
9. Division (`<div>`):
<div>This is a division. </div>
6) Phrasing Elements
In HTML5, phrasing elements are elements that define the text and its
inline-level semantics within the document. These elements are used
to markup and structure the text content. Here are some common
phrasing elements in HTML5:
1. Text Content Elements:
• Span (`<span>`): Used for grouping inline elements and
applying styles.
<p>This is a <span style="color: blue;">blue</span> word.</p>
• Strong (`<strong>`): Represents strong importance or
emphasis.
<p>This is <strong>important</strong> text.</p>
• Emphasis (`<em>`): Represents emphasized text.
<p>This is <em>emphasized</em> text.</p>
• Mark (`<mark>`): Represents text that is marked or highlighted.
<p>Search for <mark>keywords</mark> on this page.</p>
• Small (`<small>`): Represents small print.
<p>This is some <small>small text</small>.</p>
• Del (`<del>`): Represents deleted text.
<p>This is <del>deleted</del> text.</p>
• Ins (`<ins>`):Represents inserted text.
<p>This is <ins>inserted</ins> text.</p>
• Subscript (`<sub>`) and Superscript (`<sup>`):
<p>H<sub>2</sub>O is water, and 10<sup>2</sup> is 100.</p>
2. Inline Links and Anchors:
• Anchor (`<a>`): Creates hyperlinks.
<p>Visit our website <a
href="https://www.example.com">here</a>.</p>
3. Inline Images:
• Image (`<img>`): Embeds images.
<p>This is an <img src="image.jpg" alt="Description"> image.</p>
4. Code Elements:
• Code (`<code>`): Represents a single line of code.
<p>Use the <code>git clone</code> command to clone a
repository.</p>
• Preformatted Text (`<pre>`):Represents preformatted text,
preserving both spaces and line breaks.
<pre>
function example() {
console.log("This is preformatted text.");
}
</pre>
5. Time (`<time>`): Represents a specific period in time.
<p>Published on <time datetime="2023-11-21">November 21,
2023</time>.</p>
6. Inline Quotes:
• Quote (`<q>`): Represents a short inline quotation.
<p>He said, <q>This is a short quote.</q></p>
• Block Quote (`<blockquote>`): Represents a longer block of
quoted text.
<blockquote>
<p>This is a block quote that spans multiple lines.</p>
</blockquote>
7) Embedded Elements
In HTML5, embedded elements are used to embed or include content
from external sources within a web page. Here are some common
embedded elements:
1. Image (`<img>`): Embeds images into the document.
<img src="image.jpg" alt="Description">
2. Audio (`<audio>`): Embeds audio content, such as music or sound
effects.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
3. Video (`<video>`): Embeds video content.
<video controls width="300">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
4. Iframe (`<iframe>`): Embeds a separate HTML document or
external content.
<iframe src="https://www.example.com" width="600"
height="400"></iframe>
5. Object (`<object>`): Embeds external resources such as Flash
animations or Java applets. While less common nowadays, it still has
some uses.
<object data="example.swf" width="550" height="400">
<param name="movie" value="example.swf">
Your browser does not support Flash content.
</object>
6. Embed (`<embed>`): Embeds external content, often used for
multimedia elements.
<embed src="example.swf" type="application/x-shockwave-flash"
width="550" height="400">
7. Canvas (`<canvas>`): Provides a space where JavaScript can be used
to draw graphics dynamically.
<canvas id="myCanvas" width="200" height="100"></canvas>
8. SVG (`<svg>`): Embeds scalable vector graphics.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"
fill="red" />
</svg>
9. Meter (`<meter>`): Represents a scalar measurement within a
known range.
<meter value="75" min="0" max="100">75%</meter>
10. Progress (`<progress>`): Represents the completion progress of a
task.
<progress value="60" max="100">60%</progress>
8) Interactive Elements
In HTML5, interactive elements are used to create a dynamic and
engaging user experience by allowing users to interact with the
content. Here are some common interactive elements:
1. Anchor (`<a>`): Although primarily used for linking, anchors can be
made interactive by using JavaScript or by linking to another part of
the same document.
<a href="#" onclick="alert('Hello!')">Click me</a>
2. Button (`<button>`): Represents a clickable button, which can
trigger actions or events.
<button onclick="alert('Button clicked!')">Click me</button>
3. Input (`<input>`): Various types of input elements allow users to
enter data or make selections. <input type="text" placeholder="Type
here">
<input type="checkbox" id="checkbox"> <label
for="checkbox">Check me</label>
<input type="radio" name="radioGroup" id="radio1"> <label
for="radio1">Option 1</label>
4. Select (`<select>`) and Options (`<option>`): Creates a dropdown
menu for selecting options.
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
5. Textarea (`<textarea>`): Allows users to input multiple lines of text.
<textarea placeholder="Enter your message"></textarea>
6. Details (`<details>`) and Summary (`<summary>`): Creates a
disclosure widget that can show or hide additional information.
<details>
<summary>Click to reveal more</summary>
<p>Additional information goes here.</p>
</details>
7. Progress (`<progress>`): Represents the completion progress of a
task.
<progress value="50" max="100">50%</progress>
8. Meter (`<meter>`): Represents a scalar measurement within a
known range.
<meter value="75" min="0" max="100">75%</meter>
9. Anchor (`<a>`) with `href` attribute: When used with the `href`
attribute, anchors can link to different parts of the same document,
creating smooth scrolling effects.
<a href="#section2">Go to Section 2</a>
<!-- ... -->
<h2 id="section2">Section 2</h2>
10. Canvas (`<canvas>`): Provides a space where JavaScript can be
used to draw graphics dynamically, creating interactive visual
elements.
<canvas id="myCanvas" width="200" height="100"></canvas>
A simple webpage using HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSE Department Admission Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
form {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input, select, textarea {
width: 100%;
padding: 8px;
margin-bottom: 16px;
box-sizing: border-box;
}
button {
background-color: #333;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #555;
}
</style>
</head>
<body>
<form>
<h2>CSE Department Admission Form</h2>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4" required></textarea>
<label for="previousDegree">Previous Degree:</label>
<input type="text" id="previousDegree" name="previousDegree" required>
<label for="marks">Percentage/CGPA:</label>
<input type="text" id="marks" name="marks" required>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
HTML5 | Introduction
Introduction: HTML stands for Hyper Text Markup Language. It is used to
design web pages using a markup language. HTML is an abbreviation of Hypertext
and Markup language. Hypertext defines the link between the web pages. The
markup language is used to define the text document within the tag which defines
the structure of web pages. HTML 5 is the fifth and current version of HTML. It
has improved the markup available for documents and has introduced application
programming interfaces (API) and Document Object Model (DOM).
Features:
It has introduced new multimedia features which supports both audio and
video controls by using <audio> and <video> tags.
There are new graphics elements including vector graphics and tags.
Enrich semantic content by including <header> <footer>, <article>,
<section> and <figure> are added.
Drag and Drop- The user can grab an object and drag it further dropping it to
a new location.
Geo-location services- It helps to locate the geographical location of a client.
Web storage facility which provides web application methods to store data on
the web browser.
Uses SQL database to store data offline.
Allows drawing various shapes like triangle, rectangle, circle, etc.
Capable of handling incorrect syntax.
Easy DOCTYPE declaration i.e., <!doctype html>
Easy character encoding i.e., <meta charset=”UTF-8″>
Removed elements from HTML 5: There are many elements which are
depreciated from HTML 5 are listed below:
Removed Elements Use Instead Elements
<acronym> <abbr>
<applet> <object>
Removed Elements Use Instead Elements
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<isindex>
<strike> CSS, <s> or <del>
<tt> CSS
New Added Elements in HTML 5:
<article>: The <article> tag is used to represent an article. More
specifically, the content within the <article> tag is independent from the
other content of the site (even though it can be related).
<aside>: The <aside> tag is used to describe the main object of the web
page in a shorter way like a highlighter. It basically identifies the content
that is related to the primary content of the web page but does not
constitute the main intent of the primary page. The <aside> tag contains
mainly author information, links, related content and so on.
<figcaption>: The <figcaption> tag in HTML is used to set a caption to
the figure element in a document.
<figure>: The <figure> tag in HTML is used to add self-contained content
like illustrations, diagrams, photos or codes listing in a document. It is
related to main flow, but it can be used in any position of a document and
the figure goes with the flow of the document and if it is removed it
should not affect the flow of the document.
<header>: It contains the section heading as well as other content, such as
a navigation links, table of contents, etc.
<footer>: The <footer> tag in HTML is used to define a footer of HTML
document. This section contains the footer information (author
information, copyright information, carriers etc.). The footer tag is used
within body tag. The <footer> tag is new in the HTML 5. The footer
elements require a start tag as well as an end tag.
<main>: Delineates the main content of the body of a document or web
app.
<mark>: The <mark> tag in HTML is used to define the marked text. It is
used to highlight the part of the text in the paragraph.
<nav>: The <nav> tag is used to declaring the navigational section in
HTML documents. Websites typically have sections dedicated to
navigational links, which enables user to navigate the site. These links can
be placed inside a nav tag.
<section>: It demarcates a thematic grouping of content.
<details>: The <details> tag is used for the content/information which is
initially hidden but could be displayed if the user wishes to see it. This tag
is used to create interactive widget which user can open or close it. The
content of details tag is visible when open the set attributes.
<summary>: The <summary> tag in HTML is used to define a summary
for the <details> element. The <summary> element is used along with the
<details> element and provides a summary visible to the user. When the
summary is clicked by the user, the content placed inside the <details>
element becomes visible which was previously hidden. The <summary>
tag was added in HTML 5. The <summary> tag requires both starting and
ending tag.
<time>: The <time> tag is used to display the human-readable data/time.
It can also be used to encode dates and times in a machine-readable form.
The main advantage for users is that they can offer to add birthday
reminders or scheduled events in their calendars and search engines can
produce smarter search results.
<bdi>: The <bdi> tag refers to the Bi-Directional Isolation. It
differentiates a text from other text that may be formatted in different
direction. This tag is used when a user generated text with an unknown
direction.
<wbr>: The <wbr> tag in HTML stands for word break opportunity and is
used to define the position within the text which is treated as a line break
by the browser. It is mostly used when the used word is too long and there
are chances that the browser may break lines at the wrong place for fitting
the text.
<datalist>: The <datalist> tag is used to provide autocomplete feature in
the HTML files. It can be used with input tag, so that users can easily fill
the data in the forms using select the data.
<keygen>: The <keygen> tag in HTML is used to specify a key-pair
generator field in a form. The purpose of <keygen> element is to provide a
secure way to authenticate users. When a form is submitted then two keys
are generated, private key and public key. The private key stored locally,
and the public key is sent to the server. The public key is used to generate
client certificate to authenticate user in future.
<output>: The <output> tag in HTML is used to represent the result of a
calculation performed by the client-side script such as JavaScript.
<progress>: It is used to represent the progress of a task. It also defines
how much work is done and how much is left to download a task. It is not
used to represent the disk space or relevant query.
<svg>: It is the Scalable Vector Graphics.
<canvas>: The <canvas> tag in HTML is used to draw graphics on web
page using JavaScript. It can be used to draw paths, boxes, texts, gradient
and adding images. By default, it does not contain border and text.
<audio>: It defines the music or audio content.
<embed>: Defines containers for external applications (usually a video
player).
<source>: It defines the sources for <video> and <audio>.
<track>: It defines the tracks for <video> and <audio>.
<video>: It defines the video content.
Advantages:
All browsers supported.
More device friendly.
Easy to use and implement.
HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful
websites.
Disadvantages:
Long codes have to be written which is time consuming.
Only modern browsers support it.
Supported Browsers: It is supported by all modern browsers.
Below examples illustrate the HTML 5 content.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>HTML 5</title>
<style>
h1 {
font-size:50px; }
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Output:
eb Development: Next Generation Trends
Introduction:
Web development is experiencing a rapid evolution, driven by cutting-
edge technologies and evolving user expectations. This document
explores key trends shaping the next generation of web development:
1. Web 3.0:
Decentralization powered by blockchain technology.
Secure, transparent, user-centric applications.
Shift towards distributed ownership, data privacy, and community-
driven development.
2. AI and ML Integration:
Personalized experiences, intelligent chatbots, predictive content
recommendations, and automated tasks.
AI assists developers in coding, debugging, and optimizing
performance.
3. Enhanced User Experience:
Immersive interfaces like VR and AR blurring lines between real
and digital worlds.
Intuitive, responsive, and personalized user interfaces adapting to
individual needs.
4. Serverless Architecture:
Cloud-based approach frees developers from server
management, enabling faster development and deployment.
Scalability and cost-efficiency.
5. Progressive Web Apps (PWA):
Combine functionality of native mobile apps with ease of access of
websites.
Offline access, push notifications, and home screen installation
drive user engagement.
6. Low-code and No-code Platforms:
Democratize web development, enabling users with limited coding
experience to build applications.
Increased innovation and user-generated content.
7. Cybersecurity and Data Privacy:
Secure data protection, encryption, and authentication
mechanisms.
Compliance with evolving data privacy regulations.
8. Sustainability:
Eco-friendly web applications minimizing energy consumption and
carbon footprint.
Green hosting solutions and energy-efficient development
practices.
9. Accessibility:
Inclusive design ensuring web applications are accessible to
everyone, regardless of their abilities.
Compliance with accessibility standards and guidelines.
10. Continuous Learning and Adaptation:
Dynamic and ever-evolving landscape.
Developers must embrace continuous learning and adapt their
skills to stay ahead.
Conclusion:
Understanding these trends is crucial for aspiring web developers to
prepare for the future. By embracing innovation, focusing on user
experience, and constantly learning, developers can build the next
generation of web applications that are both powerful and
transformative.
Exploring editors and browsers supported by HTML5:
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.
The mobile web browsers that come pre-installed on iPhones, iPads,
and Android phones all have excellent support for HTML5.
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.
Viewing an HTML document:
How to open an HTML file
Learning how to open an HTML file can make it easier to learn web
development skills. The following are different methods you may use to
open an HTML file:
How to open an HTML file using Chrome
There are different ways you can use Chrome to open your HTML files,
including:
How to open using the "Open with" option
Some steps you can follow when opening the files are:
1. Right-click on the HTML file you wish to see and select "Open
with" from the menu. You may see a long list of apps from which to
choose to open your file. Your default browser may be at the top of
the list.
2. Choose Chrome from the list, then view your file in the app.
3. If you have Chrome as your default browser, you can just double-
click the HTML file and it opens in Chrome.
4. If you try this and your computer doesn't recognize your file, the
system prompts you to open it using one of the previously installed
apps or to search the extension on the internet. Select “Open with
previously installed applications,” then select Chrome from the list
once again.
5. To ensure you've opened the right HTML file, you can check the
address bar in Chrome when you load the page. The address may
match the file location on your computer.
How to open from within Chrome
If your browser is already open, you can open the HTML file without
searching for it on your computer using the following steps:
1. Open the Chrome ribbon menu and select “File”, then choose “Open
File."
2. Go to where your HTML file is located, highlight the document and
select “Open.”
3. Your file may open in a new tab.
How to open using drag-and-drop in Chrome
The drag-and-drop method can be a useful shortcut. You can follow these
steps to use it:
1. Open the Chrome browser.
2. Locate your HTML file on your computer.
3. Drag your HTML file and drop it into a new tab on Chrome.
How to open the file using Notepad text editor
The following are steps you can follow to open an HTML file using the
Notepad text editor:
1. Open the Notepad text editor.
2. Click the “File” menu.
3. Find your file in the File Explorer window that appears.
4. Select the file you want to open and click OK.
How to open the file using Microsoft Edge
To open the HTML files using Microsoft Edge, follow these steps:
1. Open the File Explorer.
2. Locate your HTML file and right click on it.
3. Select “Always open file with” in the dialog box that appears.
4. Select Microsoft Edge from the list.
5. If Microsoft Edge isn't on the list, click on the “More apps” button and
check there.
How to open the file using Safari
If Safari is your preferred browser, you can follow this procedure to open an
HTML file:
1. Open "File Explorer."
2. Navigate to the file you wish to open.
3. Double-click on the file.
4. If it doesn't open on Safari, right-click on the file.
5. Select “Open with,” then choose Safari from the list.
How to open the file using Firefox
You may follow these steps when using Firefox to open an HTML file:
1. Open Firefox.
2. Navigate the menu and click “Open file.”
3. Select your HTML file from the dialog box list.
Steps to Host a Website:
Step 1: Decide What Type of Website You Want
You will typically find 2 types of websites:
Static or Basic Websites: Static websites are simple websites with one or
more web pages (called HTML pages). You can build them on your
computer with software like Dreamweaver and then upload the pages to
your host’s server using any FTP software (such as FileZilla).Whenever
you need to make changes to your website, you’ll have to edit the pages on
your computer and upload them again. Since they cannot be modified
dynamically, such websites are called static websites.Static websites are
cheaper than dynamic websites (below) but come with limited functionality
and no option for e-commerce or interactivity.
Dynamic Websites: Dynamic websites contain information that changes,
depending on the time of day, the viewer and other factors. They make use
of both client-side and server-side scripts to create and update content.
Client-side scripts, which run on a user’s computer, are mainly used for
appearance and interaction purposes. Server-side scripts, which reside on
a server and are extensively used by E-commerce and social networking
sites, allow users to have individual accounts and provide a customized
response for each user. Dynamic websites are CMS-driven, and allow you
to directly add and edit content (i.e. text, design, photos, and videos), as
well as let your visitors leave comments and start discussions.Dynamic
websites are ideal for businesses and organizations. Examples of dynamic
websites include blogs, forums, photo galleries and e-commerce sites.
Installing a web application software like WordPress, Joomla, Magento, etc.
may sound complicated but it’s not. HostGator India allows you one-click
installation of web applications and provides friendly 24/7/365 support to
make it easy.
Step 2: Choose Your Hosting Server
Unlike static HTML sites which can be hosted on most web servers, when it
comes to web applications, there are basically two types of hosting
platforms. Depending on your hosting needs and what you’re most
comfortable with, you can choose from:
Linux Hosting, which allows running scripts written in PHP, Perl, Python
and other Unix-originated languages, and usually supports PostgreSQL
and MySQL databases. This is the most commonly used system today.
Windows Hosting, which allows running ASP scripts utilizing .NET and
other Microsoft technologies, and supports Microsoft SQL Server and
Access database.
You can go with either Linux hosting or Windows hosting, regardless of
which operating system you use at home or at work. If your website doesn’t
require any scripting support, you’ll find Linux hosting more cost-effective.
But if your website needs scripting and database support, choose the
platform that supports the technologies you use.
Step 3: Select Your Web Hosting Plan
You will typically find a wide range of services in web hosting, such as:
Shared Hosting: In shared hosting, you get to share the physical server
with other website owners. However, you will have your own separate
account (secured with login credentials). Shared hosting is very affordable
because the cost of operating the server is shared between you and the
other website owners.
VPS Hosting (Virtual Private Server Hosting): In VPS hosting, every
website is stored on a very powerful server that is divided into several
virtual compartments. The server software is configured separately so that
each unit can function independently. It should be your preferred option if
you have high-security concerns but don’t want to invest in a faster (but
costlier) dedicated server.
Dedicated Hosting: Dedicated hosting offers you an entire server for
yourself, thereby making it faster, more secure…and costlier. It is the ideal
solution for larger businesses and high-traffic websites because it allows for
maximum customization, configuration, installation and flexibility.
Cloud Hosting: Cloud hosting allows multiple virtual servers (clouds) to
work together to host a website or a group of websites. It offers unlimited
ability to handle sudden traffic spikes. A cloud-hosted website is not limited
to a single server, and the resources allocated to it can shrink or expand
dynamically, depending on how much traffic you get. It’s a great option for
large websites, including e-commerce websites, newsletters and blogs.
Most people start with VPS (or even shared) hosting and upgrade later as
their business grows. VPS hosting gives you professional web hosting
capabilities at a far lower price than a dedicated server.
Step 4: Change Your DNS Address
After you have purchased your web hosting, you will get Name Servers
(also known as Domain Name Servers or DNS) – which is the Internet’s
equivalent of a phone book that contains IP Addresses3.
To get your website up and working, you will need to change the Name
Servers of your domain. It’s a simple but mandatory step for you to get
started.
Go to your Domain Control Panel via
http://manage.hostgator.in/customer.
Enter your registered email address and password.
Click on the Domain Name for which you need to change the Name
Servers.
In the Domain Registration section, click on the Name Servers option.
Replace the existing Name Servers with the ones provided by your
current web host, and click on the Update Name Servers button.
If you have registered your domain name with a third party provider, you
will need to log in to their Control Panel, update the Name Servers of the
domain to those provided by HostGator. However, if your domain is already
using the Name Servers of the third party provider, you can add an A
Record for the domain pointing to HostGator’s Server IP in the third Party
DNS Zone.
After you have changed your DNS, it will take about 24-48 hours for your
website to start resolving to HostGator India’s servers.
Step 5: Upload Your Website
You can now upload your website to your account by connecting to the
server using either cPanel’s File Manager or FTP Client (such as FileZilla)
– after which your website will go live.
How to Upload Your Website Using cPanel File Manager
Log in to your cPanel.
Click on the icon titled File Manager.
Select Web Root and click on Go.
Add all the files and folders under public_html and their respective
domain folder.
How to Upload Your Website Using FTP Client
You can connect to FTP via an FTP program such as FileZilla Client. It
allows you to see the files and folders on our server like you’d see them on
your computer. You can use it to drag and drop your website’s files into the
/public_html/ folder.
To connect to your web server via FileZilla, follow these steps:
Install FileZilla and open it
From the File menu, select Site Manager
Click on New Site
Name the New Site – such as with your real domain name
Enter your website’s IP address in the field marked FTP Address
Enter the username and password you received in your welcome mail
Set the Port to 21 (FTP always runs on Port 21)
Click Connect
Once your FTP is connected, you will see the files and folders of your:
Local computer on the left
Web hosting service on the right
To upload files to your hosting service provider via FileZilla, follow these
steps:
1. From the left-hand side of FileZilla, select the file(s) and folder(s) you
want to upload.
2. Drag and drop the file(s) and folder(s) to the directory location on the
right side of your web hosting service. FileZilla will now start
uploading.
3. After the uploading is finished, FileZilla log will confirm success and
your uploads will be visible on the right-hand side.
Viola! Your website is now live.
You might also like
- ASP Net Web Pages With Razor Syntax BookNo ratings yetASP Net Web Pages With Razor Syntax Book262 pages
- A Basic HTML Structure To High StrctureNo ratings yetA Basic HTML Structure To High Strcture18 pages
- Class 8 Computer Worksheet of Introduction To HTMLNo ratings yetClass 8 Computer Worksheet of Introduction To HTML8 pages
- AS - Worksheet 1 - VII - ICT - HTML - Advanced Features0% (1)AS - Worksheet 1 - VII - ICT - HTML - Advanced Features3 pages
- Chapter 1 Introduction To Web TechnologyNo ratings yetChapter 1 Introduction To Web Technology134 pages
- Discovering Computers 2008: Programming Languages and Program DevelopmentNo ratings yetDiscovering Computers 2008: Programming Languages and Program Development54 pages
- Review of Related Literature of Online Registration SystemNo ratings yetReview of Related Literature of Online Registration System8 pages
- Bachelore of Computer Applications ST - Xavier'S College - Krupa ShahNo ratings yetBachelore of Computer Applications ST - Xavier'S College - Krupa Shah75 pages
- SAP GUI For Windows 7.70: Release NotesNo ratings yetSAP GUI For Windows 7.70: Release Notes13 pages
- How To Create Custom Color Books ?: ACB File FormatNo ratings yetHow To Create Custom Color Books ?: ACB File Format2 pages