Content

  • Introduction to Web Apps and Web Technologies
  • IDE- Download and Install (VS Code)
  • HTML Introduction
  • HTML File Structure
  • HTML Heading
  • HTML Paragraphs
  • HTML Lists
  • HTML Links
  • HTML Images
  • HTML Iframe
  • HTML Tables
  • HTML Inputs
  • HTML Attributes

Introduction to Web Apps and Web Technologies

  • A web application (or web app) is application software that is accessed using a web browser. Web applications are delivered on the World Wide Web to users with an active network connection.
  • Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the internet.
  • Front-end of Web app- What we see and interact with as the visitors of a web application is considered front-end
  • Back-end of web app- All the behind-the-scenes activity that delivers the data and the speed with which that data is delivered is Back End

IDE- Download and Install (VS Code)

  • An integrated development environment (IDE) is a software suite that consolidates basic tools required to write and test software
  • Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.

HTML Introduction

    • HTML stands for Hyper Text Markup Language
    • HTML describes the structure of Web pages using markup
    • HTML elements are the building blocks of HTML pages
    • HTML elements are represented by tags
    • HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
    • Browsers do not display the HTML tags, but use them to render the content of the page
    • HTML Tag syntax :content goes here...

HTML File Structure

  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The <html> element is the root element of an HTML page
  • The <head> element contains meta information about the document
  • The <title> element specifies a title for the document
  • The <body> element contains the visible page content

HTML Headings

Code :

<h1>Heading 1 - h1</h1>

<h2>Heading 2 - h2</h2>

<h3>Heading 3 - h3</h3>

<h4>Heading 4 - h4</h4>

<h5>Heading 5 - h5</h5>

<h6>Heading 6 - h6</h6>

Output :

Heading 1 - h1

Heading 2 - h2

Heading 3 - h3

Heading 4 - h4

Heading 5 - h5
Heading 6 - h6

HTML Paragraphs

Code :

<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis quidem iusto rem soluta necessitatibus consequatur placeat aliquam obcaecati accusantium aperiam nihil enim, vero explicabo nulla. Est at quod doloribus placeat!
</p>

Output :

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officiis quidem iusto rem soluta necessitatibus consequatur placeat aliquam obcaecati accusantium aperiam nihil enim, vero explicabo nulla. Est at quod doloribus placeat!

HTML Lists

Code :

//ordered list   
<ol>
    <li>Red</li>
    <li>Black</li>
    <li>Orange</li>
</ol>
                        
//unordered list
<ul>
    <li>Red</li>
    <li>Black</li>
    <li>Orange</li>
</ul>

Output :

  1. Red
  2. Black
  3. Orange
  • Red
  • Black
  • Orange

HTML Links

Code :

<a href="https://revolutionit.in" target="_blank">Visit Website</a>
<a href="index.html" target="_blank">Home</a>

Output :

Visit Website
Home

HTML Images

Code :

<img src="whitelogo.png" alt="Logo">

Output :

HTML Iframe

Code :

<iframe 
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15286.419512784008!2d74.2414699!3d16.6966444!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc725756de823d233!2sRevolution%20IT%20Solutions%20-%20Best%20Software%20Company%20in%20Kolhapur!5e0!3m2!1sen!2sin!4v1672054999605!5m2!1sen!2sin" 
width="100%" height="450" 
style="border:0;" allowfullscreen="" 
loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>

Output :

HTML Tables

Code :

<table style="width:100%">
    <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>TATA</td>
        <td>Mr. ABC</td>
        <td>India</td>
    </tr>
    <tr>
        <td>Google</td>
        <td>Mr. XYZ</td>
        <td>US</td>
    </tr>
    <tr>
        <td>Microsoft</td>
        <td>Mr. PQR</td>
        <td>US</td>
        </tr>
</table>

Output :

Company Contact Country
TATA Mr. ABC India
Google Mr. XYZ US
Microsoft Mr. PQR US

HTML Inputs

Code :

<input type="text" placeholder="Text"><br><br>
<input type="number" placeholder="Number"><br><br>
<input type="email" placeholder="Email"><br><br>
<input type="date" placeholder="Date"><br><br>
<input type="password" placeholder="Password"><br><br>
<button>Submit</button>

Output :











HTML Attributes

  • href - To redirect from <a>
  • src - To give file path of image, iframe etc
  • style - To apply inline CSS properties
  • class - To apply specific CSS class
  • id - To give unique identification to tag so we can use this id for applying CSS or to access it in scripting language