Scribd Logo
Upload

Welcome to Scribd!

  • 2 views

    Web Development Lec 2

    Uploaded by

    Dost Muhammad

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Web Development Lec 2

    Uploaded by

    Dost Muhammad
    2 views31 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?

    Report this Document

    Copyright:

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

    Web Development Lec 2

    Uploaded by

    Dost Muhammad

    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 31

    Web Development

    Instructor Name: Amber Ayub


    What is HTTP?

     HTTP stands for Hyper Text Transfer Protocol


     WWW is about communication between web clients and servers
     Communication between client computers and web servers is done by
    sending HTTP Requests and receiving HTTP Responses.
    World Wide Web Communication

     The World Wide Web is about communication between web clients and
    web servers.
     Clients are often browsers (Chrome, Edge, Safari), but they can be any type
    of program or device.
     Servers are most often computers in the cloud(refers to servers that are
    accessed over the Internet, and the software and databases that run on those
    servers).
    HTTP Request / Response

     Communication between clients and servers is done


    by requests and responses:
     A client (a browser) sends an HTTP request to the web
     A web server receives the request.
     The server runs an application to process the request.
     The server returns an HTTP response (output) to the browser.
     The client (the browser) receives the response.
    What is HTML?

     HTML stands for Hyper Text Markup Language


     HTML is the standard markup language for Web pages
     HTML elements are the building blocks of HTML pages
     HTML elements are represented by <> tags
    Features of HTML

     It is easy to learn and easy to use.


     It is platform-independent.
     Images, videos, and audio can be added to a web page.
     Hypertext can be added to the text.
     It is a markup language.
    HTML Elements and Tags

     HTML uses predefined tags and elements that tell the browser how to display
    the content. HTML elements include an opening tag, some content, and a
    closing tag.
     Remember to include closing tags. If omitted, the browser applies the effect
    of the opening tag until the end of the page.
    HTML Page Structure

     The basic structure of an HTML page is shown below. It contains the essential
    building-block elements (i.e. doctype declaration, HTML, head, title, and
    body elements) upon which all web pages are created.
    HTML History

     HTML is a markup language used by the browser to manipulate text, images,


    and other content, in order to display it in the required format. HTML
    was created by Tim Berners-Lee in 1991. The first-ever version of HTML
    was HTML 1.0, but the first standard version was HTML 2.0, published in
    1995.
     Currently, we are using HTML, which is the latest and most recent version of
    HTML.
    HTML Elements

     An HTML element is a start tag and an end tag with content in between:
    <h1>This is a Heading</h1>

    Start tag Element content End tag

    <h1> This is a Heading </h1>

    <p> This is paragraph. </p>


    Web Browsers

     The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML
    documents and display them correctly.
     A browser does not display the HTML tags, but uses them to determine how to
    display the document:
    HTML Editors

     Web pages can be created and modified by using professional HTML editors.
     However, for learning HTML we recommend a simple text editor like Notepad
    (PC) or TextEdit (Mac).
    A Simple HTML Document

     <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>My First Heading</h1>


    <p>My first paragraph.</p>

    </body>
    </html>
    Example Explained

    •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
    The <!DOCTYPE> Declaration

    The <!DOCTYPE> declaration represents the document type, and


    helps browsers to display web pages correctly.
    It must only appear once, at the top of the page (before any HTML
    tags).
    The <!DOCTYPE> declaration is not case sensitive.
    HTML Documents

     The HTML document itself begins with <html> and ends with </html>.
     The visible part of the HTML document is
    between <body> and </body>.
    HTML Headings

     HTML headings are defined with <h1> to <h6> tags.


     <h1> defines the most important heading. <h6> defines the least important heading:
    Example

     <h1>This is heading 1</h1>


    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    HTML Paragraphs

     <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    Never Skip the End Tag

     Some HTML elements will display correctly, even if you forget the end tag:
     <html>
    <body>

    <p>This is a paragraph
    <p>This is a paragraph

    </body>
    </html>
     However, never rely on this! Unexpected results and errors may occur if
    you forget the end tag!
    Empty HTML Elements

    HTML elements with no content are called empty elements.


    The <br> tag defines a line break, and is an empty element without a closing
    tag:
    Example

     <!DOCTYPE html>
     <html>
     <body>

     <p>This is a <br> paragraph with a line break.</p>

     </body>
     </html>
    HTML is Not Case Sensitive

    HTML tags are not case sensitive: <P> means the same as <p>.
    The HTML standard does not require lowercase tags,
    HTML Tag Reference

    Tag Description
    <html> Defines the root of an HTML
    document
    <body> Defines the document's body
    <h1> to <h6> Defines HTML headings
    HTML Attributes

     HTML attributes provide additional information about HTML elements.


     HTML Attributes:
     All HTML elements can have attributes
     Attributes provide additional information about elements
     Attributes are always specified in the start tag
     Attributes usually come in name/value pairs like: name="value"
    The href Attribute

    The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
    Example:
    <a href="">Name of the website</a>
    The style Attribute

    The style attribute is used to add styles to an element, such as color, font, size, and more.
    Example:
    <p style="color:red;">This is a red paragraph.</p>
    HTML Headings

    HTML headings are defined with the <h1> to <h6> tags.


    <h1> defines the most important heading. <h6> defines the least important heading.
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
     HTML
    <h3>Heading headings are titles or subtitles that you want to display
    3</h3>
    on a4</h4>
    <h4>Heading webpage.
    <h5>Heading 5</h5>
     Example:
    <h6>Heading 6</h6>
    Headings Are Important

    Search engines use the headings to index the structure and content of your web pages.
    Users often skim a page by its headings. It is important to use headings to show the document structure.
    <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

    You might also like