Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
1 views

Web Development HTML Full Content

Web development involves creating and maintaining websites and applications, encompassing tasks like web design, programming, and database management. Websites can be categorized as static, which display the same content for all users, or dynamic, which generate content based on user interactions. HTML is the standard markup language used to structure web pages, consisting of various elements that dictate how content is displayed.

Uploaded by

Jaya Prakash D
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1 views

Web Development HTML Full Content

Web development involves creating and maintaining websites and applications, encompassing tasks like web design, programming, and database management. Websites can be categorized as static, which display the same content for all users, or dynamic, which generate content based on user interactions. HTML is the standard markup language used to structure web pages, consisting of various elements that dictate how content is displayed.

Uploaded by

Jaya Prakash D
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

Hypertext Markup Language (HTML)

WHAT IS WEB DEVELOPMENT

Web development is the process of creating, building, and maintaining websites


and web applications for the internet. It can include a wide range of tasks, such as:

• Web design: Determining the functionality and design of a website to enhance the user
experience
• Database management: Ensuring the secure and accurate storage and handling of databases
• Web programming: Writing code using programming languages like HTML, CSS, and
JavaScript
• Maintenance and updates: Fixing bugs, updating features, and ensuring security

Web development can be broken down into three main types:

• Front-end development: Focuses on the user-facing side of a website,


including the user interface (UI) and look and feel
• Back-end development: Focuses on the server-side functionality, including
databases, logic, APIs, and servers
• Full-stack development: Involves both front-end and back-end development
TWO TYPES OF WEBSITE

1. Static
2. dynamic

WHAT IS STATIC WEB SITE

A static website is a website that displays the same content to all


users, and doesn't change over time unless manually updated:

WHAT THEY'RE USED FOR

• Personal blogs
• Small business websites
• Company brochure sites
• Product promo pages

BENEFITS

Static websites are generally faster and more secure than dynamic websites
because there's no server-side processing. They can also be less expensive to
design and develop.
DISADVANTAGES

Static websites have fewer interactive features, which can limit user engagement
and personalization. Updating multiple pages can also be time-consuming and
labor-intensive.

WHAT IS DYNAMIC WEBSITE

A dynamic website is a website that generates content and interacts with users in
real time based on their actions, preferences, or other variables:

CONTENT PERSONALIZATION

Dynamic websites can personalize content based on the user's browser or


requests.

INTERACTIVE FEATURES

Dynamic websites can provide interactive features like user logins, live updates,
and customized experiences.
DATABASE RETRIEVAL
Dynamic websites can retrieve data from databases.

RESPONSIVE TO USER ACTIONS

Dynamic websites can respond to user actions by displaying relevant


content in an appropriate format.

SOME ADVANTAGES OF DYNAMIC WEBSITES INCLUDE:

• Ease of updates: Changes can be made in one place and reflected throughout the site.
• Enhanced functionality: Supports complex features like e-commerce, user interactions,
and dynamic content.
• Improved engagement: Dynamic content can attract repeat visitors and enhance search
engine optimization (SEO).
WEB DEVELOPMENT TECHNOLOGIES

• HTML
• CSS
• BOOTSTRAP
• JAVA SCRIPT
• DATABASE

WHAT IS 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. HTML elements tell the browser how to
display the content.

EXAMPLE ;
<h1>My First Heading</h1>
SYNTAX :

STRUCTURE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>
TEXT TAG’S

<!--> <!DOCTYPE> <html> <head> <meta> <title> <body> <!--> <h1> - <h6> <p> <b> <br>

<hr> <a> <i> <em> <abbr> <article> <address> <blockquote> <caption> <cite> <code> <del>

<details> <summary> <dfn> <div> <img> <figcaption> <figure> <footer> <link> <main> <section>

<span> <strong> <sub> <sup> <audio> <video> <ol> <ul> <li> <dd> <dl> <dt> <table> <th> <tr>

<td> <thead> <tbody> <form> <input> <textarea> <label> <fieldset> <legend> <select> <option>

<button>
1) <!--...--> comment tag :

• 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.

Example:
<!-- <p>This is a paragraph.</p> -->

2) <!DOCTYPE> Declaration :

• All HTML documents must start with a <!DOCTYPE> declaration.


• The declaration is not an HTML tag. It is an "information" to the browser about what document type to
expect.

Example:
<!DOCTYPE html>

3) <html> Tag :

• The <html> tag represents the root of an HTML document.


• The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

Example:
<html>
4) <head> Tag :

• The <head> element is a container for metadata (data about data) and is placed between the <html> tag and
the <body> tag.
• Metadata is data about the HTML document. Metadata is not displayed.
• Metadata typically define the document title, character set, styles, scripts, and other meta information.

5) <meta> Tag :

• The <meta> tag defines metadata about an HTML document. 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.

6) <title> Tag :

• The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's
title bar or in the page's tab.
• The <title> tag is required in HTML documents!

Example:
<title>Document</title>
7) <body> Tag :

• The <body> tag defines the document's body.


• The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
8) <h1> to <h6> Tags :

• The <h1> to <h6> tags are used to define HTML headings.


• <h1> defines the most important heading. <h6> defines the least important heading.

Example:
<h1>Algojaxon</h1> <h2>Algojaxon</h2> <h3>Algojaxon</h3> <h4>Algojaxon</h4>
<h5>Algojaxon</h5> <h6>Algojaxon</h6>

9) <p> Tag :

• The <p> tag defines a paragraph.


• Browsers automatically add a single blank line before and after each <p> element.

Example:
<p>This is some text in a paragraph.</p>

10) <b> Tag :

• The <b> tag specifies bold text without any extra importance.

Example:
<b>Algojaxon</b>

11) <br> Tag :

• The <br> tag inserts a single line break.


• The <br> tag is useful for writing addresses or poems.
• The <br> tag is an empty tag which means that it has no end tag.

Example: <p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
12) <hr> Tag :

• The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
• The <hr> element is most often displayed as a horizontal rule that is used to separate content (or
define a change) in an HTML page.

Example:
<hr/>

13) <a> Tags :

• 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.

Example:
<a href="https://algojaxon.com/">Visit Algojaxon Company!</a>
14) <i> ITALIC Tag :

• The <i> tag defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
• The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name,
etc.

Example:
<hr/>

15) <em> EMPHASIZED Tags :

• The <em> tag is used to define emphasized text. The content inside is typically displayed in italic.
• A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Example:
<em>have</em>
16) <abbr> ABBREVIATION Tags :

• The <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

Example:
<em>have</em>

17) <article> Tags :

• The <article> tag specifies independent, self-contained content.


• An article should make sense on its own and it should be possible to distribute it independently from the rest of
the site.
Example: <article> <h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. p> </article>
18) <address> Tags :

• The <address> tag defines the contact information for the author/owner of a document or an article.
• The contact information can be an email address, URL, physical address, phone number, social media handle, etc.
• The text in the <address> element usually renders in italic, and browsers will always add a line break before and
after the <address> element.

Example:
<address>
Written by <a href="mailto:algojaxon@gmail.com">Algojaxon</a>.<br>
Visit us at:<br>
3/52, Sithanur Bus Stop<br>
Steel Plant Main Road<br>
Salem-636302, Tamilnadu.<br>
INDIA
</address>

19) <blockquote> Tag :

• The <blockquote> tag specifies a section that is quoted from another source.
• Browsers usually indent <blockquote> elements (look at example below to see how to remove the indentation).

Example:
<p>Here is a quote from WWF's website:</p>
<blockquote >
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100
countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
20) <caption> Tags :

• The <caption> tag defines a table caption.


• The <caption> tag must be inserted immediately after the <table> tag.

Example:
<caption>Monthly savings</caption>

21) <cite> Tag :

• The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture,
etc.).

Example:
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
22) <code> Tags :

• The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's
default monospace font.

Example:
<p>The HTML <code>button</code> tag defines a clickable button.</p>

23) <del> Tag :

• The <del> tag defines text that has been deleted from a document. Browsers will usually strike a line through
deleted text.

Example:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

24) <details> Tag :

• The <details> tag specifies additional details that the user can open and close on demand.
• The <details> tag is often used to create an interactive widget that the user can open and close. By default, the
widget is closed. When open, it expands, and displays the content within.

Example:
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-
winning fireworks and seasonal special events.</p>
</details>
25) <dfn> DEFINITION Tags :

• The <dfn> tag stands for the "definition element", and it specifies a term that is going to be defined within the
content.
• The nearest parent of the <dfn> tag must also contain the definition/explanation for the term.

Example:
<h1>The dfn element</h1>
<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>

26) <div> Tag :

• The <div> tag defines a division or a section in an HTML document.


• The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with
JavaScript.
• The <div> tag is easily styled by using the class or id attribute.

Example:
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

27) <img> Tag :

• The <img> tag is used to embed an image in an HTML page.

Example:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
28) <figcaption> <figure> Tags :

• The <figcaption> tag defines a caption for a <figure> element.


• The <figcaption> element can be placed as the first or last child of the <figure> element.

Example:
<figure>
<img src="https://algojaxon.com/img/logo.png" alt="Trulli" width="200" height="200">
<figcaption>Algojaxon Company Logo</figcaption>
</figure><hr>

29) <footer> Tag :

• The <footer> tag defines a footer for a document or section.

Example:
<footer>
<p>Author: Hege Refsnes<br>
<a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
30) <iframe> Tag :

• The <iframe> tag specifies an inline frame.


• An inline frame is used to embed another document within the current HTML document.

Example:
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>

31) <link> Tag :

• The <link> tag defines the relationship between the current document and an external resource.
• The <link> tag is most often used to link to external style sheets or to add a favicon to your website.

Example:
<head>
<link rel="stylesheet" href="styles.css">
</head>

32) <section> Tag :

• The <section> tag defines a section in a document.

Example:
<section>
<h2>WWF History</h2>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the
conservation, research and restoration of the environment, formerly named the World Wildlife Fund. </p>
</section>
33) <span> Tag :

• The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
• The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.

Example:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>

34) <strong> Tag :

• The <strong> tag is used to define text with strong importance. The content inside is typically displayed in bold.

Example:
<strong>This text is important!</strong>

35) <sup> Tag :

• The <sup> tag defines superscript text. Superscript text appears half a character above the normal line, and is
sometimes rendered in a smaller font.

Example:
<p>This text contains <sup>superscript</sup> text.</p>

36) <sub> Tag :

• The <sub> tag defines subscript text. Subscript text appears half a character below the normal line, and is
sometimes rendered in a smaller font.

Example:
<p>H<sub>2</sub>O</p>
37) <audio> Tag :

• The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
• The <audio> tag contains one or more <source> tags with different audio sources. The browser will choose the
first source it supports.
• The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the
<audio> element.
• There are three supported audio formats in HTML: MP3, WAV, and OGG.

Example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

38) <video> Tag :

• The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.
• The <video> tag contains one or more <source> tags with different video sources. The browser will choose the
first source it supports.
• The text between the <video> and </video> tags will only be displayed in browsers that do not support the
<video> element.
• There are three supported video formats in HTML: MP4, WebM, and OGG.

Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
TYPE OF LIST :

1. Ordered List
2. Unordered List
3. Description List

39) Ordered List Tag :

• The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
• The <li> tag is used to define each list item.

Example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
40) Unordered List Tag :

• The <ul> tag defines an unordered (bulleted) list.


• Use the <ul> tag together with the <li> tag to create unordered lists.

Example:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

41) Description List Tag :

• The <dd> tag is used to describe a term/name in a description list.


• The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines
terms/names).
• Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.

Example:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
42) Table :

• 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.
• An HTML table may also include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

Example:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
43) Table using colspan :

Example:
<table>
<caption>Life Expectancy By Current Age</caption>
<tr>
<th colspan="2">65</th>
<th colspan="2">40</th>
<th colspan="2">20</th>
</tr>
<tr>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
<th>Men</th>
<th>Women</th>
</tr>
<tr>
<td>82</td>
<td>85</td>
<td>78</td>
<td>82</td>
<td>77</td>
<td>81</td>
</tr>
</table>
43) Table using rowspan :

Example:
<table>
<caption>Favorite and Least Favorite Things</caption>
<tr>
<th></th>
<th></th>
<th>Bob</th>
<th>Alice</th>
</tr>
<tr>
<th rowspan="2">Favorite</th>
<th>Color</th>
<td>Blue</td>
<td>Purple</td>
</tr>
<tr>
<th>Flavor</th>
<td>Banana</td>
<td>Chocolate</td>
</tr>
<tr>
<th rowspan="2">Least Favorite</th>
<th>Color</th>
<td>Yellow</td>
<td>Pink</td>
</tr>
<tr>
<th>Flavor</th>
<td>Mint</td>
<td>Walnut</td>
</tr>
</table>
Test Table :
44) Form :

• The <form> tag is used to create an HTML form for user input.
• The <form> element can contain one or more of the following form elements
• (type , id , name , for , required)

Example:
<input>
<textarea>
<button>
<select>
<option>
<fieldset>
<label>
<output>

Form Syntax:
<form action="server url" method="get|post">
</form>

Input Field type:

<form>
<label for="firstname">First Name: </label> <br/>
<input type="text" id="firstname" name="firstname"/> <br/>
<label for="lastname">Last Name: </label> <br/>
<input type="text" id="lastname" name="lastname"/> <br/>
</form>
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>

<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>

<form>
<label>Hobby:</label><br>
<input type="checkbox" id="cricket" name="cricket" value="cricket" />
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football" />
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey" />
<label for="hockey">Hockey</label>
</form>
<form>
<label for="register_country" class="label">Select Country:</label><br />
<select name="country" id="register_country" style="width:160px">
<option value="india">india</option>
<option value="pakistan">pakistan</option>
<option value="africa">africa</option>
<option value="china">china</option>
<option value="other">other</option>
</select>
</form>

<form>
<label for="review">Review of Algojaxon :</label><br/>
<textarea id="review" name="review" rows="4" cols="50"></textarea>
</form>

<form>
<label for="birthday">DOB:</label><br/>
<input type="date" id="birthday" name="birthday"><br/><br/>
<label for="birthday">Time:</label><br/>
<input type=“time" id="birthday" name="birthday">
</form>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male" />Male <br>
<input type="radio" id="gender" name="gender" value="female" />Female <br />
<input type="radio" id="gender" name="gender" value="others" />others <br />
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>

<form>
<button value="submit">Submit</button>
</form>

You might also like