Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    Lecture #1

    Uploaded by

    khanhussain2828
    very helpful

    Copyright:

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

    Lecture #1

    Uploaded by

    khanhussain2828
    6 views8 pages
    very helpful

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    very helpful

    Copyright:

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

    Lecture #1

    Uploaded by

    khanhussain2828
    very helpful

    Copyright:

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

    Introduction to Front-

    End Web LEC #1


    In this course we will look into web design tools and
    technologies.
    What Is Web Design: An Introduction
    The web design process starts with a visual concept, which you could
    sketch by hand or with software like Adobe XD or Figma.
    We use HTML and CSS to design a website. HTML handles the basic
    structure of your web page, while CSS handles the style and appearance.
    If you’re a good web designer, you’ll also pay attention to concepts like
    responsive design, aesthetics, usability and accessibility when building
    your website.
    Responsive design is a popular technique for making websites look good
    and function well on devices, like phones and tablets. It does this by
    setting different CSS rules for different browser widths.
    What is HTML ?
    HTML is the standard markup language for creating Web pages.

    HTML stands for Hyper Text Markup Language

    "Hypertext" refers to the hyperlinks that an HTML page may contain. "Markup
    language" refers to the way tags are used to define the page layout and elements
    within the page.
    Basic HTML Structure
    <!DOCTYPE html> The <!DOCTYPE html> declaration defines that
    this document is an HTML5 document
    <html> The <html> element is the root element of an
    HTML page
    <head>
    The <head> element contains meta information
    <title>Page Title</title> about the HTML page
    </head> The <title> element specifies a title for the
    HTML page (which is shown in the browser's
    <body> title bar or in the page's tab)
    The <body> element defines the document's
    <p>My first paragraph.</p> body, and is a container for all the visible
    contents, such as headings, paragraphs, images,
    </body>
    hyperlinks, tables, lists, etc.
    </html> The <p> element defines a paragraph
    What is an HTML Element?
    An HTML element is defined by a start tag, some content, and an end tag:

    <tagname> Content goes here... </tagname>

    The HTML element is everything from the start tag to the end tag:

    <h1>My First Heading</h1>


    <p>My first paragraph.</p>

    Note: Some HTML elements have no content (like the <br> element). These elements are called
    empty elements. Empty elements do not have an end tag!
    Lets Learn HTML
    First you need to install Code Editor of your choice Example Visual Studio Code or
    Notepad ++ (Well there are many other options in market its up to you but Visual
    Studio Code is suggested)
    Open Your Code Editor
    Write Some HTML
    <!DOCTYPE html>
    <html>
    <body>
    <p>My first paragraph.</p>
    </body>
    </html>
    Save the HTML Page (You can use either .htm or .html as file extension. There is no
    difference, it is up to you.)
    Common HTML tags:
    <a> for link
    <br> for break
    <div> it is a division or part of an HTML document
    <h1> - <h6> for headings
    <img> for images in document
    <ol> is an ordered list, <ul> for an unordered list
    <li> is a list item in bulleted (ordered list)
    <hr> Horizontal Rule
    <p> for paragraph
    <span> to style part of text
    Lets Practice

    Now open your code editors on your computers and lets


    practice some HTML Tags together

    You might also like