Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Getting Started With HTML

    Încărcat de

    Hazel Mjkristell Basallote France
    10 vizualizări43 pagini
    Introduction to HTML

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PPT, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Introduction to HTML

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    10 vizualizări43 pagini

    Getting Started With HTML

    Încărcat de

    Hazel Mjkristell Basallote France
    Introduction to HTML

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PPT, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 43

    SOCIAL MEDIA

    GETTING STARTED
    WITH

    MRS. HAZEL B. FRANCE

    At the end of the lesson the


    students will be able to:
    The basic structure of an HTML page.
    To write save and preview a webpage.
    How to put comments in HTML codes
    Familiarize the different HTML tags.
    How to use colors as background

    What is World Wide Web?

    World Wide Web is a global,


    interactive, dynamic, cross platform,
    distributed, graphical hypertext
    information system that runs over
    internet

    The WEB is a Hypertext


    Information System

    What is hypertext?

    HYPERTEXT
    Enables you to read and navigate text and visual
    information in a NonLinear way based on what
    you want to know next.

    WEB BROWSER
    A browser is used to view and
    navigate Web pages and other
    information on the World Wide Web.

    Different Types of Web


    Browser

    What is URL?

    What HTML files look like?

    Example

    HTML
    HTML tags are the things inside bracket <>

    that indicates features of elements of a page

    Hypertext Markup Language is a set of tags


    used to create a webpage

    Different Types of Text Editor

    Different Text Editor

    NOTEPAD +
    +

    MACROMEDIA
    DREAMWEAVER

    THE HTML PAGE


    <HTML>
    <HEAD>
    <TITLE> HTML WORKBOOK </TITLE>
    </HEAD>
    <BODY>
    This is the body section of this HTML document
    <B> This is a part of the body displayed in BOLD </B>
    </BODY>
    </HTML>

    Head
    Section

    Body Section

    The head section is indicated by a <HEAD> tag and


    closed with a </HEAd> tag

    The Body section the contents of the webpage are


    coded inside the BODY section

    <HTML>
    <HEAD>
    <TITLE> HTML WORKBOOK </TITLE>

    HEAD
    SECTION

    </HEAD>
    <BODY>
    This is the body section of this HTML document
    <B> This is a part of the body displayed in BOLD </B>
    </BODY>
    </HTML>

    BODY
    SECTION

    Starting HTML
    The main page (called homepage) of a website
    usually contains a Site Map.

    This Map gives the visitor an idea of how


    information in the site is hierarchically
    arrange.

    Putting Comments in your


    HTML Codes
    Comments are text embedded in a program for
    documentation purposes.

    Putting comments in your html code is helpful


    when you need to go back to your code
    sometime later to edit or update your web
    documents.

    The syntax for putting comments in your html:


    <!- Comments ->

    The Header Tag <Hn>

    Hn: Size (order)

    Applications

    H1

    the biggest size for main title and section headings

    H2

    the second biggest for chapter titles and important

    sub headins

    H3

    the third biggestfor sub headings

    H4

    the middle size for most paragraph text (this is the

    default text size)

    H5

    the second smallest for less important

    H6

    the smallest for less important text

    (avoid using this size)

    The Address Tag


    <ADDRESS>
    The
    address
    tag
    indicates the name and the e

    mail address of the owner or designer of the page.

    <ADDRESS> </ADDRESS>

    The Line Break Tag <BR>

    <HTML>
    <HEAD>
    <TITLE> Chech's Personal Webpage</TITLE> </HEAD>
    <!- The contents of this section will be updated later ->
    <BODY>
    <H1>

    At Home with my Cheche! </H1>

    <P>

    Hi there! Welcome to my vey own home on the internet.

    I hope you will enjoy touring this site and know more about me.<BR>
    </P>
    <H2>

    Me and My Family </H2>

    <P>
    people find it hard to pronounce my real name and thought that
    cheche is my
    nickname. <Br>
    </P>
    <ADDRESS> Page Designed and created by h.france@gmail.com </ADDRESS>
    </BODY>
    </HTML>

    USING COLOR AND


    BACKGROUND
    The BGCOLOR attribute is used to set the background color of
    the entire webpage. The syntax for putting background
    color is:
    <BODY BGCOLOR=ncolor>
    Example:
    <html>
    <body BGCOLOR=GRAY>
    <p> My page with a gray background </p>
    </html>

    The BACKGROUND Attribute


    Syntax for adding an image background is:
    <BODY BACKGROUND=imagefile>
    the image file is he filename of the image you
    want to put as background

    PUTTING HORIZONTAL RULES


    To add a dividing line, the <HR> tag is used. The sytax
    is <HR>
    <html>
    <body>
    <p> this is section 1 </p>
    <HR>
    </body>
    </html>

    The width attribute


    The syntax for using the WIDTH attibute is:
    <HR WIDTH=pixels> or <HR WIDTH
    =percent>
    Example;
    <HR WIDTH=100>
    <HR WIDTH=50%>

    THE SIZE ATTRIBUTE

    Syntax: <HR SIZE=pixels>


    Example:
    <HR SIZE=1>
    <HR SIZE=5>

    <html>
    <body>
    <p> this is section1</p>
    <HR SIZE=1
    <p> this is section2 </p>
    <HR SIZE=5>
    </body>
    </html>

    Thank you !

    APPLICATION

    Instruction: Open up the text editor using your notepad and type the following Code.
    After you create your HTML file save it , the filename should have an extension 0f .html.
    For example mywebpage.html
    <HTML>
    <HEAD>
    <TITLE> My Personal Webpage</TITLE> </HEAD>
    <!- The contents of this section will be updated later ->
    <BODY>
    <H1>

    At Home with myself! </H1>

    <P> Hi there! Welcome to my vey own home on the internet.


    I hope you will enjoy touring this site and know more about me.<BR>
    <HR>
    </P>
    <H2>

    Me and My Family </H2>

    <P> people find it hard to pronounce my real name and thought that cheche is my
    nickname. <Br>
    </P>
    <ADDRESS> Page Designed and created by (put your email here) </ADDRESS>
    </BODY>
    </HTML>

    EVALUATION
    You are going to identify what is ask in the statement.
    Identify what is asked in the statement.

    _________1. It is a tag that is used to start a new paragraph.


    _________2. A tag that indicates the name and the e-mail address of
    The owner or designer of the page
    _________3. An attributes is used to set the background
    color of the Entire webpage.
    _________4. Is a pointer to a specific bit of information on the internet
    _________5. It is used to view and navigate Web pages and other
    Information On the World Wide Web.
    True or False. Write T if it True and F if false.
    _________1. HTML tags are the things inside bracket () that indicates features of
    Element of a page.
    _________2. Syntax for adding an image background is :
    <BODY BACKGROUND=imagefile>
    _________3. URL stands for Universal Resource Locator.
    _________4. A browser is used to view and navigate Web pages and other
    Information on the World Wide Web.
    _________5. The web is a Hypertext Information System

    ASSIGNMENT

    1. Research about Physical and Logical


    Formatting Tags and give ate least
    5 examples of each

    S-ar putea să vă placă și