Scribd Logo
Upload

Welcome to Scribd!

  • Week 2: HTML Authoring: Instructor: Khaled Ismail

    Uploaded by

    NZ MA
    4 views36 pages
    This document provides an instruction on HTML authoring. It discusses various HTML tags for text formatting, images, lists, tables, links, and colors. It also provides examples and assignments for students to create their resume webpage using basic HTML tags covered in the lesson. The instructor asks students to include their name and metric number in the personal information section along with multiple paragraphs, text formatting, lists, links, images, and a table. The goal is for students to learn HTML and create a resume webpage about themselves.

    Original Description:

    html

    Original Title

    Week 2 HTML

    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
    This document provides an instruction on HTML authoring. It discusses various HTML tags for text formatting, images, lists, tables, links, and colors. It also provides examples and assignments for students to create their resume webpage using basic HTML tags covered in the lesson. The instructor asks students to include their name and metric number in the personal information section along with multiple paragraphs, text formatting, lists, links, images, and a table. The goal is for students to learn HTML and create a resume webpage about themselves.

    Copyright:

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

    Week 2: HTML Authoring: Instructor: Khaled Ismail

    Uploaded by

    NZ MA
    This document provides an instruction on HTML authoring. It discusses various HTML tags for text formatting, images, lists, tables, links, and colors. It also provides examples and assignments for students to create their resume webpage using basic HTML tags covered in the lesson. The instructor asks students to include their name and metric number in the personal information section along with multiple paragraphs, text formatting, lists, links, images, and a table. The goal is for students to learn HTML and create a resume webpage about themselves.

    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 36

    I NS T RUCT OR: KHAL E D I S MAI L

    WEEK 2: HTML AUTHORING


    REVIEW: CLIENT AND SERVER
    User uses HTTP client (Web Browser)
    It has a URL (e.g. http://www.yahoo.com/)
    Makes a request to the server
    Server sends back data (the response)
    User clicks on the client side...
    request (URL)
    response (HTML, ) Client Server
    2
    WHAT ARE THE BASIC TOOLS?
    Plain text editor like NotePad to write HTML
    documents
    Web browser to test and view the created
    web page
    HTML reference book or web materials to
    serve as guide for HTML tags.
    http://www.w3schools.com/html/default.asp
    3
    HTML DOCUMENT
    <HTML>
    <HEAD>
    </HEAD>
    <BODY>

    </BODY>
    </HTML>
    4
    THE HEAD SECTION
    <HEAD> - begin the head section
    <TITLE> - page description
    </TITLE> - end of title
    <!--- > Comments may be placed here </>
    </HEAD> - end of the head section
    5
    THE BODY SECTION
    <BODY>

    {Text displayed by browser}

    </BODY>
    6
    NESTED TAGS
    Like a tree, each element is contained
    inside a parent element
    Each element may have any number of
    attributes

    <body>...</body> bgcolor="white"
    <html>...</html>
    <head>...</head>
    <title>...</title> other stuff <p>...</p> <br> <table>...</table>
    This is some text!
    7
    BASIC TAGS
    <html>
    <head>
    <title>My First Web Page</title>
    </head>
    <body bgcolor="white">
    <p>A Paragraph of Text.</p>
    </body>
    </html>

    8
    NESTING TAGS
    Hierarchy tags that affect entire
    paragraph may contain tags affecting individual
    words or letters
    Order the current closing tag should
    correspond the last unclosed opening tag
    9
    NESTING TAGS (EXAMPLE)
    Correct:
    <H1> Master of <I> library </I> Mangement System </H1>

    Incorrect:
    <H1> Master of <I> library Management System</H1></I>


    10
    TAG ATTRIBUTES
    Attributes offer a variety of options
    Entered between command word and final symbol
    >
    A single tag may have a few attributes
    Attributes are places one after the other in any
    order
    Example:

    <IMG>
    <IMG SRC=Image.bmp width=50>
    11
    ATTRIBUTE VALUES

    Attributes can accept the values of particular types
    Values of attributes should be enclosed in straight
    quotation marks
    may be omitted if the value contains only letters,
    digits, hyphen (-), and period (.)
    12
    TEXT TAGS 1
    <H1> </H1> Heading.
    <H2> </H2> Heading.
    <H3> </H3> Heading.
    .
    <H6> </H6> Heading.



    13
    TEXT TAGS 2
    <P> </P> : Paragraph.
    <B> </B> : Bold
    <I> </I> : Italics
    <U> </U> : Underline
    <EM> </EM> : Emphasize (logical exact
    effect depends on browser)
    <BR /> : Line feed or break
    <HR /> : Horizontal Rule (line)

    14
    TEXT LAYOUT

    <CENTER>
    <DIV> (same as <P>)
    <P>
    <P ALIGN = > </P>
    Right
    Left
    Center
    Justify
    15
    CHANGING THE FONT

    <FONT FACE=FONTNAME SIZE=n>
    { Text } </FONT>
    FONTNAME specifies the font
    SIZE defines the size
    N=3 corresponds to default value
    Value of n 1 2 3 4 5 6 7
    Size in pt. 8 10 12 14 18 24 36
    16
    HTML LISTS
    Ordered List
    <OL TYPE = circle><OL>
    TYPE can be A, a, I, i.
    If TYPE is left, by default we have Numbers.
    TYPE can also take values like A, a, i, I
    We can configure the numbering to start from a
    particular value with the help of start attribute.
    Unordered list
    <UL TYPE=circle></UL>
    TYPE can be circle or square or disc
    17
    LISTS
    Unordered Lists
    <ul>
    <li> Apples </li>
    <li> Oranges </li>
    </ul>
    Ordered Lists
    <ol>
    <li> One </li>
    <li> Two </li>
    </ol>
    Can be nested



    18
    IMAGES
    JPEG, GIF, Bmp, Png images are recognized
    by browsers
    <IMG> tag will place image on your page
    The attribute SRC, tells the location from
    which the image is to be taken
    We can control size of the image (width and
    height attributes)
    The attribute ALT will say the text to be
    displayed in the place of image, if image
    not found.
    19
    IMAGES
    The attribute BORDER specifies the thickness
    of border around the image.
    Hspace and Vspace attributes allows us to
    add space to the left-right sides and top-
    bottom sides
    Aligning images is also possible with the
    align property

    <img src="URL of image file">

    20
    TABLES
    A table is a matrix of rows and columns, each
    possibly having content
    Each position in a table is called a cell
    Some cells have labels, but most have data
    A table is specified as the content of a <table> tag
    A border attribute in the <table> tag specifies a
    border between the cells

    21
    TABLES
    If border is set to "border", the browsers default
    width border is used which is 1.
    The border attribute can be set to a number, which
    will be the border width
    Without the border attribute, the table will have no
    lines!
    Tables can have captions.
    22
    TABLE
    Each row of a table is specified as the content of a
    <tr> tag
    The row headings are specified as the content of a
    <th> tag
    The contents of a data cell is specified as the
    content of a <td> tag

    23
    TABLE
    <table border = "border">
    <caption> Fruit Juice Drinks
    </caption>
    <tr>
    <th> </th>
    <th> Apple </th>
    <th> Orange </th>
    <th> Grape</th>
    </tr>
    <tr>
    <th> Breakfast </th>
    <td> 0 </td>
    <td> 1 </td>
    <td> 0 </td>
    </tr>

    <tr>
    <th> Lunch </th>
    <td> 1 </td>
    <td> 0 </td>
    <td> 0 </td>
    </tr>
    <tr>
    <th> Dinner </th>
    <td> 0 </td>
    <td> 0 </td>
    <td> 1 </td>
    </tr>

    </table>
    24

    <tr>
    <th colspan = "3"> Fruit Juice Drinks
    </th>
    </tr>
    <tr>
    <th> Orange </th>
    <th> Apple </th>
    <th> Screwdriver </th>
    </tr>

    TABLE
    25
    COMMENTS
    <!-- This is a comment -->
    <!--
    This paragraph,
    is also a
    comment...
    -->
    26
    ANCHOR TAG (HYPERLINK)
    <A> - Anchor tag
    Its attribute HREF will be the page to which we will
    be redirected.
    <A HREF=Second.html>Click Here</A>
    Click Here will appear in the browser like this
    Click Here
    27
    ANCHOR TAG (HYPERLINK)
    Absolute HREFs specify fully qualified URLs.

    <a href="http://www.yahoo.com/">Yahoo!</a>
    <a href="reldoc.html">In this directory!</a>
    <a href=a/doc.html">In sub-directory a!</a>

    Relative HREFs are relative to the directory containing the
    current HTML file.

    28
    SPECIFYING COLORS FOR LINKS
    Define colors for individual links on the page.
    Placing font tags between the <a href> and the
    </a> tag.
    Click <a href="http://www.google.com">
    <font color=Blue">here</font></a> to go to
    Google.
    Using a style setting in the <a> tag.
    Click <a href="http://www. google.com"
    style="color: red">here</a> to go to Google.
    29
    INTERNAL LINK
    To create a link with in that page, add a name
    attribute to the anchor tag and specify that name
    from the place where you want that navigation
    <a name="chapter1">Some contents</a>

    Click <a href="#chapter1">here</a> to read chapter 1.


    30
    LINK TO EMAIL
    <a href="mailto:xyz@abc.com">Email Me</a>
    This will appear in the page as
    Email Me

    When we click that, we can compose mail
    and send it to that address.
    We can even configure subject and body of
    the mail using the attributes subject and
    body.

    31
    The color of the background and text elements of
    the web page can vary using attributes of the
    <BODY> and <FONT> tag
    To specify color, HTML uses the color names (16
    colors supported by most browsers), or the
    numerical equivalent in RGB hexadecimal codes
    that correspond to over 14 million possible color.
    White #ffffff Black #000000 Blue #0000ff
    Red #ff0000 Yellow #ffff00 Green #00800

    Color reference: http://html-color-codes.com/
    HOW TO ADD COLOR
    32
    A FEW RGB COLORS
    33
    bgcolor sets the background color of the
    whole page
    text defines the text color for the page
    link - unvisited link color
    vlink - visited link color
    alink - activated link color
    <BODY bgcolor=#ffffff text=#000000 link=#0000cc vlink=#00ff00 alink=#ff0000
    >
    HOW TO ADD COLOR
    34
    ASSIGNMENT #1
    You are required to create your resume web page
    to tell the world about you.
    The layout and content of your Web page are
    entirely up to you. I encourage you to be creative
    and produce a document that you are proud to
    display to the world.
    At a bare minimum, your page must provide the
    following:
    35
    ASSIGNMENT #1 CONT
    1. There should be several sections to your page (e.g.,
    Personal Info, Hobbies, Favourite Links), each with its
    own heading. At least one section must have multiple
    paragraphs in it. (In your Personal Info page you must
    type your Metric No and name.
    2. Your resume page should perform some text
    formatting (bold, italics, colour, headings)
    3. There should be at least one list (e.g., your top-ten
    favourite CDs).
    4. There should be at least 2 anchor links in the page.
    5. There should be at least 1 image in the page.
    6. There must be at least one table.

    36

    You might also like