Scribd
Upload
32 views

HTML Basics Grade X Handout

HTML handout

Uploaded by

Anika singh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

HTML Basics Grade X Handout

HTML handout

Uploaded by

Anika singh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Introduction to HTML

UNIT 1

What is Web Development?

•Web development includes web designing, development, and maintenance of a website

•It focuses on building web pages and websites.

•We develop websites by writing codes using various programming languages.

Three technologies that we use in web development are:

HTML

HTML is hypertext markup language.It is used to write codes that make up a webpage.HTML uses
tags to build a web page such as images, text, tables etc.

CSS: CSS stands for Cascading Style Sheets.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text,
the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, layout designs, variations in display for different devices and
screen sizes as well as a variety of other effects.

JavaScript

JavaScript helps us to give the functionality to the website.

JavaScript is used to write programs that interact with other computers and web pages, and access
codes.

What Is HTML?

If you want to build a website, the first language that you need to learn is HTML.HTML, which
stands for Hypertext Markup Language, is a pretty simple language. It consists of different elements
which we use to structure a web page.

What Are HTML Elements?

The element usually starts with an opening tag, which consists of the name of the element. It's
wrapped in opening and closing angle brackets. The opening tag indicates where the element begins.
Similar to the opening tag, the closing tag is also wrapped in opening and closing angle brackets. But
it also includes a forward slash before the element's name.

Everything inside the opening and closing tags is the content.


But not all elements follow this pattern. We call those that don't empty elements. They only consist of
a single tag or an opening tag that cannot have any content. These elements are typically used to insert
or embed something in the document.

For example, the <img> element is used to embed an image file, or the <input> element is used to
insert an input onto the page.

<img src="https://images.unsplash.com/photo-1610447847416-40bac442fbe6" width="50">

In the example above, the <img> element only consists of one tag that does not have any content. This
element is used to insert an image file from “Unsplash” in the document.

What are HTML Attributes?

Elements also have attributes, which contain extra information about the element that will not appear
in the content.

<img src="https://images.unsplash.com/photo" width="50">

In the example above, the <img> element has 2 attributes: src or source to specify the path of the
image, and width to specify the width of the image in pixels.

With this example, you can see the following characteristics of attributes:

● There is a space between attributes and the element name


● Attributes are added in the opening tag
● Elements can have many attributes
● Attributes usually have a name and a value: name=“value”

Common HTML elements

Section elements

<div>, <span>, <header>, <footer>, <nav>, <main>, <section>

These elements are used to organize the content into different sections. They are usually
self-explanatory, for example, <header> usually represents a group of the introduction and navigation
section, <nav> represents the section that contains navigation links, and so on.
Text content

<h1> to <h6>, <p>, <div>, <span>, <ul>, <ol>, <li>

These elements are used to organize content or text blocks.


How to create an HTML document

First, let's open Visual Studio Code (or your favorite code editor). In the folder of your choice, create
a new file and name it index.html.

In the index.html file, type ! (exclamation mark) and press enter. You will see something like this:

<!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>

This is the minimal code that an HTML document should have to make up a website. And here we
have:

<!DOCTYPE html>: First we have Doctype. For some weird historical reason in HTML we have to
include the doctype for everything to work correctly.

<html lang="en"></html>: The <html> element wraps all the content on the page, also known as the
root element. And we should always include the lang attribute to declare the language of the page.

<head></head>: The <head> element is a container for everything you want to include, but not
content that you show to your users.

<meta charset="UTF-8" />: The first meta element is used to set the character set to be UTF-8, which
includes most characters from written languages.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />: The second meta


element specifies the browser viewport. This setting is for a mobile-optimized site.
<title>Document</title>: This is the <title> element. It sets the title of the page.

<body></body>: The <body> element contains all the content on the page.

Some Basic HTML Tags

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.


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

Code:

<h1>This is Heading 1</h1>


<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>

Output

HTML Paragraphs

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin)
before and after a paragraph.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

The <div> Element

The <div> element is by default a block element, meaning that it takes all available width, and comes
with line breaks before and after.
The <div> element is often used to group sections of a web page together.

<div>
<h2>India</h2>
<p>Delhi is the capital city of India.</p>
<p>Delhi has over 20 million inhabitants.</p>
</div>

HTML Images

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


The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
● src - Specifies the path to the image
● alt - Specifies an alternate text for the image

code:

<img src="url" alt="alternatetext">

HTML Lists

HTML lists come in three main categories: unordered lists, ordered lists, and definition lists. Each
type serves a specific purpose

Unordered lists
Unordered lists are perfect for presenting items that do not have a particular sequence or order. They
are typically displayed with bullet points, which make them visually distinct from ordered lists. An
example might be a grocery shopping list.To create an unordered list, you can use the <ul> (unordered
list) element and nest individual list items within <li> (list item) elements:

Code:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Output:

This code will generate a simple unordered list like this:

● Item 1
● Item 2
● Item 3

Ordered lists

Ordered lists, as the name suggests, are useful when you want to present items in a specific sequence
or order. They are displayed with numbers or letters by default, but you can customize the numbering
style using CSS. An example might be a ranked list of your favorite movies.
To create an ordered list, use the <ol> (ordered list) element and nest list items within <li> elements:

Code:

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Output:
This code will produce an ordered list like this:

1. First item
2. Second item
3. Third item

Ordered lists are useful for creating step-by-step instructions, ranking items, or any situation where a
specific order matters.

How to create definition lists


Definition lists are designed to present terms and their corresponding definitions. They consist of a list
of terms enclosed in <dt> (definition term) elements and their associated definitions enclosed in <dd>
(definition description) elements. Here's an example:

Code:

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, used for structuring content on the web.</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets, used for styling web documents.</dd>

<dt>JavaScript</dt>
<dd>A programming language used for adding interactivity to web pages.</dd>
</dl>

Output:

This code will create a definition list like this:

HTML
HyperText Markup Language, used for structuring content on the web.

CSS
Cascading Style Sheets, used for styling web documents.

JavaScript
A programming language used for adding interactivity to web pages.

Definition lists are particularly handy for glossaries and dictionaries, where you need to pair terms
with their meanings.

CSS:Cascading style sheets

Using HTML tags like <head>, <body>, and so on can help you organize your web page content
nicely, but only up to a point.
HTML-only pages can be pleasant and easy to read – which is hugely important – but, after a while,
they all do tend to look the same.
Cascading style sheets, known universally as CSS, aren't really sheets, and it can take some work to
figure out what "cascading" means. But the markup standard adds real power to your web
development work. Let's look at some of that CSS magic in action.

How CSS Works


So what CSS actually does is allow you to separate your content from its presentation. HTML handles
the content – meaning, the text, images, and other media your users will consume. And CSS adds
more sophisticated control over the way that content looks and behaves.

How to Add CSS to your HTML


There are two ways to incorporate CSS code. First, you can simply save all your markup to a file
using the .css extension that's accessible to your .html files using a link rel tag like this:

Code:
<link rel="stylesheet" href="/main.css">

That example uses the stylesheet attribute to point to a CSS file called main.css that's in the web root
directory on its server.

Alternatively, you can add it between <style> tags within the <head> section of your HTML. That'll
look something like this:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
color: red;
text-align: center;
}
/* This is formatting for bullet points: */
ul {
color: blue;
text-align: left;
}
</style>
</head>
When you look at the above code, you'll see that there are two style definitions within the curly
braces: the text color should be red, and the text alignment should be centered:

<style>
p{
color: red;
text-align: center; }

Notice how each definition ends with a semicolon. That's really important and leaving those out will
break stuff. Also notice how we can refer to colors by name. We'll see more examples of that later, but
be aware that you can also identify colors by their hexadecimal codes. The hexadecimal code for an
attractive shade of red could be #F5733.

The next line of our code is just a comment:

/* This is formatting for bullet points: */

In general, of course, you want this kind of note to make your code more readable and understandable.
But I added it here specifically to show you how commenting works in CSS, using a forward slash
and an asterisk at the start, and an asterisk and forward slash at the end. HTML-style comments won't
work here.

This next style will apply to any unordered list within your HTML, using blue as the text color and
aligning text to the left.

/* This is formatting for bullet points: */

ul {
color: blue;
text-align: left;
}
</style>

There's a lot more you can do here and, of course, you can apply styles to all kinds of HTML
elements. But we've got to start somewhere, right?

The actual HTML is further down in the <body> section. To show you how our CSS will work, I've
written some text within a regular paragraph, and a couple of bullet points between <ul> tags.

<body>
<h2>Basic CSS</h2>
<p>This text exists within a regular paragraph.</p>
<ul>
<li>This is a bullet point
<li>This is another bullet point
</ul>
</body>
</html>

Now pop that code into a text file with a .html file extension and open it up in a browser. The colors
and the alignment should reflect our preferences.

HTML Forms
Forms are a fundamental part of web development, allowing users to input and submit data efficiently.
Creating forms in HTML is a relatively straightforward process. In this article, we'll explore how to
build basic forms using HTML <form>, <input>, and <button> elements. We'll also cover various
input types such as text, password, radio buttons, checkboxes, and submit buttons.

What is a Form in HTML?


In HTML, a form is a container used to collect and submit data from website visitors. It acts as an
interactive area where users can input information, such as text, selections, and options, which can
then be sent to a server for processing.
Forms are a fundamental component of web development, enabling user engagement and data
exchange.
HTML forms are not just limited to simple text inputs. They encompass a variety of features and input
types that enhance their functionality. Forms can include text inputs, password fields, radio buttons,
checkboxes, and submit buttons, among others. These features allow you to collect and process data
efficiently from users.

The <form> Element


To start creating a form, you'll use the <form> element. This element defines a container for all the
form elements. Here's a basic example of a form:

Code:

<form>
<!-- Form elements will go here -->
</form>

Text Input
Text input fields are used for collecting single-line text data, such as a name or email address. You can
create a text input field using the <input> element with the type attribute set to "text.‌

Code:

<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">

In this code snippet, the for attribute in the <label> element associates the label with the input field,
making it more accessible and user-friendly.

Password Input
Password input fields are like text inputs, but the entered characters are hidden as dots or asterisks for
security.

To create a password input field, set the type attribute to "password."

Code:

<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password">

Radio Buttons
Radio buttons are used when you want users to select one option from a list. Each option is
represented by a radio button.

To create radio buttons, use the <input> element with the type attribute set to "radio."

<form>

<label>Choose Your Preferred Payment Method:</label>


<input type="radio" id="creditCard" name="paymentMethod" value="creditCard">
<label for="creditCard">Credit Card</label><br>

<input type="radio" id="visa" name="paymentMethod" value="visa">


<label for="visa">Visa</label><br>

<input type="radio" id="bitcoin" name="paymentMethod" value="bitcoin">


<label for="bitcoin">Bitcoin</label><br>

</form>

In this example, using the same name attribute for both radio buttons groups them together, allowing
the user to select one option.

Checkboxes
Checkboxes are used when you want users to select one or more options from a list. Each option is
represented by a checkbox.

To create checkboxes, use the <input> element with the type attribute set to "checkbox."

<label>Interests:</label>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">Music</label>

<input type="checkbox" id="sports" name="interest" value="sports">


<label for="sports">Sports</label>

<input type="checkbox" id="reading" name="interest" value="reading">


<label for="reading">Reading</label>

With checkboxes, users can select multiple options based on their preferences.

Submit Button
A submit button is used to send the form data to the server for processing. You can create a submit
button using the <button> element with the type attribute set to "submit."

<button type="submit">Submit</button>
This button triggers the form's submission when clicked.

You might also like