KEMBAR78
web development basics tables part2 | PPTX
WEB DEVELOPMENT BASICS
BY
KALLURI VINAY REDDY
12MSE1013
VIT CHENNAI
TOPICS
Head of tables
Naming your Table
Styles in heads
Introduction to div tag, span.
HEAD OF THE TABLE
To make our table look a little more like a table, we’ll use the
<thead> and <tbody> tags
These go within the <table> tag and stand for table head and table
body ,respectively
The <head> HTML tag contains information about a web page
The <body> tag contains the contents of the web page.
The <thead> tag can be thought of as containing information about a
table and the <tbody> tag containing the actual tabular data.
SAMPLE CODE
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="10px">
<tbody>rich</tbody>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
</table>
</body>
</html>
TABLE HEADS
We have just added a <thead> tag above the <tbody>.
It will hold the heading for each column.
SAMPLE
CODE FOR
TABLE
HEAD
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<thead>VINAY</thead>
<tr>
<th>items</th>
<th>names</th>
</tr>
<td>
famous monster
</td>
<td>monkey</td>
</tbody> </table>
</body></html>
NAMING YOUR TABLE
Our table is missing a little.
We want to add a title row that goes all the way across the
top.
To do so, we need to use the colspan attribute for the <th>
tag.
By default table cells take up 1 column
If we want a table cell to take up the space of 3 columns
instead of 1 ,we can set the colspan attribute to 3
SAMPLE CODE
<html>
<head>
<title>Table Time</title>
</head><body>
<table border="10px">
<thead>
<tr> <th>Famous Monsters by Birth Year</th>
<th colspan="2">what the next</th>
</tr> <tr>
<th>Famous Monster</th>
<th colspan="2">Birth Year</th> </tr>
</thead>
<tbody>
<tr>
<td>King Kong</td> <td>1933</td>
</tr>
</tbody></table></body></html>
STYLE THE TABLE
Your table is starting to look great, but it's still a little bland.
We've gone ahead and added some styling to the table to make it a bit
easier to read.
It's your job to add the finishing touches!
Note:
Code cannot be give because of the number of lines if needed can be
requested through mail.
INTRODUCTION TO DIV TAG, SPAN.
‘DIV’ide and conquer
One of the most versatile structure tags available to you is
the <div></div> tag
Short for “division “ ,<div> allows your page into containers
(that is, different pieces).
This will come in handy when you begin learning CSS in the
next coming classes where you’ll be able to style different
parts of your website individually
SAMPLE CODE
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<div style="width:50px;height:50px;background-color:yellow"></div>
</body></html>
HOW TO LINK THEM ?
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body>
<div style="width:50px; height:50px; background-color:red"></div>
<div style="width:50px; height:50px; background-color:blue"></div>
<div style="width:50px; height:50px; background-color:green"></div>
<a href="www.google.co.in"><div style="width:50px; height:50px; background-
color:yellow"></div></a>
</body></html>
The code in the above slide divides the web page into four parts
Each part has its own colour and size.
But the yellow colour in the web page when you click it goes to the
google website
That is linking is done through the <a></a> tags very important tags
in the webpage design.
SPAN
• <span> allows you to control styling for smaller parts of your page,
such as text
• For example , if you always want the first word of your paragraphs
to be red
• You can do it by wrapping each first word in <span></span> tags .
SAMPLE CODE FOR SPAN
<!DOCTYPE html>
<html>
<head>
<title></title> </head>
<body>
<p>This text is black, except for the word <span
style="color:red">red</span>!</p>
</body>
</html>
With this we have completed major elements in web designing
without adding any decoration or animation we can say effects in
later slides I will discuss about them clearly relating to the HTML
concepts
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 basics tables part2

  • 1.
    WEB DEVELOPMENT BASICS BY KALLURIVINAY REDDY 12MSE1013 VIT CHENNAI
  • 2.
    TOPICS Head of tables Namingyour Table Styles in heads Introduction to div tag, span.
  • 3.
    HEAD OF THETABLE To make our table look a little more like a table, we’ll use the <thead> and <tbody> tags These go within the <table> tag and stand for table head and table body ,respectively The <head> HTML tag contains information about a web page The <body> tag contains the contents of the web page. The <thead> tag can be thought of as containing information about a table and the <tbody> tag containing the actual tabular data.
  • 4.
    SAMPLE CODE <html> <head> <title>Table Time</title> </head> <body> <tableborder="10px"> <tbody>rich</tbody> <tr> <td>King Kong</td> <td>1933</td> </tr> </table> </body> </html>
  • 5.
    TABLE HEADS We havejust added a <thead> tag above the <tbody>. It will hold the heading for each column.
  • 6.
    SAMPLE CODE FOR TABLE HEAD <html> <head> <title>Table Time</title> </head> <body> <tableborder="1px"> <thead>VINAY</thead> <tr> <th>items</th> <th>names</th> </tr> <td> famous monster </td> <td>monkey</td> </tbody> </table> </body></html>
  • 7.
    NAMING YOUR TABLE Ourtable is missing a little. We want to add a title row that goes all the way across the top. To do so, we need to use the colspan attribute for the <th> tag. By default table cells take up 1 column If we want a table cell to take up the space of 3 columns instead of 1 ,we can set the colspan attribute to 3
  • 8.
    SAMPLE CODE <html> <head> <title>Table Time</title> </head><body> <tableborder="10px"> <thead> <tr> <th>Famous Monsters by Birth Year</th> <th colspan="2">what the next</th> </tr> <tr> <th>Famous Monster</th> <th colspan="2">Birth Year</th> </tr> </thead> <tbody> <tr> <td>King Kong</td> <td>1933</td> </tr> </tbody></table></body></html>
  • 9.
    STYLE THE TABLE Yourtable is starting to look great, but it's still a little bland. We've gone ahead and added some styling to the table to make it a bit easier to read. It's your job to add the finishing touches! Note: Code cannot be give because of the number of lines if needed can be requested through mail.
  • 10.
    INTRODUCTION TO DIVTAG, SPAN. ‘DIV’ide and conquer One of the most versatile structure tags available to you is the <div></div> tag Short for “division “ ,<div> allows your page into containers (that is, different pieces). This will come in handy when you begin learning CSS in the next coming classes where you’ll be able to style different parts of your website individually
  • 11.
    SAMPLE CODE <!DOCTYPE html> <html> <head> <title>Result</title> </head> <body> <divstyle="width:50px; height:50px; background-color:red"></div> <div style="width:50px; height:50px; background-color:blue"></div> <div style="width:50px; height:50px; background-color:green"></div> <div style="width:50px;height:50px;background-color:yellow"></div> </body></html>
  • 12.
    HOW TO LINKTHEM ? <!DOCTYPE html> <html> <head> <title>Result</title> </head> <body> <div style="width:50px; height:50px; background-color:red"></div> <div style="width:50px; height:50px; background-color:blue"></div> <div style="width:50px; height:50px; background-color:green"></div> <a href="www.google.co.in"><div style="width:50px; height:50px; background- color:yellow"></div></a> </body></html>
  • 13.
    The code inthe above slide divides the web page into four parts Each part has its own colour and size. But the yellow colour in the web page when you click it goes to the google website That is linking is done through the <a></a> tags very important tags in the webpage design.
  • 14.
    SPAN • <span> allowsyou to control styling for smaller parts of your page, such as text • For example , if you always want the first word of your paragraphs to be red • You can do it by wrapping each first word in <span></span> tags .
  • 15.
    SAMPLE CODE FORSPAN <!DOCTYPE html> <html> <head> <title></title> </head> <body> <p>This text is black, except for the word <span style="color:red">red</span>!</p> </body> </html>
  • 16.
    With this wehave completed major elements in web designing without adding any decoration or animation we can say effects in later slides I will discuss about them clearly relating to the HTML concepts
  • 17.
    REFERENCES www.codecademy.com Head first webdesign . Learning web design-Jennifer Niederst Robbins www.w3schools.com
  • 18.
    Thank you Any doubts Email:kalluri.vinayreddy@gmail.com