msdhaliwal

Introduction to web & Html

Manpreet Dhaliwal's photo
Manpreet Dhaliwal
·

6 min read

Table of contents

No heading

No headings in the article.

The W3 world view is of documents referring to each other by links. For its likeness to a spider’s construction, this world is called the Web.
– Tim Berners-Lee, Robert Cailliau; World­Wide Web; Sep 1992.[1]

World wide web

What is World Wide Web ?

World Wide Web (referred to as the web or WWW) is collection of information, we can also define it as collection of interconnected pages which are hosted on some servers and can be accesses via browsers.

What are web servers ?

A web server consists of two components:
  1. Hardware : computer that stores web server software and a website's component files. web server connects to the Internet and supports physical data interchange with other devices connected to the web.
  2. Software: Programs that serves information (files, media, etc) over the Internet.it is also responsible for controlling how and by whom stored information can be accessed.

Popular Web Servers

  1. NCSA HTTPd: It was one of the initial web server released in 1993 by Robert McCool and others at NCSA at the University of Illinois at Urbana–Champaign, It was No.1 server in 1994 and powered most of all web servers on the Internet.
  2. Apache: In mid-1994 when Robert McCool left NSCA, the development if HTTPd stalled. In February 1995 Some individuals developed their own extensions and bug fixes but that was not enough, then small group of people gathered together for the purpose of coordinating. by the end of month eight core contributors formed the foundation of the original Apache Group. Names of core group members:
    1. Brian Behlendorf
    2. Roy T. Fielding
    3. Rob Hartill
    4. David Robinson
    5. Cliff Skolnick
    6. Randy Terbush
    7. Robert S. Thau
    8. Andrew Wilson

Common misconception: Internet & World Wide Web are same.

The Internet is a global network of networks while the Web, also referred to formally as World Wide Web (www) is a collection of information that is accessed via the Internet. Another way to look at this difference is; the Internet is infrastructure while the Web is served on top of that infrastructure.< br/>

HTML

What is HTML ?

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript.
The first version of HTML was written by Tim Berners-Lee in 1993. The first publicly available description of HTML was a document called "HTML Tags" written in 1991. it contained 18 tags in total

What are tags/Elements?

Anatomy of an HTML element Opening Tag: Name of tag wrapped in angle brackets
Closing Tag: Name of tag wrapped in angle brackets with leading forward slash to denote closing.
Content: It is the text that is to be displayed by tag
Exception: Void elements
Elements that have no content and are self closing like <br />, <img src="photo.png" alt="some image" />

What are attributes

It is the information that is not for displaying but to be used my element for some purpose. Like src in IMG tag is used to define source of image, same way alt attribute in IMG tag is used to display alternate text for image in case image cannot be viewed

Commonly used HTML tags

  • Header (<head>): It contains tags and information(also known as metadata) to be used by machines. Elements used within head tag are:
    • Title: it defines the document's title that is shown in a browser's title bar. It only contains text.
    • Link: Commonly used to link external stylesheets to web page.
    • Script: script tag is commonly used to link Javascript code to webpage.
    • Style: this tag is used to write css on page.
  • Headings: H1 to H6, Headings allow us to define heading in html document/page.
    • H1 tag (<h1>) is the used as main title of the page, should not be used more than once on a page.
    • H2 tag (<h2>) is used to used to define main subtitles of the page. It should be used for headings of sub topics on page.
  • Paragraph (<p>) is a block level Element meaning it always start with new line and should be used to define paragraphs on page
  • Images (<img />): this tag is used to add images to page, two main attributes of IMG tag are src and alt.
    • src is required and can't be omitted. it is used to define the source of image.
    • alt is useful for accessibility reasons, as it is used as an alternate text by screen reader or in case image cannot be viewed
    • fetchpriority is experimental attribute used to define priority of loading image on page. Possible values are: high, low & auto. default value is auto.
    • height isvalue in pixels to denote height of image

Lorem Ipsum

What is Lorem Ipsum ?

Lorem Ipsum, sometimes referred to as 'Lorem' or ‘lipsum’, is the placeholder text used in design when creating content. It helps designers plan out where the content will sit, without needing to wait for the content to be written and approved.
It originally comes from a Latin text, but to today’s reader, it’s seen as gibberish.
Full paragraph of Lorem:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Translation: Lrem has gone through significant changes over the centuries, with words being taken out, shortened, and added in. The word ‘lorem’, for example, isn’t a real Latin word, it’s a shortened version of the word ‘dolorem’, meaning pain In current form Lorem is impossible to translate but translation from 1914 read as:
“Nor is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure.”

Important moments in history of Web

  • March, 1989:Tim Berners-Lee, Inventor of the web created the first proposal for the web “Information Management: A Proposal”.
  • October 1990: along with Robert Cailliau Tim refined the initial proposal and it came to be known as World wide web.
  • December 1990: First server goes live at info.cern.ch
  • December 1991: Marked the use of first web server outside Europe at the Stanford Linear Accelerator Center (SLAC) California, USA.
  • April 1993: Three components of Web software (the basic line-mode client, the web server and the library of common code), along with their source code, were put in the public domain.
  • April 1993: first official release of Mosaic browser
  • 1994: One of the first known Web purchases takes place: a pepperoni pizza with mushrooms and extra cheese from Pizza Hut.
  • October 27, 1994: The first banner ad for hotwired.com appears, with the text “Have you ever clicked your mouse right HERE? —> YOU WILL.”
  • August 1996: Nokia releases the Nokia 9000 Communicator, the first cellphone with internet capabilities.

Web server: Market share of all sites

resources & useful links for further reading:

tags: #iWriteCode

iwritecode#iwritecode #hiteshchoudary #html