Learn and Explore HTML as a Beginner
<p>content</p> p tag => paragraph
<b>content</b> b tag => bold
<strong>content</strong> strong => bold (semantic)
<i>content</i> i tag => italic
<small>content</small> small tag => make text smaller
<em>content</em> em tag => emphasis <h1>content</h1> h1 tag = heading 1 most large one
<h2>content</h2> h2 tag = heading 2; smaller than h1
<h3>content</h3> h3 tag = heading 3; smaller than h2
<h4>content</h4> h4 tag = heading 4; smaller than h3
<h5>content</h5> h5 tag = heading 5; smaller than h4
<h6>content</h6> h6 tag = heading 6; smaller than h5
<a href="https://google.com">Google</a> a tag = anchor
<img src="image.jpg" alt="This is image of a boy"> img tag = image
<ol> ol tag = ordered list tag; this is for ordered list
<li>vat</li> li tag = list <li>vat</li> <li>vat</li> <li>vat</li> </ol>
<ul> ul tag = unordered list; this is for unordered list <li>vat</li> li tag = list <li>vat</li> <li>vat</li> <li>vat</li> </ul>
<form action=""> form tag = form is a container for taking input <input type="text"> input tag = this is for taking input <input type="password"> <input type="checkbox"> <input type="radio"> <input type="file"> </form>
<form action=""> <input type="text"> <input type="password"> <input type="checkbox"> <input type="radio"> <input type="file"> <input type="button"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="month"> <input type="number"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="time"> <input type="url"> <input type="week">
<button>Submit</button>
<button>Cancel</button>
</form>
<div> <p>This is a paragraph.<small>This is mini</small></p> </div>
<form action=""> Uses of br tag =break <input type="text"> <br> <input type="password"> <br> <input type="checkbox"> <br> <input type="radio"> <br> <input type="file"> <br> <input type="button"> <br> <input type="color"> <br> <input type="date"> <br> <input type="datetime-local"> <br> <input type="email"> <br> <input type="month"> <br> <input type="number"> <br> <input type="range"> <br> <input type="reset"> <br> <input type="search"> <br> <input type="submit"> <br> <input type="tel"> <br> <input type="time"> <br> <input type="url"> <br> <input type="week"> <br> <button>Submit</button> <button>Cancel</button> </form>
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.
<hr>
<p>CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work, because it can control the layout of multiple web pages all at once.</p>
<hr>
HTML structure
<html> <head> <title>Another website</title> Title tag = it is the element of head <link rel="shortcut icon" href="front.jpg" type="image/x-icon"> link favicon tag = for favicon </head> <body> <h2>Look mama i can create another website</h2> </body> </html>
! for doctype html structure
<!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>
Hyper Text Markup Language
Hyper means linked
Hyper Text means linked text that can facilitate of transition from one link to another
Markup:
The markup tells web browsers how to display a web page's words and images. Each individual piece markup code (which would fall between "<" and ">" characters) is referred to as an element, though many people also refer to it as a tag.
Summary:
There are 5 types of HTML Tags. They are as follows:
- Simple Tags like
<p>content</p> p tag => paragraph
<b>content</b> b tag => bold
<strong>content</strong> strong => bold (semantic)
<i>content</i> i tag => italic
<small>content</small> small tag => make text smaller
<em>content</em> em tag => emphasis <h1>content</h1> h1 tag = heading 1 most large one
<h2>content</h2> h2 tag = heading 2; smaller than h1
<h3>content</h3> h3 tag = heading 3; smaller than h2
<h4>content</h4> h4 tag = heading 4; smaller than h3
<h5>content</h5> h5 tag = heading 5; smaller than h4
<h6>content</h6> h6 tag = heading 6; smaller than h5
- Tags with Attributes like
Anchor tag <a></a>, tag attribute: href
<img/> tag, tag attribute: src
<input/> tag, tag attribute: type
- Empty Tag (Nothing inside)
Break : <br>
Horizontal Rule : <hr/>
Input Tag : <input/>
- Container Tags (Have Children)
div: <div></div>
Unordered list: <ul></ul>
Ordered list: <ol></ol>
form: <form></form>
- Document Type : Declaration (Special)
div: <!DOCTYPE html>
When an anchor link is clicked then it will open in the current tab.