HTML FULL COURSE

on

Today In This Blog Contains Almost All The Tags Of HTML I Hope You Will Like This Post.

Hyper Text Markup Language
 HTML is the code that is used to structure a web page and its content.
 The component used to design the structure of websites are called HTML tags



Basic HTML Page

 <!DOCTYPE html>                                     tells browser you are using HTML5

 <html>                                                          root of an html document
      
      <head>                                                     container for metadata
             
            <title>My First Page</title>               page title
      
      </head> 

      <body>                                                      contains all data rendered by the browser
             
            <p>hello world</p>                           paragraph tag
      
     </body>

 </html
 

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<html></html> -A container for some content or other HTML tags

<title></title>

<head></head>

<body></body>

Quick Points

  •  Html tag is parent of head & body tag 
  •  Most of html elements have opening & closing tags with content in between
  •  Some tags have no content in between, eg - <br>
  • We can use inspect element/view page source to edit html

Basic HTML Tags

Heading Tag -Used to display headings in HTML

<h1> Content </h1> - Signifying the most important heading within the content (Appears                                              biggest)

<h2> Content </h2> - To define secondary headings or subheadings within a webpage                                               (Appears smaller than h1) 

<h3> Content </h3> - Defines a level-three heading (Appears smaller than h1) 

<h4> Content </h4> - Defines a level-four heading (Appears smaller than h1) 

<h5> Content </h5> - Defines a level-five heading (Appears smaller than h1) 

<h6> Content </h6> - Defines a level-six heading (Appears smallest) 

Subscript & Superscript Tag

<sub></sub> -Subscript text appears slightly below the normal line of text and is often                                     rendered in a smaller font size.

<sup></sup> -Text appears above the normal line of text and is often slightly smaller.

Paragraph Tag - Used to add paragraphs in HTML

 <p>This is a sample paragraph </p> 

Br Tag -Used to add next line(line breaks) to your page  

</br>

Bold, Italic & Underline Tags -Used to highlight text in your page 

  <b>Bold </b> -Used to bold the text

   <i> Italic </i> -Used to write the text in Italic

   <u> Underline </u> -Used to Underline the text 

Big & Small Tags -Used to display big & small text on your page 

<big> </big> -To appear text bigger

<small> </small> -To appear text smaller

Hr Tag -Used to display a horizontal ruler, used to separate content

<hr>

Pre Tag -Used to display text as it is (without ignoring spaces & next line)

<pre>This is a sample text. </pre>

Page Layout Techniques-  using Semantic tags for layout 

 using the Right Tags

 <header>- used to structure and organize web content

 <main>- represent the main content of a document

 <footer>- typically containing information like copyright details, contact information, sitemap, or related documents.

Inside Main Tag

 Section Tag- For a section on your page

<Section>

Article Tag- For an article on your page

<Article>

Aside Tag- For content aside main content(ads)

<Aside>

Anchor Tag- Used to add links to your page

<a href= "https://google.com"> Google </a>

If you want to open the link in new tab:-

<a href= "https://google.com" target="_main"> Google </a>

If you want to make your link a clickable pic:-

<a href= "https://google.com" <img src="link"> Google </a>

Image Tag- Used to add images to your page

<img src="/image.png" alt="Random Image">

You can also set height and width like:-

<img src="link"  height=50px >

<img src="link" width=50px>

Div Tag- Div is a container used for other HTML elements 

Block Element (takes full width) 

<Div>

List : Block Elements

                                            <address>           <fieldset>                 <nav>

                                            <article>             <figcaption>            <noscript>

                                            <aside>               <figure>                   <ol>

                                           <blockquote>     <footer>                   <p>

                                           <canvas>            <form>                     <pre>

                                           <dd>                   <h1>-<h2>               <section>

                                           <div>                  <header>                 <table>

                                           <dl>                    <hr>                        <tfoot>

                                           <br>                   <li>                          <ul>

                                          <main>               <video>

Span Tag -Span is also a container used for other HTML elements

Inline Element (takes width as per size)

<span>

List : Inline Elements


                                              <a>                   <i>                <q>                   

                                             <abbr>             <img>           <samp>

                                            <acronym>      <input>         <script>

                                            <b>                  <kbd>           <select>

                                           <bdo>              <label>         <small>

                                           <big>               <map>         <span>

                                           <br>                <object>      <strong>

                                          <button>         <tt>              <sub>

                                         <dfn>              <var>            <sup>

                                        <em>               <output>      <textarea>

                                                                <time>

 List in HTML -Lists are used to represent real life list data

 Unordered list (in bullet points)

Apple

Mango 



<iframe src="" frameborder="0"></iframe>

<form action=""></form>

<fieldset></fieldset>

<legend></legend>

<input type="text" placeholder="" required />

<label for=""></label>

<span></span>

<table></table>

<tr></tr>

<td></td>

<a href="htttps://B4brandedlearning.blogspot.com" target="_blank" rel="noopener noreferrer"></a>

<img src="" alt="" />

<source media="(min-width: )" srcset=""></source>

<video src=""></video>

<audio src=""></audio>

<del></del>

<textarea name="" id="" cols="30" rows="10"></textarea>

<abbr title=""></abbr>

<datagrid></datagrid>

<datalist></datalist>

<figure></figure>

<caption></caption>

<marquee behavior="" direction=""></marquee>

<template></template>

<pre></pre>

<map name=""></map>

<main></main>

<address></address>

<article></article>

<aside></aside>

<b></b>

<i></i>

<base href=""></base>

<bdo dir=""></bdo>

<blockquote></blockquote>

<button></button>

<cite></cite>

<code></code>

<col></col>

<colgroup></colgroup>

<dfn></dfn>

<footer></footer>

<li></li>

<ol></ol>

<ul></ul>

<section></section>

<nav></nav>

<hr></hr>

Note: if any query please do the comment, i hope next blog get your answer...

 

Comments

Post a Comment