Scribd Logo
Upload

Welcome to Scribd!

  • 21 views

    Web Development

    Uploaded by

    collection58209
    This document provides an introduction to front end technologies including HTML, CSS, and JavaScript. It explains that HTML is used to define the structure and content of web pages, CSS is used to control the visual styling and layout, and JavaScript is used to provide interactivity. It then goes on to define HTML tags and syntax, CSS syntax and selectors, and gives overviews of what JavaScript is and how it can be used to display output and write comments.

    Copyright:

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

    Web Development

    Uploaded by

    collection58209
    21 views17 pages
    This document provides an introduction to front end technologies including HTML, CSS, and JavaScript. It explains that HTML is used to define the structure and content of web pages, CSS is used to control the visual styling and layout, and JavaScript is used to provide interactivity. It then goes on to define HTML tags and syntax, CSS syntax and selectors, and gives overviews of what JavaScript is and how it can be used to display output and write comments.

    Original Description:

    Web development front end

    Original Title

    Web development

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an introduction to front end technologies including HTML, CSS, and JavaScript. It explains that HTML is used to define the structure and content of web pages, CSS is used to control the visual styling and layout, and JavaScript is used to provide interactivity. It then goes on to define HTML tags and syntax, CSS syntax and selectors, and gives overviews of what JavaScript is and how it can be used to display output and write comments.

    Copyright:

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

    Web Development

    Uploaded by

    collection58209
    This document provides an introduction to front end technologies including HTML, CSS, and JavaScript. It explains that HTML is used to define the structure and content of web pages, CSS is used to control the visual styling and layout, and JavaScript is used to provide interactivity. It then goes on to define HTML tags and syntax, CSS syntax and selectors, and gives overviews of what JavaScript is and how it can be used to display output and write comments.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 17

    Introduction to Front End

    HTML, CSS, JavaScript


    • HTML to create the document
    structure and content
    • CSS to control is visual aspect
    • JavaScript for interactivity
    What is HTML ?
    HTML stands for HYPER TEXT MARKUP LANGUAGE.
    A markup language is a set of Markup Tags.
    The Tags Describe document content.
    HTML documents contain HTML tags and plain text.
    HTML tags are also called WEB PAGES.
    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
    •The <body> element defines the document's body
    •The <h1> element defines a large heading
    •The <p> element defines a paragraph
    HTML Syntax
    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>
    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
    CSS Syntax

    A CSS rule set consist of a selector and a declaration box


    CSS Selectors
    The CSS id Selector The CSS class The CSS Universal The CSS element
    :- Selector :- Selector :- Selector :-
    The id of an The element selector
    element is unique The class selector The universal
    selects HTML elements
    within a page, selects HTML selector (*) selects
    based on the element
    elements with a all HTML elements name.
    #para1 {
    specific class on the page.
    text-align: center;
    color: red; attribute. p{
    } *{ text-align: center;
    .center { text-align: center; color: red;
    text-align: center; color: blue; }
    color: red; }
    }
    How To Add CSS
    EXTERNAL CSS INTERNAL CSS INLINE CSS

    <style>
    <h1 style="color:blue;
    body {
    body { textalign:center;">
    background-
    background-
    color: lightblue; This is a heading</h1>
    color: linen;
    } <p style="color:red;">
    }
    h1 { This is a paragraph.</p>
    h1 {
    color: navy; color: maroon;
    margin-left: 20px;
    margin-left: 40px;
    }
    }
    </style>
    CSS
    CSS allows us to specify how to present (render) the document info stored in the
    HTML.
    features:
    Colors: content, background, borders
    Margins: interior margin, exterior margin
    Position: where to put it
    Sizes: width, height
    Behaviour: changes on mouse over
    What is JavaScript?

    oJavaScript is the world's most popular programming language.


    oJavaScript is the programming language of the Web.
    oJavaScript is easy to learn.
    oSyntax similar to C or Java .
    oAllows to give some interactivity to the elements on the web.
    oCreated by Netscape .
    JavaScript is not Java
    Completely different types of languages that just happen to be
    similarly named
    ◦ JavaScript - programs are interpreted in the browser
    ◦ Java - programs are compiled and can be run as stand alone
    applications
    JavaScript: insert code
    There is three ways to execute JavaScript code in a website:
    Embed the code in the HTML using the <script> tag.
    <script> /* some code */ </script>
    Import a JavaScript file using the <script> tag:
    <script src="file.js" />
    Inject the code on an event inside a tag:
    <button onclick=“JavaScript: /*code*/">press me</button>
    JavaScript Display Possibilities

    innerHTML. window.alert()
    Output

    document.write() console.log()
    Comments in JavaScript
    Two types of comments
    ◦ Single line
    ◦ Uses two forward slashes (i.e. //)
    ◦ Multiple line
    ◦ Uses /* and */
    Hello World in JavaScript
    <!DOCTYPE html>
    <html>
    <head>
    <title>Hello World Example</title>
    </head>
    <body>
    <script type="text/javascript">
    <!--
    document.write("<h1>Hello, world!</h1>");
    //-->
    </script>
    </body>
    </html>
    THANK YOU

    You might also like