Introduction to web in HTML

Introduction to Web in HTML

Ashu Gautam's photo
Ashu Gautam
·

3 min read

  1. What is server

    • what is an Apache server?

    • what is a live server?

Tags of HTML

  • Heading Tag

  • Paragraph Tag

  • Lorem

  • Image Tag

  • Attribute Tag

What is SERVER?

The server is a combination of software and hardware which will accept requests from the client and give responses to the client.

What is an Apache server?

It will allow hosting the of personal and Business websites.

It is more reliable and easier to deploy

Allow LAMP Stack (Linux, Apache, MySQL, and PHP)

It is a very useful static website

What is LIVE SERVE?

Well, Live Server is something that allows changing the result as we change the code.

There is no need to save again and again and then refresh the browser again (Chrome, Firefox and etc) browser automatically identify the changes and do changes in output file.

HTML TAGS

Heading Tag: -

Heading Tag is having a range from <h1> to <h6>

<h1> is the highest size

<h6> is the smallest size

<h1>This is My first<btagsr \> blog</h1>
<h6>Heey!! man</h6>

We have close the h1 tag but there is no need to close the br tag

Paragraph Tag: -

paragraph tag is used when we have to write something but if it is not a heading. We use paragraph tag separately or under the heading Tag.

<p>Hitesh Sir is a Good Teacher</p>

Lorem : -

Lorem is used to insert certain amount of text in paragraph. This is used because user can use it and generate 1000 of words.

<p>Lorem5</p>

output:- 

Lorem ipsum dolor sit amet
//5 words from lorem //

and we can use Lorem100 and 100 words will be out Automatically (with the help of emmet).

Image Tag: -

There are many attribute in image tag we are going to discuss them all one one by one.

  1. src

  2. alt

  3. srcset

  4. height

  5. width

  6. longdesc

  7. hyperlink

we are going to understand all these with the help of example

<img src="path of file " height="50px" width="20px">

src=>source of file (path of image).

height=>To adjust the height of photo

widhth=>To adjust the width of photo.

<img src="file/photo100.svg" 
    srcset="file/photo100.svg" 100w
    srcset="file/photo500.svg" 500w
    srcset="file/photo1000.svg" 1000w
    >

So, we already understand the src attribute now we are going to understand the srcset

I have 3 photos

1st one is 100*100 px photo

2nd one is 500*500px photo

3rd one is 1000*1000px photo

on different devices a different image will load for example 3rd one image will load if we using the computer or laptop. 1st one image load if we have mobile. we use the media query in CSS but as we know the first file will load in client browser is html that's why we use srcset but better way to do is media query.

<a href="www.google.com>
    <img src="a/photo.svg" alt="photo h dost load ho rahi h ">
</a>

Now we make an image a hyperlink if we click on the image than we redirect to the mentioned website (google.com)

alt use when the image is not loaded to brower alt will appear and tell than image is loading and it also show when the path of image is not found.

HTMLWeb Developmentbasics