Scribd
Upload
17 views

Introduction To HTML

The document discusses HTML and provides examples of using HTML tags. It defines HTML as the language used to write web pages and explains that HTML pages are linked together through hypertext. It also notes that HTML is a markup language that uses tags to structure text and display it in a web browser. The document then provides a basic example of an HTML document structure and two additional examples demonstrating using the "disabled" attribute and "size" attribute in HTML tags.

Uploaded by

harika N
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views

Introduction To HTML

The document discusses HTML and provides examples of using HTML tags. It defines HTML as the language used to write web pages and explains that HTML pages are linked together through hypertext. It also notes that HTML is a markup language that uses tags to structure text and display it in a web browser. The document then provides a basic example of an HTML document structure and two additional examples demonstrating using the "disabled" attribute and "size" attribute in HTML tags.

Uploaded by

harika N
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 33

SHREYAS GOWDA P

4VM20CS050
6TH SEM

INTRODUCTION TO HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language.

Basic HTML Document


In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
HTML PROGRAM FOR DISABLE BUTTON:SUBMIT BUTTON
The 'disabled' is an attribute of <button> tag in HTML, which is used to denote that the button is disabled.
It is a Boolean attribute. The disabled button cannot be used for clicking, and it appears as a grey color.

Program:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example of Submit Disabled
</title>
<style>
/* The following tag selector body use the font-family and background-color properties for body of a
page*/

body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
/* Following container class used padding for generate space around it, and also use a background-color
for specify the color lightblue as a background */
.container {
padding: 50px;
background-color: lightblue;
}
/* The following tag selector input uses the different properties for the text filed. */

input[type=text] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus {
background-color: orange;
outline: none;
}
div {
padding: 10px 0;
}
/* The following tag selector button uses the different properties for the Button. */

button {
color: red;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;

opacity: 0.9;
}
</style>
</head>
<body>
<form>
<div class="container">
<center>
<h1> Registration Form </h1>
</center>
<label> Firstname: </label>
<input type="text" name="firstname" placeholder= "Enter your Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename" placeholder="Enter your Middlename" size="15" />
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Enter your Lastname" size="15"required />
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div>
<label for="email"> Email: <label>
<input type="text" placeholder="Enter Your Email ID" name="email" required>

In this example, the disabled attribute is used to disable the Submit button. If you click on the "Submit
Form" button, without filling the values, then it will not show the constraints included.

<button type="submit" value="submit" disabled> Submit Form </button>


</form>
</body>
</html>
OUTPUT:
SEEMA REDDY K
4VM20CS049
6TH SEM

INTRODUCTION TO HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language.

Basic HTML Document


In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
HTML PROGRAM FOR DISABLE BUTTON: RESET BUTTON
The 'disabled' is an attribute of <button> tag in HTML, which is used to denote that the button is disabled.
It is a Boolean attribute. The disabled button cannot be used for clicking, and it appears as a grey color.

Program:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example of Reset button disabled
</title>
<style>
/* The following tag selector body use the font-family and background-color properties for body of a
page*/

body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
/* Following container class used padding for generate space around it, and also use a background-color
for specify the color lightblue as a background */

.container {
padding: 50px;
background-color: lightblue;
}
/* The following tag selector input uses the different properties for the text filed. */
input[type=text] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus {
background-color: orange;
outline: none;
}
div {
padding: 10px 0;
}
/* The following tag selector button uses the different properties for the Button. */
button {
color: red;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
</style>
</head>
<body>
<form>
<div class="container">
<center>
<h1> Registration Form </h1>
</center>
<label> Firstname: </label>
<input type="text" name="firstname" placeholder= "Enter your Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename" placeholder="Enter your Middlename" size="15" />
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Enter your Lastname" size="15"required />
<div>
<label>
Gender :
</label><br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div>
<label for="email"> Email: <label>
<input type="text" placeholder="Enter Your Email ID" name="email" required>

In this example, the disabled attribute is used to disable the Reset button. If you fill the form and then
click on the 'Reset a form' button, then it will not reset the values of the above form.

<button type="reset" value="submit" disabled> Reset a Form </button>

</form>
</body>
</html>
OUTPUT:
M D TARUN
4VM20CS037
6TH SEM

INTRODUCTION TO HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available

in HTML language.

Basic HTML Document


In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
HTML PROGRAM FOR FONT SIZE
The Size is an attribute of <font> tag, which specifies the text size.
Syntax
<font size="number">
In the above syntax, the number is a value of the Size attribute, which denotes the text size. The number
for the font size is lies between the 1 and 7.

PROGRAM:
<!DOCTYPE html>
<html>
<title>
Example of Size attribute
</title>
<body>
<Center>
<font size="1">
JavaTpoint Size = "1"
</font>
<br>
<font size="2">
JavaTpoint Size = "2"
</font>
<br>
<font size="3">
JavaTpoint Size = "3"
</font>
<br>
<font size="4">
JavaTpoint Size = "4"
</font>
<br>
<font size="5">
JavaTpoint Size = "5"
</font>
<br>
<font size="6">
JavaTpoint Size = "6"
</font>
<br>
<font size="7">
JavaTpoint Size = "7"
</font>
</Center>
</body>
</html>

OUTPUT:
BHUVANA S D
4VM20CS014
6TH SEM

INTRODUCTION TO HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language.

Basic HTML Document


In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
HTML PROGRAM FOR IMAGE BUTTON
The image buttons in the HTML document can be created by using the type attribute of
an <input> element. Image buttons also perform the same function as submit buttons, but the only
difference between them is that you can keep the image of your choice as a button.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
Example of image button
</title>
<style>
/* The following tag selector body use the font-family and background-color properties for body of a
page*/
Body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
/* Following container class used padding for generate space around it, and also use a background-color
for specifying the lightblue color as a background */
.container {
padding: 50px;
background-color: lightblue;
}
/* The following tag selector input uses the different properties for specifying the text field. */
input[type=text] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus {
background-color: orange;
outline: none;
}
div {
padding: 10px 0;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
</style>
</head>
<body>
<form>
<div class="container">
<center> <h1> Registration Form</h1> </center>
<hr>
<label> Firstname: </label>
<input type="text" name="firstname" placeholder= "Firstname" size="15" required />
<label> Middlename: </label>
<input type="text" name="middlename" placeholder="Middlename" size="15" required />
<label> Lastname: </label>
<input type="text" name="lastname" placeholder="Lastname" size="15"required />
<div>
<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
</div>
<div>
<label>
Gender :
</label>
<br>
<input type="radio" value="Male" name="gender" checked > Male
<input type="radio" value="Female" name="gender"> Female
<input type="radio" value="Other" name="gender"> Other
</div>
<!-- The following tag input uses the type attribute which specifies the image, and the src attribute for
specifying the path of an image, with the height and width attributes. -->
<input type="image" src="https://www.freepngimg.com/thumb/submit_button/25497-9-submit-button-
photos.png" name="submit" width="100" height="48" alt="submit"/>

</form>
</body>
</html>
OUTPUT:
HARIKANJALI
4VM20CS027
6TH SEM

INTRODUCTION TO HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language.

Basic HTML Document


In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
HTML PROGRAM FOR THAT SHOWS THE PROFILE OF PROFESSIONAL CAMEL
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mr. Camel</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

body {
margin: 0;
box-sizing: border-box;
}

.container {
line-height: 150%;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background-color: #e9e9e9;
}
.header h1 {
color: #222222;
font-size: 30px;
font-family: 'Pacifico', cursive;
}

.header .social a {
padding: 0 5px;
color: #222222;
}

.left {
float: left;
width: 180px;
margin: 0;
padding: 1em;
}

.content {
margin-left: 190px;
border-left: 1px solid #d4d4d4;
padding: 1em;
overflow: hidden;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: sans-serif;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li a.active {
background-color: #84e4e2;
color: white;
}

li a:hover:not(.active) {
background-color: #29292a;
color: white;
}

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin: 30px 0;
}

td,
th {
border: 1px solid #dddddd;
padding: 8px;
}

tr:nth-child(1) {
background-color: #84e4e2;
color: white;
}

tr td i.fas {
display: block;
font-size: 35px;
text-align: center;
}

.footer {
padding: 55px 20px;
background-color: #2e3550;
color: white;
text-align: center;
}
</style>
</head>

<body>
<div class="container">
<header class="header">
<h1>Mr. Camel</h1>
<div class="social">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
</div>
</header>
<aside class="left">
<img src="./assets/html/mr-camel.jpg" width="160px" />
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#career">Career</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<br><br>
<p>"Do something important in life. I convert green grass to code."<br>- Mr Camel</p>
</aside>
<main class="content">
<h2>About Me</h2>
<p>I don't look like some handsome horse, but I am a real desert king. I can survive days without
water.</p>
<h2>My Career</h2>
<p>I work as a web developer for a company that makes websites for camel businesses.</p>
<hr><br>
<h2>How Can I Help You?</h2>
<table>
<tr>
<th>SKILL 1</th>
<th>SKILL 2</th>
<th>SKILL 3</th>
</tr>
<tr>
<td><i class="fas fa-broom"></i></td>
<td><i class="fas fa-archive"></i></td>
<td><i class="fas fa-trailer"></i></td>
</tr>
<tr>
<td>Cleaning kaktus in your backyard</td>
<td>Storing some fat for you</td>
<td>Taking you through the desert</td>
</tr>
<tr>
</table>
<form>
<label>Email: <input type="text" name="email"></label><br>
<label> Mobile: <input type="text" name="mobile"> </label><br>
<textarea name="comments" rows="4">Enter your message</textarea><br>
<input type="submit" value="Submit" /><br>
</form>
</main>
<footer class="footer">&copy; Copyright Mr. Camel</footer>
</div>
</body>

</html>

OUTPUT:
DEEKSHITHA G R
4VM20CS022
6TH SEM

INTRODUCTION TO HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language.

Basic HTML Document


In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
HTML PROGRAM FOR SIMPLE WEB PAGE
<header class="header">
<a href="#" class="logo">Developer</a>
<nav class="nav-items">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<div class="intro">
<h1>A Web Developer</h1>
<p>I am a web developer and I love to create websites.</p>
<button>Learn More</button>
</div>
<div class="achievements">
<div class="work">
<i class="fas fa-atom"></i>
<p class="work-heading">Projects</p>
<p class="work-text">I have worked on many projects and I am very proud of them. I am a very good
developer and I am always looking for new projects.</p>
</div>
<div class="work">
<i class="fas fa-skiing"></i>
<p class="work-heading">Skills</p>
<p class="work-text">I have a lot of skills and I am very good at them. I am very good at
programming and I am always looking for new skills.</p>
</div>
<div class="work">
<i class="fas fa-ethernet"></i>
<p class="work-heading">Network</p>
<p class="work-text">I have a lot of network skills and I am very good at them. I am very good at
networking and I am always looking for new network skills.</p>
</div>
</div>
<div class="about-me">
<div class="about-me-text">
<h2>About Me</h2>
<p>I am a web developer and I love to create websites. I am a very good developer and I am always
looking for new projects. I am a very good developer and I am always looking for new projects.</p>
</div>
<img src="https://images.unsplash.com/photo-1596495578065-6e0763fa1178?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=
871&q=80" alt="me">
</div>
</main>
<footer class="footer">
<div class="copy">&copy; 2022 Developer</div>
<div class="bottom-links">
<div class="links">
<span>More Info</span>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="links">
<span>Social Links</span>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div> </div>
</footer>
OUTPUT:
AFFAN BAIG
4VM20CS003
6TH SEM

INTRODUCTION TO HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
Hypertext refers to the way in which Web pages (HTML documents) are linked
together. Thus, the link available on a webpage is called Hypertext.
As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure
it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Now, HTML is being widely used to format web pages with the help of different tags available
in HTML language.

Basic HTML Document


In its simplest form, following is an example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
HTML PROGRAM FOR SIMPLE WEB PAGE
<html>
<head>
<meta charset="utf-8">
<title>www.vijayakumar.com</title>
</head>
<font color="#A6ACAF" size="5">
<marquee><b><i>THANKS FOR WATCHING</i></b></marquee>
</font>
<body background="C:\Users\vijayakumar\Pictures\photo29.jpg" link="white" alink="blue"
vlink="#F8F8FF" > //background image
<br />

<font face="Lato" size="5"><img src="C:\Users\vijayakumar\Pictures\logo.jpg"


height="50px" width="100px"></font>//logo image

<font face="cinzel" size="4">


<a href="#">HOME</a>
&n bsp; &nbs p;

<a href="#">VIDEOS</a>

<a href="#">ARTICLES</a>

<a href="#">BLOG</a>

<a href="#">ABOUT US</a>


</font>
<br /><br /><br /><br />
<br />
<br />
<h1 align="center">
<font color="#F0B27A" size="9" >
WELCOME TO WEB PAGE<br/>
</font>
SIMPLE WEB PAGE
</h1>
<h3 align="center">
<font face="Lato" color="red" size="3">
Onyly Using Simple HTML Code
</font>
<br /><br /><br /><br /><br /><br/><br/><br/><br/>
<hr width="1500px">
<center>
<b>
<font face="cinzel" size="4">
<a href ="#">About Us|
<a href ="#">Contact Us |
<a href ="#"> Privacy Policy |
<a href ="#"> Terms |
<a href ="#">Media Kit |
<a href ="#"> Sitemap |
<a href ="#"> Report a Bug |
<a href ="#"> FAQ Partners</a><br/>
<a href ="#">C# Tutorials|
<a href ="#"> Common Interview Questions|
<a href ="#"> Stories |
<a href ="#">Consultants |
<a href ="#"> Ideas |
<a href ="#"> Certifications
</a><br/><br/>
<font color="#FF0000">all@copyrights 2020</font>
</font>
</b>
</center>
</body>
</html>

OUTPUT:

You might also like