Introduction to Web And HTML

Introduction to Web And HTML

Web server

  • A web server is software and hardware that uses HTTP (Hypertext Transfer Protocol) and other protocols to respond to client requests made over the World Wide Web. The main job of a web server is to display website content through storing, processing and delivering webpages to users. Besides HTTP, web servers also support SMTP (Simple Mail Transfer Protocol) and FTP (File Transfer Protocol), used for email, file transfer and storage.

  • Web server in simple words is a hardware or software that serves the web pages to the end users. When user made a request to the browser for particular web page . Browser send request via HTTP to the web server (hardware) , HTTP server accept the request and send back the appropriate results via HTTP only. There are mainly two types of web server :- 1) Static Web Server
    2)Dynamic Web Server Apache:- Apache is open source web server that delivers web content through internet.

  • Web servers are used in web hosting, or the hosting of data for websites and web-based applications -- or web applications.

Live Server

A live server, also known as a production server, is a server that is currently in operation and serving content to users over the internet. It is a server that hosts websites, applications, or other online services that are accessible to users in real-time.

A live server is different from a development or testing server, which is used for testing and development purposes and is not accessible to the public. The live server is the final destination for a website or application after it has been developed and tested.

It is important to ensure that the live server is secure and properly maintained, as it hosts sensitive data and is accessible to the public. Any downtime or issues with the live server can impact the availability and performance of the hosted websites or applications.Live server is an extension which helps to reload the feature of web pages on our own browser.

HTML (Hypertext Markup Language)

HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on.

HTML consists of tags and elements surrounded by "<" and " >" . "<" is considered as opening tag and "/>" is considered as closing tag . Tag names are not case sensitive . Few example of html tags : -

   1)<h1> :-  h1 is a heading tag , mainly used to write of the web page.
                    <h1> My Blog </h1> 
    2)<h2> :- h2 is also a heading tag , which is used for the subtitle .
                     <h2>Page</h2>
    3)<p> :- p is paragraph tag, used to write paragraph.
                   <p>This is my blogging site</p>
    4)<img> :- img is image tag , used to insert images on the web pages.
                       <img src =" ">

These tags have attributes also for example

<p title = "tags">my blog <p>
<img src=" " alt=" ">

The attributes are no visible on the screen .We can see the changes made by title attribute by hovering on the content of the tag.

Basic Tags

  1. <html> — The <html> element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.

  2. <head> — The <head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style-sheets.

  3. <title> — The <title> element defines the document’s title that is shown in a Browser’s title bar or a page’s tab. It only contains text; tags within the element are ignored.

  4. <body> — The <body> element represents the content of an HTML document. There can be only one <body> element in a document.

  5. <h1> to <h6> — The <h1> to <h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.

  6. <div> — The <div> element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like flexbox is applied to its parent element).

  7. <p> — The <p> element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

  8. <img> — The <img> element embeds an image into the document. The <img> tag has two required attributes:

  • src — Specifies the path to the image

  • alt — Specifies an alternate text for the image, if the image for some reason cannot be displayed.

  1. <ul> — The <ul>element represents an unordered list of items, typically rendered as a bulleted list.

  2. <ol> — The <ol> element represents an ordered list of items — typically rendered as a numbered list.

  3. <li> — The <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (ol), an unordered list (ul), or a menu (menu). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.

  4. <header> — The <header> element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

  5. <footer> — The <footer> element represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents.

Tags, Element, Attributes In HTML

The fundamental building blocks of HTML code are tags, elements, and attributes.

Tags

HTML tags specify how a web browser should format and present the text. The opening tag, content, and closing tag are the three essential components of an HTML tag. A tag is always surrounded by two angle brackets<>...</>.

Let us now discuss some common tags:

Heading Tag

The h1 to h6 elements specify the six main types of HTML headings. from the highest level h1 to the least level h6.

<h1> The main Heading </h1>  
<h2> The Sub Heading </h2>

Paragraph Tag

A webpage's paragraph is defined by the HTML p tag.

<p> This is a paragraph. </p>

Anchor Tag

A hyperlink that connects one page to another is defined by the HTML anchor tag.

<a href="home.html"> Home Page </a>

Line Break Tag

Where line division is required, such as in a poem or an address, it is typically utilized.

<p> Hello I am Nandini, <br> A Software Developer <br> Hope you like this Blog </p>

Image Tag

Images are displayed on web pages using the HTML img tag, it is an empty tag closing element is not used here. Example:

<img src="Header.jpg" alt="Header Image"/>

Attributes of HTML img tag are:

  1. src: Describes the image's source or path.

  2. alt: Specifies a substitute text for the picture

  3. width: For defining the width in which the image will be displayed.

  4. height: For defining the height in which the image will be displayed.

Elements

The start tag through the end tag are all considered HTML elements. The syntax of the HTML element is <tagname> Content to be written </tagname>.

Example:

<h1> This is my heading </h1>
<p> This is my paragraph. </p>

Attributes

More details regarding elements are provided through attributes. Always specify attributes in the start tag. The standard format for attributes is name="value". The syntax of the HTML attribute is <tagname name="value"> Content to be written</tagname>.

Example:

<a href="https://google.com"> Go to Google </a>

We have now finished talking about HTML and web servers. If you have read this far, I sincerely appreciate it. Please share your thoughts.