Scribd Logo
Upload

Welcome to Scribd!

  • Basic PC Skills Pt. 3

    Uploaded by

    Jane
    14 views14 pages
    This document provides an introduction to basic HTML and CSS structures. It explains that HTML is the standard markup language used to create websites and defines webpage content, while CSS is used to define the visual design and layout of HTML elements. It outlines some basic HTML tags and page structures, as well as the structure of CSS rules with selectors and declarations. It also discusses using CSS classes and IDs to style HTML elements and attaching CSS internally or externally.

    Original Description:

    Basic Computer Skills

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an introduction to basic HTML and CSS structures. It explains that HTML is the standard markup language used to create websites and defines webpage content, while CSS is used to define the visual design and layout of HTML elements. It outlines some basic HTML tags and page structures, as well as the structure of CSS rules with selectors and declarations. It also discusses using CSS classes and IDs to style HTML elements and attaching CSS internally or externally.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    14 views14 pages

    Basic PC Skills Pt. 3

    Uploaded by

    Jane
    This document provides an introduction to basic HTML and CSS structures. It explains that HTML is the standard markup language used to create websites and defines webpage content, while CSS is used to define the visual design and layout of HTML elements. It outlines some basic HTML tags and page structures, as well as the structure of CSS rules with selectors and declarations. It also discusses using CSS classes and IDs to style HTML elements and attaching CSS internally or externally.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 14

    Basic HTML/CSS

    The proper way

    HTML/CSS

    HTML

    Hyper Text Markup Language


    It is the standard markup language to create
    websites.

    CSS

    Cascading Style Sheets


    Defines the look, layout and other elements of an
    HTML tag, class or ID.

    HTML
    Basic Structure:

    Only the <body> area is displayed in the browser.

    CSS
    Basic Structure:
    A CSS rule is composed of a Selector and
    Declaration block.

    Selector HTML element you want to style


    Declaration how you want to style it. Separated
    using semicolons ;

    Refer to CSS Almanac for all possible declarations:


    https://css-tricks.com/almanac/

    CSS

    The proper way of using CSS today is through


    class and id

    Class uses . (example: .class). This can be


    used multiple times in the HTML.
    ID uses # (example: #id). This can only be
    used once in the HTML.

    CSS can be combined with an HTML internally


    and externally

    Internal in the <head> tag


    External separate file

    This is the proper way

    Element Properties

    HTML/CSS Structure
    Folder structure:
    Folders:
    Css should contain all your
    CSS files
    Images should contain all
    your images
    HTML files should always be
    in the root of the folder

    Basic Website Structure

    Demo/Activity 4
    Follow on your own

    Demo/Activity 4

    Go to moodle
    Download files needed

    Demo/Activity 4

    Create new folder on Desktop

    Folder name: Act4_lastname


    Create needed folders inside current folder

    Demo/Activity 4 HTML

    Open Notepad or Notepad++

    Upper left should contain the ff:

    Upper right should contain the ff:

    At least 5 sentences about your self


    5 Bullet points of your hobbies
    Pictures of you

    3 boxes in the bottom should contain the ff:

    200 x 200 px of your 3 best friends picture


    At least 3 sentences each describing why they are your
    bestfriend

    Demo/Activity 4 CSS

    Open another Notepad or Ctrl+n for


    Notepad++

    Put your favorite color as the background color for


    <body>
    Change other colors to match each other

    Activity 4

    Export whole folder as zip

    Name: Act4_lastname

    Open browser
    Go to: moodle.apc.edu.ph
    Upload activity in Activity 4

    You might also like