Scribd Logo
Upload

Welcome to Scribd!

  • 1 views

    Lesson 12 Introduction to Web Technologies

    Uploaded by

    UwU

    Copyright:

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

    Lesson 12 Introduction to Web Technologies

    Uploaded by

    UwU
    1 views21 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    1 views21 pages

    Lesson 12 Introduction to Web Technologies

    Uploaded by

    UwU

    Copyright:

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

    Introduction to Web

    Technologies
    HTML (Hyper Text Markup Language)
    ● HTML stands for Hyper Text Markup Language
    ● HTML is the standard markup language for creating Web pages
    ● HTML describes the structure of a Web page
    ● HTML consists of a series of elements
    ● HTML elements tell the browser how to display the content
    ● HTML elements label pieces of content such as "this is a heading",
    "this is a paragraph", "this is a link", etc.
    Text Editors

    Bracket Notepad VS Code Sublime Text


    Basic HTML Tags
    The <!DOCTYPE html> declaration defines that this document is an HTML5
    document

    The <html> element is the root element of an HTML page

    The <head> element contains meta information about the HTML page

    The <title> element specifies a title for the HTML page (which is shown in
    the browser's title bar or in the page's tab)

    The <body> element defines the document's body, and is a container for all
    the visible contents, such as headings, paragraphs, images, hyperlinks,
    tables, lists, etc.

    The <h1> element defines a large heading

    The <p> element defines a paragraph


    HTML tag documentation
    Tags and Attributre structure

    Tag:

    Attribute
    :
    HTML Element
    Element: The HTML element is everything from the start tag to the end
    tag:
    HTML Page Structure
    HTML images are defined with the <img> tag.

    The source file (src), alternative text (alt), width, and height are
    provided as attributes:
    HTML div Element
    The <div> element is by default a block element, meaning that it takes all
    available width, and comes with line breaks before and after.
    Difference between class and id

    class
    The class attribute is often used to point to a class name in a style sheet. It can also
    be used by a JavaScript to access and manipulate elements with the specific class
    name.

    classes use .classname to call in CSS stylesheet

    id
    The HTML id attribute is used to specify a unique id for an HTML element.

    You cannot have more than one element with the same id in an HTML document.

    id uses #idname to call in CSS Stylesheet


    CSS
    What is CSS
    ● CSS stands for Cascading Style Sheets
    ● CSS describes how HTML elements are to be displayed on screen,
    paper, or in other media
    ● CSS saves a lot of work. It can control the layout of multiple web
    pages all at once
    ● External stylesheets are stored in CSS files

    Why use CSS?


    CSS is used to define styles for your web pages, including the design,
    layout and variations in display for different devices and screen sizes.
    CSS syntax
    A CSS rule consists of a selector and a declaration block.
    CSS Font Family
    What is the difference between Sans-Serif and Serif
    CSS Font Family
    CSS Height Width and Css Comment
    The CSS height and width properties are used to set the height and width of an element.

    Comments are used to explain the code, and may help when you edit the source code at a later date.
    CSS Background
    The CSS background properties are used to add background effects for
    elements.
    CSS Margin
    Margins are used to create space around elements, outside of any
    defined borders.
    CSS Padding
    Padding is used to create space around an element's content, inside of
    any defined borders.
    CSS Float Value
    The float property is used for positioning and formatting content e.g. let
    an image float left to the text in a container.

    The float property can have one of the following values:


    ● left - The element floats to the left of its container
    ● right - The element floats to the right of its container
    ● none - The element does not float (will be displayed just where it
    occurs in the text). This is default
    ● inherit - The element inherits the float value of its parent

    You might also like