Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 22 views

    Webdesign

    Uploaded by

    printableboon

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Webdesign

    Uploaded by

    printableboon
    22 views15 pages

    Original Title

    webdesign (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    22 views15 pages

    Webdesign

    Uploaded by

    printableboon

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 15

    Website Design

    By Kiersten Cummings, Jamie Evans-Garcia, & Jacqueline Le


    What is Web Design?
    It’s a combo of CSS and HTML, used to create and decorate
    website pages.
    Why should you learn HTML and CSS?
    Html and Css are the basics to web development, and
    other computer languages have very similar concepts.
    HTML
    ● HTML stands for Hyper Text Markup
    Language
    ● You use HTML to structure the
    content of your website pages
    ● Structured in: Head, body, footer,
    etc…
    ● Tags in HTML: heading, paragraphs,
    lists, graphics, videos, links, etc…
    Programming HTML
    ● HTML can be programmed in a text
    editor - in Artemis, we used
    Brackets to code.
    ● Save the file with .html to show
    that it is a HTML file.
    ● To comment out code, use
    <!--.....-->
    ● White spaces and tabs do not
    matter.
    HTML Tags <title> …</title> - adds a
    title
    <a href = “...”> - adds a
    link

    <img src = “...” height =


    <h1> …</h1>- adds a “...” width = “...”/> -
    heading adds graphics, adjusts
    graphic size

    <p>...</p> - adds a <iframe src = “...”>


    paragraph </iframe> - adds a video

    <ul>
    <li>...<li> <center>...</center> -
    </ul> - adds an center text
    unordered list

    <ol> <b>...</b> - bold text


    <li>...<li> <i>...</i> - italicize text
    ● Most tags need to be closed by a </…> </ol> - adds an <u>...</u> - underline
    ● Elements with no content (aka empty ordered list text
    elements) are self-closing tags.
    ○ Ex. <br>
    <table> - adds a table
    <br> - line break
    HTML Hierarchy Declares that

    Opens up the HTML


    <!DOCTYPE this is a
    HTML file
    file - signifies the html>
    beginning <html> Opens up the
    <head> head section
    Head elements: title,
    Closes the scripts, styles, meta
    head section information, etc...
    </head> Opens up the
    body section
    <body>
    Body elements: heading,
    Closes the paragraph, lists, videos,
    body section graphics, videos...
    </body> Closes the HTML
    file - signifies the
    end
    </html>
    Examples of HTML
    stating the document is in html Header

    title that appears in the tab of your browser


    external link

    Header

    external link
    CSS ● Stands for Cascading Style Sheets

    ● CSS is used to define styles to use in


    HTML

    ● Can change color, font, size,


    background, shadow, and outline of
    text, background, and boxes

    ● It can help adapt websites to fit on


    different sized screens
    What is CSS Used for? ● Can change the website as a whole by
    changing the body section

    ● Can change certain parts of website (e.g.


    headers, paragraph, links) to look
    different than other parts

    ● Cannot add content to websites, but can


    change existing content
    How to Use CSS ● CSS files are saved with .css

    ● To link a CSS and HTML file you need to


    write <link rel=”spreadsheet” href=”(your
    css file name).css”>

    h1 (header 1) {

    color: #000 (changes text color to black)

    background-color: #F00 (adds a red highlight to the


    text)

    }
    Examples

    Changes header 1 border to a 5 pixel dotted line in the color purple

    Changes the color of all heading 4s text color to dark turquoise

    Changes all paragraphs text color to purple


    of CSS
    Class & Id
    Class

    ● Classes categorize specific elements


    ● Not unique
    ● Can be used on multiple objects

    Id

    ● Id’s are unique


    ● Only one object can have that id
    ● Used for identification for a unique element
    programs used for coding Programs:

    websites ● Brackets
    ● Thimble Mozilla
    ● W3Schools Website
    ○ Used to test your
    programing
    ● Text Editors
    ○ (save as .html files)
    ● Atom
    ● AWS Cloud9
    Languages used for coding
    websites Languages

    ● Python
    ● JavaScript
    ● Java
    ● PHP
    ● Ruby
    ● C++/C
    Thank You for Listening

    You might also like