Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Seminarppt

    Hochgeladen von

    Shubham Siraswa
    34 Ansichten33 Seiten

    Originaltitel

    Seminarppt.pptx

    Copyright

    © © All Rights Reserved

    Verfügbare Formate

    PPTX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    34 Ansichten33 Seiten

    Seminarppt

    Hochgeladen von

    Shubham Siraswa

    Copyright:

    © All Rights Reserved
    Als PPTX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 33

    Arya Institute of Engineering Technology &

    Management, Jaipur
    Web Design & Development Presentation on

    Submitted in
    Partial fulfillment for the award of the Degree of
    Bachelor of Technology
    In
    Computer Science Engineering

    Submitted to Submitted by
    Mr. Sanjay Tiwari Shubham Kumawat
    (Head of department) (16EAOCS044)

    Department of Computer Science & Engineering


    Rajasthan Technical University, Kota [2016-2020]
    Training and Internship

    Learn Code Online Websters


    • Training in Front end development • Internship in Full-Stack Development
    • Learned about designing, developing and • Implemented and developed website using
    Deployment of static websites, using HTML, Html, CSS, BootStrap, JavaScript titled “Space
    CSS, JAVASCRIPT and BOOTSTRAP. Edge Architects”.
    Training certificate
    Table of Contents

    • What is Web Development? Bootstrap Overview


    • What is a website? • Bootstrap Environment setup
    • What is Static and Dynamic Websites? • Bootstrap Grid System
    • What is frontend and backend • What is responsiveness?
    Development? • Bootstrap Advantages
    • Domain name and Hosting
    Introduction to HTML5
    • HTML Tags
    • HTML Document Structure
    • HTML Meta Tags
    Introduction to CSS
    • Advantages of CSS
    • CSS syntax
    • Types of CSS
    What is JAVASCRIPT?
    • Client-Side JAVASCRIPT
    • JAVASCRIPT Events
    • JAVASCRIPT DOM
    What is a Website?
    A website is a collection of related network web resources, such as web pages, multimedia content, which are
    typically identified with a common domain name, and published on at least one web server.
    What is Web Design & Development?
    • Web design encompasses many different skills and disciplines in the production and
    maintenance of websites. The different areas of web design include web graphic
    design; interface design; including standardized code; user experience design; and search
    engine optimization.
    • The term web design is normally used to describe the design process relating to the front-
    end (client side) design of a website including writing markup.
    • Web development is the work involved in developing website for the internet or an
    intranet.
    • Web development can range from developing a simple single static page of plain text to
    complex web-based internet applications, electronic businesses, and social services.
    • A more comprehensive list of tasks to which web development commonly refers, may
    include web engineering, web design, client-side/server-side scripting, web server and
    network security configuration, and e-commerce development.
    • Among web professionals “Web Development” usually refers to the main non-design
    aspects of building web sites: writing markup and coding.
    What is Front-End and Back-End?
    Static Website Vs Dynamic Website
    Domain Name and Hosting
    Introduction to HTML
    HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web
    Pages.
    • Hypertext refers to the way in which Web pages (HTML documents) are linked together.
    Thus, the link available on a webpage is called Hypertext.
    • As its name suggests, HTML is a Markup Language which means you use HTML to simply
    "mark-up" a text document with tags that tell a Web browser how to structure it to
    display.

    Originally, HTML was developed with the intent of defining the structure of documents like headings,
    paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.

    Now, HTML is being widely used to format web pages with the help of different tags available in
    HTML language
    HTML Tags

    HTML is a markup language and makes use of various tags to format the content. These tags are enclosed within
    angle braces <Tag Name>. Except few tags, most of the tags have their corresponding closing tags. For example,
    <html> has its closing tag</html> and <body> tag has its closing tag </body> tag etc.
    HTML Document Structure

    Document declaration tag


    <!DOCTYPE HTML5>
    <html>
    <head>
    Document header related tags
    </head>

    <body>
    Document body related tags
    </body>
    </html>
    HTML Meta Tags
    HTML lets us specify metadata - additional important information about a document in a
    variety of ways. The META elements can be used to include name/value pairs describing
    properties of the HTML document, such as author, expiry date, a list of keywords, document
    author etc.

    The <meta> tag is used to provide such additional information. This tag is an empty element
    and so does not have a closing tag but it carries information within its attributes
    Introduction to CSS
    Advantages of CSS
    • CSS saves time - You can write CSS once and then reuse the same sheet in multiple HTML pages. You can define a
    style for each HTML element and apply it to as many web pages as you want.
    • Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one
    CSS rule of a tag and apply it to all the occurrences of that tag. So, less code means faster download times.
    • Easy maintenance - To make a global change, simply change the style, and all the elements in all the web pages will
    be updated automatically.
    • Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far better look to
    your HTML page in comparison to HTML attributes.
    • Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By
    using the same HTML document, different versions of a website can be presented for handheld devices such as
    PDAs and cellphones or for printing.
    • Global web standards – Now HTML attributes are being deprecated and it is being recommended to use CSS. So
    it’s a good idea to start using CSS in all the HTML pages to make them compatible with future browsers.
    CSS Syntax
    A CSS comprises of style rules that are interpreted by the browser and then applied to the
    corresponding elements in your document. A style rule is made of three parts:
    • Selector: A selector is an HTML tag at which a style will be applied. This could be any
    tag like <h1> or <table> etc.
    • Property: A property is a type of attribute of HTML tag. Put simply, all the HTML
    attributes are converted into CSS properties. They could be color, border, etc.
    • Value: Values are assigned to properties. For example, color property can have the
    value either red or #F1F1F1 etc.
    Types Of CSS
    There are three ways to associate styles with your HTML document. Most commonly used
    methods are inline CSS and External CSS.
    Embedded CSS
    Inline CSS
    External CSS
    What is JAVASCRIPT?

    • JavaScript is a dynamic computer programming language. It is lightweight and most


    commonly used as a part of web pages, whose implementations allow client-side script to
    interact with the user and make dynamic pages. It is an interpreted programming language
    with object-oriented capabilities.
    • There is a flexibility given to include JavaScript code anywhere in an HTML document.
    However the most preferred ways to include JavaScript in an HTML file are as follows:
    • Script in <head>...</head> section.
    • Script in <body>...</body> section.
    • Script in <body>...</body> and <head>...</head> sections.
    • Script in an external file and then include in <head>...</head> section
    Client-side JavaScript

    • Client-side JavaScript is the most common form of the language. The script should be included in or
    referenced by an HTML document for the code to be interpreted by the browser.
    • It means that a web page need not be a static HTML, but can include programs that interact with the user,
    control the browser, and dynamically create HTML content.
    • The JavaScript client-side mechanism provides many advantages over traditional server-side scripts. For
    example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.
    • The JavaScript code is executed when the user submits the form, and only if all the entries are valid, they
    would be submitted to the Web Server.
    • JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions
    that the user initiates explicitly or implicitly.
    JavaScript Events
    An HTML event can be something the browser does, or something a user
    does.
    Here are some examples of HTML events:
    • An HTML web page has finished loading
    • An HTML input field was changed
    • An HTML button was clicked
    JavaScript DOM
    When a web page is loaded, the browser creates a Document Object Model of the page.
    The HTML DOM model is constructed as a tree of Objects:

    With the object model, JavaScript gets all the power it needs to create dynamic HTML:
    • JavaScript can change all the HTML elements in the page
    • JavaScript can change all the HTML attributes in the page
    • JavaScript can change all the CSS styles in the page
    • JavaScript can remove existing HTML elements and attributes
    • JavaScript can add new HTML elements and attributes
    • JavaScript can react to all existing HTML events in the page
    • JavaScript can create new HTML events in the page
    BOOTSTRAP Overview

    Bootstrap is a sleek, intuitive, and powerful, mobile first front-end framework


    for faster and easier web development. It uses HTML, CSS, and JavaScript.

    Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
    Quickly prototype your ideas or build your entire app with our Sass variables,
    responsive grid system, extensive prebuilt components, and powerful plugins
    built on jQuery.
    BOOTSTRAP Environment Setup

    1. Traditional Way
    BOOTSTRAP Environment Setup

    2. Content Delivery Network


    BOOTSTRAP 3 VS 4
    What is Responsiveness?
    Responsive Templates Non-Responsive Templates
    BOOTSTRAP Grid System
    Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as
    the device or viewport size increases. It includes predefined classes for easy layout options, as well as
    powerful Layout for generating more semantic layouts
    BOOTSTRAP Advantages

    Das könnte Ihnen auch gefallen