Scribd Logo
Upload

Welcome to Scribd!

  • CSS Guide

    Uploaded by

    John Wisdom
    10 views8 pages

    Original Title

    CSS GUIDE

    Copyright

    © © All Rights Reserved

    Available Formats

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

    CSS Guide

    Uploaded by

    John Wisdom

    Copyright:

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

    INTRODUCTION TO HTML5 AND CSS

    INTRODUCTION:

    A webpage is a page containing text, images, audio, videos and links to other webpages.
    These pages are written using a special language called Hyper Text Markup Language
    (HTML). It describes the content, format and layout of the webpage.

    HISTORY OF HTML:

    HTML is derived from SGML, which stands for Standard General Markup Language. HTML
    was invented by Tim-Berners-Lee in 1990.

    TOOLS USED TO WRITE AN HTML PROGRAM:

    The tools used for writing an HTML program are HTML editor and Web browser.

    HTML Editor:

    To create an HTML document, you require an HTML editor. There are two types of HTML
    editors—WYSIWYG editor and Text editor.

    WYSIWYG stands for What You See Is What You Get. These editors provide an interface
    where you can create web pages without writing programs. Examples of WYSIWYG editors
    are Adobe DreamWeaver, Kompozer etc.

    Text Editors let us create HTML documents by writing HTML programs. Examples are
    Notepad and Wordpad.

    Web Browser:

    Web browsers are used to view the webpages. Examples are Google Chrome, Mozilla
    Firefox, Opera, Internet Explorer etc.

    HTML TAGS
    Commands in HTML are known as tags. All HTML tags are enclosed within the angle
    brackets (< >). A tag can be a container tag or an empty tag.
    Container Tag
    A container tag is a tag that needs to be closed. A tag is closed by putting a forward slash (/)
    in front of the tag name.
    Example : <Hl> Hello World </Hl>
    In this example, <H1> is the opening tag or the start tag and </Hl> is the closing tag or the
    end tag.
    Empty Tag
    An empty tag is the tag that need not be closed. It has only opening tag.
    Example: <img>, <br>
    STRUCTURE OF AN HTML DOCUMENT:

    An HTML document has two main components – HEAD and BODY.

     HEAD section contains the title and other information about the HTML document.
     BODY section contains all information that is displayed on the web page.

    <html>
    <head>
    <title>.......</title>
    </head>
    <body>
    ..........
    ........
    </body>
    </html>

    RULES FOR WRITING AN HTML PROGRAM:

     The names of HTML tags are case-insensitive, which means it can be written in any
    case (upper, small or mixed)
     Container tags must always be closed.
     Tag names should not have spaces.
     There should not be any space between < and > in a tag.
     When two or more tags are used the inner tag should be closed before closing the
    outer tag.

    BASIC HTML TAGS:

     <HTML>
    This is a container tag. An HTML program always begins with <HTML> tag and
    ends with </HTML> tag. The complete program is written within the opening and
    closing of <HTML> tags.
     <HEAD>
    <HTML> tag is followed by the <HEAD> tag. It contains the <title> tag which is
    used to display the title of the web page. <title> tag is also a container tag. The title is
    displayed on the title bar of the browser window.
     <BODY>
    This is also a container tag. It contains all the other formatting tags used in the HTML
    program. It is closed just before the </HTML> tag.
    CREATING, SAVING AND VIEWING A WEB PAGE
     Go to Start and Open Notepad.
     Type the HTML code.
     Save the file using the extension .html
     The saved file can be viewed with the help of a web browser.

    FORMATTING TAGS IN HTML:


    Formatting tags are used to change the appearance of text. The different formatting tags in
    HTML and its uses are given in the table given below:
    TAG USE EXAMPLE
    <p> Paragraph tag – used to make <p>This is an example of
    a paragraph. It is a container paragraph tag</p>
    tag.
    <b> Bold – Used to make text <b>Hello</b>
    bold. It is a container tag
    <i> Italics – Used to make text <i>Hello</i>
    italized. It is a container tag
    <u> Underline – To underline a <u>Welcome</u>
    text or sentence.
    <br> Break – Used to split a Hello <br> world
    sentence into two lines. It is
    an empty tag.
    <hr> Horizontal rule – Used to <hr>
    draw a horizontal line. It is
    an empty tag
    <marquee> Used to create scrollable text. <marquee>Good
    It is a container tag. morning</marquee>
    <center> Makes the text to be aligned <center>Hello
    to the center world</center>

    Heading Tags:
    HTML defines six levels of headings from H1 to H6. Each level implies the different font
    sizes. H1 is the highest level and H6 is the lowest level. Heading tags are container tags.
    Eg : <H1>Hello</H1>
    Font Tag:
    Font tag is used to change the appearance of the font such as size, color and style. The
    different font tags include the following:
     face: The type of font. Common ones include "Time New Roman", "Verdana", and
    "Helvetica."
     size: This indicates the size of the text.
     color: This indicates the color of the text.
    Example:
    <font size=2 face="Helvetica" color=red>This illustrates the attributes of the font
    tag.</font>

    Image Tag:
    Images are inserted into the webpage using <img> tag. It is an empty tag. The attributes of
    image tag include the following:
     src : specifies the URL/path of the image.
     Height : specifies the height of the image
     Width: specifies the width of the image
    Example:
    <img src=”flower.jpg” height=200 width=300”>

    Lists in HTML:
    Lists in HTML can be of two types:- Ordered and Unordered
    1. Ordered Lists
    Ordered lists are used to group a set of related items in a specific order. An ordered list is
    created using <ol> container tag, and each list item starts with the <li> tag.The list items in
    ordered lists are marked as 1,2,3.....

    Example:
    <ol>
    <li>English
    <li>Maths
    <li>Science
    </ol>
    Output:
    1. English
    2. Maths
    3. Science

    2. Unordered Lists

    Unordered lists are used to group a set of related items in no particular order. An
    unordered list is created using the <ul> container tag, and each list item starts with
    the <li> tag. The list items in unordered lists are marked with bullets.
    Example:
    <ul>
    <li>English
    <li>Maths
    <li>Science
    </ul>

    Output:
     English
     Maths
     Science
    INTRODUCTION TO CSS
     CSS stands for Cascading Style Sheets
     CSS describes how HTML elements are to be displayed on screen, paper or in other
    medias.
     CSS saves a lot of work. It can control the layout of multiple webpages all at once.

    1. Inline CSS:
    Inline CSS contains the CSS property in the body section attached with the element.
    This kind of style is specified within the HTML tag using style attribute.

    Example:
    <body>

    <p style=”color:red;text-align:center”>Inline CSS</p>

    </body>

    Output:-

    2. Internal CSS:

    Internal CSS can be used when a single HTML document must be styled uniquely.
    The CSS rule to be set should be written within the head section.

    Syntax:

    Example:

    <head>

    <style>

    p{color:red;text-align:center}

    </style>

    </head>

    <body>

    <p>HTML and CSS</p>

    <p>Internal CSS</p>

    </body>

    Output:-
    Background Properties in CSS:

     Setting background color:-


    To set background colour in a webpage we have to use the property background-
    color.
    Syntax:

    background-color:value
    Example:
    <head>
    <style>
    body{background-color:green;}
    </style>
    </head>
    <body>
    <p>Welcome to IHS</p>
    </body>
    Output

     Setting background image:-


    Background-image property is used to set an image as background.
    Syntax
    Background-image:url(path of the image)
    Example:
    <head>
    <style>
    body{background-image:url(flower.jpg);}
    </style>
    </head>
    <body>
    <p>Welcome to IHS</p>
    </body>
    Output

    You might also like