Scribd Logo
Upload

Welcome to Scribd!

  • Lecture 2

    Uploaded by

    Muaz Butt
    5 views19 pages

    Original Title

    lecture 2.pptx

    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
    5 views19 pages

    Lecture 2

    Uploaded by

    Muaz Butt

    Copyright:

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

    HTML

    Self Study..

     “Formal education will make you a living; self-education will make you a
    fortune.”
    – Jim Rohn

     The Best online website for website development is


     http://www.w3schools.com/

     The online practice and development wesite


     http://jsfiddle.net/
    Hypertext & HTML

    Hypertext Markup Language (HTML) is the language for specifying the static
    content of Web pages
     Hypertext is text which contains links to other texts. Hypertext refers to the fact
    that Web pages are more than just text
     Markup refers to the fact that it works by augmenting text with special symbols
    (tags) that identify structure and content type
    Tags vs Elements

     HTML specifies a set of tags that identify structure and content type
     Tags are enclosed in < >
    <img src="image.gif" /> specifies an image

     Most tags come in pairs, marking a beginning and ending


    <title> and </title> enclose the title of a page
     HTML element is an object enclosed by a pair of tags
     <tagname>Content goes here...</tagname>
     <title>My Home Page</title> is a TITLE element
    HTML Elements

     HTML elements follow a certain format regardless of how the element is used.
     An HTML element starts with a start tag/opening tag.
     An HTML element ends with an end tag/closing tag.
     The element content is everything between the start and the end tag.
     Some HTML elements have empty content.
     Empty elements are closed in the start tag.
     Most HTML elements can have attributes.
    HTML & Trees
    Nested Elements
    HTML Attributes

     All HTML elements can have attributes


     Attributes provide additional information about an element
     Attributes are always specified in the start tag
     Attributes usually come in name/value pairs like: name="value“
     Example
     <img src="img_girl.jpg" width="500" height="600">
    Create your first html page

     When you save an HTML file, you can use either the .htm or the .html
    extension.
    Structure of html
    HTML document has two main structural elements
     HEAD contains setup information for the browser & the Web page
    e.g., the title for the browser window, style definitions, JavaScript
    code, …
     BODY contains the actual content to be displayed in the Web page
    <html>
    <head>
    </head>
    <body>
    Text that appears in the page
    </body>
    </html>
    HTML5 basic tag division diagram
    HTML Title
     Title icon
     <link rel="shortcut icon" type="image/x-icon" href="icon.jpg" />
     Title element
    <HTML>
    <HEAD>
    <TITLE>Al al-Bayt University</TITLE>
    </HEAD>
    <BODY>
    </BODY>
    </HTML>
    HTML Headings

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


     The lower the number, the larger the heading size.
    <html>
    <body>
    <h1>This is Heading 1</h1>
    <h2>Heading 2 is Smaller</h2>
    <h3>Heading 3 is Smaller Still</h3>
    </body>
    </html>
    HTML Paragraphs

     HTML paragraphs are defined with the <p> tag.


     Most browsers automatically put a line break and space after a </p> tag.
    <html>
    <body>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    </body>
    </html>
    HTML Images

     HTML images are defined with the <img> tag.


     The img tag is empty, which means that it contains attributes only and it has
    no closing tag.
     To display an image on a page, you need to use the src attribute. src stands
    for “source”. The value of the src attribute is the URL of the image you want
    to display on your page.
     The syntax of defining an image:
    <img src="url" />
    HTML Images

     The URL points to the location or address where the image is stored.
     An image file named "boat.gif" located in the directory "images" on
    "www.w3schools.com" has the URL.
     http://www.w3schools.com/images/boat.gif
    Insert Images from Different Locations

     The example demonstrates how to insert an image from another folder on


    your server or another location on the Web.
    <html>
    <body>
    <p>An image from another folder:</p>
    <img src="/images/chrome.gif" width="33" height="32" />
    <p>An image from w3schools:</p>
    <img src="http://www.w3schools.com/images/w3schools_green.
    jpg" width="104" height="142" />
    </body>
    </html>
    Background Images

    <html>
    <body background="background.jpg">
    <h3>Look: A background image!</h3>
    <p>Both gif and jpg files can be used as HTML backgrounds.</
    p>
    <p>If the image is smaller than the page, the image will repeat
    itself.</p>
    </body>
    </html>
    Aligning Images

    <html>
    <body>
    <p>The text is aligned with the image
    <img src="hackanm.gif" align="bottom" width="48" height="48"
    />
    at the bottom.</p>
    </body>
    </html>

    You might also like