Scribd Logo
Upload

Welcome to Scribd!

  • Highlighting HTML Web Page Links 1) : HTML Layouts - Using Tables

    Uploaded by

    Akhila Reddy
    20 views5 pages
    The simplest way of creating layouts is by using the HTML tag. The following example uses a table with 3 rows and 2 columns. Using styles in HTML All header 1 elements will be red All header 2 elements will be blue All text in paragraphs will be green.

    Original Description:

    Original Title

    WT1

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The simplest way of creating layouts is by using the HTML tag. The following example uses a table with 3 rows and 2 columns. Using styles in HTML All header 1 elements will be red All header 2 elements will be blue All text in paragraphs will be green.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    20 views5 pages

    Highlighting HTML Web Page Links 1) : HTML Layouts - Using Tables

    Uploaded by

    Akhila Reddy
    The simplest way of creating layouts is by using the HTML tag. The following example uses a table with 3 rows and 2 columns. Using styles in HTML All header 1 elements will be red All header 2 elements will be blue All text in paragraphs will be green.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    http://www.anaesthetist.com/mnm/javascript/calc.

    htm

    http://www.angelfire.com/fl5/html-tutorial/ http://www.web-source.net/html_codes_chart.htm http://www.w3schools.com/html/html_colornames.asp http://www.sciencebuddies.org/science-fairprojects/project_ideas/CompSci_p001.shtml

    Highlighting HTML Web Page Links


    <A HREF="http://www.yourdomain.com/" STYLE="background:yellow; color:black" TARGET="blank">http://www.yourdomain.com/</A>

    1) HTML Layouts - Using Tables


    The simplest way of creating layouts is by using the HTML <table> tag. The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:

    Example
    < html> < body> < < < < < < table width="500" border="0"> tr> td colspan="2" style="background-color:#FFA500;"> h1>Main Title of Web Page</h1> /td> /tr>

    < tr valign="top"> < td style="background-color:#FFD700;width:100px;text-align:top;"> < b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript < /td> < td style="background-color:#EEEEEE;height:200px;width:400px;textalign:top;"> Content goes here</td> < /tr> < tr> < td colspan="2" style="background-color:#FFA500;text-align:center;"> Copyright 2011 W3Schools.com</td> < /tr> < /table> < /body> < /html>

    HTML Layouts - Using Div Elements


    The div element is a block level element used for grouping HTML elements. The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:

    Example
    < html> < body> < div id="container" style="width:500px"> < div id="header" style="background-color:#FFA500;"> < h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> < div id="menu" style="backgroundcolor:#FFD700;height:200px;width:100px;float:left;"> < b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript</div> < div id="content" style="backgroundcolor:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> < div id="footer" style="background-color:#FFA500;clear:both;textalign:center;"> Copyright 2011 W3Schools.com</div> < /div> < /body> < /html>
    3)Using styles in HTML

    <html> <head> <style type="text/css"> h1 {color:red;} h2 {color:blue;} p {color:green;}

    </style> </head>

    <body>

    <h1>All header 1 elements will be red</h1> <h2>All header 2 elements will be blue</h2> <p>All text in paragraphs will be green.</p>

    </body> </html>
    . Link to an external style sheet

    <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> </head>

    <body> <h1>I am formatted with an external style sheet</h1> <p>Me too!</p> </body> </html>

    Tutorials > HTML Example Programs > 2. Basic HTML Programs With CSS Contents 1 1.Set the background color 2 2.Set an image as the background 3 3.How to repeat a background image 4 4.How to repeat a background image only vertically 5 5.How to repeat a background image only horizontally 6 6.How to display a background image only one time 7 7.How to place the background image 8 8.How to position a background image using % 9 9.How to position a background image using pixels 10 10.A fixed background image (this image will not scroll with the rest of the page) 11 11.All the background properties in one declaration 1.Set the background color <html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2>

    You might also like