Bangla web development course
Full Complete Web Development 4 month Course Syllabus
- html5
- CSS (Bootstrap)
- Jquery
- Javascript
- PHP
- mysql
Web Development Tutorial part 1 : https://youtu.be/9qbdg6frQfk
Web Development Tutorial part 2 : https://youtu.be/0w9ASKpzIEw
Web Development Tutorial part 3 : https://youtu.be/0w9ASKpzIEw
Web Development Tutorial part 4 : https://youtu.be/VMF16LJFhGA
Web Development Tutorial part 5 : https://youtu.be/ckhxdgPoGeQ
PHP Tutorial : https://youtu.be/XAmgyKzKAsE
What is HTML ?
html is standard for hyper text markup language for web page. html is structure of website. its not programming language. with html you can create your own,personal,business website.
Before you start work with html you need to install some html editor tools in your computer.
here is some html editor tools need to download from online.
after
install the the editor we will start to write the coding and i will discuss
about the basic staff of html.
Lets Start
Coding :
here is Some
example of starting Html Code :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- <!DOCTYPE html> declaration
defines this document to be HTML5 .
- <html> html start with <html> tag and end with
</html>
- <head> element content of meta
data.
- <title> title of document
- <body> element contains the visible page content. body
will start with <body> end with </body>
- The <h1> element defines a large heading
- The <p> element defines a paragraph
Html Elements
An HTML consists of Start tag and an
end tag, with the content inserted in between :
<tagname>Content goes
here...</tagname>
if you start any html tag you have
close it with end tag.
Example :
<h1></h1>
<p> </p>
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>Heading
1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Bigger Headings
Each HTML heading has a default size. However, you can
specify the size for any heading with the style attribute, using the CSS font-size property:
Example
<h1 style="font-size:60px;">Heading
1</h1>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page,
and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a
change) in an HTML page:
Example
<h1>This
is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The HTML <head>
Element
The HTML <head> element is a container for metadata. HTML
metadata is data about the HTML document. Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag:
Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
Metadata typically define the
document title, character set, styles, scripts, and other meta information.
HTML Paragraphs
The HTML <p> element defines a paragraph:
Example
<p>This
is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
Browsers automatically add some
white space (a margin) before and after a paragraph.
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will
create different results.
With HTML, you cannot change the output by adding
extra spaces or extra lines in your HTML code.
The browser will remove any extra spaces and extra
lines when the page is displayed:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
Don't Forget the End Tag
Most browsers will display HTML correctly even if you
forget the end tag:
Example
<p>This
is a paragraph.
<p>This is another paragraph.
<p>This is another paragraph.
The HTML Style Attribute
Setting the style of an HTML element, can be done with
the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is
a CSS property. The value is a CSS value.
Background Color
The CSS background-color property defines the background color for an
HTML element.
This example sets the background color for a page to
powderblue:
Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Text Color
The CSS
color property
defines the text color for an HTML element:
Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
<p style="color:red;">This is a paragraph.</p>
Fonts
The CSS
font-family property
defines the font to be used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS
font-size property
defines the text size for an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS
text-align property
defines the horizontal text alignment for an HTML element:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
<p style="text-align:center;">Centered paragraph.</p>
Chapter Summary
- Use the style attribute
for styling HTML elements
- Use background-color for
background color
- Use color for
text colors
- Use font-family for
text fonts
- Use font-size for
text sizes
- Use text-align for
text alignment
HTML Formatting Elements
In the previous chapter, you learned about the
HTML style
attribute.
HTML also defines special elements for
defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special
types of text:
- <b> - Bold text
- <strong> - Important text
- <i> - Italic text
- <em> - Emphasized text
- <mark> - Marked text
- <small> - Small text
- <del> - Deleted text
- <ins> - Inserted text
- <sub> - Subscript text
- <sup> - Superscript text
HTML <b> and
<strong> Elements
The HTML <b> element defines bold text,
without any extra importance.
<b>This text is bold</b>
The HTML
<strong> element defines strong text, with
added semantic "strong" importance.
<strong>This text is strong</strong>
HTML <i> and <em> Elements
The HTML
<i> element
defines italic text,
without any extra importance.
<i>This text is italic</i>
The HTML
<em> element defines emphasized text, with
added semantic importance.
<em>This text is
emphasized</em>
HTML <small> Element
The HTML
<small> element
defines smaller text:
<h2>HTML <small>Small</small> Formatting</h2>
HTML <mark>
Element
The HTML <mark> element defines marked/highlighted text:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML <del> Element
The HTML <del> element defines deleted/removed text.
Example
<p>My
favorite color is <del>blue</del> red.</p>
