How to create Simple webpage using html
What is HTML? HTML stands for Hyper Text Mark-up Language. HTML is the standard mark-up language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content.
Basically for practice we use notepad,notpad++ and save the file as what ever the name and .html. For example hello.html
I think its easy we can study html with example
Ex1-
<html>//always start with this
<body>// Here you can write what you want to write body
<h1>Hello World</h1> //Heading 1
</body>//Body close
</html>// This is ending part
This is basic Example html. You can see the output
Heading
Heading you can write many like h1,h2,h3 its mean simply the size of heading h1 is bigger than h2 like wise.
Eg-
<html>
<title> Welcome </title>
<body>
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
</body>
</html>
The output is
Title
Title is tag use in html for naming the browser tag.
Eg-
<html>
<title> Welcome to the Html </title>
<h1> Learn the Html</h1>
</html>
In output you can see the Title at the top of the tab.
Image
You can also upload your image to the website that you are creating.
Inside the html you can upload your image anywhere.
E.g.- Height of image
<img src= “abc.JPEG” width=”400” height=”400"/>
Image name width of image
Format of image type (jpg, gif,png..etc)
Before run your html please make sure all images and the html file is same folder.
Eg-
<!DOCTYPE html>
<html>
<h1>
Welcome to the Jungle
<title> Heading2.2</title>
</h1>
<h3> Heading2.2</h3>
</br> // This using to for para space
<h4> Blog post 1 </h4>
<body>
<p> // paragraph start
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget enim mattis, aliquet lectus id, eleifend lacus. Quisque felis felis, dictum ut ipsum nec, tempor accumsan urna. Proin rhoncus felis ac placerat placerat. Cras erat purus, volutpat at iaculis vitae, pellentesque quis diam. Aenean efficitur eros vel nisl accumsan, nec suscipit elit congue. Vestibulum blandit vel libero a efficitur. Vestibulum vestibulum ultrices risus non sodales. Donec nulla arcu, suscipit eu volutpat eget, congue non ipsum. Nam a felis volutpat, facilisis orci ac, maximus felis. Integer maximus, massa vel finibus vulputate, massa metus faucibus mauris, vitae faucibus tellus nisi non mi. Fusce semper commodo rutrum. Proin quis lacinia nibh.
Vivamus mollis elementum mi, ac dignissim est vestibulum vel. Nam eu leo at ante faucibus fringilla. Nulla posuere dictum tellus, quis suscipit nunc tincidunt ut. Proin in iaculis risus, id euismod ex. Cras ac arcu in turpis scelerisque interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce molestie neque sodales nibh imperdiet porttitor.
</p> paragraph end
</br>
<img src=”forest1.JPEG” width=”400" height=”400"/>
<img src=”forest2.JPEG” width=”300" height=”400"/>
<img src=”forest3.JPEG” width=”400" height=”400"/>
<hr/> //To create Horizon line
</body>
</html>
Crete a simple form
In website you can see the form to fill its very easy to create rather than you think .lets see how to create a form.
Eg-
<!DOCTYPE html>
<html>
<body>
<form> // form start
<h4> Subscribe to Newsletter </h4>
<label> Name </label> //Lable Name
<div>
<input type=”text”/> //To get the input
</div>
<label> Email </label>
<div>
<input type=”text”/>
</div>
<label> Password </label>
<div>
<input type=”password”/>
</div>
</br>
<input type=”submit”/>
</form> //form end
</hr>
</body>
</html>
Add a link
We are using link to go to another page or link other websites we using link.Its help to reduce the size of the page and also we can connect many information through that link.
We are using <a href=”https://abc.com “ target=”blank” > -Click here </a> this for linking.
Website address is typing in double notation. target blank is to open in new tab. Click here is the sentence that f shown in webpage
Create list
You can list the the things in number format or bullet format. In html for order list we are using <ol> for list in order and for un order that mean using bullet forms using <ul> to list.
Eg-
<!DOCTYPE html>
<html>
<body>
<h4> Blog post 2 </h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget enim mattis, aliquet lectus id, eleifend lacus. Quisque felis felis, dictum ut ipsum nec, tempor accumsan urna. Proin rhoncus felis ac placerat placerat. Cras erat purus, volutpat at iaculis vitae, pellentesque quis diam. Aenean efficitur eros vel nisl accumsan, nec suscipit elit congue. Vestibulum blandit vel libero a efficitur. Vestibulum vestibulum ultrices risus non sodales. Donec nulla arcu, suscipit eu volutpat eget, congue non ipsum. Nam a felis volutpat, facilisis orci ac, maximus felis. Integer maximus, massa vel finibus vulputate, massa metus faucibus mauris, vitae faucibus tellus nisi non mi. Fusce semper commodo rutrum. Proin quis lacinia nibh.
</p>
<ul> // Unordered list
<li>Amazon</li>
<li>Black Forest</li>
<li>Stanthon Moor</li>
</ul>
<a href=”https://www.lipsum.com/feed/html" target=”blank” >
Click here</a>
</br>
</body>
</html>
If you click in click here its will go to https://www.lipsum.com/feed/html site in new tab
Create table
You can also create table in html.
Eg-
<!DOCTYPE html>
<html>
<body>
<h3> Heading2.2</h3>
<h4>Research team 1</h4>
<h5> Summary…</h5>
<table>
<tr> //Table row
<th>First Name </th> // Table heading
<th> Last Name </th>
<th> Age </th>
</tr>
<tr>
<td> John </td> // Table data
<td> Mike </td>
<td> 24 </td>
</tr>
</table>
</br>
</body>
</html>
Put the YouTube video In your site
You can put a perticuler youtube video in your page in many way. Here I am showing you a simple way that I learn.
Eg-
https://www.youtube.com/watch?v=JkaxUblCGz0
This is one of the video link in YouTube.
What you do is you want to copy the link first.
https://www.youtube.com/watch?v=JkaxUblCGz0
Then you want to change bolded part to embed
Eg-https://www.youtube.com/embed/JkaxUblCGz0
Eg-
<!DOCTYPE html>
<html>
<body>
<h5> Documentary…</h5>
<embed width=”560" height=”315" src=”https://www.youtube.com/embed/JkaxUblCGz0" >
</embed>
</body>
</html>
Thank you I hope that you will learn something from this. You can use CSS, java script for decorating the pages. You can learn more about html in internet easily.
eg-Introduction to HTML (w3schools.com)
Thank You
