Scribd Logo
Upload

Welcome to Scribd!

  • HTML-Hyper Text Markup Language

    Uploaded by

    Albert Ngiruwonsanga
    14 views25 pages
    The document provides a brief overview of HTML

    Original Title

    HTML

    Copyright

    © Attribution (BY)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides a brief overview of HTML

    Copyright:

    Attribution (BY)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    14 views25 pages

    HTML-Hyper Text Markup Language

    Uploaded by

    Albert Ngiruwonsanga
    The document provides a brief overview of HTML

    Copyright:

    Attribution (BY)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 25

    HTML-Hyper Text Markup

    Language
    By NGIRUWONSANGA Albert
    University of Rwanda
    College of Education-School of Education
    Department of Mathematics, Science and Physical Education
    Year 2 MCsE DEGREE Academic year: 2019/2020
    HTML

    • HyperText Markup Language (HTML) is a tool used


    to build web pages.
    • HTML isn’t a WYSIWYG word processor or desktop
    publishing tool.
    • HTML is used to define the content of a
    document (what it says),
    2
    HTML

    • But not the layout (how it looks).

    • Tags: are HTML codes enclosed in angle


    bracktes (< and >). These tags are used to
    format the text. For example <BR> tag adds a
    line breaks inside text.
    3
    HTML
    <HTML>
    <HEAD>
    <TITLE>First HTML Page</TITLE>
    </HEAD>
    <BODY>
    ……
    </BODY>
    </HTML>
    4
    HTML

    • H<SUB>2</SUB>O<br>
    • AX<SUP>2</SUP>+BX+C=0<BR>
    • <I>Italic text</I><br>
    • <b>Bold text</b><br>
    • <BIG>Big text</BIG></br>

    5
    Attributes

    • Empty or beginning container tags can contain


    other HTML elements called attributes, which are
    special codes that modify the tags.
    <HR SIZE=2 ALIGN=LEFT WIDTH=“50%”>
    • Containers: are types of tags which have
    beginning tag and ending tag.
    6
    HTML

    • <small>Small text</small><br>
    • <U>Underlining text</U><br>
    • <P ALIGN=RIGHT>Right is right</P>
    • <P ALIGN=CENTER>Center is middle</P>
    • <P ALIGN=LEFT>Left is left</P>

    7
    HTML

    • WHITE FFFFFF

    • RED FF0000

    • GREEN 00FF00

    • BLUE 0000FF

    8
    HTML

    • <BODY BGCOLOR=“YELLOW”>
    Or
    <BODY BGCOLOR=“FFFF00”>
    <BODY BACKGROUND=“rock.gif”>
    <BODY BGCOLOR=“SILVER” TEXT=“blue”>

    9
    HTML
    <!- - comments are put here -->
    Heading
    <H1> <H2> <H3> <H4> <H5> <H6>
    Anchors
    • Absolute path href=“/D|/html/images/img.jpeg”
    • Relative path “img.jpeg”

    10
    LISTS

    <OL> <OL TYPE=a>

    <LI>MBE <LI>MBE

    <LI>PCE <LI>PCE

    <LI>ELE <LI>ELE

    </OL> </OL>

    11
    LISTS

    <OL TYPE=a START=10> <UL>

    <LI>MBE <LI>MBE

    <LI>PCE <LI>PCE

    <LI>ELE <LI>ELE

    </OL> </UL>

    12
    HTML
    Type Generated Style Examples
    A Uppercase Letters A.B.C.D
    a Lowercase letters a.b.c.d.e
    I Uppercase Romans I.II.III.IV.
    numers
    i Lowercase Romans i.ii.iii.iv.
    numerals
    1 Arabic numerals 1.2.3.4.

    13
    Definition lists
    <DL>
    DL-Definition Lists
    <DT>Ordered lists
    <DD>…………</DD>
    DT-Definition Term
    <DT>Unordered lists
    <DD>…………</DD> DD-Define Definition
    </DL>

    14
    TABLES
    <TABLE BORDER=1 CELLSPACING=10 CELLPADDING=8
    HSPACE=44 VSPACE=6><TR><TD
    COLSPAN=2>DMSPE</TD><TD COLSPAN=2>HLE</TD></TR>

    <TR><TD>MBE</TD><TD>MCsE</TD><TD>ELE</TD><TD>
    HGE</TD></TR>

    </TABLE>

    <CAPTION>Departments and combinations</CAPTION>


    15
    Images
    <img src=“photo1.jpeg” width=300 height=200>

    JPEG: Joint Photographers Experts Group

    PNG: Portable Network Graphics

    PDF: Portable Data Format

    TIFF: Tagged Image File Format

    GIF: Graphic Interchange Format

    16
    Changing the layout
    <html> #right{
    <head> width:900px;
    <style type="text/css"> float: right;
    #left{ margin:30px;
    width:300px; }
    float: left; </style>
    margin:30px; </head>
    }

    17
    Changing the layout
    <body> <div id="right">
    <div id="left"> Lkdjls sljkd s ;lskd s s;lkd s
    Ljkdljsd ;lsdj ;ls;ld s;jk ;dkls uiod sd spuod sd lsd
    s;klsdl s;kls s;kd ; s;’kl sd s s pspjd spu s s poidopisp
    ‘sl ds ‘sld’s s pid spkd po sd psd sd
    psdi ps spids ps s pisd s.
    Lkhdklsddl sdlk ls s;kld ;sk
    s;ks ; s;sd kds sd ;ksd </div>
    </div> </body>
    </html>

    18
    Scrolling text on the screen

    <MARQUEE bgcolor="#CCCCCC" loop="-1"


    scrollamount="2" width="100%">Use of Float
    attribute</MARQUEE>

    19
    Scrolling text on the screen

    <MARQUEE bgcolor="#CCCCCC" loop="-1"


    scrollamount="2" width="100%"
    direction="right"><b>Use of Float attribute</b>

    </MARQUEE>

    Direction attribute can be left, right, up and down.

    20
    Mail to

    <A HREF=“mailto:me@mycompany.com”>E-mail me</A>

    i.e.

    <A
    HREF="mailto:ngiruwonsanga.rw@gmail.com">E-
    mail me</A>

    21
    Select Option
    <FORM>
    <OPTION>option 3
    <CENTER> <OPTION>option 4
    Select an option: <OPTION>option 5
    <SELECT> <OPTION>option 6
    <OPTION>option 1 </SELECT><BR>
    <OPTION SELECTED>option 2 </CENTER>
    </FORM>
    22
    Text Area tag
    <FORM>
    <INPUT type="Submit"
    Enter Your Comments:<BR> VALUE="Submit">
    <TEXTAREA wrap="virtual" <INPUT type="Reset"
    name=“Comments" rows=3 VALUE="Clear">
    cols=20 MAXLENGTH=100>
    </FORM>
    </TEXTAREA><BR>

    23
    Use of option and checkbox
    <FORM METHOD=post"> Select an option:<BR>
    <INPUT type="checkbox"
    Select an option:<BR> name="selection"> Selection
    <INPUT type="radio" 1<BR>
    name="option"> Option 1 <INPUT type="checkbox"
    <BR><INPUT type="radio" name="selection" CHECKED>
    name="option" CHECKED> Selection 2<BR>

    Option 2<BR> <INPUT type="checkbox"


    name="selection"> Selection
    <INPUT type="radio" 3<BR>
    name="option"> Option 3 <INPUT type="Submit"
    <BR><BR> VALUE="Submit">
    </FORM>
    24
    References

    • Laura Lemay and Rafe Colburn, [2011] Web Publishing


    with HTML and CSS. Sams Publishing, ISBN-10: 0-672-33096-2

    25

    You might also like