Scribd
Upload
44 views

HTML

This document provides information about HTML (Hypertext Markup Language) including tags, structure of a web page, text formatting, CSS (Cascading Style Sheets), images, lists, divisions, comments, videos, audio, tables, links, and anchors. It discusses key HTML elements such as <head>, <title>, <body>, <p>, <b>, <i>, <img>, <ul>, <ol>, <div>, <span>, and <a> and their usage. It also covers CSS concepts like selectors, properties and different ways to add CSS like inline, internal and external stylesheets.

Uploaded by

Siddhant Bansode
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
44 views

HTML

This document provides information about HTML (Hypertext Markup Language) including tags, structure of a web page, text formatting, CSS (Cascading Style Sheets), images, lists, divisions, comments, videos, audio, tables, links, and anchors. It discusses key HTML elements such as <head>, <title>, <body>, <p>, <b>, <i>, <img>, <ul>, <ol>, <div>, <span>, and <a> and their usage. It also covers CSS concepts like selectors, properties and different ways to add CSS like inline, internal and external stylesheets.

Uploaded by

Siddhant Bansode
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 9

- HTML:

-HTML otherwise known as a hypertext markup language, is the language used to


create web pages
-Using HTML you can create a web page with text, graphics, sound, and video

W W W - world wide web


{ WYSIWYG - what you see is what you get }

- TAGS:

-the essence of HTML programming is tags


-A tag is a keyword enclosed by angle brackets {
example: <|> }
-there are opening and closing tags for many but
not all tags: The affected text is between the two
tags.
-<h1>- opening
-</h1> - closing
-<p> - paragraph
-<b> - bold

NESTED TAG :

-whenever you have HTML tags within other HTML


tags, you must close the nested tag first
-example
<H1><I> the nation <I></H1>

STRUCTURE OF A WEB PAGE :


- all web pages share a common structure
-all web pages should contain a pair of <HTML>,<HEAD>,<TITLE>
and <BODY> tags

-BASIC STRUCTURE FOR HTML

<HTML>
<HEAD>
<TITLE> example </TITLE>
</HEAD>
<BODY>
this is where you would include the text and image on your web page
</BODY>
</HTML>

-TEXT FORMATTING

-manipulating text in HTML can be a trick;


oftentimes what you see is NOT what you get
-for insistence, special HTML tags are needed to
create photographs, move to the next line, and
create headings.

-TEXT FORMATTING TAGS

<b> - FOR BOLD TEXT


<i> - FOR ITALIC TEXT
<u> -FOR UNDERLINED TEXT
<p> -FOR NEW PARAGRAPH
<br> -FOR BREAKING LINE (BR DOES NOT NEED CLOSING TAG)

{CHANGING THE FONT}

- the expression <FONT FACE = "FONT NAME">...</FONT> can be used to change the font
of the enclosed text
-to change the size of text use the expression <FONTSIZE="n"...</FONT> where n is
the number between 1 and 7

{MARQUEE TAG}
-The HTML <marquee> tag is used for scrolling pieces of text or images displayed
either
horizontally across or vertically down your website page depending on the settings.

<marquee direction="right" scrollamount="20">hello</marquee>

CSS : (cascading style sheet)


three types of CSS
-INLINE
-INTERNAL
-EXTERNAL

WHAT IS CSS?
Cascading style sheets are used to format the layout of a webpage
with CSS, you can control the color, font, size of text, the spacing between the
elements
how the elements are positioned and laid out, what background images or background
colors
are to be used, different displays for different devices and screen sizes, and much
more!

1) INLINE CSS :
An inline CSS is used to apply a unique style to a single HTML element
an inline CSS uses the style attribute of an HTML

<html>
<head>
<title>my webpage</title>
</head>
<body>
<h1 style="font-size: 50px;color: darkolivegreen;text-align: center;">Hello
folks good afternoon</h1>
</body>
</html>

2) INTERNAL CSS:
an internal CSS is used to define a style for a single HTML page
an internal CSS is defined in the <head> section of an HTML page,within a <style>
element.

example:
<!DOCTYPE html>
<html>
<head>
<title>my webpage</title>
<style type=" text/CSS">

h2{
font-size: 50px;
color: olive;
text-align: center;
}
#abc{
font-size: 50px;
color: olive;
text-align: center;
}

</style>
</head>
<body>

<h2>hello this is my first webpage</h2>


<h2 id="ABC">hello this is my first webpage</h2>
</body>
</html>

CSS SELECTORS

1) ID SELECTOR:
the id selector uses the id attribute of an HTML element to a specific element
the id of an element is unique within a page, so the id selector is used to select
one unique element
to select an element with a specific id, write a hash (#) character, followed by
the id of the element

2)CLASS SELECTOR:
The class selector selects HTML elements with a specific class attribute.
to select elements with a specific class, write a period(.)character, followed by
the class name.

3)GROUP SELECTOR:
the grouping selector selects all the HTML elements with the same style definition

3)EXTERNAL CSS:
The external style sheet is generally used when you want to make changes on
multiple pages. It is ideal for this condition because it facilitates you to change
the look of the entire
website by changing just one file.

it uses the <link> tag on every pages and the <link > tag should be put inside the
head section

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<h1>hello</h1>

</body>
</html>
* HTML IMAGE SYNTAX

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


Images are not technically inserted into a web page, images are linked to web
pages.
The <img>tag is empty, it contains.attributes only, and does not have a closing
tag
- The <img> has tagged two required attributes.
•src - Specifies the path to the image.
- alt. Specifies an image. alternate text for

CSS MARGINS:
the CSS margin in properties is used to create space around an element, outside of
any defined borders.
with CSS you have full control over the margin. there are properties for setting
the margin for each side of an
element (top, right, left, bottom)

BACKGROUND IMAGE:
The background image property sets one or more background images for elements.
By default, a background image is placed at the top-left corner of an element and
repeated both vertically and horizontally.

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
the <span> tag is much like the <div> element ,but <div> is a block level element
and <span> is an inline element

<html>
<head>
<title>webpage</title>
<style type=" text/CSS">
span{
color: red;
}
body{
background-color: dark cyan;
}
</style>

</head>
<body>
<h1 style="font: Arial;text-align: center;font-size: 50px;">Hello
<span>Bro</span></h1>
</body>
</html>

LIST TAG:
1} unordered HTML list:
an unordered list starts with the <ul> tag each list item starts with the <li>tag
the list items will be marked with bullets by default.
2}ordered HTML list:
an ordered list starts with the <ol> tag.each list item starts with the <li>tag
the list items will be marked with numbers default.

<html>
<head>
<title>webpage</title>

</head>
<body>
<ul type="disk">
<li>potato</li>
<li>tomato</li>
<li>cucumber</li>
</ul>
<ol>
<li>potato</li>
<li>tomato</li>
<li>cucumber</li>
</ol>
</body>
</html>

DIVISION TAG:

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


the <di> 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.
any sort of content can be put inside the <div> tag!

COMMENT STATEMENT:
comment statements are notes in the HTML code that explain the important features
of the codes
the comments do not appear on the web page itself but are a useful reference to the
author of the page and other programs
to create a comment use the <!-....--> tag

VIDEO TAG:

DEFINITION AND USAGE:


the <video > tag is used to embed video content in a document, such as a movie
clip
or other video streams
the<cideo > tag contains one or more <source> tags with different video sources the

the browser will choose the first source as its output


the text between the <video> and </video> tags will only be displayed in browsers
that
fo does not support the <video > element
there are three supported video formats in the HTML: MP4, WebM, and OGG.

EXAMPLE:
<html>
<head>
<title> VIDEO </title>
</head>
<body>
<video controls>
<video>
<source src="" type="">

</video>
</body>
</html>

AUDIO TAG:

EXAMPLE:
<html>
<head>
<title> AUDIO </title>
</head>
<body>
<audio controls>
<source src="abc.mp4" type="video/mp4">

</audio>
</body>
</html>

TABLE TAG:
the HTML table allows web authors to arrange data like text
images, links, other tables, etc. into rows and columns of cells.

the HTML tables are created using the <table> tag in which the
<tr> tag is used to create tables and rows and the <td> tag is used to create
data cells. the elements under <td> are regular and left aligned by default

<caption>
<th> table heading
<td> table data
<tr> table row

EXAMPLE:
<html>
<head>

<title>table</title>
<style type=" text/CSS">

table,th,td{
border: 2px solid black;
border-collapse: collapse;
text-align: center;
height: 50px;
width: 20px;

body{
background color: light blue;

</style>
</head>
<body>
<center>
<table>
<tr>
<th>student name</th>
<th>class name</th>
<th>percentage</th>
</tr>
<tr>
<th>umang malu</th>
<th>Bvoc</th>
<th>90%</th>
</tr>
<tr>
<th>soham bavdhnkar</th>
<th>Bvoc/gaming </th>
<th>fail</th>
</tr>
</center>
</table>
</table>
</body>
</html>

HTML COLSPAN ATTRIBUTE:


definition and usage:

the colspan attribute defines the number of columns a table cell should span.

HTML ROWSPAN ATTRIBUTE:


definition and usage:

the rowspan attribute defines the number of columns a table cell should span.

LINK TAG:

a link lets you move from one page to another,


play movies and sound., send emails, download files
and more...

a link has three parts: a destination, a label, and a target

to create a link type:

<A HREF="page.html">label</A>

to create a link to CNN, I would type

<A HREF="http://www.cnn.com">CNN</A>

ANCHOR TAG:

Anchors enable a user to jump to a specific place on a website

Two steps are necessary to create an anchor, first you must create the
anchor itself .then you must create a link to the anchor from another point
in the document.

to create the anchor itself,type


<A NAME=" anchor name">label </A> at the point in the web page where you want the
user to jump to

to create a link,type <A HREF="#anchor name">label</A> at the point in the text


where you want
the link to appear

NAVIGATION TAG:

The <nav> tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav>
element is intended only for major blocks of navigation links.

Browsers, such as screen readers for disabled users, can use this element to
determine
whether to omit the initial rendering of this content.

FORMS:

What are forms?

An HTML form is an area of the document that allows users to


enter information into fields.

A form may be used to collect personal Information, opinions In pola, user


preferences
and other kinds of information.

Forms

There are two basic components of a Web form:


the shell, the part that the user fills out, and the
script which processes the information

HTML tags are used to create the form shell. Using


HTML you can create text boxes, radio buttons,
checkboxes, drop-down menus, and more...

Non-breaking Space

A commonly used entity in HTML is the non-breaking space: &nbsp;

A non-breaking space is a space that will not break into a new line.

Two words separated by a non-breaking space will stick together (not break into a
new
line). This is handy when breaking the words might be disruptive.

You might also like