HTML Basics
Thanks to Dr. Angela Yu you can purchase her course UDAMY at https://shorturl.at/ehwQ9
HERE WE DISCUSS HTML BASIC TO ADVANCE:
always start with
<!DOCTYPE html>
<html>
<head>
</head>
</html>
HTML <h1\> to <h6\> Tags uses for heading
<br> Create a line break in a text.
<hr> \= horizontal rule or line
<Center> to allign the text in center.
<!DOCTYPE html>
<html>
<body>
<center>
<hr size="9" noshade>
<h1>The adventure of HTML journey July 2023 </h1>
<br>
<h2> how can I become pro
<hr size="9" noshade>
</h2>
</center>
</body>
</html>
Add a title for website name
Like I add title like below
<!DOCTYPE html>
<head>
<title> ❤️ Sumaiya's personel site </title>
</head>
<body>
</body>
</html>
Here we add <em> emphasise tag for emphasise the sentence and <strong> tag use to bold the sentence.
<p> <em> Founder of <Strong> Sumaiya's Borkha Collection </Strong> </em> </p>
like below:
Now we want to add bullet and list
<UL> tag means unordered text
<li> tag means list item tag create each item of bullet point.
<h3>Our Stores</h3>
<ul>
<li> Mirpur 14 </li>
<li> Basuhndhara</li>
<li>Jamuna</li>
<Li>Pabna Sadar</Li>
Now come to the ordered list 123
or i, ii, iii
<ol type="i">
or
<ol start="8">
<h3> Our HOT SALE products </h3>
<ol type="i">
<li> Abiya</li>
<li>Irany Borkha</li>
</ol>
or
IMAGE <img>TAG: is a self-closing tag.
<img src="https://i.pinimg.com/originals/36/64/25/3664252970e153955e6406e6903efb5b.jpg" alt="Borkha images carton">
paste the link to the html
<a> = Anchor TAG
see the example
<a href="https://freelancerhasan.hashnode.dev/html-basics">Sumaiya's Borkha Collection</a>
Table: <tr> Table row, <td> Table Data
<Table>
<tr>
<td> 2020-2021</td>
<td> Honurs First Year</td>
</tr>
<tr>
<td> 2022-2023</td>
<td> Honurs Second Year</td>
</tr>
</Table>
<thead>= table head, <tbody>=table body, <tfoot>= table footer
now if we add <th> means table head include then the result will be: <thead>
<thead>
<th>Year </th>
<th> Result </th>
</thead>
if you delete <thead> then it will work same cause you are using <th> tag.<Table>
<Table>
<th>Year </th>
<th> Result </th>
<tr>
<td> 2020-2021</td>
<td> Honurs First Year</td>
</tr>
<tr>
<td> 2022-2023</td>
<td> Honurs Second Year</td>
</tr>
</Table>
Actually we are using <thead> or <tbody> cause sometimes we need to change specific information, it might be helpful at that time.
<table>
<thead>
<tr>
<th> Name</th>
<th> Season </th>
<th> reason </th>
</tr>
</thead>
<tbody>
<tr>
<td> Coffee </td>
<td> Rainy Time</td>
<td> Mode Changes </td>
</tr>
</tbody>
</table>
if you add border it will work but in HTML it will be deprecated, cause no longer is use
<table border="1">
Now the interesting part is how to keep picture and descriptions besides:
Here is the code
<table>
<tr>
<td>
<img src="PROFILE SUMIAYA.png" alt="Borkha images carton" width="200">
</td>
<td>
<h1> My name is Sumaiya Khatun </h1>
<p> <em> Founder of <Strong> <a href="https://freelancerhasan.hashnode.dev/html-basics">Sumaiya's Borkha Collection</a> </Strong> </em> </p>
<p> Explore our fresh range of modest designs. Abayas, Hijabs and more. Wear for day and night.
<br>
Customise and curate the ideal modest outfit, to be cherished and passed down.</p>
</td>
</tr>
</table>
add space to look nicer for images and text, though this cell spacing is deprecated.
<table cellspacing="20">
new challenge
<table cellspacing="10" border="1">
<tr>
<td>
<table> <tr>Customer Service </tr> <tr> ⭐⭐⭐⭐⭐ </tr></table>
<table> <tr> Office Management </tr> <tr> ⭐⭐⭐⭐⭐</tr> </table>
<table> <tr> Good Team Player</tr><tr> ⭐⭐⭐⭐⭐</tr> </table>
</td>
<td>
<table> <tr> Selling</tr> <tr> ⭐⭐⭐</tr> </table>
<table> <tr> Face New Challenge </tr> <tr> ⭐⭐⭐⭐⭐</tr> </table>
<table> <tr> Always Learning </tr> <tr> ⭐⭐⭐</tr> </table>
</td>
</tr>
</table>
or you can simply make a code like that
<table>
<tr>
<td> Youtube</td>
<td>⭐⭐⭐⭐⭐</td>
</tr>
<tr>
<td> Facebook</td>
<td>⭐⭐</td>
</tr>
</table>
FORM
now we are going to see the form in HTML:
<form>
<label> Your Name: </label>
<input type="Name">
<input type="color"><br>
<label> Do you want to submit the form?</label>
<input type="checkbox">
<input type="submit"><br>
<label for=""> Password</label>
<input type="password" name="" id=""><br>
<label for="">Email</label>
<input type="email"><br>
<label for="">File</label>
<input type="file"><br>
<label for="">Upload your image</label>
<input type="image"><br>
<label for="">month</label>
<input type="month"><br>
<label for=""> Number </label>
<input type="Number"><br>
</form>
super important LESSON for email address submission:<form class="" a
<form class="" action="mailto:freelancerhasan73@gmail.com" method="post">
<form class="" action="mailto:freelancerhasan73@gmail.com" method="post">
<label> Your Name: </label>
<input type="Text">
<input type="submit" name="" id=""><br>
<label> your Email</label>
<input type="email"> <br>
<label> Your Message</label>
<textarea name="name" id="" cols="30" rows="10"></textarea>
<input type="submit" name="" id="">
</form>
if gmail pop up not coming:
goto setting> permision> additional permission> protocol handlers > allow
now just allow it from the browser
if you see a problem like below + + + text, the solution is to add enctype="plain/text"
enctype="text/plain"
also if you want add some auto message, you can add name value
(name="Your Name">
<form action="mailto:freelancerhasan73@gmail.com" method="post" enctype="text/plain">
<label> Your Name: </label>
<input type="Text"name="Your Name">
<input type="submit" name="" id=""><br>
<label> your Email</label>
<input type="email" name="Your Email"> <br>
<label> Your Message</label>
<textarea name="Your Message" cols="30" rows="10"> </textarea>
<input type="submit" name="" id="">
</form>
finally published your webpages on GitHub
upload your file and make a name initial cv for website
goto setting
goto pages select branches to allow
finally, you can see
https://freelancerhasan73.github.io/cvsumiaya/
NOTE:
sometimes HTML is also work in the base of CSS by their default CSS setting by the browser.
If we change the background color in HTML
<body style="background-color:#EAF6F6">
like I changed-
or you can add a <style> tag inside of the head of HTML,like I add select body
<style>
body{
background-color: #blue;
}
</style>
now you may delete the body color :
now see it change according to style rule
same we are gona change the <hr>
<style>
body{
background-color: blue;
}
hr{
background-color: red;
border-style: none;
}
</style>
it changes according to all web pages
border style can be change in various way:
like I specify four side
border-style: dotted none none none;
or
border-style: none;
border-top-style: dotted;
