Scribd Logo
Upload

Welcome to Scribd!

  • Lab Outlines

    Uploaded by

    youssef888 tharwat
    21 views20 pages

    Original Title

    Lab Outlines[1] (1)

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, 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 DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    21 views20 pages

    Lab Outlines

    Uploaded by

    youssef888 tharwat

    Copyright:

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

    Outlines:-

     Introduction to HTML.

     How to open notepad and write HTML tags.

     HTML Heading.

     HTML horizontal rule.

     HTML <head> element.

     HTML Paragraph.

     HTML Line Breaks.

     HTML <pre> element.

     HTML Background Color.

     HTML Text Color.

     HTML Fonts.

     HTML Text Size.

     HTML Text Formatting Elements.

     HTML <q> for Short Quotations.

     HTML <abbr> for Abbreviations.

     HTML <bdo> for Bi-Directional Override.

     HTML Images.

     HTML Links – Hyperlinks.

     HTML Links - The target attribute.

     HTML List.

     HTML Frames.

     HTML Forms.
    HTML Tags
    With HTML you can create your own Web site. This tutorial teaches you everything
    about HTML. HTML is easy to learn - You will enjoy it.

    HTML is a markup language for describing web documents (web pages).


     HTML stands for Hyper Text Markup Language.
     A markup language is a set of markup tags.
     HTML documents are described by HTML tags.

    A small HTML document:-


    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    </body>
    </html>

     The text between <html> and </html> describes an HTML document.


     The text between <head> and </head> provides information about the
    document.
     The text between <title> and </title> provides a title for the document.
     The text between <body> and </body> describes the visible page content.

    Write HTML Using Notepad:-


    Step 1: Open Notepad:-
     Click Start (bottom left on your screen).
     Click All Programs. Click Accessories.
     Click Notepad.
    Step 2: Write Some HTML:-

     Write or copy some HTML into Notepad.


    <html>
    <body>
    <h1>My First Heading</h1>
    <p> My first paragraph. </p>
    </body>
    </html>
    Step 3: Save the HTML Page:-
     Save the file on your computer.
     Select File > Save as in the Notepad menu.
     Name the file "index.html" or any other name ending with html or htm.

    Step 4: View HTML Page in Your Browser:-

    Open the saved HTML file in your favorite browser. The result will look much like
    this:-

    To open a file in a browser, double click on the file, or right-click, and choose open with.
    HTML Headings:-
     Headings are defined with the <h1> to <h6> tags.
     <h1> defines the most important heading. <h6> defines the least important
    heading.

    HTML Horizontal Rules:-


     The <hr> tag creates a horizontal line in an HTML page.

    The HTML <head> Element:-


     The HTML <head> element is placed between the <html> tag and the <body>
    tag.

    HTML Paragraphs:-

     The HTML <p> element defines a paragraph.


    Tag Result
    >>html This paragraph contains a lot of lines in the source
    >body< .code, but the browser ignores it
    >p<
    This paragraph
    contains a lot of lines
    ,in the source code
    but the browser
    .ignores it
    >body> </html></p/<

    HTML Line Breaks:-

     The HTML <br> element defines a line break.


     Use <br> if you want a line break (a new line) without starting a new paragraph.

    The HTML <pre> Element:-


     The HTML <pre> element defines preformatted text.

    HTML Background Color:-

     The background-color property defines the background color for an HTML


    element.
    HTML Text Color:-
     The color property defines the text color for an HTML element:

    HTML Fonts:-
     The font-family property defines the font to be used for an HTML element:-

    HTML Text Size:-


     The font-size property defines the text size for an HTML element.
    <font face="Arial" color="red" size="10"> Welcome to our site </font>
    Welcome to our site

    HTML Text Formatting Elements:-


     Formatting elements were designed to display special types of text.
     Bold text.
     Important text.
     Italic text.
     Marked text.
     Small text.
     Deleted text.
     Inserted text.
     Subscripts.
     Superscripts.

    HTML Bold and Strong Formatting:-
     The HTML <b> element defines bold text, without any extra importance.
    Strong= bold.

    HTML Italic and Emphasized Formatting:-
     The HTML <i> element defines italic text, without any extra importance.
     <i> = <em>.

    HTML Small Formatting:-
     The HTML <small> element defines small text.

    HTML Marked Formatting:-
     The HTML <mark> element defines marked or highlighted text:
    HTML Deleted Formatting:-
     The HTML <del> element defines deleted (removed) text.

    HTML Inserted Formatting:-
     The HTML <ins> element defines inserted (added) text.

    HTML Subscript Formatting:-
     The HTML <sub> element defines subscripted text.
    HTML Superscript Formatting:-
     The HTML <sup> element defines superscripted text.

    HTML <q> for Short Quotations:-


     The HTML <q> element defines a short quotation.

    HTML <abbr> for Abbreviations:-


     The HTML <abbr> element defines an abbreviation or an acronym.
    HTML <bdo> for Bi-Directional Override
     The HTML <bdo> element defines bi-directional override.

    HTML Images:-

     Images and notepad must be in the same folder.


     The alt attribute provides alternative information for an image if a user for some
    reason cannot view it (because of slow connection, an error in the src attribute,
    or if the user uses a screen reader.
    Image Size - Width and Height:-

     You can use the style attribute to specify the width and height of an image.

    OR:-
    <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

    Using an Image as a Link:-


     To use an image as a link, simply nest the <img> tag inside the <a> tag.
    Image Floating:-

    Image as background:-
     <body background="path of the image">

    HTML Links – Hyperlinks:-


     HTML links are hyperlinks.

     A hyperlink is a text or an image you can click on, and jump to another
    document.

    HTML Links - The target attribute:-


     The target attribute specifies where to open the linked document.
    Code
    <html>
    <body>
    <p><a href="#C4">Jump to Chapter
    4</a></p>
    <h2>Chapter 1</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 2</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 3</h2>
    <p>This chapter explains ba bla bla</p>
    <h2 id="C4">Chapter 4</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 5</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 6</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 7</h2><p>This chapter
    explains ba bla bla</p>
    <h2>Chapter 8</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 9</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 10</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 11</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 12</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 13</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 14</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 15</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 16</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 17</h2>
    <p>This chapter explains ba bla bla</p>
    </body>
    </html>
    HTML Lists:-

     Unordered HTML Lists


     An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

     The list items will be marked with bullets (small black circles).

    Ordered HTML Lists:-


     An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

     The list items will be marked with numbers:


    HTML Frames:-
    Three html pages are created; we need to display all pages in one main page.
    HTML frames must be used.
    1. Three html pages are created.
    2. The main page is established using:-
    <frameset cols=" ">
    </frameset>
    Code Result
    <html>
    <frameset
    rows="30%,30%,20%">
    <frame
    src="frame1.html">
    <frame
    src="frame2.html">
    <frame
    src="frame3.html">
    </frameset>
    </html>
    The <form> Element:-
    HTML forms are used to collect user input.
    The text button:-

    The radio button:-

    The submit button:-


    Input Type: password:-

    Input Type: checkbox:-

    Input Type: button


    The <select> Element (Drop-Down List):-

    The <textarea> Element:-


    The size Attribute:-

    The maxlength Attribute:-

    You might also like