Scribd Logo
Upload

Welcome to Scribd!

  • HTML and CSS Fundamentals

    Uploaded by

    queeny shino
    5 views36 pages
    Web design involves using tools like HTML, CSS, and JavaScript to create and style webpages. Key elements of web design include using markup languages like HTML to structure content, CSS to style and position elements, and tools that allow for dynamic content, animation, and interactivity. Effective web design separates content from presentation, allows changing a site's appearance without altering structure, and controls elements like typography and layout. Proper web design makes sites easier to navigate, understand, and use while avoiding problems.

    Original Description:

    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
    Web design involves using tools like HTML, CSS, and JavaScript to create and style webpages. Key elements of web design include using markup languages like HTML to structure content, CSS to style and position elements, and tools that allow for dynamic content, animation, and interactivity. Effective web design separates content from presentation, allows changing a site's appearance without altering structure, and controls elements like typography and layout. Proper web design makes sites easier to navigate, understand, and use while avoiding problems.

    Copyright:

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

    HTML and CSS Fundamentals

    Uploaded by

    queeny shino
    Web design involves using tools like HTML, CSS, and JavaScript to create and style webpages. Key elements of web design include using markup languages like HTML to structure content, CSS to style and position elements, and tools that allow for dynamic content, animation, and interactivity. Effective web design separates content from presentation, allows changing a site's appearance without altering structure, and controls elements like typography and layout. Proper web design makes sites easier to navigate, understand, and use while avoiding problems.

    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 36

    WEB DESIGN

    HTML and CSS


    Fundamentals
    KARL JUNEL CAGUBCOB

    Mountain View College


    School of Computing
    HTML and CSS Fundamentals

    Web Design Tools

    Various tools exist to help you to create webpages and add dynamic
    content, animation, and interactivity. Successfully using these tools
    requires varying levels of skill and knowledge. Webpage creation tools
    include markup languages, Cascading Style Sheets (CSS), scripting
    languages, text editors, HTML editors, web development tools, web
    templates, and content management systems (CMS).
    Markup Languages

    A markup language is a coding system that uses tags to provide


    instructions about the appearance, structure, and formatting of a
    document. The markup languages used to
    create webpages are HTML, XML, and XHTML
    Hypertext Markup Language (HTML)

    - is a markup language used to create webpages. The HTML markup


    language uses predefined codes called HTML tags to define the format
    and organization of webpage elements. HTML tags must be in lowercase,
    surrounded by brackets, and inserted in pairs to define the beginning
    and the end of the target of the tag.
    TAGS
    NESTED TAGS
    BASIC STRUCTURE
    HEAD
    PREVIEW
    BODY
    PREVIEW
    Cascading Style Sheet (CSS)

    A Cascading Style Sheet (CSS) is a document that uses rules to


    standardize the appearance of webpage content by defining styles for
    elements such as font, margins,
    positioning, background colors, and more. Web designers store CSS
    specifications for a website in a separate document, called a style sheet.
    CSS USES
    CSS separates the formatting and appearance instructions from the
    structure and content found in HTML documents. Using CSS to
    determine the presentation of the content
    allows a web designer to change a document’s appearance without
    impacting the document’s structure. CSS enables web designers to
    control typography and page layout by allowing the specification of the
    following:

    • Font formatting, including for headings


    • Leading (space between lines)
    • Tracking (space between words)
    • Kerning (space between letters)
    • Margins, indents, and element positioning
    • Font color and background color
    Styles and Style Sheets
    You apply CSS style rules to a webpage in one of three ways:

    • As part of an external style sheet saved in the folder with the


    website’s pages. The webpages are linked to the style sheet with an
    HTML tag.

    • As part of an internal style sheet inserted using the <style> element


    within a page’s HTML heading tags.

    • As an inline style inserted using the style attribute within the


    individual HTML tags on a page.
    External style sheet
    An external style sheet, sometimes called a linked style sheet, is a separate
    text document that contains style rules. You can apply the style rules in an
    external style sheet to one or more webpages by linking the pages to the
    external style sheet. External style sheets are a powerful tool for changing
    the formatting or layout of multiple pages at a site
    at one time simply by editing the style sheet.
    Internal style sheets
    Internal style sheets, or embedded style sheets, appear within a page’s HTML
    <head> … </head> tags along with other heading information, such as a page’s
    title. Unlike an external style sheet that can affect several webpages, style rules
    in an internal style sheet only modify elements on the webpage that includes the
    rules. Using internal style sheets increases the load time for webpages as the file
    size of the page is larger.
    Inline styles
    Inline styles involve inserting the style rule within an element’s HTML tag.
    You should use this method sparingly because inline styles have a number of
    disadvantages, including failure to separate content from design (which is the
    primary goal of CSS), increased webpage maintenance issues, and
    accessibility issues.
    WEBSITE LAYERS

    BEHAVIOR (JS)

    PRESENTATION (CSS)

    CONTENT (HTML)
    Why take the time to design and test before
    launching?

    Although it takes a lot more time up front, a well-thought-out web site:


    • Has fewer problems
    • Is more effective
    • Is more understandable
    • Is easier to navigate
    and may end up taking less time overall to create and maintain.
    Pre-design Work

    • Consider your organization’s mission


    • Define the target audience
    • Set goals for the web site
     Immediate
     Long-term
    • Gather content
    Organize and establish hierarchy of content
    “Chunk” content into logical information units
    More Pre-design Work

    • Create an outline or plan for content


    • Create your web site on paper first
    Use a flowchart to depict how visitors will go from one page to another
    • Think about the actual HTML, PDF, graphic, sound, and other files
    you will need in the site
    Where will they be placed?
    How will visitors access them?
    • Organize the files logically, so that the development team can
    understand the hierarchy of the web pages.
    Compare:
    Compare:
    Types of Web Sites
    Personal Websites

    Individuals create their own personal websites for a range of


    communication purposes. You might use a personal website to promote
    your employment credentials, share
    news and photos with friends and family, or share a common interest or
    hobby with fellow
    enthusiasts.

    Creating a personal website generally is less complex than creating other


    types of
    websites, and designers typically have fewer resources available than
    when creating a
    commercial website
    Organizational and Topical Websites

    Individuals create their own personal websites for a range of


    communication purposes. You might use a personal website to promote
    your employment credentials, share
    news and photos with friends and family, or share a common interest or
    hobby with fellow
    enthusiasts.

    Creating a personal website generally is less complex than creating other


    types of
    websites, and designers typically have fewer resources available than
    when creating a
    commercial website
    Commercial Websites

    The goal of many commercial websites is to promote and sell the


    products or services of a business, from the smallest home-based business
    to the largest international
    enterprise.
    In addition to websites that promote and sell products or services, commercial websites also
    include websites that generate their revenue largely from online services such as advertising
    —search tool websites and portal websites.
    Search Tools
    Search tools are websites that locate specific information on the web
    based on a user’s search requirements. Such tools include search engines,
    metasearch engines, and search directories.

    Search engine - is a web-based search tool that locates a webpage using a


    word or phrase found in the page. To find webpages on particular topics
    using a popular search engine, such as Google, Bing, or ask.com, you
    enter terms or phrases, called keywords, in the search engine’s text box
    and click a button usually labeled Search or Go.
    1. Why is web design important for making websites
    look good and work well?
    2. In what ways does effective web design
    contribute to the success and impact of online content
    and interactions?

    You might also like