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
Tools
1)Text editor, ( Sublime or atom)
2)Browser ( Chrome)
Web Development
What is HTML?
Hypertext Markup Language
Why I Love this Course
WEB PAGES that
Hypertext Markup Language
<html>
<head>
</head>
<body>
Why I Love this Course
</body>
</html>
<TagName> ..... </TagName>
Opening Tag
Closing Tag
<html> ........ </html>
Opening Tag
Closing Tag
<html>
<head>
.......
</head>
<body>
.......
</body>
</html>
Not Visible
Content
Visible Content
<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>
<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
<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>
This tag is used to
display text in paragraph.
Go ahead and try this tag
in your code and
see how it is displayed
<h1> Heading </h1>
<h2> Heading </h2>
<h3> Heading </h3>
<h4> Heading </h4>
<h5> Heading </h5>
<h6> Heading </h6>
<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 >
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