Web development basics2
Post on 11-Jan-2015
88 Views
Preview:
DESCRIPTION
Transcript
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 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>
</body>
</html>
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>
<!--Make me into a comment.-->
</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
top related