Who am I?

Prashanth

http://github.com/itsPR

Founder StudyOwl

Ex-Facebook & Intuit

Founder,Lead Organizer Developer Weekend

AGENDA

AGENDA

Framework for building Native apps

HTML

Tools

1)Text editor, ( Sublime or atom)

2)Browser ( Chrome)

Web Development

What is HTML?

Hyper Text Markup Language
Standard for writing web pages
HTML Tags - 1991
HTML 2.0 - 1995
HTML 4.0 - 1997
HTML 5.0 - ¿2014?

What is HTML?

Hypertext Markup Language

                      



               Why I Love this Course

WEB PAGES that run in a web browser (client side)

1

What is HTML?

Hypertext Markup Language

<html>
<head>

</head>
<body>
Why I Love this Course
</body>
</html>

<TagName> ..... </TagName>

Tags

Opening Tag

Closing Tag

<html> ........ </html>

html

Opening Tag

Closing Tag

Basic Structure of Html

<html>
    
    <head>
        .......
    </head>

    <body>
        .......
    </body>

</html>

Not Visible

Content

Visible Content

Paragraph

<p>
This tag is used to
display text in paragraph.
Go ahead and try this tag
in your code and
see how it is displayed
</p>

Br tag

<p>
This tag is used to <br>
display text in paragraph. <br>
Go ahead and try this tag <br>
in your code and <br>
see how it is displayed <br>
</p>

This tag is used to
display text in paragraph.
Go ahead and try this tag
in your code and
see how it is displayed

Code

What you see

Let us give heading to paragraph

<h1> Heading </h1>

<p>
This tag is used to
display text in paragraph.
Go ahead and try this tag
in your code and
see how it is displayed
</p>

Heading

This tag is used to
display text in paragraph.
Go ahead and try this tag
in your code and
see how it is displayed

Code

What you see

6 Heading

<h1> Heading </h1>

<h2> Heading </h2>

<h3> Heading </h3>

<h4> Heading </h4>

<h5> Heading </h5>

<h6> Heading </h6>

Code

What you see

Horizontal line

<h1 > Heading </h1 >

<hr >

<P>
This tag is used to
display text in paragraph.
Go ahead and try this tag
in your code and
see how it is displayed
</p >

Code

What you see

Text formating

<b> bold </b>

<i> italic </i>

<u> underlined </u>

<sup> superscript </sup>

<sub> subscript </sub>

Attributes

<p align="center"> hello </p>

attribute name

value

Attributes example


<h1 align="center">
     TajMahal was built in 
    ...blahhh ....blahh....blahh 
</h1>

Anchor tag

<a href="http://www.google.com">
     google 
</a>

Image

<img src="tiger.jpg">

source of image

Image path

Create a simple webpage

Unodered List

<ul>
  <li>tiger</li>
  <li>lion</li>
  <li>elephant</li>
</ul>

list item

Odered List

<ol>
  <li>tiger</li>
  <li>lion</li>
  <li>elephant</li>
</ol>

list item

Table

<table border="1px">
  <tr>
    <td>Animal</td>
    <td>Bird</td> 
    <td>Fruit</td>
  </tr>
  <tr>
    <td>Tiger</td>
    <td>Peacock</td> 
    <td>Mango</td>
  </tr>
</table>

Row data

Row data

Row

Row

Create Table

Form

<form> . . . </form>

Input Tag

 <input type="  " />

Input Tag



<input type="

text
number
password
submit
radio
checkbox



<input type=""  />

"

Input Text

 <input type="text" name="myText" value="StudyOwl" />

Code

What you see

Input Date

<input type="date" name="myDate" />

Code

What you see

<textarea rows="4" cols="50">
At StudyOwl you will learn how to make a website.
We offer tutorials in all web 
development technologies.
</textarea>

Code

What you see

TextArea

The size of a text area can be specified by the cols and rows attributes

<select>
  <option>Google</option>
  <option>Facebook</option>
  <option>Microsoft</option>
  <option>Twitter</option>
</select>

Code

What you see

Select tag

Create From

Copy of Copy of Developer Weekend

By Prashanth Reddy

Copy of Copy of Developer Weekend

next to deck

2,308

Prashanth Reddy