Web development basics2
•Descargar como PPTX, PDF•
0 recomendaciones•289 vistas
this is about the accessing the images with links ,ordered list. unordered list,list in a list.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a Web development basics2
Similar a Web development basics2 (20)
Más de Kalluri Vinay Reddy
Más de Kalluri Vinay Reddy (12)
Último
Último (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
- 17. Thank you Any doubts Email: kalluri.vinayreddy@gmail.com