Web Basics
Web Technology basics
Dec 07, 2014
Web Technology Basics Presentation from Workshops I gave on basic web technologies..
HTML, CSS and all practice files and other presentations from previous presentations are here
http://bit.ly/1nhL0MY
HTML, CSS and all practice files and other presentations from previous presentations are here
http://bit.ly/1nhL0MY
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Web Basics
BY ARPIT GOYAL
WHY?(You may surely skip it) Why learning web development
The honest and straight answer? Because it's fun. And because it pays well. Being 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. Or so it seems but it is not the case for everybody. Many, many people have ideas that will never see the light of day. 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 make it something tangible. Something remarkable. Instead of launching a crusade to find the holy grail of entrepreneurs (the famous 'technical co-founder'), why not let it be you?
From another angle, not everybody is dreaming of creating a company. Some want to be employed but that doesn't mean working a dull, dead-end, job. Companies are hiring web developers and from what I see, with the recent shift in the technical job market, now is the time to be a web developer. From 2005 until 2010, all the rage in the corporate world, was to be a 'project manager', a 'process manager', a '[insert some word] manager'. Now, corporations realized that you still need people who can 'get shit done'. And they also realize that there are not many people out there fitting that description.
Fromhttp://blog.nicoschuele.com/
BY ARPIT GOYAL
So, either this or this, first Basics
WEB APPS or WEBSITESFRONT-END OR BACK-END
BY ARPIT GOYAL
Arpit Goyal (Information Technology Undergraduate)Email/g+:
arpitgoyal92Website:
goyalarpit.comFacebook:
rexofallTwitter:
rexofallContact no.
+91 78281 02492
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>
arpit goyal
arpit goyal
a less than sign then text lets say elephant and then greater then sign
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:
◦ Adobe Dreamweaver◦ Microsoft Expression Web
BY ARPIT GOYAL
Step 1: Open NotepadTo 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 HTMLWrite or copy some HTML into Notepad.Example
Step 3: Save the HTML PageSave 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 BrowserDouble-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
Collapse
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
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>#three{color: red;}</style></head><body><p>line one</p><p>line two</p><p id=“three”>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>
BY ARPIT GOYAL
BY ARPIT GOYAL
Developer Frontend 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…
Backend 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.
From I don’t Speak Your Languagehttp://blog.teamtreehouse.com
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
Arpit Goyal (Information Technology Undergraduate)Email/g+:
arpitgoyal92Website:
goyalarpit.comFacebook:
rexofallTwitter:
rexofallContact no.
+91 78281 02492
Thank You-ARPIT GOYAL
Related Documents
