Web development basics2
Download as PPTX, PDF0 likes291 views
This document provides an overview of HTML and CSS topics covered in Lecture 3, including images and links, ordered lists, unordered lists, and lists inside lists. It begins with explaining how to add an image that links to another webpage using HTML anchor tags. Next, it discusses how to make ordered and unordered lists, providing examples of the code structure and syntax. Finally, it demonstrates how to nest lists inside each other, such as adding an ordered list inside an unordered list parent item. The document aims to teach basic HTML list structures and linking images to other pages to take readers' web development skills to the next level.
More Related Content
What's hot (20)
Similar to Web development basics2 (20)
More from Kalluri Vinay Reddy (12)
Recently uploaded (20)
Web development basics2
- 1. WEB DEVELOPMENT BASICS KALLURI VINAY REDDY 12MSE1013 VIT CHENNAI by
- 2. HTML AND CSS LECTURE 3
- 3. TOPICS LECTURE 3 1. IMAGES AND LINKS 2. ORDERED LIST 3. UNORDERED LIST 4. LIST INSIDE A LIST
- 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. 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. 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. 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. 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. 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. 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. 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. LIST INSIDE IN LIST • Little bit of confusion but very interesting in adding them to the ordered list and unordered list.
- 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. 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. 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. REFERENCES • www.codecademy.com Head first web design . Learning web design-Jennifer Niederst Robbins www.w3schools.com