Last updated on December 27th, 2023
Let’s put all example codes from HTML/CSS Lesson 7 in one page. It will look like this:
<!DOCTYPE html> <html> <head> <title> HTML/CSS examples </title> </head> <!-- Styling the body of the web page --> <body style="font-size: 14px; font-family: Arial, Verdana, sans-serif; width: 70%; margin: auto; border: 2px solid black; padding: 20px;"> <!-- Text examples --> <h1 style="text-align: center;"> This is the main title of the page </h1> <p> This is a text paragraph. </p> <p style="font-weight: bold; color: red;">This is a paragraph with bold red text.</p> This is a <br> line break. <!-- The br tag has no closing tag. --> <br> <b> This text is bold. </b> <br> <i> This text is italic. </i> <br> <br> <!-- Link example --> <a href="https://webcodes.org">This is a link to WebCodes.org</a> <br> <br> <!-- Image example --> <img src="https://webcodes.org/img/example.png"> <br> <br> <!-- Image link example --> <a href="https://webcodes.org"> <img src="https://webcodes.org/img/example.png" alt="Example Image" style="width: 100px;"> </a> <br> <br> <!-- List examples --> <ul> <li>First list item.</li> <li>Second list item.</li> <li>Third list item.</li> </ul> <ol> <li>First list item.</li> <li>Second list item.</li> <li>Third list item.</li> </ol> <br> <br> <!-- Table example --> <table style="width: 100%; text-align: center; color: white; background-color: black;"> <tr> <td>1st col, 1st row</td> <td>2nd col, 1st row</td> <td>3rd col, 1st row</td> </tr> <tr> <td>1st col, 2nd row</td> <td>2nd col, 2nd row</td> <td>3rd col, 2nd row</td> </tr> </table> <br> <br> <!-- Form example --> <form> Your name: <input type="text" id="users_name" name="users_name"> <br> <br> Choose a Date: <input type="date" id="the_date" name="the_date"> <br> <br> Some Choice 1: <input type="checkbox" id="choice1" name="choice1"> <br> <br> Some Choice 2: <input type="checkbox" id="choice2" name="choice2"> <br> <br> Upload file: <input type="file" id="the_file" name="the_file"> <br> <br> Submit: <input type="submit"> </form> <br> <br> <!-- div tag examples --> <!-- Here below starts the first <div> tag in which we will place the other two tags. --> <div style="text-align: center;"> <!-- Here below starts the second <div> tag. --> <div style="display: inline; border: 2px solid red; background-color: yellow; padding: 10px; margin: 5px;"> Some content here. </div> <!-- Here below starts the third <div> tag. --> <div style="display: inline; border: 2px solid red; background-color: yellow; padding: 10px; margin: 5px;"> Even much, much more content here. </div> <!-- Here below is the closing tag (</div>) of the first <div> tag. --> </div> <br> <br> <!-- Textarea example --> <textarea rows="5" cols="50"> Write some text here: </textarea> <br> <br> <!-- Horizontal line examples --> <hr> <br> <br> <hr style="border: 5px solid red;"> </body> </html>
Copy the above code, paste it into Notepad or Notepad++ and save it as an HTML page, for example test-page.html, then open the page to see the result. If everything is OK, your page should look like this:
These tutorials are just a very simple and basic introduction to HTML/CSS. To learn more about HTML and CSS visit the official page of W3 Consortium – the main international standards organization for the World Wide Web: https://www.w3.org