Web development basics2

WEB DEVELOPMENT BASICS
KALLURI VINAY REDDY
12MSE1013
VIT CHENNAI
by

TOPICS
LECTURE 3
1. IMAGES AND LINKS
2. ORDERED LIST
3. UNORDERED LIST
4. LIST INSIDE A LIST

IMAGES WITH LINKS
• Till now we have seen how to add images in the web site.
• But now we will have redirect in to another webpage when
we click on that image it is the most and common one we
seen in almost every webpages.

IMAGE THAT LEADS TO ANOTHER PAGE
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<a href="http://www.codecademy.com">
<img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
</a>
</body>
</html>

ORDERED LIST
Let's continue learning more HTML. You've already covered a lot
In this course, I will take it to the next level:
a. Making ordered and unordered lists
b. list inside a list

ORDERED LIST
• Ordered list is simply a list that is numbered which will be explained in the
example.
• The opening of the ordered list is followed by <ol> </ol>.
• Inside the <ol> the list what ever you want to write can be done in this section.
• It follows as <li> </li> this follows the list sequence and gives number
according the order it goes.
• It is very basic that to remembered through out the course

SAMPLE CODE
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>List of my favorite things</h1>
<ol>
<li>raindrops on roses</li>
<li>whiskas on kittens</li>
<li>call of duty: modern warfare</li>
</ol>
<h2>List of things i find OK!</h2>
<ol>
<li>i like to be a great lover</li>
<li>i like to be a great software engineer</li>
<li>i like to be great man </li>
</ol>

UNORDERED LIST
• We just learned how to make ordered lists, but if the order doesn’t matter, what
if we just want the bullet points?
• Ans: unordered list

STEPS:
• 1. First, we open our list with an unordered list <ul> tag.
• 2. For each item we wish to add to the list, we use a list item tag <li> with text
between them.
• 3.We then tell the browser we are done with our list by calling our closing
</ul> tag

SAMPLE CODE
<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h1>create random list</h1>
<p>the random list for the unorder</p>
<ul>
<li>m</li>
<li>n</li>
<li>ee</li>
<li>ert</li>
</ul>
</body>
</html>

LIST INSIDE IN LIST
• Little bit of confusion but very interesting in adding
them to the ordered list and unordered list.

SAMPLE CODE FOR
ORDERED LIST
<!DOCTYPE html>
<html>
<head>
<title>Nested lists</title>
</head>
<body>
<ol>
<li>Dad's interests
<ul>
<li>football</li>
<li>knitting</li>
</ul>
</li>
<li>Mom's interests
<ul>
<li>hating football</li>
<li>skydiving</li>
</ul>
</li> </ol> </body> </html>

SAMPLE CODE FOR
UNORDERED LIST
<!DOCTYPE html>
<html>
<head>
<title>Nested lists in unordered list</title>
</head>
<body>
<li>Favorite food</li>
<ol>
<li>chicken</li>
<li>hyderabad dum ki biryani</li>
</ol>
<li>Favorite singers</li>
<ol>
<li>sp balasubramanyam</li>
<li>DSP</li>
</ol>
</ul> </body> </html>

MAKING COMMENTS
<html>
<body>Make me into a comment
<p>But leave me visible to the user!
</p>

</body>
</html>

REFERENCES
• www.codecademy.com
Head first web design .
Learning web design-Jennifer Niederst Robbins
www.w3schools.com

Thank you
Any doubts
Email: kalluri.vinayreddy@gmail.com

Web development basics2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Web development basics2

Ähnlich wie Web development basics2 (20)

Mehr von Kalluri Vinay Reddy

Mehr von Kalluri Vinay Reddy (12)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Web development basics2