WEB DEVELOPMENT BASICS
KALLURI VINAY REDDY
12MSE1013
VIT CHENNAI
by
HTML AND CSS
LECTURE 3
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...
IMAGE THAT LEADS TO ANOTHER PAGE
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<a href="http://www.codecad...
ORDERED LIST
Let's continue learning more HTML. You've already covered a lot
In this course, I will take it to the next le...
ORDERED LIST
• Ordered list is simply a list that is numbered which will be explained in the
example.
• The opening of the...
SAMPLE CODE
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>List of my favorite things</h1>
<ol>
<li...
UNORDERED LIST
• We just learned how to make ordered lists, but if the order doesn’t matter, what
if we just want the bull...
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...
SAMPLE CODE
<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h1>create random list</h1>
<p>the...
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 inter...
SAMPLE CODE FOR
UNORDERED LIST
<!DOCTYPE html>
<html>
<head>
<title>Nested lists in unordered list</title>
</head>
<body>
...
MAKING COMMENTS
<html>
<body>Make me into a comment
<p>But leave me visible to the user!
</p>
<!--Make me into a comment.-...
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
Upcoming SlideShare
Loading in …5
×

Web development basics2

240 views

Published on

this is about the accessing the images with links ,ordered list. unordered list,list in a list.

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
240
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web development basics2

  1. 1. WEB DEVELOPMENT BASICS KALLURI VINAY REDDY 12MSE1013 VIT CHENNAI by
  2. 2. HTML AND CSS LECTURE 3
  3. 3. TOPICS LECTURE 3 1. IMAGES AND LINKS 2. ORDERED LIST 3. UNORDERED LIST 4. LIST INSIDE A LIST
  4. 4. 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.
  5. 5. 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>
  6. 6. 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
  7. 7. 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
  8. 8. 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>
  9. 9. 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
  10. 10. 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
  11. 11. 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>
  12. 12. LIST INSIDE IN LIST • Little bit of confusion but very interesting in adding them to the ordered list and unordered list.
  13. 13. 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>
  14. 14. 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>
  15. 15. MAKING COMMENTS <html> <body>Make me into a comment <p>But leave me visible to the user! </p> <!--Make me into a comment.--> </body> </html>
  16. 16. REFERENCES • www.codecademy.com Head first web design . Learning web design-Jennifer Niederst Robbins www.w3schools.com
  17. 17. Thank you Any doubts Email: kalluri.vinayreddy@gmail.com

×