Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Web Coding Basics: The Codes

    Enviado por

    api-338008544
    85 visualizações8 páginas

    Título original

    web coding basics

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    DOCX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    85 visualizações8 páginas

    Web Coding Basics: The Codes

    Enviado por

    api-338008544

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 8

    Name ___________________________________ Miss Kostishion

    WEB CODING BASICS

    THE CODES:

    1. HTML – “Hypertext Markup Language”


     Creates the structure and layout of a website
     Correct structure:

    <HTML>
    <HEAD>
    <TITLE>My first HTML document</TITLE>
    </HEAD>
    <BODY>
    <P>Hello world!
    </BODY>
    </HTML>

    2. CSS – “Cascading Style Sheets”


     Allows web developers to control how a website looks

    1|Page
    WEB SAFETY:

    1. Keep Passwords Secret


    a. Do NOT reveal passwords to others, even friends (parents only
    b. Never provide your password over email
    c. Do NOT type passwords on computers that you do not control

    2. Be Smart while Social Networking and Blogging


    a. Follow website age limits
    b. Do NOT meet anyone in person that you have met online only
    c. Communicate with people you already know
    d. Do NOT use full names
    e. Do NOT reveal the school that you go to or town that you live in
    f. Do NOT post pictures that reveal a lot of personal information (i.e. street signs,
    school logos on clothing, outside of home)
    g. Do NOT be an “online bully,” and be aware of online bullying. Treat others as
    you would want to be treated (Luke 6:31). If you feel that you have been bullied
    online, print out the conversation(s) and tell an adult immediately.
    h. Ask yourself if you would be comfortable sharing anything that you post with a
    stranger. If you are not, do not post it.

    3. Never reveal your phone number or house address

    4. Never fill out forms on websites (unless an adult is with you)

    2|Page
    COLORS:

    Colors are represented by a combination of numbers and letters on the web. These are called
    “Hex Codes.” Hex codes are always six numbers/letters. You can find a list of hex codes here:
    http://www.color-hex.com or here: http://www.w3schools.com/tags/ref_colorpicker.asp

    Basic colors codes for quick reference:

    Black: #000000
    Blue: # 0000FF
    White: #FFFFFF
    Navy Blue: #000080
    Gray: #666666
    Green: # 009933
    Light Gray: #C0C0C0
    Red: #FF0000
    Hot Pink: # FF0066
    Yellow: #FFFF00
    Light Pink: #FFCCFF
    Purple: #993399
    Light Blue: #99CCFF
    Brown: #663300
    Teal: #008080
    Maroon: #800000
    Lime Green: #00FF00

    3|Page
    BASIC “HEAD” TAGS:

    <head>

    <title> YOUR TITLE HERE </title>

    <style>

    a:link {color: HEX NUMBER;}


    a:visited {color: HEX NUMBER;}
    a:hover {color: HEX NUMBER;}
    a:active {color: HEX NUMBER;}

    html {background: HEX NUMBER;


    } This is your CSS –
    the information between
    <style> </style>
    body {
    font-size: NUMBERpx;
    font-family: FONT NAME;
    background-color: HEX NUMBER;
    color: HEX NUMBER;
    }

    </style>

    </head>

    4|Page
    BASIC “BODY” TAGS:

    <body>
    All content goes between these tags
    </body>

    Making a “return,” or a new line:

    - Small space, or ‘page break’ <br>


    - Large space, or ‘new paragraph’ <p>

    Alignment:

    - Center <center> YOUR TEXT HERE </center>


    - Left <p align=”left”>
    - Right <p align=”right”>

    Text decorations:

    - Bold <b> YOUR TEXT HERE </b>


    - Italic <i> YOUR TEXT HERE </i>
    - Underline <u> YOUR TEXT HERE </u>

    Creating links:

    - General Link
    <a href=”WEB URL”> LINK TEXT GOES HERE </a>

    - Open link in new tab


    <a href=”WEB URL” target=”new”> LINK TEXT GOES HERE </a>

    5|Page
    BASIC “BODY” TAGS CONTINUED:

    Changing font color:

    <font color= ”HEX NUMBER”>

    Changing font size – choose from numbers 1, 2, 3, 4 or 5:

    <font size= “NUMBER”>

    Creating a heading:

    Large heading: <h1> HEADING TEXT HERE </h1>

    Smaller heading: <h2> HEADING TEXT HERE </h2>

    Bulleted list:

    <ul>
    <li> LIST ITEM ONE </li>
    <li> LIST ITEM TWO </li>
    </ul>

    Inserting images:

    - Basic image <img src=”IMAGE URL”>


    - Image with a border <img src=”IMAGE URL” border=”#”>
    - Adjusting image size <img src=”IMAGE URL” width=”###” height=”###”>

    6|Page
    TABLES (FOR BODY SECTION):

    <table cellpadding=”#” cellspacing=”#” border=”#”


    bordercolor=”HEX CODE” bgcolor=”HEX CODE” width=”###” height=”###”>

    <tr> <tr> = “table row”


    <td> <td> = “table data” (cell)
    YOUR TEXT HERE
    </td>

    <td>
    YOUR TEXT HERE
    </td>
    </tr>

    <tr>
    <td>
    YOUR TEXT HERE
    </td>

    <td>
    YOUR TEXT HERE
    </td>
    </tr>

    </table>

    What are the dimensions of the above table? _____________ x ______________

    7|Page
    PUBLISHING TO THE WEB:

    1. Publish to the web ONLY with the permission of an adult.


    2. NEVER include personal information on your website.
    3. Most hosts require an email address to sign up.

    Safe, free web hosting:


    http://www.webs.com
    http://www.wix.com
    http://www.weebly.com

    RESOURCES:

    http://www.lissaexplains.com
    http://www.w3schools.com
    http://www.codecademy.com
    http://www.crunchzilla.com/code-monster

    8|Page

    Você também pode gostar