Easy Learning with HTML
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
HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
Why we use html language ….?
It is language we use to build the structure of web page but it
Is not programming language but scripting language
Notes
Html it is not case sensitive language we can write <HTML>
capital OR <html> small
To write html language we use software program called text
editor examples of text editor
1-notepad
2-wordpad
3-notepad++ …………..etc
To run this code we write inside notebad or any text editor
we run it through any browser like as google chrome ,edge
,firefox ,,,
To learn html you shoud know how to write Html tags that
are used for creating web page
Any thing we write inside the text editor(notepad) or any
thing we delete from the notepad we shoud do save from file
or click on button (ctrl+S) in keyboard
==================================================
HTML TAGS
The first tag we use in texteditor called <html>
To tell browser which language we use
We have two type of tags
1-container tags :any tag have
opening tag like that
<html> and closing tag like that </html>
2-empty tags: these tags have only an
opening tag like <img> <br>
HTML ELEMENT
What we meaning of html element ?
The content we write between opening tag and closing tag
Like that
<h1>This is a Heading</h1>
<p>This is a paragraph</p>
This text
called html
element
We can write tags inside there
Others
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
Example
The src Attribute
The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be
displayed:
<img src="img_girl.jpg">
The width and height Attributes
The <img> tag should also contain
the width and height attributes, which specify the width and
height of the image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
The structure of html document
First we will take tag <html>
This called root element this contains the html tags
inside it so we called it container tag we use it to
detect the document as html document
Second we take tag <head >
This tag contain information about the document
Or information about the the web site we want to visit it
Inside <head>
We can have other tags like <title> here we write the title of
websit we want</title>
Third we take tag<body>
This tag <body>come after head tag
we use <body> tag to display any thing we want to
apper in web page like text,imag,links,
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Some important attribute for body
Text: to specifies the color of text
Bgcolor: to specifies the color of background for web
page
<html>
<head>
<title>Page Title</title>
</head>
<body text=”red” bgcolor=”pink”>>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Some important
notes while writing a html code
1.Shoudn’t be any space between letters of the
tags like that < ht ml> incorrect
2.Attribute name not case sensitive
HTML Headings
HTML headings are titles or subtitles that you want to display
on a webpage.display text bigger and bolder than normal body
text we have six levels of headings
For example
HTML Paragraphs
A paragraph always starts on a new line, and is usually a block
of text.
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.
Attribute of <p> tag
Aling
If we want <p> be center or right or left we give it this
attribute
Example:
If we want to do lines break we use <br> tag
HTML Text Formatting
HTML contains several elements for defining text with a special
meaning
HTML Formatting Tags
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text like <b> to make text bold
<i> - Italic text
<em> - Emphasized text like <i> tag The content inside is typically
displayed in italic
<mark> - Marked text or highlighted
<del> - Deleted text like <strike> tag
<sub> - Subscript text
<sup> - Superscript text
<center>-display text in center
HTML <mark> Element
HTML <del> Element
HTML <sup> Element
HTML <sub> Element
Horizontal tag <hr>
to create horizontal line in html or to make seperate
between content
<hr> tag have many attributes
Size=”2”
Color=”red”
Width=”12”
Align=”center”
Example
Inserting images
imag
image attribute
1. Src:specifies the location or url of the image to display
2. Alt: if the browser can’t display image the text in alt attribute
will appear
3. Align: if we want image appear in center or right or left
4. Height: to give image height
5. Width:to give image width
6. Border: it is numeric value to put border around
image
Good luck
0
