PHP Training in Ahmedabad

1

• HTML (Hyper Tax Markup Language
• AND
• CSS(Cascading Style Sheet)

2
Introduction of HTML

• Short for Hyper Text Markup Language, the
  authoring language used to create documents on
  the World Wide Web. 
• Hyper Text is the method by which you move around
  on the web by clicking on special text
  called hyperlinks which bring you to the next
  page. The fact that it is hyper just means it is
  not linear i.e. you can go to any place on the
  Internet whenever you want by clicking on links
  there is no set order to do things in.
• Markup is what HTML tags do to the text inside
  them. They mark it as a certain type of text
  (italicised text, bold text for example).

3
What is HTML Tags ?

• HTML markup tags are usually called HTML tags
• HTML tags are keywords surrounded by angle
  brackets like lthtmlgt
• HTML tags normally come in pairs like ltbgt and
  lt/bgt
• The first tag in a pair is the start tag, the
  second tag is the end tag
• Start and end tags are also called opening tags
  and closing tags

4
Attribute Example

• HTML links are defined with the ltagt tag. The link
  address is specified in the href attribute
• lta href"http//www.google.com"gtThis is a
  linklt/agt

5
Your First HTML Example

• lthtmlgt
• ltheadgt
• lttitlegtFirst Programlt/titlegt
• lt/headgt
• ltbodygt
• lt!-- The main part of your web page. --gt
• lt/bodygt
• lt/htmlgt

6
Explanation

• lthtmlgtTag
• The root element that specifies that the
  content of the document is HTML. The html element
  must contain the head and the body elements.
• ltheadgt Tag
• The header of an HTML document where
  information about the document is placed. You
  must use the title element within the head
  element and meta, style, script, link can also be
  used.

7
Continue

• ltbodygt Tag
•  The main body of an HTML document where all of
  the content is placed. You must use this element
  and it should be used just once. It must start
  immediately after the closing head tag and end
  directly before the closing html tag.
• lttitlegt Tag
• Defines the title of a page. You must have a
  title element to produce a valid document and it
  must be placed within the head element.

8
Html body Tag Attributes

• alink - Use styles instead. Specifies the color
  of an active link in a document
• background - Use styles instead. Specifies a
  background image for a document
• bgcolor - Specifies the background color of a
  document
• link - Specifies the default color of unvisited
  links in a document
• text - Specifies the color of the text in a
  document
• vlink - Specifies the color of the visited links
  in a document

9
Example

• lthtmlgt
• ltheadgt
• lttitlegtH1 To H6 Examplelt/titlegt
• ltbody bgcolor"pink"gt
• ltfont color"green"gtlth1gtVaaYaaEdutech.comlt/fontgtlt/
  h1gt
• ltfont color"white"gtlth2gt VaaYaaEdutech.com
  lt/fontgtlt/h2gt
• ltfont color"orange"gtlth3gt VaaYaaEdutech.com
  lt/fontgtlt/h3gt
• ltfont color"purple"gtlth4gt VaaYaaEdutech.com
  lt/fontgtlt/h4gt
• ltfont color"red"gtlth5gt VaaYaaEdutech.com
  lt/fontgtlt/h5gt
• ltfont color"black"gtlth6gt VaaYaaEdutech.com
  lt/fontgtlt/h6gt
• lt/bodygt
• lt/htmlgt

10
ltsubgt Tag

• Use for to subscript the value.
• Example
• lthtmlgt
• ltheadgt
• lttitlegtSubscript examplelt/titlegt
• ltbody bgcolor"pink"gt
• ltpgtVaaYaa ltsubgtEdu.comlt/subgtlt/pgt
• lt/bodygtlt/htmlgt

11
Out put
12
ltsupgt Tag

• Use for to supperscript the value.
• Example
• lthtmlgt
• ltheadgt
• lttitlegtSupperscript examplelt/titlegt
• ltbody bgcolor"pink"gt
• lth1gtltpgtHltsupgt2lt/h1gtlt/supgtlt/pgt
• lt/bodygt
• lt/htmlgt

13
ltbrgt Tag

• A line break. The ltbrgt tag is an empty tag which
  means that it has no end tag.
• Example
• lthtmlgt
• ltheadgt
• lttitlegtpre taglt/titlegt
• lt/headgt
• ltbody bgcolorpinkgt
• ltpgtlth1gtMy name is xyzltbr /gt
• and I am Indianlt/h1gtlt/pgt
• lt/bodygtlt/htmlgt

14
ltbrgt Tag

• A line break.
• lthtmlgt
• ltheadgt
• lttitlegtpre taglt/titlegt
• lt/headgt
• ltbody bgcolorpinkgt
• ltpgtlth1gtMy name is xyzltbr /gt
• and I am Indianlt/h1gtlt/pgt
• lt/bodygtlt/htmlgt

15
Introduction of CSS

• What is the full form of CSS?
• Cascading Style Sheet
• Why we use CSS?
• We use CSS to control the style and layout of
  multiple Web pages all at once.
• HTML was never intended to contain tags for
  formatting a document.
• HTML was intended to define the content of a
  document, like
• lth1gtThis is a headinglt/h1gt
• ltpgtThis is a paragraph.lt/pgt

16
Continue

• What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files
• How to write comment ?
• A CSS comment begins with "/", and ends with
  "/", like this
• /This is a comment/ptext-aligncenter/Thi
  s is another comment/colorblackfont-familyar
  ial

17
CSS Styling

• Background-color
• transparent(default),inherit
• Background-position
• left top,left center,left bottom,right top
  ,right center,
• right bottom,center top ,center ,center bottom
• Background-size
• Specifies the size of the background images

18
lthtmlgt ltheadgt ltstyle type"text/css"gt
body background-imageurl("Blue
hills.jpg") background-colorpink background-rep
eatno-repeat background-attachmentfixed backgr
ound-positioncenter lt/stylegt lt/headgt ltbodygt
lt/bodygt lt/htmlgt
19
Margin

• margin25px 50px 75px 100px
• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px
• margin25px 50px 75px
• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px
• margin25px 50px
• top and bottom margins are 25px
• right and left margins are 50px
• margin25px
• all four margins are 25px

20
VaaYaa Edu

• VaaYaa Education Training And Placement,A/1/A,
  3rd Floor, VaaYaa Lobby,Chinubhai Tower, Next to
  H K College,Ashram Road, Income Tax,Gujarat,
  Ahmedabad- 380009
• Call Us Now 919586979730
• vaayaaedu_at_gmail.com

21

• VaaYaa Edutech Training And Placement,A/1/A,
  3rd Floor, VaaYaa Lobby,Chinubhai Tower, Next to
  H K College,Ashram Road, Income Tax,Gujarat,
  Ahmedabad- 380009
• Call Us Now 919586979730
• vaayaaedu_at_gmail.com

22

• PHP Training In Ahmedabad
• VaaYaa Edutech Training And Placement,A/1/A,
  3rd Floor, VaaYaa Lobby,Chinubhai Tower, Next to
  H K College,Ashram Road, Income Tax,Gujarat,
  Ahmedabad- 380009
• Call Us Now 919586979730
• vaayaaedu_at_gmail.com