Introduction to Web & HTML

Photo by Jess Bailey on Unsplash

Introduction to Web & HTML

Ineuron FSJS 2.0 Web Development Bootcamp

The Web:

  • The web is different from the term internet(web is normally referred to as the world wide web or www. which we used to put in front of the most web address in my childhood days... but these days people just enter the direct address without worrying about the syntax. While the internet is just a group of an interconnected network of computers connected via wire/wireless connections across the globe)

The Server

  • The web usually works using the client-server model where there is a user(referred to as the client) and a server(normally another powerful computer which can handle multiple clients at the same time) that serves up the information requested by the client.

  • The server can run various applications and services so that it can provide for the client when the request is made in fact, It is called a server because it provides a service to another computer and the user (client)

  • The server is typically stored in something called a Datacenter alongside other servers probably 100's or 1000's all running simultaneously running different services connected to the internet and there are many data centers located around the globe.

Web Server

  • There is one particular type of server called a web server which provides for storing and administration of websites, data storage, and security. These web servers handle all the requests made by the client and provide them with proper responses and this idealogy is commonly referred to as the request-response cycle which happens in the span of milliseconds. The live server extension used in VS code (code editor) is a type of web server that emulates an actual server to display the result of the code written by the developer and to test the code when it's actually deployed to an actual server.

request.gif

Websites & Webapps

  • Websites are usually collections of webpages hyperlinked together and webpages consists of information in form of text,images,videos and other media format collectively called as assets of a webpage. Webpages are usually static (No interactivity and display the same information to all the users)and are used to just display information to the user/client. Eg: Wikipedia,example.com,etc,.These are said to be Web1

  • On the other hand, Web apps may be websites with lots of interactive content and these websites show different data to different users Eg: Facebook, Whatsapp, etc, These apps and websites are said to be the web 2.0.

  • There are a new type of websites and web apps with no central authority to regulate or have direct control and are stored in a blockchain (A distributed ledger)with no central server these are said to be Dapps(Decentralized Apps) known as the latest Web 3.0.

Most common technologies used in creating webpages and websites

There are 3 main common technologies included in every website developers create and they are:-

  1. HTML
  2. CSS
  3. Javascript

request (1).gif

HTML5

The first version of HTML was written by Tim Berners-Lee in 1993. Hyper Text Markup Language is the markup language used to provide the basic structure to any website/web apps which displays content with a visual hierarchy meaning which part of text becomes the heading and which part becomes a paragraph and defines content in such a way that can be understood by both humans and screen readers alike. HTML is used to define the very basic structure of a web page and it consists of various opening and closing tags with <>content</> respectively.All such tags are referred to as HTML elements The World Wide Web Consortium (W3C), the former maintainer of the HTML and current maintainer of the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.

  • The main functionality of HTML is in the first word of its expansion the Hypertext meaning we can create hyperlinks which means one can link one html document to another and the link chaining can go on and on ......this hyperlinking/hypertext was very useful to researchers/scientists in the very early days of the internet when it was first used to share research documents and files within a group of people.

CSS 3

Cascading Style Sheet is the styling language for adding styles(colors,margin,padding and everything to make the HTML beautiful)to the websites.

Javascript

Javascript is a programming/scripting usually used in frontend to add user interactivity to the webpage.

Summary of Class 1

  • In order to build a website HTML, CSS, JS are used in every website in some form
  • Don't Stick to one code editor blindly and become dependent on it.
  • The most famous web server is Apache 2
  • The Cpanel is the interface that runs on the Apache server
  • Cpanel Default serving path - var/html/www (as a directory)
  • index.html is by convention used as the first page to be served by the server as this was used in the apache2 web server.
  • If index.html is not present default.html is being served.
  • A server is a software that serves.
  • Live server is a piece of software that continuously notifies the memory about the state of the web page.
  • Emmet is included in VS code by default which makes it so powerful.
  • 127.0.0.1 is the IP address of the local host and after that comes is the port number
  • usage of (which is not shown to the end user and (which is viewed by the user) tags in HTML.
  • Every browser renders the webpage with some default styles/fonts.
  • tag provides extra information about the information.
  • Small icon in the upper-left corner is called FAVICON.
  • Character encoding which we normally use is the UTF-8. -H1 and H2 headings where h1 tag has more immportance than h2 tag in html.
  • Lorem ipsum is used in emmet as placeholder text for including dummy text in HTML.
  • How to include images in HTML and how to use srcset and sizes in HTML.
  • Copyright-free images should be used from pexels.com/unsplash.com unless one is ready to pay for copyright strikes.

Reference

ineuron FSJS - 2.0

MDN Web Docs