XHTML & CSS Tutorial files 2-46

+2 Predrag Kostic · August 26, 2014
I finished XHTML & CSS tutorial files, but couldn't find any files, so I made them for each tutorial. They may be of use to someone so I'll post them here!

The picture used in the tutorials can be found here: http://i.imgur.com/ou9cR68.jpg (name it city.jpg for it to work)

You can download a zip of all tutorials here: https://www.dropbox.com/s/g8mb0246ounxxnq/XHTML%20%26%20CSS.zip?dl=0

tutorial-2

<!--This is a comment. Comments are not displayed in the browser-->

<!doctype html>
<!--The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag-->

<html>
<!--*The <html> tag tells the browser that this is an HTML document.
    *The <html> tag represents the root of an HTML document.
    *The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag)-->

<head>
    <!--The <head> element must include a title for the document, and can include scripts, styles, meta information, and more.-->

    <title>I'm a title!</title>
    <!--The <title> tag is required in all HTML documents and it
        -defines a title in the browser toolbar
        -provides a title for the page when it is added to favorites
        -displays a title for the page in search-engine results-->

</head>
<!--head end tag-->

</html>
<!--html end tag-->


tutorial-3

<!doctype html>
<html>

<head>
<!--The <head> element must include a title for the document, and can include scripts, styles, meta information, and more.-->
   <title>I'm a title!</title>
</head>

<body>
<!--The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.-->

   <h1>Very Big</h1>
   <h2>Big</h2>
   <h3>Medium</h3>
   <h4>Normal</h4>
   <h5>Small</h5>
   <h6>Very Small</h6>
   <!-- <h1> defines the most important heading. <h6> defines the least important heading. -->

</body>

</html>


tutorial-4

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <h1>First header</h1>
   <p>This is a paragraph.</p>
   <!--The <p> tag defines a paragraph.-->
   <h2>Second Header</h2>
   <p>This is a paragraph.
       <br />With a break.</p>
   <!--The <br> tag inserts a single line break, it has no end tag-->
</body>

</html>


tutorial-5

<!-- This is a comment -->

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <h1>First header</h1>
   <p><strong>This</strong> is a paragraph.</p>
   <!--The <strong> tag is a phrase tag. It defines important text (equivalent of bold)-->
   
   <hr>
   <!--The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
   The <hr> element is used to separate content (or define a change) in an HTML page-->
   
   <h2>Second Header</h2>
   <p>This is a paragraph.
       <br />With a <em>break.</em></p>
   <!--The <em> tag is a phrase tag. It renders as emphasized text (equivalent of italic)-->
</body>

</html>


tutorial-6

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <a href="https://www.google.com">I'm a link to google!</a>
   <a href="second.html">I'm a link to the page: second!</a>
   <!--The <a> tag defines a hyperlink, which is used to link from one page to another.
       The most important attribute of the <a> element is the href attribute, which indicates the link's destination.-->
   
</body>

</html>


tutorial-7

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <a href="#first">Link to First Paragraph [1]</a>
   <a href="#third">Link to Third Paragraph [3]</a>
   <a href="#fifth">Link to Fifth Paragraph [5]</a>
   <a href="#fourth">Link to Fourth Paragraph [4]</a>
   <a href="#second">Link to Second Paragraph [2]</a>
   
   <h3><a name="first"></a>First Paragraph [1]</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Sed vitae elit a lacus eleifend elementum sit amet pharetra enim.
       Pellentesque congue lacinia dui, vitae interdum justo egestas vel.
       Nulla tincidunt tristique est volutpat blandit.
       Cras non sem lacinia, feugiat sem in, dignissim ipsum.
       Praesent felis ante, cursus sed libero sed, aliquet rhoncus leo.
       Nunc ac elit quam. Ut id leo iaculis, posuere quam cursus, adipiscing enim.
       Vestibulum blandit molestie mi eu blandit. In vel mauris mauris.
       Donec vitae nulla orci. Sed turpis urna, egestas eget arcu a, molestie ultricies mauris.
       Aenean eros turpis, fringilla vel velit egestas, ullamcorper cursus nunc.
       Nulla feugiat ornare dui, a porta sapien auctor id. Aliquam erat volutpat.</p>
   
   <h3><a name="second"></a>Second Paragraph [2]</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Sed vitae elit a lacus eleifend elementum sit amet pharetra enim.
       Pellentesque congue lacinia dui, vitae interdum justo egestas vel.
       Nulla tincidunt tristique est volutpat blandit.
       Cras non sem lacinia, feugiat sem in, dignissim ipsum.
       Praesent felis ante, cursus sed libero sed, aliquet rhoncus leo.
       Nunc ac elit quam. Ut id leo iaculis, posuere quam cursus, adipiscing enim.
       Vestibulum blandit molestie mi eu blandit. In vel mauris mauris.
       Donec vitae nulla orci. Sed turpis urna, egestas eget arcu a, molestie ultricies mauris.
       Aenean eros turpis, fringilla vel velit egestas, ullamcorper cursus nunc.
       Nulla feugiat ornare dui, a porta sapien auctor id. Aliquam erat volutpat.</p>
   
   <h3><a name="third"></a>Third Paragraph [3]</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Sed vitae elit a lacus eleifend elementum sit amet pharetra enim.
       Pellentesque congue lacinia dui, vitae interdum justo egestas vel.
       Nulla tincidunt tristique est volutpat blandit.
       Cras non sem lacinia, feugiat sem in, dignissim ipsum.
       Praesent felis ante, cursus sed libero sed, aliquet rhoncus leo.
       Nunc ac elit quam. Ut id leo iaculis, posuere quam cursus, adipiscing enim.
       Vestibulum blandit molestie mi eu blandit. In vel mauris mauris.
       Donec vitae nulla orci. Sed turpis urna, egestas eget arcu a, molestie ultricies mauris.
       Aenean eros turpis, fringilla vel velit egestas, ullamcorper cursus nunc.
       Nulla feugiat ornare dui, a porta sapien auctor id. Aliquam erat volutpat.</p>
   
   <h3><a name="fourth"></a>Fourth Paragraph [4]</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Sed vitae elit a lacus eleifend elementum sit amet pharetra enim.
       Pellentesque congue lacinia dui, vitae interdum justo egestas vel.
       Nulla tincidunt tristique est volutpat blandit.
       Cras non sem lacinia, feugiat sem in, dignissim ipsum.
       Praesent felis ante, cursus sed libero sed, aliquet rhoncus leo.
       Nunc ac elit quam. Ut id leo iaculis, posuere quam cursus, adipiscing enim.
       Vestibulum blandit molestie mi eu blandit. In vel mauris mauris.
       Donec vitae nulla orci. Sed turpis urna, egestas eget arcu a, molestie ultricies mauris.
       Aenean eros turpis, fringilla vel velit egestas, ullamcorper cursus nunc.
       Nulla feugiat ornare dui, a porta sapien auctor id. Aliquam erat volutpat.</p>
   
   <h3><a name="fifth "></a>Fifth Paragraph [5]</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
       Sed vitae elit a lacus eleifend elementum sit amet pharetra enim.
       Pellentesque congue lacinia dui, vitae interdum justo egestas vel.
       Nulla tincidunt tristique est volutpat blandit.
       Cras non sem lacinia, feugiat sem in, dignissim ipsum.
       Praesent felis ante, cursus sed libero sed, aliquet rhoncus leo.
       Nunc ac elit quam. Ut id leo iaculis, posuere quam cursus, adipiscing enim.
       Vestibulum blandit molestie mi eu blandit. In vel mauris mauris.
       Donec vitae nulla orci. Sed turpis urna, egestas eget arcu a, molestie ultricies mauris.
       Aenean eros turpis, fringilla vel velit egestas, ullamcorper cursus nunc.
       Nulla feugiat ornare dui, a porta sapien auctor id. Aliquam erat volutpat.</p>
</body>
   
</html>


tutorial-8

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <a href="mailto:emailadress@example.com" title="This is a tooltip!">Click to email emailadress@example.com!</a>
</body>

</html>


tutorial-9

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <a href="http://www.webpagehere.example"><img src="city.jpg" alt="Example Image"/></a>
   <!--The <img> tag defines an image in an HTML page
       The attribute src specifies the URL of an image
       The attribute alt specifies an alternate text for an image-->
</body>

</html>


tutorial-10

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <img src="city.jpg" height="100px" />
   <!--The attribute height specifies the height of an image
       The attribute width specifies the width of an image-->
</body>

</html>


tutorial-11

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <table border="1">
       <tr>
           <td>Row 1</td>
           <td>Data</td>
           <td>Data</td>
       </tr>
       <tr>
           <td>Row 2</td>
           <td>Data</td>
           <td>Data</td>
       </tr>
   </table>
</body>

</html>


tutorial-12

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <table border="1">
       <tr>
           <th>Row 1</th>
           <td>Data</td>
           <td>Data</td>
       </tr>
       <tr>
           <th>Row 2</th>
           <td>Data</td>
           <td>Data</td>
       </tr>
       <tr>
           <th>Row 3</th>
           <td>Data</td>
           <td>Data</td>
       </tr>
   </table>
   
   <hr>
   
   <table border="1">
       <tr>
           <th>Column 1</th>
           <th>Column 2</th>
           <th>Column 3</th>
       </tr>
       <tr>
           <td>Data</td>
           <td>Data</td>
           <td>Data</td>
       </tr>
       <tr>
           <td>Data</td>
           <td>Data</td>
           <td>Data</td>
       </tr>
   </table>
</body>

</html>


tutorial-13

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <table border="1">
       <tr>
           <th colspan="3"><h2>Column 1</h2></th>
       </tr>
       <tr>
           <th>Column 2</th>
           <th>Column 3</th>
           <th>Column 4</th>
       </tr>
       <tr>
           <td>Data</td>
           <td>Data</td>
           <td>Data</td>
       </tr>
       <tr>
           <td>Data</td>
           <td>Data</td>
           <td>Data</td>
       </tr>
   </table>
</body>

</html>    


tutorial-14

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <table border="1" width="500" cellpadding="20" cellspacing="20">
       <tr>
           <th>Column 1</th>
           <th>Column 2</th>
           <th>Column 3</th>
       </tr>
       <tr>
           <td>Data</td>
           <td>Data</td>
           <td>Data</td>
       </tr>
       <tr>
           <td>Data</td>
           <td>Data</td>
           <td>Data</td>
       </tr>
   </table>
</body>

</html>    


tutorial-15

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
</head>

<body>
   <ul>
       <li>Item</li>
       <li>Item</li>
       <li>Item</li>
       <li>Item</li>
       <li>Item</li>
   </ul>
   <ol>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
       <li>Item 5</li>
   </ol>
</body>

</html>    


tutorial-16

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       p {
           font-family: arial;
           color: darkblue;
       }
   </style>
</head>

<body>
   This is normal text.
   <p>This is paragraph text.</p>
</body>

</html>


tutorial-17

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       h1 {
           font-family: arial;
           color: #330000;
       }
       p {
           line-height: 200%;
       }
   </style>
</head>

<body>
   <h1>This is normal text.</h1>
   <p>This is paragraph text.This is paragraph text. This is paragraph text.
       <br />This is paragraph text. This is paragraph text.This is paragraph text.
       <br />This is paragraph text.This is paragraph text. This is paragraph text.</p>
</body>

</html>


tutorial-18

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       ol {
           font-weight: bold;
       }
       ul {
           font-style: italic;
       }
   </style>
</head>

<body>
   <ol>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
       <li>Item 5</li>
   </ol>

   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
       <li>Item 4</li>
       <li>Item 5</li>
   </ul>
</body>

</html>


tutorial-19

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       body {
           color: white;
           background-color: #2e2e2e;
           font-family: arial;
       }
       h3 {
           text-align: center;
       }
       p {
           text-indent: 150px;
       }
   </style>
</head>

<body>
   <h3>Big Text (that needs to be centered)</h3>
   <p>Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text. Useless text.</p>
</body>

</html>


tutorial-20

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       body {
           background-image: url(city.jpg);
           <!--Source of the photgraph http: //www.flickr.com/photos/pmorgan/63649349/
           Licensed under https: //creativecommons.org/licenses/by-nc-nd/2.0/-->
           background-size: cover;
           <!--Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area-->
       }
   </style>
</head>

<body>

</body>

</html>


tutorial-21

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       h2 {
           background-color: lightblue;
           padding-bottom: 40px;
           padding-top: 20px;
           padding-left: 10px;
           padding-right: 10px;
       }
   </style>
</head>

<body>
   <h2>This is a big text, yo.</h2>
</body>

</html>


tutorial-22

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       h2 {
           background-color: lightblue;
           padding-bottom: 40px;
           padding-top: 20px;
           padding-left: 10px;
           padding-right: 10px;
           border-color: red;
           border-width: 3px;
           border-style: dashed;
           border-bottom-style: dotted;
           border-bottom-color: purple;
       }
   </style>
</head>

<body>
   <h2>This is a big text, yo.</h2>
</body>

</html>


tutorial-23

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       p {
           background-color: lightblue;
           margin-top: 1px;
           margin-bottom: 1px;
           margin-left: 100px;
           margin-right: 100px;
       }
   </style>
</head>

<body>
   <p>This is a paragraph, yo.</p>
   <p>This is another paragraph, yo.</p>
</body>

</html>


tutorial-24

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       p {
           background-color: pink;
           color: darkred;
           width: 200px;
           height: 200px;
           border: 2px solid red;
       }
   </style>
</head>

<body>
   <p>This is a paragraph, yo.</p>
   <p>This is another paragraph, yo.</p>
</body>

</html>


tutorial-25

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       a:link {
           color: red;
           text-decoration: none;
           border: 1px solid darkred;
       }
       a:visited {
           color: darkred;
           text-decoration: none;
           border: 1px solid black;
       }
       a:hover {
           color: orange;
           text-decoration: none;
           border: 1px solid red;
       }
       a:active {
           color: yellow;
           text-decoration: none;
           border: 1px solid orange;
       }
   </style>
</head>

<body>
   <a href="http://www.google.com/">This is a link to Google.</a>
</body>

</html>


tutorial-26

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       table {
           border: 6px solid blue;
       }
       tr {
           background-color: darkblue;
           color: white;
           font-family: arial;
       }
       td {
           border: 5px solid blue;
       }
   </style>
</head>

<body>
   <table>
       <tr>
           <td>Egg</td>
           <td>Egg</td>
           <td>Egg</td>
       </tr>
       <tr>
           <td>Egg</td>
           <td>Egg</td>
           <td>Egg</td>
       </tr>
   </table>
</body>

</html>


tutorial-27

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       ul {
           list-style-type: lower-alpha;
           list-style-type: upper-alpha;
           list-style-type: lower-latin;
           list-style-type: upper-latin;
           list-style-type: lower-roman;
           list-style-type: upper-roman;
           list-style-type: decimal;
           list-style-type: decimal-leading-zero;
           list-style-type: disc;
           list-style-type: square;
           list-style-type: circle;
           list-style-type: georgian;
           list-style-type: hiragana;
           list-style-type: hiragana-iroha;
           list-style-type: katakana;
           list-style-type: katakana-iroha;
           list-style-type: cjk-ideographic;
           list-style-type: hebrew;
           list-style-type: none;
           list-style-image: url(city.jpg);
       }
   </style>
</head>

<body>
   <ul>
       <li>Item</li>
       <li>Item</li>
       <li>Item</li>
   </ul>
</body>

</html>


tutorial-28

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       h1,
       p {
           color: red;
           font-style: italic;
       }
       span {
           color: blue;
           font-weight: bold;
           font-style: normal;
       }
   </style>
</head>

<body>
   <h1>Hello I'm header <span>number one!</span></h1>
   <p>Oh, hi I'm <span>your</span> paragraph.</p>
</body>

</html>


tutorial-29

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       div {
           border: 2px solid red;
           position: absolute;
           width: 50%;
           top: 50%;
           left: 25%;
           text-align: center;
       }
   </style>
</head>

<body>
   <div>I'm in a div that is in the absolute center!</div>
</body>

</html>


tutorial-30

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       .redtext {
           color: red;
       }
       .greentext {
           color: green;
       }
   </style>
</head>

<body>
   <p class="redtext">This is red text</p>
   <p class="greentext">This is green text</p>
</body>

</html>


tutorial-31

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       #first {
           border: 2px solid red;
           position: absolute;
           top: 15px;
           left: 15px;
       }
       #second {
           border: 2px solid green;
           position: absolute;
           top: 65px;
           left: 5px;
       }
   </style>
</head>

<body>
   <div id="first">This is red div</div>
   <div id="second">This is green div</div>
</body>

</html>


tutorial-32

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       p > a {
           color: green;
       }
   </style>
</head>

<body>
   <a href="htpps://www.google.com/">Link One</a>
   <p><a href="htpps://www.google.com/">Link Two</a>
   </p>
   <h4><a href="htpps://www.google.com/">Link Three</a></h4>
</body>

</html>


tutorial-33

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       p:first-letter {
           font-size: 20px;
           font-weight: bold;
           color: green;
       }
   </style>
</head>

<body>
   <p>This is paragraph one.</p>
   <p>Also, this is paragraph two.</p>
   <p>Then again, this is paragraph three.</p>
   <p>Finally, this is paragraph four.</p>
</body>

</html>


tutorial-34-index

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <link rel="stylesheet" type="text/css" href="tutorial-34.css" />
</head>

<body>
   <h1>Index page.</h1>
   <h3>This is a header.</h3>
   <p>This is paragraph.</p>
   <a href="tutorial-34-second.html">Go to the second page.</a>
</body>

</html>


tutorial-34-second

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <link rel="stylesheet" type="text/css" href="tutorial-34.css" />
</head>

<body>
   <h1>Second page.</h1>
   <h3>This is a header.</h3>
   <p>This is paragraph.</p>
   <a href="tutorial-34-index.html">Go to the index page.</a>
</body>

</html>


tutorial-34.css

h1 {
   color: green;
}
h3 {
   color: orange;
}
p {
   font-family: tahoma;
   font-size: 20px;
   color: blue;
}


tutorial-36

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       #id1 {
           border: 2px solid red;
           position: absolute;
           width: 150px;
           height: 175px;
           top: 30px;
           left: 15px;
       }
       #id2 {
           border: 2px solid blue;
           position: absolute;
           width: 150px;
           height: 175px;
           top: 40px;
           left: 155px;
       }
   </style>
</head>

<body>
   <div id="id1">This is a div, what did you expect.</div>
   <div id="id2">This is another div, wow.</div>
</body>

</html>


tutorial-37

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       #id1 {
           border: 2px solid red;
           position: relative;
           width: 150px;
           height: 175px;
           top: 30px;
           left: 15px;
       }
       #id2 {
           border: 2px solid blue;
           position: relative;
           width: 150px;
           height: 175px;
           top: 40px;
           left: 155px;
       }
   </style>
</head>

<body>
   <div id="id1">This is a div, what did you expect.</div>
   <div id="id2">This is another div, wow.</div>
</body>

</html>


tutorial-38

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       #id1 {
           border: 2px solid red;
           position: fixed;
           width: 150px;
           height: 175px;
           top: 30px;
           left: 15px;
       }
       .id2 {
           border: 2px solid blue;
           position: relative;
           width: 150px;
           height: 175px;
           top: 40px;
           left: 155px;
       }
   </style>
</head>

<body>
   <div id="id1">This is a div, what did you expect.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
   <div class="id2">This is another div, wow.</div>
</body>

</html>


tutorial-39

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
       img {
           max-width: 200px;
           max-height: 200px;
       }
   </style>
</head>

<body>
   <img src="city.jpg" />
   <img src="city.jpg" />
   <img src="city.jpg" />
</body>

</html>


tutorial-40

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
   </style>
</head>

<body>
   <form>
       Username:
       <input type="text" name="user" size="16" maxlength="10" value="Enter your username" />
   </form>
</body>

</html>


tutorial-41

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
   </style>
</head>

<body>
   <form>
       Username:
       <input type="text" name="user" size="16" maxlength="10" value="Enter your username." />
       <br/>Male:
       <input type="radio" name="gender" value="male" />
       <br/>Female:
       <input type="radio" name="gender" value="female" />
       <br/>
       <input type="checkbox" name="agree" value="true" />I agree to the Terms of Service.
       <br/>
       <input type="checkbox" name="age" value="true" />I am 13 or older.
   </form>
</body>

</html>


tutorial-42

<!doctype html>
<html>

<head>
   <title>I'm a title!</title>
   <style type="text/css">
   </style>
</head>

<body>
   <form>
       Username:
       <input type="text" name="user" size="17" maxlength="10" value="Enter your username." />
       <br/>
       <br/>Male:
       <input type="radio" name="gender" value="male" />
       <br/>Female:
       <input type="radio" name="gender" value="female" />
       <br/>
       <br/>I am
       <select name="job">
           <option value="student">a Student</option>
           <option value="freelancer">a Freelancer</option>
           <option value="employed">Employed</option>
       </select>
       <br/>
       <br/>
       <input type="checkbox" name="agree" value="true" />I agree to the Terms of Service.
       <br/>
       <input type="checkbox" name="age" value="true" />I am 13 or older.
   </form>
</body>

</html>

v

Post a Reply

Replies

Oldest  Newest  Rating
+1 Predrag Kostic · August 26, 2014
It's buggy tutorial-43,44 & 45 won't show up. Download the zip file if you really want them.
+1 Cooper Cecil · August 30, 2014
Very nice, thank you!. If I could only transfer them to note cards so I could study them anywhere. Great tool.
+1 Isaiah Rahmany · August 30, 2014
Ok after seeing what you learned I am so watching those tutorials lol! I am just like wow!
0 vimal kumar · May 26, 2015
where I'll find the .zip file of the projects?
  • 1

HTML / CSS / Web Design

107,083 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators