Introduction to Web and HTML

Introduction to Web and HTML

Web, HTML, Tags in HTML & more

Web: The Web which is commonly known as the World Wide Web. It was invented by Tim Berners-Lee while working at CERN in 1989. The Web is an informational system that contains all types of resources such as text, images, video, audio, etc. The Web consists of a collection of Web Pages stored on a server and connected to it via the Internet.

Web page: A Web Page is a hypertext document that is provided by a Web Server and displayed in a Web browser. We can create a Web Page using HTML and CSS language. HTML is used to structure the Web Page and CSS is used to style it.

Web Server: A Web Server is computer software that is used to host a website. There are multiple Web Servers present through which you can host your website. The most well-known Web Servers are Apache, Tomcat, NGINX, etc.

Apache: Apache is one of the most popular Web Server software. It was created by Robert McCool in 1995. It's a free and open-source HTTP Server Project.

Source-code Editor: A source-code editor is simply a text editor used to write and edit code. It simplifies and speeds up the process of writing code by providing us with various features such as toolkits, extensions, etc. Some of the most well-known free source-code editors are Visual Studio Code, Sublime Text, Atom, etc.

Emmet: Emmet is a toolkit with a set of plug-ins in it. It is the essential toolkit for web developers which enhances the speed of writing and editing the code.

Live Server: Live Server by Ritwick Dey is an extension within Visual Studio Code. It launches a server with live reload feature in it. If you write or make any changes to the code, this extension will cause the browser to reload and you can immediately see the changes.

HTML: HTML (Hyper Text Markup Language) is the standard markup language used to create websites. It uses various tags, which helps us in building our website. We can structurize a Web Page using HTML. Add style to it using CSS & make it interactive using JavaScript.

Tags in HTML:

Heading tag: A Heading tag is used to insert headings and titles on our Web Page. It consists of six elements - <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Each element represents a level of which <h1> is the highest and <h6> is the lowest.

Syntax:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Result:

Paragraph tag: A Paragraph tag is used to insert paragraphs on our Web Page. We can also add attribute such as <title="your title"> in our Paragraph tag to improve the accessibility of our Web Page.

Lorem Ipsum: Lorem Ipsum is a placeholder/dummy text. It is widely believed that the history of Lorem Ipsum originates with Cicero in the 1st Century BC and his text De Finibus bonorum et malorum.

Syntax:

<p title="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Result:

Image tag: A Image tag is used to insert different types of images on our Web Page. It consists of two attributes within it, src - we simply provide the path or link of the image in this attribute and alt - we provide a name that describes our image in this attribute. We can also define the size of the image by using attributes such as height and width in the Image tag.

Syntax:

<img src="./image.jpg" alt="Jeep_Rubicon" width="500px">

Result:

Thank you!