HTML নিয়ে যত কথা
HTML full form is Hyper-text Markup Language
Remember for most the case while using Markup you have to use 5 things those are
< tag name > elements < / tag name >
HTML Basic Structure ,
First you have to write only 4 lines
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Your website name </title>
</head>
<body>
//contents
</body>
</html>
HTML Text: Creating paragraphs, Text formatting (b,i, strong, em)
Paragraph Tag
<p> This is my paragraph </p>
 |
| Figure: Output |
Bold tag
<p>I will invest <b>6 to 8 hours</b> every single day</p>
 |
| Figure: Output of Bold text |
Strong tag → this is semantic or meaningful tag
<Strong>I am Strong tag </Strong>
 |
| Figure : Strong tag output |
em tag is also a meaningful semantic tag
em full form emphasize
<em> This is em tag </em>
<i> This is italic Tag </i>
HTML Text: Headings, small, and inline vs block (div, span)
block >> p, h1, div these will create separate portion
inline>> em, i , b , strong tags etc these
will not create any separate portion just visible inside of line
-->
Heading_Tag
<h1> Heading 1</h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
 |
| Figure: Output of Headings |
Small tag creates small text
Block types p, h1, div, etc. will create a separate portion
means creating a line break, a new area.
On the other hand inline means "in a Line"
those are em, i, b, strong tags, etc. These will not create any
separate portion just visible inside of the line
<div>
<!-- contents -->
</div>
HTML List: Container tag, list tags (ol, ul, li), line break, button
<h3> Knowing about list items</h3>
<br>
List items are: unordered list and ordered list <br>
li tags create unordered
<li> Briryani </li>
<li>Kalo Vuna </li>
<li>Lemon </li>
<li>Borhani </li>
<br>
ul tag is container tag
<ul>
<li>Shirt</li>
<li>Pant</li>
<li>Shoe</li>
<li>Wrist Watch</li>
<li>Belt</li>
</ul>
<br>
ordered list tag is ol tag
<ol>
<li>Liton Das</li>
<li>Sakib al hasan</li>
<li>Shanto</li>
<li>Taskin</li>
</ol>
Division Tag
<div>
<h2>Grocery List:</h2>
<ul>
<li> Fish</li>
<li>Vegetables</li>
<li>Salt
<ul>
<li>Aci pure salt</li>
<li> fresh salt</li>
</ul>
</li>
</ul>
</div>
Button Tag
<!-- create button -->
<button> Buy Items here!!</button>
HTML Link: Creating links with the anchor tag and its attributes (href, target)
<h2> Anchor : HyperText</h2>
<br>
<p> Tag name: anchor shortform "<a>" </p><pre>
</pre>
<p> Hypertext reference shortcut attribute <strong> href</strong> </p> <br>
<p> Example for internal link </p>
<br>
<a href="about.html">Go to About me page 😇</a>
<p> Example for external link</p>
<a href="https://google.com/"> search on google here </a>
<pre>
</pre>
<a style="text-decoration: none;"target=_blank href="https://www.w3schools.com/html/"> Learn html here </a>
<pre>
<p> For opening website in new tab use target= _black</p>
</pre>
HTML Image: Display online image, local image, folder image
<h1> Example of Showing image using img tag</h1>
<br>
<p> void tag is img tag</p><pre>
<p> image : img source : src= "file location address"</p>
</pre>
<p> alt means if image is not found anycause it will
display image description text</p>
<img src="images/test.jpg" alt="living room design"
style="height:400px; width:400px;">
<p>living room design</p>
HTML Form: input types, buttons, select, option, login form
<h4>for taking user input we use input tag</h4>
<input type="text">
<br>
<h3>Select tag</h3>
<select name="" id="">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="preferred">Preferred Not to say</option>
</select>
<br>
<h3> form tag and also have action attribute </h3>
<pre>
<h2>Please login here</h2>
</pre>
<form action="">
<input type="name" placeholder="Enter your name"><br><br>
<input type="email" placeholder="Enter your email"><br><br>
<input type="password" placeholder="Enter your password"><br><br>
<input type="file" ><br><br>
<input type="submit" value="Login">
</form>
<!-- What are different types of input field in html -->
The available types for <input type = " " > tag are as follows:
| Type | Description | |
|---|---|---|
| button | A push button with no default behavior displaying the value of the value attribute, empty by default. |
| checkbox | A check box allowing single values to be selected/deselected. |
| color | A control for specifying a color; opening a color picker when active in supporting browsers. |
| date | A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers. |
| datetime-local | A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers. |
A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. |
| file | A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select. |
| hidden | A control that is not displayed but whose value is submitted to the server. There is an example in the next column, but it's hidden! |
| image | A graphical submit button. Displays an image defined by the src attribute. The alt attribute displays if the image src is missing. |
| month | A control for entering a month and year, with no time zone. |
| number | A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads. |
| password | A single-line text field whose value is obscured. Will alert user if site is not secure. |
| radio | A radio button, allowing a single value to be selected out of multiple choices with the same name value. |
| range | A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values. |
| reset | A button that resets the contents of the form to default values. Not recommended. |
| search | A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads. |
| submit | A button that submits the form. |
| tel | A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads. |
| text | The default value. A single-line text field. Line-breaks are automatically removed from the input value. |
| time | A control for entering a time value with no time zone. |
| url | A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards. |
| week | A control for entering a date consisting of a week-year number and a week number with no time zone. |
HTML Structure: Doctype, html, head, meta, title, body
<!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>
1 HTML5 vs HTML, Audio, video, youtube video, embed iframe
To show a video in HTML, use the <video> element:
Example
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video><video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm">
<source src="/media/cc0-videos/flower.mp4" type="video/mp4">
Download the
<a href="/media/cc0-videos/flower.webm">WEBM</a>
or
<a href="/media/cc0-videos/flower.mp4">MP4</a>
video.
</video>
6_5-1 Pseudo class hover, visited, focus
<style>
h3 {
color: blue;
}
/* hover means mousse over */
h3:hover {
color: yellowgreen;
box-shadow: 10px 10px 3px gray;
}
.input-box {
border-radius: 10px;
}
input:focus {
outline: 0;
border: 2px solid rgb(16, 131, 16);
border-radius: 19px;
}
a:visited {
color: rgb(64, 64, 155);
}
/* for even list */
li:nth-child(2n) {
background: rgb(17, 255, 0);
}
/* for odd list */
li:nth-child(2n+1) {
background: aqua;
}
</style>
<!-- coding sections -->
<h3> My heading </h3>
<p> Pseudo mane hocche regular na special effect type kichu ekta
</p>
<br>
<input class="input-box" type="text">
<br><br>
<a target="_blank" href="https://web.programming-hero.com/web-8/video/web-8-6_5-1-pseudo-class-hover-visited-focus">
go to programming-hero module 6.5-1
</a>
<ul>
<li> Abul</li>
<li> babul</li>
<li> kabul</li>
<li>dabul</li>
<li>mabul</li>
</ul>
6_5-2 Position static relative absolute fixed sticky
6_5-3 stack elements z-index and pseudo element
<style>
.box{
position: relative;
}
.boy{
left: 60px;
z-index: 2;
}
.ring{
top:-80px;
}
.water{
top: -210px;
}
</style>
</head>
<body>
<h3>z index</h3>
<p> z-index hocche position relative deya thakle ekta object er upor arekta object dekhaite parba rki</p>
<div class="swim-container">
<div class="box boy"><img src="images/boy.png" alt=""></div>
<div class="box ring"><img src="images/pool.png" alt=""></div>
<div class="box water"><img src="images/water.png" alt=""></div>
</div>
</body>
6_5-3 pseudo element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pseudo element</title>
</head>
<body>
<style>
h3::after {
content: '.png';
background: blanchedalmond;
color: blueviolet;
}
h3::before {
content: 'Title: ';
background-color: aquamarine;
color: brown;
}
p::first-letter{
font-size: 2em;
/* 2em mane hocche 2 gun kora */
font-weight: bold;
}
p::first-line{
/* background-color: aqua; */
}
::selection{
/* eikhane kaj hoilo text select korle color dekhay */
height: 10px;
background-color: chartreuse;
}
</style>
<h3>Heading-1</h3>
<h3> Heading -2</h3>
<h3>Heading 3</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing
elit. Officia aut temporibus amet, non reiciendis
doloribus earum exercitationem asperiores nesciunt
eveniet quae nisi! Tenetur quia sed laboriosam
dolorem, modi labore! Sint.</p>
<p>Omnis hic eius officiis, ratione et
neque architecto facilis! Molestias atque
voluptates quos libero aliquid!</p>
<p>Blanditiis quas tempora hic modi,
similique iste nihil eveniet possimus
est beatae repudiandae tenetur mollitia!
</p>
</body>
</html>
input::placeholder{
color: blue;
}
<p>
<input type="text" placeholder="Type any text..">
</p>
8-1 Simple layout design with CSS flex, media query
Available breakpoints
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
Comments
Post a Comment