HOMEPAGE HTML CSS BOOTSTRAP JAVASCRIPT

HTML tutorial

  1. HTML Intro
    2.
  2. HTML Basic structure
    3.
  3. HTML Tags
    4.
  4. HTML Elements
    5.
  5. HTML sementic & non-sementic tags
    6.
  6. HTML Links
    7.
  7. HTML Attributes
    8.
  8. HTML Images
    9.
  9. HTML Table
    10.
  10. HTML Form
    11.
  11. HTML Media
    12.
  12. HTML Meta tags
    13.

HTML Intro:

what is html?

HTML stands for HyperText Markup Language. It is a standard markup language for web page creation. It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes.It is used to align the content in sementic way by wrapping, which is useful in css to add styles and designs. It is static web page.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!

why is html?

HTML is the only markup language available to structure a webpage , so thats why we are using html, without creating this we can't make a web page.

Right now we are using html 5.

we are going to see the difference between html and html 5 in this page. first we used html to make webpages, after that we got a browser and advanced technologies so we have to update the html aswell for the usage. so we built new things to use in html 5. we are going to see the difference between them in a table here and also we are going to see about meta characters in head and their uses and interview questions.

HTML HTML 5
we use docutype to tell the browser what type of document we are using, and browser use doctype to render the html. it is very long here. we have to enter like this, !doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd" In html 5 we simplify the doctype, so its easy to remember and it no longer references a dtd. it changed to this method !doctype html
it has very less input types to use in a form, so its hard for the user. In html 5 we add lot of new input types for the user experience. for ex: email, range, tel, url, number,date , datetime, datetime-local, colour, search
it don't have a video and audio inputs it has a audio and video controls
no sementic elements used, only have div Includes sementic elements for a better structure and understanding for the browser
No specific support for mobiles mobile friendly to use , we can use in any device. mobile friendly to use , we can use in any device

HTML Basic structure

  1. Root element
  2. Container element
  3. child element

Root element

HTML

Container element

Head & Body

Child element

Inside the body and inside the block level element

1.Structure Tags

Tag Function
<!docutype html > Declares the document type as html 5
<html> Root element containing all HTML content.
<head> Contains metadata (title, CSS links, scripts).
<title> Sets the page title in the browser tab.
<body> Contains all visible webpage content.

2.Headings and text Tags

Tag Function
<h1 to h6 > Headings (h1 largest, h6 smallest).
<p> Paragraph of text.
<br> line break
<hr> Horizontal line divider
<strong> Bold, for importance
<em> italic, for emphasis
<b> Bold text
<i> italic text
<mark> Highlights text
<small> smaller text
<sup> superscript text
<sub> subscript text

3.link and navigation Tags

Tag Function
<a> creates a hyperlink.
<nav> section for navigation links.

4.images and media Tags

Tag Function
<img> Displays an image
<figure> Groups of images with caption.
<figcaption> Caption for a image.
<audio> Embeds audio.
<video> Embeds video.
<source> specifies multible media sources.
<iframe> Embeds another webpage or video.

5.list Tags

Tag Function
<ul> unordered list (bullet list)
<ol> ordered list (numbered)
<dl> definition list
<list> list item
<dt> term in a definition list.
<dd> Description of a term.

6.Table Tags

Tag Function
<table> creates a table
<tr> Table row
<th> Table header cell
<td> Table data cell
<caption> Table title/caption
<thead> Group of header rows
<tbody> Group of body rows
<tfoot> Group of footer rows

7.form Tags

Tag Function
<form> creates a form
<input> user input
<textarea> Multi line text input.
<label> Labels for form controls.
<button> Clickable button.
<select> Dropdown menu
<option> option in dropdown.
<fieldset> Groups related form elements
<legend> Title for a fieldset.

8.semantic Tags

Tag Function
<header> Header section of page or article.
<footer> Footer section.
<Main> Main content area.
<section> Defines a section of content.
<article> Independent content
<aside> side content (sidebar)
<div> Generic container for grouping elements.
<span> Inline container for styling.

9.scripts and style Tags

Tag Function
<style> Internal css
<link> Links external css file.
Links icon to the webpage.
<script> Embeds javascript.
<noscript> Content shown if javascript disabled.

10.Special characters and meta Tags

Tag Function
( ) Non breaking space.
© Copyright symbol.
<meta> Meta data (charset, description, viewport)

HTML ELEMENTS

What is element?

Element is described as the opening tag and closing tag including the content inside the tag, alltogether called as a element.
We have two types of elements.

1.Block level element

2. Inline element

Block level element

  • It always take a full width of the webpage,
  • Block level element always starts in a new line,
  • We can edit the height and width of the block level element.
  • We can use inline element inside the block level element.

Examples:

  • paragraph tag
  • <h1> to <h6>
  • semantic tags & Non-semantic tags
  • Lists
  • Forms
  • Table

Inline element

  • Inline element just take the content width only, not the whole width.
  • It won't start in a new line.
  • we can't edit the height and width of the inline element.
  • we can't add any block level element.

Examples:

  1. <a>
  2. <img>
  3. <b>
  4. <span>
  5. <input>
  6. <label>
  7. <br>,<i>

semantic elements

  • semantic elements are just used to give meaning to the content, it won't give any behaviour to the content, it is mainly used for the wraping of the content as a containers. which we can use to edit and design in the css, bootstrap.
  • It is used to structure html document readable for the developers.
  • It is also used for the SEO to understand the structure and content in a effective way.

    • semantic tags

    <header>
    Defines a header for a page or section.
    <article>
    Represents self-contained, independent content (like a blog post).
    <nav>
    Defines a set of navigation links.
    <main>
    Defines the main content of the page (only one <main> per page).
    <section>
    Defines a thematic grouping of content.
    <footer>
    Defines a footer for a page or section.
    <aside>
    Defines content that is related but not central to the main content (e.g., sidebar).

    Non-semantic elements

  • It won't give any meaning to the content for the browser or the developers.
  • It is just used for the structuring of the content as a generic containers
  • We can use this multiple times in a webpage.

    • example

    <div>
    A generic block-level container.
    <span>
    A generic inline container.

    Attributes

    what is attributes?

  • Attributes are used inside the opening tag of the element to give addtional information to the element.
  • It must be in the opening tag of the element.
  • All html elements can have attribute.

    • some of the important attributes we are using in html are,

    href: we use this inside the anchor tag to provide url for the anchor tag.
    <a href="index.html">IT magic</a>
    src: we use this inside the image tag to provide source of the image.
    <img src="htmlimages/image"/>
    alt: we use this inside the image tag to provide the description of the image if it is failed to load on the webpage.
    <img src="htmlimages/image" alt="image"/>
    style: We use this inside the starting tag to give design the element.
    <h1 style="property:value;"> My web page </h1>

    We also have a attributes like height, width to edit the sizes.

    We have a lot of attributes for form, we will see them all in the form section.