Scribd Logo
Upload

Welcome to Scribd!

  • Website Coding

    Uploaded by

    api-553735237
    33 views6 pages

    Original Title

    website coding

    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

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    33 views6 pages

    Website Coding

    Uploaded by

    api-553735237

    Copyright:

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

    <p> dghsghd </p> to make a paragraph

    <h1> ajsfh </h1> for the top size title


    <h2> akfh </h2> for a small size title
    <h3> augf </h3> for an even smaller title
    <input type=”text”> to make a box where people can write anything and will maybe be saved
    <input type=”text” placeholder=”hello”> for the box where people can write to have a suggestion
    of hello like the image below

    <form action="https://freecatphotoapp.com/submit-cat-photo"><input type="text"


    placeholder="hello"> to make it so that once answer is written in the input box, and enter is
    pressed it will go to the highlighted link web page and end.

    <ul>
    <li> pancake</li>
    <li>butter</li> This would make a list of bullet points with the item like this.
    <li>egg</li>
    </ul>

    <ol>
    <li>pancake</li>
    <li>butter</li> This would make a list of numbers with the items like
    this.
    <li>egg</li>
    </ol>

    <form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="hello"> so that there is a submit button next to
    <button type="submit">Submit</button> the text box and when pressed goes to the
    </form> same page when enter was clicked.

    Like this.
    <form action="https://freecatphotoapp.com/submit-cat-photo"> Adding required after “text”
    <input type="text" required placeholder="cat photo URL"> and before placeholder made
    <button type="submit">Submit</button> it so that you had to write in
    </form> the box and if not, an alert
    . would pop up and you wouldn’t
    be allowed to submit.

    <form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL" required> This will make an option
    <button type="submit">Submit</button> to choose either indoor or
    </form> outdoor. It will look like this.

    <form>
    <label>
    <input type="radio" name="indoor-outdoor"> Indoor
    </label>
    <label>
    <input type="radio"
    name="indoor-outdoor">Outdoor
    </label>
    </form>

    <label for="indoor"><input
    id="indoor" type="radio" Is another way of writing what is above
    name="indoor-outdoor"> Indoor</ except the ones to select are one after another
    label><br>
    <label for="outdoor"><input
    id="outdoor" type="radio" n
    ame="indoor-outdoor"> Outdoor</
    label><br>

    <form>
    <label for="curious"><input Just change the yellow highlighted curious
    id="curious" type="checkbox" to any other name to put in the gaps.
    name="personality"> Curious</ Then change personality to an appropriate
    label> category. It will then come out as a
    checkbox.
    </form>
    <label for="curious"><input You should insert a value between “personality” and
    id="curious" type="checkbox" Curious this will help the coding in some way.
    name="personality"
    value="curious"> Curious</label>
    <label

    In a new document html, there should be a certain set up. You can change the highlighted bits
    to your own words.
    <!DOCTYPE html>
    <html>
    <head>
    <title>The best page ever</title>
    </head>
    <body>
    <h1>The best page ever</h1>
    <p>jfhkjfehakjefhbakjf.</p>
    </body>
    </html>

    <style> You can use this to make all the h2


    h2 {color: blue;} tags blue or any colour of your choice
    </style> You can do this by changing the
    highlighted areas.

    <p class="red-text">Click here to view more <a


    href="#">cat photos</a>.</p>
    You can add the highlighted text onto the html to make the paragraph red or use css.
    <style> Use the highlighted code to
    .red-text { change the size of the text in
    color: red; html or go on css.
    }

    p {
    font-size: 16px;
    }
    </style>

    <style>
    .red-text {
    color: red;
    }

    p {
    font-size: 16px; Use the highlighted code to
    font-family: monospace; change the font in html code
    } or use css.
    </style>

    <form action="https://thank-you-for-submittin.glitch.me/">
    <input type="text" required placeholder="Put you text here">
    <button type="submit">Submit</button>
    </form>
    <form>
    <label>
    <input type="radio" name="indoor-outdoor">hi
    </label>
    <label>
    <input type="radio"
    name="indoor-outdoor">hello
    </label>
    </form>
    On the form button, you can give something an id. Then since it has got an id, you can style it.

    <form id="cat-photo-form">
    <style>
    #cat-photo-form {
    background-color: green;
    }
    </style>
    So that anything you put between the opening and closing form tag would then have a green
    background.

    <style>
    .injected-text {
    margin-bottom: -25px;
    text-align: center;
    }

    .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
    }

    .yellow-box {
    background-color: yellow;
    padding: 10px;
    }

    .red-box {
    background-color: crimson;
    color: #fff;
    padding: 20px;
    }

    .blue-box {
    background-color: blue;
    color: #fff;
    padding: 20px;
    }
    </style>
    This would make 3 boxes on your page like this.

    margin: 20px;
    This would make sure that the blue box has more space between the 2 vertical sides of the
    yellow sides. The bigger the number the smaller the sides of the red or blue box.

    How to make your text become centre on the page.

    You might also like