Web 101: Introduction to HTML & CSS

Session 1: Web Developement Basics HTML & CSS Anil Shanbhag
Saif Hasan

You don’t have to be a Web Ninja to understand
Web development basics. “ ”

Components of Web Developement

In this session we will be doing basics of HTML
and CSS.

What is HTML? Hyper Text Markup Language Hypertext Markup Language
describes: Structure Content Typographic Hierarchy Rudimentry Style (strong,emphasis etc.) · · · ·

Some HTML Code It might feel chaotic and unstructured But
the entire content of the page exists here. < ! D O C T Y P E h t m l > < h t m l > < h e a d > < t i t l e > M y A w e s o m e P a g e < / t i t l e > < / h e a d > < h 1 > H e l l o w o r l d < / h 1 > < h 2 > S e s s i o n 1 : < / h 2 > < h 3 > H T M L & C S S < / h 3 > S i m p l e P a r a g r a p h < s t r o n g > S t r o n g < / s t r o n g > a n d < e m > E m a p h a c i s e d < / e m > t e x t . < / h t m l > H T M L

What user sees?

Revisiting the Code HTML has open and closed brackets which
are called tags. < ! D O C T Y P E h t m l > < h t m l > < h e a d > < t i t l e > M y A w e s o m e P a g e < / t i t l e > < / h e a d > < h 1 > H e l l o w o r l d < / h 1 > < h 2 > S e s s i o n 1 : < / h 2 > < h 3 > H T M L & C S S < / h 3 > S i m p l e P a r a g r a p h < s t r o n g > S t r o n g < / s t r o n g > a n d < e m > E m a p h a c i s e d < / e m > t e x t . < / h t m l > H T M L

A Sample Html Tag

Revisiting Code The <!DOCTYPE html> declaration instructs about the version
of HTML. < ! D O C T Y P E h t m l > < h t m l > < h e a d > < t i t l e > M y A w e s o m e P a g e < / t i t l e > < / h e a d > < h 1 > H e l l o w o r l d < / h 1 > < h 2 > S e s s i o n 1 : < / h 2 > < h 3 > H T M L & C S S < / h 3 > S i m p l e P a r a g r a p h < s t r o n g > S t r o n g < / s t r o n g > a n d < e m > E m a p h a c i s e d < / e m > t e x t . < / h t m l > H T M L

Revisiting Code The <html> tag tells the browser that this
is an HTML document. < ! D O C T Y P E h t m l > < h t m l > < h e a d > < t i t l e > M y A w e s o m e P a g e < / t i t l e > < / h e a d > < h 1 > H e l l o w o r l d < / h 1 > < h 2 > S e s s i o n 1 : < / h 2 > < h 3 > H T M L & C S S < / h 3 > S i m p l e P a r a g r a p h < s t r o n g > S t r o n g < / s t r o n g > a n d < e m > E m a p h a c i s e d < / e m > t e x t . < / h t m l > H T M L

Revisiting Code The <head> tag defines header information and links
to external files (such as css). < ! D O C T Y P E h t m l > < h t m l > < h e a d > < t i t l e > M y A w e s o m e P a g e < / t i t l e > < / h e a d > < h 1 > H e l l o w o r l d < / h 1 > < h 2 > S e s s i o n 1 : < / h 2 > < h 3 > H T M L & C S S < / h 3 > S i m p l e P a r a g r a p h < s t r o n g > S t r o n g < / s t r o n g > a n d < e m > E m a p h a c i s e d < / e m > t e x t . < / h t m l > H T M L

Revisiting Code The <title> tag describes the title of webpage.
< ! D O C T Y P E h t m l > < h t m l > < h e a d > < t i t l e > M y A w e s o m e P a g e < / t i t l e > < / h e a d > < h 1 > H e l l o w o r l d < / h 1 > < h 2 > S e s s i o n 1 : < / h 2 > < h 3 > H T M L & C S S < / h 3 > S i m p l e P a r a g r a p h < s t r o n g > S t r o n g < / s t r o n g > a n d < e m > E m a p h a c i s e d < / e m > t e x t . < / h t m l > H T M L

Revisiting Code The <body> tags defines the content area of
webpage. < ! D O C T Y P E h t m l > < h t m l > < h e a d > < t i t l e > M y A w e s o m e P a g e < / t i t l e > < / h e a d > < h 1 > H e l l o w o r l d < / h 1 > < h 2 > S e s s i o n 1 : < / h 2 > < h 3 > H T M L & C S S < / h 3 > S i m p l e P a r a g r a p h < s t r o n g > S t r o n g < / s t r o n g > a n d < e m > E m a p h a c i s e d < / e m > t e x t . < / h t m l > H T M L

Revisiting Code Other tags like h1 to h6, p, strong,
em etc. < ! D O C T Y P E h t m l > < h t m l > < h e a d > < t i t l e > M y A w e s o m e P a g e < / t i t l e > < / h e a d > < h 1 > H e l l o w o r l d < / h 1 > < ! - - t h i s i s h e a d i n g 1 - - > < h 3 > S e s s i o n 1 : < / h 3 > < ! - - t h i s i s h e a d i n g 3 - - > < h 5 > H T M L & C S S < / h 5 > < ! - - t h i s i s h e a d i n g 5 - - > S i m p l e P a r a g r a p h < ! - - t h i s p a r a g r a p h t a g - - > < s t r o n g > S t r o n g < / s t r o n g > a n d < ! - - t h i s i s t o m a k e t e x t b o l d - - > < e m > E m a p h a c i z e d < / e m > t e x t . < ! - - t h i s i s t o m a k e t e x t e m p h a c i z e d - - > < / h t m l > H T M L

Adding More Code The <a> tag is used to make
links to other pages. The tag is used to insert new line. The <img> tag is used to insert images on page. < a h r e f = " h t t p : / / w w w . g o o g l e . c o m " > G o o g l e < / a > H T M L H T M L H T M L

Now our page looks like

Adding Some Tables The <table> tag is used for making
tables. < t a b l e b o r d e r = " 1 " > < t r > < t h > H e a d e r 1 < / t h > < t h > H e a d e r 2 < / t h > < / t r > < t r > < t d > r o w 1 , c e l l 1 < / t d > < t d > r o w 1 , c e l l 2 < / t d > < / t r > < t r > < t d > r o w 2 , c e l l 1 < / t d > < t d > r o w 2 , c e l l 2 < / t d > < / t r > < / t a b l e > H T M L

Now our page looks like

Now Adding some lists The <ol> and <ul> tags are
used for making ordered and unordered lists. < o l > < l i > C l i e n t S i d e : < l i > P H P < / l i > < l i > J a v a < / l i > < l i > P y t h o n < / l i > < / l i > < l i > C l i e n t S i d e : < l i > H T M L < / l i > < l i > C S S < / l i > < l i > J a v a S c r i p t < / l i > < / l i > < / o l > H T M L

Now our page looks like this

We got all our data on our page but is
it looking good...?? no.. its boring... so add some fun and styling to it... lets do CSS

What is CSS? Cascading Style Sheets Separates style from content
Easier to change formatting and update an entire website Eliminate page load Flexible design Better use accessibility for search bots and screen readers · · · · ·

Changes in HTML CSS styling using <style> tags. Inline styling
using style attribute. Linking of External CSS file < h e a d > < s t y l e > < ! - - A d d y o u r C S S c o d e h e r e . - - > < / s t y l e > < / h e a d > H T M L T h i s i s a r e d c o l o r e d p a r a g r a p h . H T M L < h e a d > < l i n k r e l = s t y l e s h e e t h r e f = " s t y l e . c s s " t y p e = " t e x t / c s s " > < / h e a d > H T M L

Changes in HTML Using Id and Class attributes. < d i v i d = " h e a d e r " > T h e i d s e l e c t o r i s u s e d t o s p e c i f y a s t y l e f o r a s i n g l e , u n i q u e e l e m e n t . < / d i v > T h e c l a s s s e l e c t o r i s u s e d t o s p e c i f y a s t y l e f o r a g r o u p o f e l e m e n t s . U n l i k e t h e i d s e l e c t o r , t h e c l a s s s e l e c t o r i s m o s t o f t e n u s e d o n s e v e r a l e l e m e n t s . T h i s a l l o w s u s t o s e t a p a r t i c u l a r s t y l e f o r m a n y H T M L e l e m e n t s w i t h t h e s a m e c l a s s . H T M L

HTML file after adding id, classes and div tags <
! D O C T Y P E h t m l > < h t m l > < h e a d > < t i t l e > M y A w e s o m e P a g e < / t i t l e > < l i n k r e l = s t y l e s h e e t h r e f = " s t y l e . c s s " t y p e = " t e x t / c s s " > < / h e a d > < d i v i d = " c o n t a i n e r " > < d i v i d = " h e a d e r " > < h 1 > H e l l o W o r l d < / h 1 > < / d i v > < d i v i d = " s e s s i o n " > < h 3 > S e s s i o n 1 : < / h 3 > < / d i v > < d i v i d = " t o p i c " > < h 3 > H T M L a n d C S S < / h 3 > < / d i v > < d i v i d = " m a i n " > < d i v c l a s s = " p a r t s " > S i m p l e P a r a g r a p h . . . < / d i v > H T M L

HTML file < d i v c l a s
s = " p a r t s " > < t a b l e b o r d e r = " 1 " > < ! - - . . . t a b l e . . . - - > < / t a b l e > < / d i v > < d i v c l a s s = " p a r t s " > < o l > < ! - - . . . l i s t s . . . - - > < / o l > < / d i v > < / d i v > < d i v i d = " f o o t e r " > C o p y r i g h t © W n C C : P : P < / d i v > < / d i v > < / h t m l > H T M L

A Sample CSS selector

CSS file # c o n t a i n
e r { w i d t h : 9 0 0 p x ; m a r g i n : a u t o ; } / * # i s u s e d f o r s e l e c t i n g i d * / # h e a d e r , # s e s s i o n , # t o p i c , # f o o t e r { m a r g i n : 0 ; t e x t - a l i g n : c e n t e r ; } / * m u l e t e p l e e l e m e n t s c a n b e s e l e c t e d w i t h c o m m a * / # h e a d e r { b a c k g r o u n d - c o l o r : # 0 4 6 ; h e i g h t : 4 0 p x ; } h 1 , h 2 , h 3 { m a r g i n : 0 ; } / * d i r e c t l y t a g n a m e c a n a l s o b e u s e d t o s e l e c t * / # h e a d e r i m g { f l o a t : l e f t ; w i d t h : 1 0 0 p x ; h e i g h t : 4 0 p x ; } / * t h i s s e l e c t s i m g i n s i d e a n e l e m e n t w i t h i d h e a d e r * / # s e s s i o n { b a c k g r o u n d - c o l o r : # 4 4 4 ; c o l o r : # 6 0 1 ; } C S S

CSS file # t o p i c { b
a c k g r o u n d - c o l o r : # 7 7 7 ; c o l o r : # 6 0 1 ; } # m a i n { b a c k g r o u n d - c o l o r : # 9 9 9 ; o v e r f l o w : h i d d e n ; } . p a r t s { w i d t h : 3 3 % ; h e i g h t : 1 0 0 % ; f l o a t : l e f t ; p a d d i n g - l e f t : 3 p x ; } / * . i s u s e d f o r s e l e c t i n g c l a s s e s * / # r e d { c o l o r : r e d ; m a r g i n - l e f t : 2 0 p x ; } # f o o t e r { b a c k g r o u n d - c o l o r : # F F A 5 0 0 ; c l e a r : b o t h ; } C S S

After external CSS styling...

HTML vs CSS HTML is used for content and structure.
HTML houses scripting languages and behaviors. CSS separates style from content. CSS helps screen readers and users with disabilities read real content. · · · ·

A Brief intro to accessibility When building a Web site
consider accessibility issues for users. There are several things you can do to create good experiences for users · · Write good, descriptive headlines Write detailed paragraphs Write precise page titles Write descriptive image tags Write descriptive links, Don’t say ‘click here!’ Separate content from style · · · · · ·

Have you noticed one important thing in this session?? These
slides are also made using html, css and javascript.

<Thank You!> Join Us Google Group: https://groups.google.com/group/wncc_iitb/ Saif Hasan Anil
Shanbhag

Time to Implement... We will be conducting homepage making contest
for Freshers so start thinking about ideas... start learning html and css... More info will be posted on our google group so join it.

Web 101: Introduction to HTML & CSS

Web 101: Introduction to HTML & CSS

More Decks by Anil Shanbhag

Other Decks in Technology

Featured

Transcript