Who am I?

Prashanth

http://github.com/itsPR

Founder StudyOwl

AGENDA

1)Trending Programming Languages

3)Introduction To Web Development

2)Programming for Startup Or Job!!

4)HTML

5)CSS

6)Bootstrap

7)Introduction to Android Development

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>
<title>Why I Love this Course</title>
</head>
<body>

</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

Visible

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

pre tag

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

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>

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

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 >

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

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

<p title="About TajMahal">
     TajMahal was built in 
    ...blahhh ....blahh....blahh 
</p>

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

Table

Table

<table border="1px">
  <tr>
    <td>Animal</td> 
    <td colspan="2">Bird</td>
  </tr>
  <tr>
     <td>Tiger</td>
     <td>Peacock</td>
     <td>Parrot</td>
  </tr>
</table>

Table

<table border="1px">
  <tr>
    <td rowspan="2">Tiger</td> 
    <td>Mango</td>
  </tr>
  <tr>
    <td>Lion</td>
  </tr>
</table>

Create Table

Form

<form> . . . </form>

Input Tag



<input type="

text
number
password
submit
radio
checkbox



<input type="" name=" " value=" " />

"

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

<select>
  <option value="google">Google</option>
  <option value="facebook">Facebook</option>
  <option value="microsoft">Microsoft</option>
  <option value="twitter">Twitter</option>
</select>

Code

What you see

Select tag

Create From

HTML

By Prashanth Reddy

HTML

next to deck

752

Prashanth Reddy