Scribd Logo
Upload

Welcome to Scribd!

  • Introduction to HTML and CSS for Web Development

    Uploaded by

    Turuczko Robert
    2 views5 pages
    Getting Started with HTML,Styling with CSS ,Advanced HTML and CSS Concepts

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Getting Started with HTML,Styling with CSS ,Advanced HTML and CSS Concepts

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    2 views5 pages

    Introduction to HTML and CSS for Web Development

    Uploaded by

    Turuczko Robert
    Getting Started with HTML,Styling with CSS ,Advanced HTML and CSS Concepts

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    Getting Started with HTML

    What is HTML?

    HTML (HyperText Markup Language) is the standard language for creating web pages. It
    describes the structure of a webpage using markup.

    Basic Structure of an HTML Document

    An HTML document is made up of various elements, each represented by tags. Here's a simple
    HTML document structure:

    html
    Copy code
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Webpage</title>
    </head>
    <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my first webpage.</p>
    </body>
    </html>

    Key HTML Elements

     <!DOCTYPE html>: Declares the document type and version of HTML.


     <html>: The root element of an HTML page.
     <head>: Contains meta-information about the document.
     <title>: Specifies the title of the webpage (displayed in the browser tab).
     <body>: Contains the content of the webpage.
     <h1> to <h6>: Header tags, with <h1> being the highest (most important) and <h6> the
    lowest (least important).
     <p>: Paragraph tag for blocks of text.

    Creating Your First Webpage

    1. Open a text editor (like Notepad on Windows or TextEdit on Mac) or a code editor like
    VS Code.
    2. Type the basic HTML structure provided above.
    3. Save the file with a .html extension, for example, index.html.
    4. Open the saved HTML file in a web browser to view your first webpage.
    Styling with CSS

    What is CSS?

    CSS (Cascading Style Sheets) is a language used to describe the presentation of an HTML
    document. It controls the layout of multiple web pages all at once.

    Adding CSS to HTML

    There are three ways to apply CSS to HTML: inline, internal, and external.

    Inline CSS

    Inline CSS is used to apply a unique style to a single HTML element. Use the style attribute
    inside the HTML tag.

    html
    Copy code
    <p style="color: blue;">This is a blue paragraph.</p>
    Internal CSS

    Internal CSS is used to define styles for a single HTML document. Use the <style> element
    inside the <head> section.

    html
    Copy code
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Webpage</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    }
    h1 {
    color: green;
    }
    p {
    color: blue;
    }
    </style>
    </head>
    <body>
    <h1>Welcome to My Styled Website</h1>
    <p>This is a blue paragraph of text on my styled webpage.</p>
    </body>
    </html>
    External CSS

    External CSS is used to define styles for multiple HTML pages. Create a separate CSS file and
    link it to your HTML document using the <link> element.

    1. Create a file named styles.css and add the following CSS code:

    css
    Copy code
    body {
    font-family: Arial, sans-serif;
    }

    h1 {
    color: green;
    }

    p {
    color: blue;
    }

    2. Link the CSS file in your HTML document:

    html
    Copy code
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Webpage</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <h1>Welcome to My Styled Website</h1>
    <p>This is a blue paragraph of text on my styled webpage.</p>
    </body>
    </html>
    Advanced HTML and CSS Concepts
    HTML Forms

    Forms are used to collect user input. An HTML form can contain various input elements like text
    fields, checkboxes, radio buttons, and submit buttons.

    html
    Copy code
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Example</title>
    </head>
    <body>
    <h1>Contact Us</h1>
    <form action="/submit-form" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>

    <input type="submit" value="Submit">


    </form>
    </body>
    </html>

    CSS Layouts

    CSS provides several layout techniques to create responsive web designs.

    Flexbox

    Flexbox is a layout model that allows items to adjust and distribute space within a container.

    css
    Copy code
    .container {
    display: flex;
    justify-content: space-between;
    }

    .item {
    background-color: lightblue;
    padding: 10px;
    margin: 5px;
    border: 1px solid #ccc;
    }
    html
    Copy code
    <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    </div>
    Grid

    CSS Grid Layout is a two-dimensional layout system for the web.

    css
    Copy code
    .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    }

    .grid-item {
    background-color: lightcoral;
    padding: 20px;
    text-align: center;
    }
    html
    Copy code
    <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    </div>

    Conclusion

    You've now learned the basics of HTML and CSS, including how to create a simple webpage,
    style it, and add advanced elements like forms and layout techniques. These skills are essential
    for building modern, responsive websites. Keep practicing and exploring more advanced features
    of HTML and CSS to enhance your web development skills.

    Happy coding!

    You might also like