Web Technology Basics

Arpit Goyal

BY ARPIT GOYAL

Why web development? Because it's fun and it pays well. Paid to work with something fun, is awesome, isn't it?

Today and for quite some years already, a lot of things happen on the web. Investors are throwing money at startups and profitable companies are built overnight.

It doesn't only take an idea to create something. It also requires someone (or even a bunch of people) who can build this idea and here comes the 'technical co-founder‘, why not let it be you?

From another angle, Companies are hiring web developers like hell, with the recent shift in the technical job market, now is the time to be a web developer.

BY ARPIT GOYAL

Frontend Developer The part of the web that you can see and interact with. The frontend usually consists of two parts: the web design and front end web development.

In the past when someone discussed development it usually referred to the backend, but in recent years there has been a real need to differentiate between designers that worked strictly in Photoshop and those that could code HTML and CSS. It went even further when designers crossed the lines to working with JavaScript and jQuery.

So now when we discuss the term “web design”, we’re really talking about those that work with Photoshop and Fireworks, and those that code using HTML, CSS, JavaScript.

Now to make all of this become a reality and to store the information that you put in the frontend elements, we need technology to make it happen. Enter the backend…

BY ARPIT GOYAL

Backend Developer The backend usually consists of three parts: a server, an application, and a database. If you book a train or buy movie tickets, you usually open a website and interact with the frontend. Once you’ve entered that information, the application stores it in a database that was created on a server stored somewhere in Arizona.

Usually all of that information stays on the server so when you log back into the application to print your tickets, all of the information is still there in your account.

We call a person that builds all of this technology to work together a backend developer. Backend technologies usually consist of languages like PHP, Ruby, Python, etc. To make them even easier to use they’re usually enhanced by frameworks like django, Laravel, Ruby On Rails that all make development faster and easier to collaborate on.

BY ARPIT GOYAL

Hi, I'm Arpit GoyalDeveloper with AestheticsWork as Full-stack developer @ TownscriptWrites about Technologies, Products,Startups and related stuff @ dLotus

Website | Twitter | LinkedIn | Facebook | StackOverflow | Quora | Medium

BY ARPIT GOYAL

BY ARPIT GOYAL

World Wide Web(or simply Web) We all are aware of prefix “www” which stands for World Wide Web, and basically means a way of accessing a Globally shared document readable by all those who are part of that network (Internet).

The Internet is not synonymous with World Wide Web. The Internet is a massive network of networks. It connects millions of computers together globally, forming a network in which any computer can communicate with any other computer as long as they are both connected to the Internet. The World Wide Web is a way of accessing information over the medium of the Internet.

BY ARPIT GOYAL

INTERNET More than 100 countries are linked into exchanges of data, news and opinions. According to Internet World Stats, as of December 31, 2011 there was an estimated 2,267,233,742 Internet users worldwide.

Unlike online services, which are centrally controlled, the Internet is decentralized by design. Each Internet computer, called a host, is independent. Its operators can choose which Internet services to use and which local services to make available to the global Internet community.

BY ARPIT GOYAL

Website Website means a set of inter linked documents(web pages) shared over network.

All of this document data is written in a browser readable language called HTML.

So HTML is as old as Internet itself.. It is required to make layouts and text appear on browser.

BY ARPIT GOYAL

BY ARPIT GOYAL

Hyper Text Markup Language(HTML)

Hyper Text Markup Language

HTML stands for Hyper Text Markup Language, HTML is not a programming language, and it is a markup language. A markup language is a set of markup tags, which instructs browser about text formatting and hyperlinks.

HTML tags are keywords surrounded by angle brackets like <html>

BY ARPIT GOYAL

Writing HTML HTML can be edited by using a HTML editor like:

◦ Notepad (Windows)◦ Notepad++ (Windows)◦ Sublime (Cross Platform)◦ TextEdit (Mac)

There are different features some text editors provide as Sublime Text provides auto-completions, pattern matching, spell checking, Syntax highlighting etc.But at starting Notepad or any other basic text editor is suggestedAfter a little knowledge of language we can start using advanced Text editors or even professional HTML editor like:

◦ WebStorm (Cross Platform)◦ Adobe Dreamweaver

BY ARPIT GOYAL

Step 1: Open Notepad

To open Notepad in Windows 7 or earlier:Click Start (bottom left on your screen). Click All Programs.

Click Accessories. Click Notepad.

To open Notepad in Windows 8 or later:Open the Start Screen (the window symbol at the bottom

left on your screen). Type Notepad.

Step 2: Write Some HTML

Write or copy some HTML into Notepad.Example

BY ARPIT GOYAL

Step 3: Save the HTML Page

Save the file on your computer.Select File -> Save as in the Notepad menu.When saving an HTML file, use either the .htm or

the .html file extension. There is no difference, it is entirely up to you.

Step 4: View HTML Page in Your Browser

Double-click your saved HTML file, and the result will look much like this:

BY ARPIT GOYAL

BY ARPIT GOYAL

Title <html>

<head><title>Google</title></head><body>

content here goes to body of browser</body></html>

Title which goes into head of browser

BY ARPIT GOYAL

Headers <h1>Heading one</h1> Heading one

<h2>Heading two</h2> Heading two <h3>Heading three</h3> Heading three

<h4>Heading four</h4> Heading four <h5>Heading five</h5> Heading five <h6>Heading six </h6> Heading six

BY ARPIT GOYAL

Paragraphs and break

<p>this is first para</p>

<p>this is second para<br> This will

be coming in second line</p>

this is first para

this is second para

This will be coming in second line

BY ARPIT GOYAL

BY ARPIT GOYAL

Links <a href=“second.html”>second page</a>

href hyper reference (link’s address)

a anchor(Link)

BY ARPIT GOYAL

Commenting <!-- this is a comment -->

Whatever we write here isNot readable by browserWritten in intension just to make a reader understand Ex: <a href=“second.html”>second page</a> <!– this is a link-->

BY ARPIT GOYAL

Open tags◦ <name attributes/> or <name attributes>◦ <hr/>, <br/> or <hr>, <br> as HTML5 allows.◦ <img src=“url” width=‘100px’ height=’60px’>

Closed tags◦ <name attributes> stuff </name>◦ <b>text to be bolded</b>◦ <h1>level 1 heading text</h1>

Comments◦ < ! - - comment text -- >

BY ARPIT GOYAL

Images <img src=“bear.jpg” height=“300” alt=“Bear”>

Image Tag Source of Image Height/width alternative text

BY ARPIT GOYAL

Tables<table border=“1”>

<tr>

<td>Row 1, col 1</td>

<td>Row 1, col 2</td>

</tr>

<tr>

<td>Row 2, col 1</td>

<td>Row 2, col 2</td>

</tr>

</table>

Row 1Col 1

Row 1Col 2

Row 2Col 1

Row 2Col 2

BY ARPIT GOYAL

Cellpadding vs Cellspacing

Row 1Col 1

Row 1Col 2

Row 2Col 1

Row 2Col 2

Row 1Col 1

Row 1Col 2

Row 2Col 1

Row 2Col 2

BY ARPIT GOYAL

ListsLISTS

Unordered lists Ordered lists<ul> <ol>

<li>burger</li> <li>Airtel</li><li>pizza</li> <li>BSNL</li>

</ul> </ol>

BY ARPIT GOYAL

Cascading Style Sheets(CSS)CSS (CASCADING STYLING SHEETS) originated with the end of HTML 3.2 and it was designed so to reduce the coding at HTML tags without losing the capability to do formatting.CSS also came up with new features and new versions, the latest version CSS 3.0 came up with HTML 5 and they are like two bodies of a single soul.

BY ARPIT GOYAL

BY ARPIT GOYAL

Cascading Style Sheets

Inline/Embedded

Internal

External

BY ARPIT GOYAL

Inline or Embedded <html>

<head><title>Main</title>

</head><body>

<p style=“attribute: value”>This is a para</p></body>

</html>

BY ARPIT GOYAL

Internal <html>

<head><style>p{ attribute: value;}</style></head><body><p>this is a para</p></body></html>

BY ARPIT GOYAL

External <html>

<head><link rel=“stylesheet” href=“style.css”>

</head><body>

<p>this is a para</p></body>

</html>

BY ARPIT GOYAL

Ex: Styling Lists

•Burger•Pizza•Veggie

BurgerPizzaVeggie

BY ARPIT GOYAL

Id & Class Id :

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".

Class:

The class selector is used to specify a style for a group of elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

BY ARPIT GOYAL

ID <html>

<head><style>#third{ color: red;}</style></head><body><p>line one</p><p>line two</p><p id=“third”>line three</p></body></html>

Line one

Line two

Line three

BY ARPIT GOYAL

CLASS <html>

<head><style>.green{ color: green;}</style></head><body><p class=“green”>line one</p><p>line two</p><p class=“green”>line three</p></body></html>

Line one

Line two

Line three

BY ARPIT GOYAL

Inline and Block Inline elements: HTML inline elements are those which are generally displayed without

changing of line.

Ex: <b>, <a>, <img> etc.

Block elements: Most HTML elements which start and end with a new line or change of line.

Ex: <h1> to <h6>, <p>, <ul> etc.

BY ARPIT GOYAL

<div>….. </div> “Div” are block type elements,

And in today’s web frontend it is the most common element used, unlike early web Tables for formatting sites are not proffered at all,

For a Webpage to responsive Table style web is very bad and Its “Syntactically” Wrong too

So for right interpretation of any data while SEO and compilation we need to use correct elements,

As div for divisions in content and table for table-data type content

Syntactically Correct Markup is a very good practice and a prime element of professional web front-end developer.

BY ARPIT GOYAL

Margin, Padding and Border

BY ARPIT GOYAL

Positioning and Z-index Fixed, Relative and Absolute

• An element with fixed position is positioned relative to the browser window. The document and other elements behave like the fixed positioned element does not exist.• A relative positioned element is positioned relative to its normal position.• An absolute position element is positioned relative to the first parent element that has a

position other than static. If no such element is found, the containing block is <html>.The document and other elements behave like the absolutely positioned element does not exist.

z-indexWith z-index we can make floating boxes ahead or behind each other.

BY ARPIT GOYAL

Float and Clear As the name suggests, float styles any content to align itself as if that side have a magnet for it, i.e. a float to that side.

float: left

float: right

clear: both

BY ARPIT GOYAL

BY ARPIT GOYAL

Box Model

BY ARPIT GOYAL

HTML5 Layout elements

BY ARPIT GOYAL

BY ARPIT GOYAL

HTML5 CSS3

BY ARPIT GOYAL

Still

BY ARPIT GOYAL

CSS3Opacity

Border-radius

Box-shadow

Text-shadow

Border-image

BY ARPIT GOYAL

Transformation, Transition and Animation

A transform is an effect that lets an element change shape, size and position. You can transform

your elements using 2D or 3D transformation.

With CSS3, we can add an effect when changing from one style to another, without using Flash

animations or JavaScripts.

With CSS3, we can create animations, which can replace animated images, Flash animations, and

JavaScripts in many web pages.

BY ARPIT GOYAL

Transformation 2-d transform

translate() -webkit-transform: translate(50px,100px); /* chrome*/rotate() -webkit-transform: rotate(30deg);scale() -webkit-transform: scale(2,4);skew() -webkit-transform: skew(30deg,20deg);matrix() -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);

3-d transform-webkit-transform: rotateX(120deg);-webkit-transform: rotateY(130deg);

BY ARPIT GOYAL

Audio and Video <audio controls="controls">

<source src="media/music.mp3"/>

</audio>

<video controls="controls">

<source src="media/1.mp4"/>

</video>

WEB FORMS

BY ARPIT GOYAL

Text input field

Password input field

Email address input field

Drop Down List Input Field

Check box Input field

BY ARPIT GOYAL

WEB FORMS <form> . . Input element . Input element . </form>

BY ARPIT GOYAL

Input element <input type=“type” name=“ some-name ” value=“ some-value”>

Type defines theType of input, i.e. text, password, etc.

Name defines theName of field which will be used for working with elements in scripts.

Value can be used to indicate the value this will represent.

BY ARPIT GOYAL

Input Fields types type=“text”

type=“password”

type=“submit”

BY ARPIT GOYAL

Radio ButtonsInput type

Check Box input type

BY ARPIT GOYAL

HTML5 input types color date datetime datetime-local email month number range search tel time url week

BY ARPIT GOYAL

Now what? Learn Responsive frontend and try some backend technologies.. You’ll know..

Practice Basics:◦ W3schools◦ O’reilly Media Books◦ HTML5 Rocks◦ Work Files

Checkout Bootstrap and/or Foundation for responsive/cross-browser/semantic web.

Backend Technologies Like: PHP, ASP/ASP.NET, Python, Ruby etc.

Work with some CMS: Wordpress, Drupal, PrestaShop etc.

Checkout Some Frameworks: Laravel, django, ROR etc.

BY ARPIT GOYAL

Hi, I'm Arpit GoyalDeveloper with AestheticsWork as Full-stack developer @ TownscriptWrites about Technologies, Products,Startups and related stuff @ dLotus

Website | Twitter | LinkedIn | Facebook | StackOverflow | Quora | Medium